Making Valuable Websites

"Making Valuable Websites By Just Doing What You Do " said Brendon Sinclair in sitepoint tribune.
Websites is like a Jackpot. we cant say 100% sure that the website earn a lot or not.
But, we just aimed thats all. but planning, execution, timing these three terms helps our site growth. we can plan very well and execute that plan with in that particular time period means surely we got success. not only websites in life also.

Many web developers look to affiliate programs and advertising programs (such as Adsense sites) to supplement their incomes.

It's solid thinking -- after all, a web developer has all the skills necessary to promptly launch and market a site using their everyday skills.

I always see two stumbling blocks, though, when it comes to developers trying to establish affiliate sites:

1. they expect to make $100,000 per annum for a site
2. they're unsure of what affiliate/type of site to develop

My favorite site is one I've owned for four years now. It took me only a couple of hours to develop and generates just a few dollars a day; it will never be a massive earner, but $3 a day over four years is a fantastic return on my time investment. It works out at $1,000+ per hour. That's big money.

The bigger issue for many developers is that they're unclear on what sort of site to develop. Here's what I do: I create sites based on my everyday activities. Because what seems ordinary to you will almost certainly appeal to someone else, who might just want to learn about that specific task or hobby.

I've recently learned how to ride a motorbike -- so I have two sites in that niche now directing traffic to motorbike training businesses.

In May, I'm going off on an 11-day motorbike trip around the Australian island state of Tasmania, and I've already set a site up for the tour. It will be a matter of adding some day-to-day commentary and that site should quickly receive 10-20 visitors a day, generating a couple of dollars a day in ad revenue and affiliate sales.

Having run a lot of marathons over the years, I'm aware that these long distance runners love to see a marathon course in detail before embarking on one. So I've attached a video camera to a bike, ridden the course, and uploaded the resultant video. Thousands of runners in that particular race flocked to my site to check out the course's hills, dips, and potential pitfalls.

Again, a few dollars a day have trickled in.

Whatever you do, document it in words, pictures, and video where possible -- you'll soon have content for a web site that will help you generate income for years to come.

More Crimes Against Hypertext - Andrew Tetlaw

The Latest Rogues

The first newcomer to our rogue's gallery comes courtesy of our language editor, Kelly. She was mystified by the separate linking of multiple adjacent words to the same link target, instead of just joining them together into a single link. She called it The Doppelganger.

The next one came from bel, a commenter who said:

Camouflaged for ambush, this link looks like its going to open another web page but instead is actually going to open up a PDF, DOC, email address, etc. Always when you are in a hurry, quickly scanning around for what you are looking for, you click one of these and then BAMM -- you are stuck waiting with your hands tied while it launches your client software. Oh, the howls of chagrin heard from my corner when I’ve stepped on one of these hyperlink land-mines while in a hurry. "Nooooooo! OWWooooooo!!"

I call that one, The Saboteur. Raena, SitePoint's other technical editor, thought this one should be called The Crying Game. I'll leave it to you to ponder that one.

Finally, from another commenter, Wynnefield, is the link called The Mime Artist. This is the link that leaves you wanting "More >>":

It's often taken for granted but the lack of good
hypertext makes reading a web page a generally
unpleasant experience. There are several essential
hyperlinking techniques you should know.
More >>

The Mime Artist is so named because it vaguely points in a meaningless direction, gives you no clues as to where it's going, and leaves you wishing you could have your money refunded.

Good Linking Practice

The consensus about good linking practice was that a link should indicate what the user will find when clicking on it. Link text should help the user decide whether or not to follow a link.

Some posters suggested I rewrite the good example to link the intention of the link instead of the name of the target site. So, instead of this:

For excellent examples of finely crafted hypertext
look no further than 
kottke.org, the online home of Jason Kottke.

... I'd rewrite the link like this:

For excellent
examples of finely crafted hypertext
look no further than kottke.org, the online home
of Jason Kottke.

Which makes sense to me.

This is supported by the Web Content Accessibility Guidelines 2.0 , that state the purpose of a link should be able to be determined from its link text alone, or the context in which it is placed. In fact, the guidelines describe a failure of accessibility when:

... links such as "click here" or "more" [that] are used as anchor elements, where you need to have the surrounding text to understand their purpose.

So how do we avoid such accessibility problems? Some solutions below....

Solutions

There are many proponents of using the phrase "click here" -- the Tautology link -- as a call to action so that more readers will click on the link. I understand the need for a call to action, so I'd be likely to investigate alternatives before resorting to "click here." For example, you might see:

To see how you can improve your hypertext
today, click here.

I'd first consider changing the language like so:

See how you can improve your
hypertext today!

But if the client demands the "click here" signpost, I'd suggest:

Click here to see how you can
improve your hypertext today!

Regarding the Mime Artist link, if you have to implement a link that uses the word "more" as link text, the guidelines also offer a simple solution (this is echoed on the Max Design web site and many others): Use CSS to hide the portion of the link text you want to keep unseen.

Let's reuse some of the previous markup but add a span that encloses some extra text:

It's often taken for granted but the lack of good
hypertext makes reading a web page a generally
unpleasant experience. There are several essential
hyperlinking techniques you should know.
More about
creating quality hypertext

You then use CSS to move the text within the span element off the screen. The two solutions (linked above) use absolute positioning to move the text, but do it slightly differently from each other. They are worth a look.

The result of either solution is to make only the desired link text visible while making available extended link text for screen readers and search engines.

Discussion on web safe fonts

What's the single biggest gripe graphic designers have when it comes to working on the Web?

• variable monitor resolutions?
• perhaps inconsistent color rendering?
• maybe cross-browser quirks?

Okay, maybe you could present a serious case for the last option -- but in my opinion the number one bugbear is lack of font choice and control.

Most of us come to understand a short list of fonts that are present on most systems, and rarely consider moving outside that list.

The problem is, the font landscape is slowly but constantly changing. Each new version of Office, each new release OS X brings with it a new suitcase of available fonts.

Font Stacks

Although there are plenty of reasons to grumble about the way CSS handles type, it does have a few redeeming features. Font stacks is one of them.

This is where CSS allows us to set a priority list of which fonts are used in each situation. If the designer's most preferred font is absent from the host system, the browser will choose the next listed font, and so on:

font-family:Arial,Helvetica,sans-serif;

In the past, designers have generally played it safe by selecting one of the "big 7" common web fonts first:

• Arial
• Helvetica
• Verdana
• Courier/Courier New
• Times/Times New Roman
• Trebuchet MS
• Tahoma

While this almost guarantees your design looks the same across all platforms, it's certainly a limitation.

What Font?

For the past five years, Codestyle.org have run an ongoing font survey, analyzing the system fonts of visitors to their site. Although the sample group is likely skewed towards the designers and developers that frequent their site, it's arguably still the best information we currently have on font availability in 2009.

Although it's true that the Web's font ecosystem evolves at a glacial pace, sometimes years can pass without us considering what fonts are currently available.

Today I thought we might have a fresh look at the font landscape, and consider some options that might bring freshness to your design without any loss of compatibility.

Palatino Linotype (Win)

At the risk of illiciting a duh from those who use this font often, I'm starting out with Palatino Linotype -- in my view the Web's most under-utilized font.

Why? Well, firstly it has a great pedigree. The original Palatino was a graceful calligraphic serif designed by legendary type designer Hermann Zapf in 1948.

Microsoft then employed Hermann to revise the font for screen usage in the Windows 2000 release, giving us Palatino Linotype. The font has since been included with Office 2003, Office 2007, WinXP, Vista, and presumably Windows 7, making it virtually ubiquitous on the platform.

Palatino Linotype is friendly yet refined, classy but informal in larger type sizes and still reading well down to 12px.

Despite these many and varied attractions, it's still surprisingly little used online. Google reports the text fragment 'font-family:Palatino Linotype' appears 7,750 times, compared to 617,000 for 'font-family:Times New Roman'. Amazing really.

And this despite the fact that CodeStyle now reports Palatino Linotype as far MORE common (97%) than Times New Roman (88%).

Some might argue that both Georgia and Constantia are similar and prettier (but less common), and I'll happily agree and encourage you to list them first in your stack.

Regardless of your number one font choice, I think you would have to question why you'd ever list Times New Roman again. Period.

Century Gothic (Win)

I've always liked the clean geometric lines of Bauhaus design so I have a soft spot for Century Gothic.

Designed as a revival of Sol Hess's 1930s-era Twentieth Century, Century Gothic is a very engineered yet elegant typeface. I've seen it used on everything from cosmetics to horse racing to prestige hotel sites.

Although I prefer to limit its use to headers, subheaders, and opening paragraphs, it still reads well at 12px -- though it's arguably uncomfortable [KS: or uneasy or awkward] on the eye in large slabs.

Shipping with the last two versions of MS Office, Century Gothic is reported to be present on a respectable 85% of PCs. MS Trebuchet (96%) provides a visually passable fallback on Windows and Futura (90%) provides a good match on Macs.

Nice.

Calibri (Win)

Calibri is, I believe, the best san-serif option of the clutch of new fonts released with Microsoft Vista, Office 2007, and Office 2008 for Mac.

Unfortunately, the less than enthusiastic uptake of Vista has slightly stunted the proliferation of what is a very good screen font. Currently none of the new fonts released with Vista are even a 50/50 chance to be found on any given Windows system. And that's a little sad.

However, if you'd like to own Calibri (or any of its sibling fonts, Candara, Consolas, Cambria, Constantia, and Corbel), they are generally available.

Last time I checked, all of these fonts were freely included with:

• Powerpoint View 2007 for Windows
• Open XML File Format Converter for Mac

Calibri is always described as a humanist font, which I think makes it the kind of font you'd be pleased to take home to meet mother. It's approachable and a bit touchy-feely, and does its best work as body text.

There are two small caveats to using it, however:

1. A rendering bug in Firefox 2 caused some of the Vista "C" fonts to disappear at certain sizes. Be sure to thoroughly test your pages in that browser before settling on it.
2. Calibri seems to render smaller on the Mac, so be careful using it with layouts that require your text to fill a certain amount of space.

Lucida Grande (Mac)

Okay, so if you're a Mac user, you're likely to be intimately acquainted with Lucida Grande by now and probably rolling your eyes at this recommendation. In fact, you probably see it everywhere you go, from CSS Zen Garden to Facebook.

However, if you're a Windows user who routinely lists Helvetica as "the Mac font" -- and you could do worse -- Lucida Grande is for you.

The original Lucida fonts were designed by Charles Bigelow and Kris Holmes in the mid-eighties. More of an extended font clan than nuclear family, Lucida now contains more than a dozen variants -- including serifs, san-serifs, handwritten, and calligraphic styles, and even mathematics and specialized fax faces.

Lucida Grande is installed with all OS X installations and Code Style reports it present in over 90% of surveyed machines.

The cool aspect for Windows users is that the font comes free with Safari for Windows. All you need to do is locate it in the Safari folder and copy it to the fonts folder:

C:Program FilesSafariSafari.resources

Grande is awful purdy for body text, and it has decent Windows visual equivalents in Calibri (mentioned above), Lucida Unicode, and Trebuchet MS (in that order).

It does seem to render a little smaller on the Mac, so be aware of that when testing. Otherwise, consider giving Helvetica a breather.

How To Prevent Data Loss

First, if your site is hosted on a managed server, all but the cheapest of web hosts will provide automated backup services as part of the package. Dreamhost, for example, will back up both the files on your server and your databases on at least a daily basis.

Even Dreamhost, however, is quick to recommend that you also have a backup plan:

"We recommend you always keep your OWN copy of your entire web site at a remote location as well, but we'll do our best to make sure that's never needed."

Keeping your own copy of the code for your site is usually quite easy, since most development is done using such a copy. Code versioning systems like SVN and Git even provide a complete history of that code. The tricky part is keeping a copy of your site's dynamic data, usually in the form of database records.

If your site runs on MySQL, chances are your host provides a copy of phpMyAdmin (or you can set up your own). phpMyAdmin includes an easy-to-use database export feature. On the front page of your phpMyAdmin page, click Export.

Select which database(s) to export, and make sure they're set up to export the data in these database(s) as well as the structure:

Finally, make sure to check the Save as file checkbox and select a compression type, so that the backup is delivered as a file download.

For a small site, that will do the trick. Doing it every single day may be too tedious to be practical, however. That's when it's time to look into some of the automated solutions discussed in the comments thread.

Whichever solution you use, make sure to give some thought to where and how you choose to store your backups. Commenter Tom Rutter has some wise words which I've reproduced below:

"A lot of people's backup strategies take care of some problems, but not all. Ideally, a backup strategy for any data not worth losing needs to be able to cope with:

1. Your building burns to the ground
2. You find out all your data became corrupted/lost, and you have done backups since

"For the first, you need off-site backup. This ensures that if an entire building is burgled, burned down, flooded, etc then the data is recoverable.

"For the second, you need some sort of history of backups. Incremental backups are good because they allow history but save space, though of course you'll need to think about how easy it is to restore from backup.

"Common backup myth: "RAID is backup"
RAID is not backup. It provides the ability to replace a failed drive without taking down the system, but that is "availability", not backup. For example, it is not intended to protect against either of the two above scenarios. If the building burns down, it's all lost. If data is corrupted, it's all lost (instantly). A faulty disk controller or power supply, or a power surge which your power supply can't cope with, can ruin the entire RAID set. RAID is good if you need high availability, but even if you have RAID you still need backup."