Is your blog Web 2.0 compatible?

Years ago, internet users were primarily technical or geeky people. But today, all kinds of people are seen on the internet: young and old, techie and non techie. Also, people’s attention times have reduced drastically and the more time you spend on internet, the more you know where to find what you are looking for. In my observation, anyone who is active online for about an year becomes oblivious to advertisements and ‘tricky’ url’s.
Web 2.0 is not a fancy term! If you look at web-design trends, you’ll notice that there has been a real shift in the way websites are designed today compared to how they were five years back. The exact definition of Web 2.0 is still being debated, but to me, it means only one thing: “simplicity”.

In this post, I will outline some of the most important design strategies for making your blog web 2.0 compatible, and in turn user-friendly. Make sure to read the disclaimer at the end!

1.0. Layout

Guiding principle: KISS.
Keep It Simple, Stupid! Blogs must designed to look clean, functional and free of non-essential elements.

1.1. Cut the flab:

Few years ago, when blogging was new, there was this over-zealous trend to ‘show everything you have on the front page’ (I did that too back in 2004!). It has changed; everybody now knows what blogs are, they know the elements: Blog posts, Archives, About, Contact, Pictures, Pages, Features, Links etc. If someone needs to look at old blog entries or contact you, they know there will be a facility to do that. Provide these facilities in a separate page because showing everything on the front page will only create a mess. Your ‘blog friends list’ is too long? make a separate page. Plenty of ‘awards’? dedicate a gallery. Like to share photos from your recent trip? Make a section for photos! usw.

1.2. Choosing a skeleton:

Blog templates are gravitating towards a one or two column layout. Why? Here is what I think. In the previous days of 640×480 or 800×600 resolution monitors, you could see content on a site without moving your eyes much. However now, with the wide screen resolutions, if you try to read a horizontal line from left edge to the right, you could be turning your neck around as if watching a tennis match. Anything beyond 2 columns could potentially confuse your visitor, and even a microsecond is a lot. If you want to use a third column, try to dedicate it to something exclusive – such as a picture gallery.

1.3. Positioning:

You could have a website flushed to the left, right or aligned centrally. Few years ago, websites were mostly left aligned since centering was not as easily accomplished as it is today. With XHTML and CSS 2, absolute and relative positioning is easy to do. Center aligned blogs also give me a sense of balance and add to the ease of navigation. Also, since you have gotten rid of unwanted elements, there is more space. So why not leave a liberal margin on the sides.

1.4. Content placement:

Almost all people start reading from the top left and move towards the bottom right. Left to right is the most prevalent system in the world and newspapers, magazines etc. are designed with that in mind. Personally, if I don’t find anything content-y in the top-left 20% of the screen area, I almost surf away. This excludes the header and sidebar, since our eyes are trained to assume them after looking at hundreds of blogs. In my mind, when I look at a blog, I go: “Header, check!” “Sidebar, check!” … if “Content” is not the second or third thing in sight, I am discouraged from paying further attention. Seriously, who would want to hide their content?

Further Reading: Current Web style

2.0. Color, graphics and typography

Guiding principle: Stronger, simpler, bigger, honest.

Mozilla.com,
WordPress.org,
The Apple Blog,
Brave New Traveler

2.1. Typography:

Bigger is better! Let me revisit the blurb above on screen resolutions. With bigger screen areas, users see many things when they open a blog. Ergonomics states that I must be able to view the content comfortably from my chair without having to arch my neck and narrow my eyes. The solution? Keep with times, use bigger text and clearer fonts. Serif fonts (e.g. Times New Roman) or Monospace (e.g. Courier) are not the easiest to read, so switch to sans-Serif (e.g. Arial, Verdana, etc). Use of an exotic font is pointless because it won’t be displayed on other people’s computers and the browser will simply default to its settings.

2.2. Use of graphics:

Jarring graphics and aimless animations must go regardless how cute they are. Web 2.0 is all about functionality, so use simple but functional graphics and garbage the rest. Vivid graphics are used to bring attention to a particular matter. There is also a huge leap towards standardization of icons, for example we all mostly know the following icons:

2.3. Color scheme:

For a long time, color scheme was under rated. I remember back in 2003 I had designed my website with a color scheme called Agni (Fire) which is not very different form what you see today. I entered into a web design contest but I was disqualified since they thought that the colors were ‘too bright and funky’. Thankfully the internet has some sense of fashion now. Bolder colors are increasingly used now: blues, oranges and greens are everywhere you go. In addition, the color scheme can being used as a tool to separate various parts of your blog. People often have a distinct header and a distinct sidebar – either marked by a graphic or a colored separator. I like this kind of ‘fencing’ since my eyes can jump to the relevant portion quickly. Don’t be shy of using strong colors, gradients, lines and boxes to separate content in Web 2.0.

2.4. White space:

Since you have a bigger screen and you got rid of unnecessary elements from your page, this is an excellent opportunity to use liberal amounts of whitespace. Note that white-space is not necessarily white. It takes the color of the background (often white or a light color). The more the white space, the easier it is for your eyes to move.

The same goes for line spacing – have your lines sufficiently spaced. For example, reading something that is as tightly spaced as this paragraph will strain your eyes, or you might lose the line altogether. It is also hard to highlight or bring certain text to attention. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin in dolor sed nulla faucibus semper. Ut rhoncus libero in lectus accumsan ultricies. Suspendisse vehicula tempor sollicitudin. Curabitur a nisi lectus, eget consequat justo. Aliquam in sapien eu diam gravida rhoncus. Aliquam libero nibh, dapibus ut suscipit et, scelerisque in leo. Maecenas ut erat sapien, quis scelerisque erat. Sed tempor molestie turpis et ullamcorper. Duis euismod ipsum semper elit mattis egestas. Suspendisse quis dui feugiat elit vulputate laoreet id sit amet massa. Donec eu eros lectus. Sed cursus risus et purus pretium non viverra tellus iaculis. Morbi ac ligula ut magna facilisis mollis et ut mauris.

2.5. CSS is the new God

Unbelievable things can be achieved using CSS. It can be used to create rich layer effects, text effects, boxes and separators and can manage a host of other things like your links and navigation. Most implementations use CSS but find a way to go beyond the normal, superimpose a translucent layer over a picture maybe?

Further Reading: CSS Zen Garden, Visual design, 9 Essential principles,

3.0. Navigation

Guiding principle: Simple and accessible

3.1. Navigation menu

…is either placed on top of the blog just below the header or on top of the sidebar if you want it there. In any case, the navigation menu must be clearly visible and among the first things you notice. Think from a users perspective – do you want to list everything under the sun in your navigation menu? Probably not. Most of us are happy with links to basic pages like ‘contact’, ‘about’, or so. Drop-down’s are great, but I always wonder if a blog really needs detailed navigation menus like that. If you have a copyright policy or an awards page, think whether it’s worth including it on the most prominent piece of real estate on your blog. You can always have sub menus for such stuff – that’s what the sidebar or footer is for. List your categories, awards, links etc there and spare the visitor of a complicated navigation menu.

Navigation menu must be complimented by an appropriate title for the destination page. If you click on ‘Contact Me’ in the navigation menu, the destination page better say ‘Contact Me’ right on top. Web 2.0 is about honesty and simplicity together. Leave the tricky menus, cloaked url’s and dishonest stuff for websites selling phentermine, cialis or free porn.

3.2. Navigation Links

Another aspect of honesty is to ensure that the user has clear and full information before s/he clicks a link. Inserting advertisements in your text will only fool your visitors once. Similarly, stay away from masking the link url with some text in the browser’s status bar. Such tricks will discourage repeat visitors, and will also reduce the credibility of links to other websites that you cite in your blog post. Its a good idea (but lot of work) to use the ‘title’ element for your links so that the user can mouseover and get information about the link. I use a distinct icon to indicate links to external websites. It looks like this:

Blogs have huge amounts of information catalogued in them and unless there is a good way to access older information, nobody will see it. Therefore, rich and relevant internal links are encouraged in blog posts. Trackbacks will ensure that even the older and relevant content is still connected to current posts. Use of ‘Previous-Next’, ‘Older post-Newer post’, ‘On this blog a month ago’, ‘Recent posts’ and such features increase the interconnectedness and accessibility of your posts.

4.0. Content delivery

Guiding principle: No discrimination
The days of Internet Explorer for windows as THE browser are long gone. There are a number of operating systems and plethora of browsers available for people to choose from. Even my mother prefers Firefox.

4.1. Compatibility in multiple environments

Anybody can design a website these days really, but what keeps the web-designer’s job is his/her knowledge of cross-browser compatibility. Do not assume what you see on your screen will be the same as what others see because most likely that won’t happen. Although your design may be perfect, remember that the browsers are not. Each browser uses an ‘engine’ to render web pages and their interpretation of your CSS definitions is never the same.

Do you blog about technology or does your blog attract lot of people who are top level managers? It might be worthwhile to make a ‘mobile’ version of your page to display it properly on handheld devices such as blackberry, iphone, ipod or other cellphones.

4.2. Using javascript, flash, and other features

Fancy features enrich browsing experience, but they must be used precisely for that: to enhance content delivery, not to deliver the content itself. Minimise or avoid the use of anything beyond XHTML and PHP to deliver information. Javascripts are quirky on several browsers, and flash may be slow loading. Try browsing your blog with javascript, images and flash turned off – are the users missing essential content? Information is to be conveyed in a clean and simple manner in Web 2.0 so critical content must never depend on alien scripts.

4.3. Accessibility

Several people (including me) often turn off images while browsing on a slow speed internet connection. To ensure that a user does not miss on important stuff, use less graphics and even if you do, always have an ALT text for every image. This is mandatory for XHTML compliance too.

If you are an accessibility freak (which I am not), try adding keyboard accessibility features.

- – -

Disclaimer

That’s all I have in my bag today. Hope these tips help you create a better user experience on your blog.

These tips are merely some guidelines that emerged from my observations and readings and by no means are the rules for a perfect website. Depending on the content you may use some or all of the above features. As long as you are keeping everything simple and clear, I will like your site.

Further Reading: What is Web 2.0?, Web 2.0 design guide,

Feedback

Please let me know what you think about this article. If you have suggestions to see something improved on my blog, I’ll be happy to hear them! Thanks!

¶ Blogged by Priyank Thatte | Tags: blogging, Website

Raw Material:

Step One:

Step Two:

Step Three:

Finished Product:

What the hell is he trying to say?:
This website so far was a mix (cocktail) of personal blog, travelogs, pictures, photos, and everything else I could find. One fine day (obviously, it wasn’t in St. Petersburg) I sat down to think (yes that happens too!) the purpose of my blog and I was left with a clueless expression on my face. I therefore decided to carve out the Travelogs as a separate blog before it took over rest of my blogging.

This means that all you chums who have blogrolled me will have to update their links. Sorry guys!

Personal blog: http://priyank.com/weblog/ (Feed remains)
Travel blog: http://priyank.com/travel (New Feed)
Or simply link to Priyank.com

I expect this streamlining to yield miraculous results, a fortune perhaps.

always,
Priyank

¶ Blogged by Priyank Thatte | Tags: blogging, Website

… for a couple of weeks. I will be back with rest of the Israel travelogue and other stuff. Please hang on for some time

I am extremely reachable anyway

cheers,

¶ Blogged by Priyank Thatte | Tags: blogging, Website