Design your blog: Web 2.0 style

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.
2 column layouts

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.
Blog alignment

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.
Sample Web 2.0 sites
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:
Social Networking 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 Menus

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: external link

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. Browser iconsDo 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!

22 thoughts on “Design your blog: Web 2.0 style

  1. Pingback: News From The World! » Design your blog: Web 2.0 style

  2. Wow. I like the tutorial. You know, I should have read this four years ago, when I started my blog. I learned the hard way, through trial and error. There was a time when I had very fancy stuff on my blog, like a weather blurb, a music video, lots of stuff. In time I figured I get rid of them.

    • Thanks Jeruen!
      All of us have been on this path, four years ago my blog had certain un required features too. The only difference is that being in India on a slower internet, I didn’t have high bandwidth stuff. But thats okay, 4 years ago, awareness about Web 2.0 was almost non existent!

  3. Pingback: Design your blog: Web 2.0 style « Make Your Life Easier

  4. Hey Priyank, thank you, thank you and thank you. This is the most informative and entertaining guide I ever read. Keep up the good work, I love your writing style because it is not borring, and may I say that you should freelance.

    BTW I just wanted to tell you about selecting background, use Lasso Tool or Polygon Lasso Tool to select, found usually on the side ribbon bar. You may want to select the option, to add, or substruct depending how you select – located on the top menu after the Lasso Tool is selected. I think you have to practice selecting, once you figure out how it works it is easy. To save selection, select your object and then go to Select > Save Selection > type name. If you deselect, then you can bring back your selection by going to Select > Load Selection. Oh and remember once you save the selection it does not move with the image, so don’t move your image. I think masks may be more useful, but I have not gone that far. Let me know if you need further help, and have fun.

    It was excellent post again.

    Anna :)

    • Hi Anna, Thanks thanks so much! I’m glad that you found the post useful. :)

      I tried the photoshop thing you explained here so nicely – thank you for that! It does not seem difficult but will certainly need some practise. I didn’t even know such tools existed. Hey have you considered adding this paragraph to your original post? I think your readers may find it useful too!

      cheers. :)

  5. Wow, I had no idea you knew so much about blog design! Great tips too.

    Compatibility is a big problem, especially with IE6 still used… Hate that browser!

    I’m considering changing the fonts on my blog for a more modern look to.

    • Hi Zhu, Happy you liked it, Thanks :) Internet Explorer has always been crappy when it came to supporting CSS. I don’t know why it can’t understand certain rules as all the other browsers do. :) Microsoft’s arrogance or an innocent mistake? who knows! I read you mentioning about changing your site’s look, I like the current look too!

  6. Nice writeup Priyank. I’ll definitely use this in future if and when I decide to blog. A couple of questions (not in the design, but hosting). If I custom design my blog and take it to a bloghost, say wordpress, they are asking $$$ (as against using their templates, which is free). On the other hand, you can upload it into any hosting service, but the host should support MySQL. Am I getting this correct?

    • OMG, sorry for the delay! Your comment went to my spam folder for some reason, probably due to the $$$ sign… lol!

      Yes, if you buy a hosting service (web server), you can install wordpress for free there and then use any readymade or self designed (like I have) templates there. The host must support MySQL and PHP.
      PS: Welcome to my blog!

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>