Developing websites has changed dramatically over the past decade. Technology has advanced to a point that allows development of incredibly rich and interactive experiences on the web, lately even without the use of plug-ins like Flash, thanks to advances in standardization (like HTML5 and CSS3), as well as much better implementations of JavaScript engines in modern browsers (for a cool demonstration, check out browserquest from Mozilla, but make sure you have a modern browser). At the same time, we all lead much more digitally connected lives, and many of us are surrounded 24/7 by one form or another of connection to the Internet. Desktops have gone mobile through laptops, available at prices that rival those of high-end calculators of just a decade ago, mobile phones have more power than servers had not that long in the past, cars have screens and get traffic information and music through the air, pretty much any cafe and hotel and even many airplanes offer WiFi connections, and we now even have tablets which go beyond what 20 years ago was still considered science fiction in Star Trek. We’re always on, always connected.
However, all this flexibility comes with a price. The expectation now is that whatever content you want access to, you can get access to, on a variety of screens and devices. And keeping with the plan to bring EyeFetch up-to-date as much as possible, it would be foolish not to plan for this as well. The site should not only be accessible, but also fully functional and highly usable on the largest array of devices and screens – our desktops, laptops, netbooks, tablets, smart phones and even refrigerators (ok, maybe I’ll leave those for later).
Luckily, I’m not the only one who wishes to do so, and quite a few bright minds have been working hard on coming up with some solutions to the this problem. One of cornerstones, and still developing areas of this new design metaphor comes from an article by Ethan Marcotte, published in May 2010 at A List Apart, entitled Responsive Web Design. Since then, an entire movement has built around this notion, and many web developers and designers are working on ways of improving upon his ideas and finding methods of implementing them on new and existing sites.
Responsive Design on EyeFetch
If you check the “sneak peek” option on EyeFetch, you’ll see the first draft of a layout for the new Site. Ignore some of the ugly colors – the entire page is basically a wireframe model with pieces placed to make sure it all fits well together and works in various environments. I’ve added a quick drop-down on the top left that allows switching of the various layout options I am developing. The more interesting part, however, comes when you try resizing the browser. Assuming I’ve done it reasonably well, the page should adjust – sometimes even reorganize itself – to the size available, all the way down to screens for smart phones (the weird colors are there to help me line up the various rectangles making the page render). Currently only two different layouts are supported, so the next step is to add a few more, and make sure they “respond” to the available space in the same graceful manner
EyeFetch Blog 