From Web 1.0 to Web 2.0

4

As a web developer and programmer from 1996 to 2004, I became very familiar with Web 1.0.  Mansfield in Social Media for Social Good does a very good job of describing what the pinnacle of Web 1.0 was like: multiple columns, small text size to increase the amount of content one could put on a page.  There was a column for upcoming events, featured stories, and another for the main body of the text.  I worked initially as an amateur web developer, then professionally for Mary Washington College and the College of William and Mary Business School, and finally as a free lance developer.  For many of my projects, I worked with a graphic designer since the graphic part of web development wasn’t my strength, initially.  My graphic artist and I had a turn-key solution, with similar column structure; we modified the look and graphics, but always came up with a very clean design utilizing similar structural points.  As I’ve now been out of website design for over 10 years, it’s amazing to see how things have changed.  Once again Mansfield does a good job talking about what the keys to Web 2.0 are, I will go over some of them here with good examples.

content-management1. Content Management Systems (CMS)

I could have sworn I thought I invited this (doubtful but it was my strong suit)!  The main thing I loved offering my clients was the ability for them edit and add content without any web development experience.  Even solutions like Wix.com and Squarespace.com could be considered CMS’.  If all you need to do is provide the textual content and maybe a picture or 2, then you are dealing with a CMS.  CMS’ now are much more robust than the ones I created.  I allowed my clients to add events, extra content pages, and pictures to their webpages.  However, the content always displayed in a very consistent and predictable manner.  These new CMS’ are allowing for more flexibility in terms of placement of text and images.  It’s important to remember, though, that branding is important and a consistent look and feel is still important for readers to recognize your brand and content.  CMS is so important to make sure content is current, updated, changing, improving, etc. etc. etc. – static content was never good, but it was more acceptable 15 years ago.  It is completely unacceptable nowadays and with CMS’ companies don’t have to hire full-time web staff to keep the content current – good news for a small non-profit trying to keep costs low while keeping web appeal and exposure high.

2. Simple, Consistent Navigation is Important

This can take multiple forms, but needs to be consistent on secondary pages –navigation the home page can and often will have it’s own navigation style.  Navigation can be user driven (categories like Employees, Staff, Physicians, Patients, etc. where users choose the category based on their user identification) or content driven (categories like About Us, Locations, Events, etc. as seen on MD Anderson’s site).

3. Visually Powerful Homepage Design

This is probably one of the biggest differences I noticed simple_homepagefrom Web 1.0 to Web 2.0.  A big picture is the whole page?  That was unthinkable before, but it creates quite an impact.  The picture above is from IDEO.com.  But there are many examples of this throughout the web, and they truly do create an emotional connection with the webpage.

4. Write Text for Easy Reading and in Two Columns

We are all aware of the fact that too much text causes the reader to lose interest, so it must be succinct and in order to give it some space to air out, it shouldn’t be more than 2 columns.  The Robert Wood Johnson Foundation does a good job of this design on most of its pages.  This also includes larger font sizes than in Web 1.0 along with high contrasting text such as white against a bright color, white against black, or more traditionally black against white.  Whichever way, high contrast is key.

5. Must Include Links to Social Media

We’ve all seen the links to Facebook, Twitter, Instagram and others on websites sosocial_media_links folks can share a story on one of those sites.  This seems to be a must.  It also lets users know that, that particular organization has a presence on those social media sites, to increase followers on those sites.

There were many websites that truly captured my attention.  The Every Last Drop campaign was a great example.  It utilizes continued user involvement by scrolling down the page to get to all the every_last_dropcontent.  An animation unfolds before the readers eyes, keeping him/her engaged.  I think, while this is not a must for a non-profit, it is a novel, interactive way of maintaining interest and attention and deserves mention here, though does not deserve its own category.

As an old web programmer, I am happy to see the evolution of the web towards simpler, more graphic design.  I think a lot of this has to do with our picture happy world – people are taking pictures of everything so we are getting used to the idea of the picture telling the story without words.  It creates an emotional connection with more impact and less reading.

Well, I’ve probably written too much.  Thank you for reading till the end!

Advertisements

4 thoughts on “From Web 1.0 to Web 2.0

  1. Nice post Chafeek. Again, I like how you lay out your blog. I would have liked to see more consistency in picture size, but I like your use of the photos and the large text size for each of the 5 categories. I wonder if it would be possible for your to write your blog using two columns to reiterate how that format makes it easier for people to read your content. The links at bottom to Twitter, Facebook, and Google Plus fit well with #5. Good job.

    • Yeah I’ve done the 2 column thing in one of the previous blog posts. It would have been a good idea to show that here. Or perhaps provide a picture of a website doing it well. Appreciate the input.

  2. Great post Chafeek!
    I agree (with your feedback previously) what a difference having a larger font for the headings makes – it breaks up the points better, whereas mine looked a bit like a large homogenous mass! Layout looks great. I actually like the different sized pictures, I think it really worked here. I like the large picture of the girl from ideo.com as it reiterated your point about the power of a single picture to take up the whole page/tell the whole story.
    I do agree with Taylor though – given the specific point about the power of 2 columns, it would have been nice to see it in action – I don’t think I have seen a single blog by anyone that has used two or more columns, would have been nice just to see if it really does work better 🙂 It’s a bit like my post from earlier this week – I specifically made the point that text should be staggered at different levels and yet mine all started and ended at the same place! ah well…
    Otherwise I really enjoyed reading this post. Really nice exploration of web programming days of old and the juxtaposition with how things are done now.

    • Yeah it would have been good to do the 2 columns or provide a good picture of it. It’s incredible how things have changed in 10 years. And what’s funny is without reading the Mansfield thing, I don’t know that I would have really noticed the change from old to new because it kind of happened gradually. I know Flash websites were kind of the transition between old and current, those websites went by the wayside because of all the Flash bugs. But it’s interesting because the new websites look a lot like the Flash websites, but I think without the cumbersomeness of Flash. The Internet is truly on meth or something, constantly changing before our eyes and we don’t even notice unless we look at the old stuff and compare. Thanks for sharing!

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s