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!

For 4 consecutive days by 4 different bloggers, my website got awarded an “Award” each, which is really cool! The last time I remember getting awards was back in 2001-02 when I had a static website and there was no trace of blogs or other interactive web elements we see today (oh I almost sound like a grandfather.)

So a big jar of honey to my following blogmates: Gopinath (Butterfly award), Mavin (Proximity award), Odzer (Butterfly award) and Kiran (Friendship bracelet.)

: : :

I am so lazy these days! In other funny story, last night I had a fantastic dream in which I was working as a double agent in one of those terrorist groups. Unfortunately, I made a mistake and the leader of that group suspected that there was something strange going on in his group. I swore to sacrifice my life and destroy India and pledged my allegiance to the group’s cause. Then he sent me to fight a ‘big’ enemy and I was alone in that skirmish. I couldn’t understand who my opponent was but as the enemy came closer, I discovered that it was a giant mosquito. I pointed my weapon towards the monster sized mosquito and felt a very sharp pain on my leg.

Then I woke up and swatted (swot?) the mosquito who had just bitten my leg.

: : :

Didyouknow didyouknow didyouknow? This is post # 250 on this blog!

: : :

Finally, an unrelated image:

Toronto downtown from Gardiner Expressway on a cloudy day. In the center is the CN Tower.

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. Note: I had started blogging on June 5, 2007.

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

Presenting…
[drums][more drums]
!Tada!
A brand new look of my website. [yay!]
Ok I know, unless you are a first time visitor, that you have probably guessed it already. This is what I call “Version 4.8″ and I hope you like it.

Oh by the way, I also got a MacBook, you know, an Apple Laptop. I got up on Wednesday morning and while biking to work I was mulling over how nothing exciting has happened in the last 2 days. So I decided to make it exciting and what else could be more exciting than spending money on a cute little thing? Clearly, I sound quite excited, but I definitely am excited, and will be until I get the credit card bill. Apple gave away an iPod Touch free with this purchase, so I have more toys to play with. This coincides with the abrupt demise of my older laptop and confirms my final departure from the world of Windows OS. Exciting!

Anyway, back to the website. Thanks everyone who gave me elaborate feedback on how bad the previous version sucked. I’ll dedicate my next glass of Cranberry juice to you (since I gave up on beer). Cheers!

So, does something look different here? Is it better to navigate? Faster? What do you think? Notice a bug? Comments and criticism welcome (but please don’t say something obvious like – “wow the new look is nice!”, I know that already..;) (talk about smartassedness).) I will be tweaking for the next few days.

I am extremely reachable anyway

cheers,

Rant:
I registered priyank.com in September 1999, barely 6 months after I first started using a computer (after 12^th grade, kinda late). I remember the thrill of discovering Notepad on a black & white computer running windows 3.1 and DOS, the apprehension of using the mouse and 14-kbps shell access to text-only internet (no pictures, colors, graphics). Today, 8.5 years after losing my computer-virginity, I look back at those days with wonder and awe.

I created my first website in early 2000 and in all the time it existed, it has served no useful purpose to the world, other than to entertain myself.

A look at the Archives would reveal that the ‘blog’ part of this website was born only in June 2005, thats approx 2.7 years back. Till then, my website was a collection of static pages, seldom updated, and filled with stuff that fascinated me then

The last 8 years (18-26 years) were the formative years of who I am today and this is vividly reflected in my writings (wow that sounds like an elegant word). It has become my habit to read older posts and have a laugh Some of the things I blogged about two years ago were really immature and childish, and I’m sure that two years into the future I’d have the same opinion about today.

Apart from serving as a convenient online public journal to add on to my personal diary, I’ve made some wonderful contacts via this website all these years. Thanks for all the love showered by you, yes you reader, by means of the comment box, e-mail, chats and real world interactions. I admit, it has given me nothing but encouragement all along.

So let me invite you to join the party with me to celebrate an important milestone of this blog (and the website). Why? Because you are an essential part of it

cheers!

Comparing these figures with any other blog will reveal that this is barely a start. Nevertheless, these zooming numbers are pleasing indeed.

cheers

There seems to be some problem with my website servers. Please bear with unexpected error messages.

Regards

World Wide Help website appeals as follows.

​
​​​​Last year, on the 26th December, an earthquake, and then a tsunami, killed, wounded, or impoverished hundreds of thousands of people in South Asia.

These disasters took their immediate toll, and, each time, the world tried to help. But as calamity piled upon calamity, there has been a certain amount of fatigue. Perhaps people’s stock of goodwill has run low. Perhaps seeing too much suffering hardens us.

During the course of the year, other disasters took their toll too. Most devastating of them: Hurricanes Katrina and Rita on the South-East coast of the USA; and another enormous earthquake near Pakistan’s border with India.

But, the fact is, the suffering from those disasters has not ceased. Parts of South Asia have still not recovered from December 26th, 2004. In the USA, normalcy hasn’t returned to New Orleans. In Pakistan, thousands are still homeless, and may not survive the harsh Himalayan winter.

They need your help.

Last December and this January, the online community came together as never before to help in the aid efforts in South-East Asia. The lessons learned there were put to use, and improved upon, when the other tragic events of the year unfolded.

Can we harness that goodwill, that togetherness, that willingness to help once more?

The WorldWideHelp group would like you to join us in Remembrance Week. Here’s what we suggest you do.

Use your blogs, your home pages, your wikis, your newsletters. Link to your favourite charities and NGOs, write a paragraph about them and the work they are doing, and ask your readers to make a donation.

Tsunami Help Wiki gives lot of information