Recently, I came across an astonishing article written by Ethan Marcotte for A List Apart titled Responsive Web Design. The concept of the article is quite simple: can a website be designed & developed in such a way that it is smart enough to adapt to the size of the window it’s in? Marcotte’s article attempts to answer this question.
What is “Fluid” or “Adaptive” Web Design?
Without getting technical, the code behind this technique does all of the heavy lifting on the fly; basically, it computes how to figure out the amount of room to give certain elements on the page, where they should be placed and how large (or small) something should be (like an image) depending on the browser window size. This is a fairly new concept; so much so that most websites haven’t even started to use it yet.
Is there an advantage?
You might be asking: “Why would I need to do this? My site is fine just the way it is!” Well, there are a few good reasons, outlined below:
- With the rise of mobile browsers (see here and here), getting pertinent information & making it look nice is difficult using the current coding techniques. Using the new adaptive coding procedures, a mobile user is able to see your site just how you intended it to be seen.
- On the opposite end of the spectrum, users on larger formats (like TV’s) have much more real estate compared to a normal computer monitor. An adaptive website will expand automatically to use an adequate amount of space, thus providing a richer experience for that user.
- Users with vision or motor problems will often zoom in on a website; with the new adaptive coding process, the site will keep its design integrity while simultaneously improving the impaired users browsing experience.
Simon Collison's Website
Examples
Ready to see some examples? Check out the original article & its example to get a good idea. Once you get a feel for what you’re looking for, head to Simon Collision’s site – colly.com, Jon Hicks’ blog – The Hickensian, and Couch Camp. When looking at these sites, try resizing it to see how each site responds. Try picturing the site on different platforms such as a mobile phone and take note about how the site resizes itself for such a small window.
Have you even given thought to where your website will be in the future? If it plays out how it’s predicted, mobile browsing will surpass desktop browsing in the next 3-5 years. Is your site ready for a change?
Follow Us!