Could the world of blogging be about to take a nose dive into the world of historic internet fads? Surely not…

Everywhere you turn you see abandoned blogs, redundant blogger accounts and washed up wordpress installations. Blogging has become the internet’s trash 2.0. But why? A tool so accessible, easy to use and fundamentally liberating is in dire danger of becoming, “pointless”.

It stirs from the fact that blogging is no longer restricted to web developers and the few tech savvy individuals on the net. Now, every man and his dog are offering some sort of ‘blogging’ service (I’m sure we could all list about 10, so we wont bore you). Everyone has a blog. Me. You. Everyone.

Out of every hundred or so blogs that are launched daily, a grim stab in the dark would suggest 95% of these are simply – abandoned. Why? Are people lazy? Do they not know what they are doing? Can they just not be bothered? Lets look…

Content. The bones, the brains, the everything of a web-blog. Content on a blog, is like water to an ocean. Yet nearly all failing blogs have the same issue – lack of content. To some, a mere 15 mins in each day is a chore, something to worry about – many either forget to post daily or just can’t be bothered. Others start blogs on subjects they have no interest in and/or not expertise. This makes it hard to update and again damages a bloggers self confidence and dedication.

Due to the pressures of making money in the modern society, even blogging has become a revenue stream. Now don’t get me wrong, this is a potentially huge earner; but you need traffic – how do you get traffic? Quality content.

Most bloggers miss the point and think a few half-hearted posts here and there will bring in some traffic and in turn make some money. Sadly they are wrong. Failure to make instant cash, deems to many, blogging as a poor source of income; and so we start getting ‘abandoned blogs’.

Besides the issue of content, another reason for the burst in the blog boom can be attributed to the idea that many blogging software packages rival some of the neatest CMS packages. In particular we’re talking about WordPress. The advances of wordpress over the years have turned it into one of the biggest, easiest to implement, free CMS’s out there. Fantastic. Or is it?

WordPress now, is so tuned up, so advanced that people have failed to do the simple things, blogging daily, gaining readership and keeping active. Now, blogs don’t even look like blogs, nor do they feel or act like blogs. The amount of plugins available make it almost impossible for a reader to detect the ‘blog’ elements within a site. This has damaged blogging as a whole. No longer are people tempted by the simplicity of creating a small blog to post up ideas/thoughts etc, they want to go bigger.  Blogging is being replaced by the ‘user friendly, CMS’ boom.

In my opinion, to conclude; the blogging culture has been damaged. Whether things will run in full circle, and people will put the advantages of CMS type features to one side, and return to old fashioned blogging, remains to be seen. If it doesn’t return, where do we go now? Think twitter…

Have you ever stopped to think whether or not your links are actually living up to their full potential? Are they usable, accessible, effective and efficient? Probably not as much as you think.

This article will explore the intricacies of the hyperlink and how to make the most of the humble <a> tag.

1) Underlines

If you have a paragraph with links dotted in and among the copy they need to be identified as soon as possible by the user. The best way of doing this is to underline them. Target all paragraph links using:

p a{
     text-decoration:underline;
 }

This will make all links inside paragraphs underlined, and you can add further CSS rules to the above to expand the aesthetics and appearance of the links too. I would suggest removing the underline on hover to indicate the clickability (new word).

Underlining anything that isn’t a link is a big no-no, especially if it is in a body of text. People expect to be able to click it, and get mighty annoyed when they can’t!

The rules can be bent slightly with hyperlinks that either aren’t in long passages of text, or are obviously meant to be clicked (e.g. main navigations).

2) Colour

Colouring links consistently throughout your pages will massively increase their identification and ease of use. Keep all links contained in paragraphs the same colour, all links in your sidebar the same colour and the links in your footer, um, the same colour I guess.

Changing link colour on hover is an arbitrary decision; I would recommend that if you don’t remove the underline on a user hovering the link that you do alter the colour to indicate some level of interaction.

3) Cursors

This applies not just to links but anything that’s clickable – do not alter the cursor! Anything that can be clicked (especially links) should have the pointer cursor (literally give it the finger). Under no circumstance should you apply another form of element to a clickable element. I suggest adding this to your CSS file:

a, button, input[type="submit"], input[type="reset"]{
		cursor:pointer!important;
	}

This will give all your hyperlinks, buttons and submit/reset form elements a more logical cursor, indicating that they can (and should) be clicked.

4) Target

I mentioned this in [link]my previous article[/link], but please refrain from using the target (target=”_blank”) attribute on your links. This interrupts users’ workflow and also won’t validate under the Strict DOCTYPE.

If for whatever reason you are required to use the target=”_blank” attribute then you may want to use the following CSS to automatically indicate that a new window will be opened:

a[target^="_blank"]{
	color:#f00;
	padding-right:12px;
	background:url(new-window.gif) bottom right no-repeat;
}

Where new-window.gif is a small arrow 10×10px wide – it will be shown on the far right of the link.

5) Title

This is a win-win situation in terms of both accessibility/usability and SEO. Some browsers (particularly those for disabled users) can bring up a list of links within a certain page – if you haven’t given each of these links a title attribute all the user will have to go on is the actual text of the link, and the location URI. Compare the following:

<a href="//csswizardry.com/">CSS Wizardry</a>

vs.

<a href="http://csswizardry.com/" title="CSS">CSS Wizardry</a>

It’s fairly obvious which one is the more accessible link. Users who isolate the links through their browsers get a description, and users who use their browser normally get a nice little tooltip telling them where the link they are about to click is going to take them.

I mentioned SEO benefits as well… Search engines spidering the second link will be able to give me a bit more weight in the SERPs for those keywords – SEs love keyword rich title tags (and alts but that’s another story).

6) Wording

In a similar vein as the above, the correct wording of your links has both accessibility and SEO benefits. For example:

For cheaper car insurance <a href="cheaper.html">click here</a>.

vs.

<a href="cheaper.html">Get cheaper insurance</a>!

When isolated, the first link simply reads “click here”, whereas the second reads “Get cheaper insurance”.
The latter is better practice in that it is a) a better call to action, b) a more accessible description of the links purpose and c) it’s got an infinitely meatier keyword count.
Note that I didn’t use the title attribute purely and simply so as not to over complicate things. A real life perfect example would be:

<a href="cheaper.html" title="Get Cheaper Car Insurance">Get cheaper insurance</a>!

7) Lists of links

If you ever make a list entirely of links, give each “li a” a bit of padding and display:block;. The reason for this is if you have a list of varying length links which are all stacked one above the other, users with motor handicaps may struggle navigating their mouse/pointing device over such cramped items:

ul li a{
		padding:2px;
		display:block;
}

Accesskeys

Accesskeys are a great way to allow users to navigate a site. They are used most often on critical links, i.e. your main navigation. They aren’t as important on outbound links to other sites you are referencing or smaller less important pages in your own site.

<a href="index.html" title="Return to the Home Page" accesskey="1">Home</a>

Also, they only need defining once per page. Say you have three links to your home page on your contact page, you need only define the accesskey to any one of those links.

In most browsers you hold Alt+accesskey. In Firefox you hold Shift+Alt+accesskey.

9) Keyboards

A lot of users have/choose to navigate with their keyboards. The issue this poses is that the :hover pseudo-class isn’t utilized by keyboard navigation, so any user tabbing through will not see any change in the link’s state when they’re over it. The way round this is to take your a:hover CSS rule:

a:hover{
	...
}

and change it to this

a:hover, a:focus{
	...
}

Now the same hover effects your mouse users get, your keyboards users get too!

That pretty much covers it, in a basic form of nutshell. You’re now on your way to being a hyperlink guru – a much coveted title, I’m sure

But why are they so popular? Here’s a list of 9 reasons why people love lists.

1. Easy to write. Come on, let’s face it – we’re all looking for an easy way to do things. It’s so much easier (and quicker) to think of 10 (or more) points and just jot them down than to write a complete article. Take this list as an example.
2. Easy to read. People reading online are busy, what with all the surfing they have to do. There is a vast number of interesting (and sometimes not-so-interesting) sites out there that people need to get to, and lists are an extremely efficient way of digesting all that information. In fact, lists are so good to read you can just glance at the list headings and still get the gist of what the author is saying. Don’t do that with this list though, read the whole thing.
3. Precise and to the point. Lists are inherently succinct and concise. You’d have to work sufficiently hard on making a rambling list, and this quality makes them very Web-friendly. Lists can help convey your points in an easy and bite-size form to your readers. To effectively grab the attention of someone surfing by your site, you need to make your point short and snappy. Say what you need to say, and say no more, as the old adage goes.
4. Effective communication. For all the above stated reasons, lists are highly effective ways of communication. When making a point with a list-article, items in that list pile up one after another and can make a convincing case if done correctly. Lists make a specific promise and deliver in an obvious manner. That is to say, if a list title says “SEO Your Site – 5 simple tips” it will, in all likelihood, give you five good ways of doing what it promised.
5. Lists can spark debate. Everyone loves some controversy – it doesn’t matter whether it’s about the latest political happenings or which brand soda is the best as long as it sparks some debate. For example, this list is my opinion about why people love lists. Many people might not agree with the points I’m making, while some may agree completely. This provides a starting point for discussion and debate, whether it is through hate mail to me or the comments down below. Go ahead and write a controversial list (like “10 Reasons Why Vista Isn’t That Bad”) and you’re sure to create some buzz around it, which can be invaluable in promoting your site.
6. Lists are very linkable. Links are what drive a site, and having lots of them is what we all want. List articles are great linkage fodder and for the same reasons the people love to read them, they also love to link to them and share with others, whether they do it from their own blogs or a social bookmarking service. “Hey did I tell you about this great list I read…”
7. Lists make sense. From to-do lists to lists of top places to vacation this summer, lists help us make sense of our lives, and the same goes for the Web. You see lists of the Top 10 Windows Freeware, and you see Reasons to Switch to a Mac. In a haphazard World, lists heroically set out and try to organize information in so much as they can.
8. Fun to read. Lists are also great fun to read, and that’s a good thing for online content! They can be educating, insightful and thought-provoking at the same time, too. Lists such as ‘34 Different Ways to Lace Shoes’ and ’50 Fun Things To Do With Your iPod’ are great examples of this. Would these articles/posts have been as popular if they had been articles several paragraphs in length?
9. Everybody loves them. It’s the online fad right now, so get with the program and make some lists for your site! Spread the link around and watch the magic happen – as long as your list sticks to the qualities above, that is!

It’s easy to lose sight of the readers of our blog, who – depending on our niche – might have very different expectations from the ones we have. And the features which make perfect sense to a repeat visitor might confuse someone who’s come to our blog from Digg or StumbleUpon.

Here’s how to get your site “user tested” in order to make it more reader-friendly:

1. Find a willing victim who’s never used visited your site or blog before. This might be a friend, a colleague, your spouse or your mum.
2. Sit them down in front of a computer (ideally their own machine — or at least set yours up to resemble their’s. For example, they might be used to IE not Firefox.)
3. Grab a notepad. Let them go to the site – watch what they look at, what they click on, and so on. Encourage them to talk as much as possible: what are their first impressions, what are they thinking, why are they clicking that link?
4. Concentrate on writing down as much as you can – you can go through and organise the notes later. Pay particular attention to:
   • Anything that confuses your tester. Eg. “I was about to type a search word in this box but now I realise it’s to put my email address in for updates.” Or, “I’m clicking on this link because I don’t know what it means and I want to find out.”
   • Anything that they can’t easily find. Eg. “Where do I go to send you an email?” Or “How can I tell what this blog is about?”
   • Anything which they misinterpret or don’t understand. Eg. “I’m clicking this ‘RSS’ link so I can get updates to my email.”
5. While testing is underway, resist the urge to jump in and show your tester how to do it. Don’t explain or make excuses (“Yeah, that page still isn’t fully implemented…”) – your other visitors won’t have this benefit.
6. Once you feel you’ve got all the useful information you can, or once your tester is bored, ask a few final questions:
   • Did you find the site/blog easy to use?
   • What would you say that the site/blog is about?
   • Would you come back to the site/blog? If not, what put you off?
   • How do you think I could make the site/blog better?

   You might also want to ask some questions specific to your site/blog’s aims (eg. “Would you subscribe to my blog?” or “Would you buy something from the site?”)

Don’t forget to thank your tester for their time (offering coffee and a cookie is a nice touch).

If you can, try to repeat the process with other testers – look for common themes (such as page titles which everyone finds confusing). Then, and this is the important part of the process, find a few hours to sit down and rework your site to take the feedback into account. Ask the same tester(s) to review it again: do they find it easier to use? Would they be more likely to buy a product or subscribe to your RSS feed now?

I’ve found that getting sites tested in this way can save a lot of wasted time in performing unnecessary tweaks – and can potentially result in much happier visitors. Have you ever tested a website or blog in this way? What were your results like?

Web standards are more like guidelines in that they attempt to provide instructions on the best practices of web design and development. The World Wide Web Consortium (W3C, w3c.org) are the folks who spell out these guidelines and work on implementing the next Web standard. Most online (automated) code validation services use the W3C guidelines to check your code, and from here on, by “valid code” I mean code that adheres to the W3C guidelines.

But why should you, as a web designer/developer, care about having valid code and accessible design?

• Cross-browser compatibility; IE (6, 7, 8), Firefox (2, 3), Opera (8, 9)… there’s a whole list of different web browsers that different people use and will most definitely use to access your website. Cross-browser compatibility becomes a (severe) headache when our carefully designed pages aren’t showing properly across different browsers. For example, the design may be perfect in Firefox, but a complete disaster when viewed in IE — and hasn’t that happened to all of us!
  Most of today’s browsers support web standards, so if you follow the set guidelines it almost guarantees you cross-browser compatibility. Even though the design may not look or work exactly the same across all browsers, valid code will help each of them interpret the page in the way that was meant.
  Cross-browser compatibility is one problem that every designer needs to have early on because even though its very traumatic, the experience is also very good in teaching us of the importance of browser-specific-hack free code.
• Cross-system compatibility; way back when we started out as web designers, we only ever had to worry about Macs and PCs and the ‘standard’ resolutions (800×600, 1024×768). Now, however, we have smart phones, PDAs, regular phones with browsers, tablets, ultra-portables and who knows what we’ll have accessing the Web tomorrow. We can’t anticipate all the possible user-agents (browsers) or screen resolutions used to access our website, so our best bet lies in sticking to standard guidelines. These devices don’t necessarily render pages like a regular desk or laptop would, but standards-compliant code has a much greater chance of being rendered appropriately.
• Faster load times, easier maintenance; standards-compliant code means smaller file sizes and so a faster loading time which contributes to a better end-user experience. Sites with standard code are also much easier to maintain and update. Maintenance and serving costs are minimized in this way, because it’s easier to update the site and also less bandwidth-intensive to serve them.
• Better Search Engine visibility; search engines use robots to crawl the Web and collect information. Standards-compliant, structured code makes it easier for the search engine robots to understand what our site is about and so result in better search engine rankings and greater visibility. Better search engine rankings lead to higher revenue, whether it’s based on advertisements or sales through the site; the more people who can easily find your site, the more business they’ll do with you.
• Accessibility; this is also a summation of the first two points. Accessibility isn’t just about making it easier for people with disabilities to access and use your site (which is very important, by the way). Rather it applies to everyone who uses the Web, whether they are disabled or simply use an obscure browser. ‘Ease of access’ is essential, and is part of the original intent of the Internet, i.e. to be accessible to everyone. Valid code helps get your information across to a lot more people, and helps them use it more easily.

These are just some important points to keep in mind when designing a website. Having them at the back of your mind can help you make a stronger case for setting aside an hour or two to go over your code and making sure it’s all standards compliant.

But does the client really care? How can you justify this extra development time to them? All they want is a website. The time you give to ‘validating’ your code has no benefit in the eyes of your client and seems like a waste of time. They don’t care about the W3C or WAI-AAA compliance, because it doesn’t seem relevant to them.

It’s important to look at a few reasons why some clients don’t realize the importance of such acronyms and their relevance in the design/development process.

• No visible benefits; generally speaking, there is no way to compare two sites and point out in layman’s terms why valid, standards-compliant code is better. Clients who aren’t familiar with how things work on the Internet will undoubtedly have trouble appreciating the above mentioned benefits to adhering to Web standards unless the alternatives and effects are laid out in terms of time and money. Meaning no offense to anybody, time and money are the most important things on a clients mind – they want a solution quickly, and they want costs to be minimized. There is nothing wrong with this approach, but it can impede upon realizing the importance of ‘under-the-hood’ improvements that do not make themselves evident immediately. Sales do not increase overnight as a result of making your code standards-compliant, and even though SE ranks improve, it cannot be translated effectively into direct benefit.
• Misconceptions about accessibility; As I wrote earlier, accessibility isn’t just about making sure your site is visible across all browsers. A lot more thought needs to go into planning a site that is easy to access and use for anyone who visits, whether they be disabled or not. Clients who do not understand this tend to treat accessibility solely as a coding issue rather than realizing its large scope and implications, such as with easy to understand text and effective navigation.
  There is a need to look past the ‘technical’ aspects of accessibility (such as different screen resolutions) and at more human problems, such as content making sense and weird color combinations.
• The need for flashyness; Clients see a nice interactive Flash website with all its rollovers and transitions, and they want a site just like it, because its flashy (pun not intended!). Everyone’s a sucker for bells and whistles, and they don’t care if an animated splash screen intro destroys site accessibility, because ‘it looks good’. A dropdown menu that only works via AJAX does not bother the client as it should because it looks ‘cool,’ and almost every other site has it. It seems so much more easier to make flashy, interactive pages than to sit down and think about standards and accessibility, and to apply what the site’s requires with standard coding practices.

Web designers inevitably have to answer to the client, and if the client cannot appreciate the importance of integrating Web standards and accessibility into the development process, things can get very sticky for the designer. The only way to stress on a client the importance of this issue is to educate them of the pros and cons — and not just by telling them; I have found that doing things like taking away the client’s mouse or making them use an outdated browser are effective ways of informing them about the issues and decisions faced by the web designer. Tell them of the increased effectiveness of the site with standards-compliant code and the reduced cost of maintaining and updating it over the years. Explaining things in non-jargon will undoubtedly increase understanding among less tech-savvy clients.

In the end, an important point to note is that its part of the developers’ responsibility (and job, as some claim) to educate their clients on the benefits of having standards compliant code and accessible design. Place more emphasis into the coding, structure and content of the site rather than just the visuals and you’ll be doing a better job as a web developer.