A new buzzword going around the industry is "responsive web design". You may have heard it, you may not have, but it's likely you have seen some websites using it.
If you have your own webpage, or your company does, you have probably come across the issue that your website doesn't work exactly how it should in every browser, every size, or every device. It looks too small, too large, or text and images scroll off the page. Responsive web design tries to remedy this problem, and some pretty creative solutions can be achieved using this method.
Years ago when the idea of using CSS was just starting to become more than a curiosity, it was always a good idea to make your websites "fluid", meaning whatever size you scale your browser window to, the web page content slides around to fit the screen. It sounds good in theory, and it worked well enough for a while, but with the introduction of really large wide screens, and really small mobile screens, your content can end up looking very unsightly. It is predicted in the next three to five years, mobile browsing will surpass desktop browsing. That means there will be some pretty ugly and unreadable websites out there if you view them with your smartphone.
As designers, we have been making websites fit the "lowest common denominator" of screen sizes. It used to be 800x600 pixels, now it is 1024x768 pixels. With the wild popularity of mobile browsing, however, our need to support a wide variety of screen sizes has become a necessity. Clients will want a site that works on desktops, but they want their site to also work on iPhones. We design another template for the iPhone, which is a decent enough solution. But what if they come back and say, "we now want it to work on iPad. Or the NEW iPAD!". Well, now we have to design 2 more templates, add more code to the site to redirect, and create potentially that many more breaking points. To prevent from making template after template, there has to be a better way... a way to make the websites adapt to their environment. And thus we come to responsive web design.
The definition of responsive web design, as defined by wikipedia, is "a web site is crafted to use Cascading Style Sheets 3 media queries, an extension of the @media rule, with fluid proportion-based grids, to adapt the layout to the viewing environment, and probably also use flexible images. As a result, users across a broad range of devices and browsers will have access to a single source of content, laid out so as to be easy to read and navigate with a minimum of resizing, panning, and scrolling." Okay. But what does that mean in layman's terms? Basically, it means that the web page will "adapt" to the device or browser viewing it. On a screen that has a lot of real estate, the webpage may show a big pretty image of your establishment, with some thumbnail images under that for each of your departments, with some nice descriptive text.
Scale your browser down a little bit, and your page will magically scale your big pretty image, make the thumbnails smaller, and condense some of the text under the departments. Scale that down some more, and now your title shows instead of the big image, your departments become just text links, and the page text reduces by a few points. Show it on a smart phone, and it shows whatever will fit on the device. However your site is viewed, the presentation is clean, consistent, and properly styled.
Now, as the client, what does this mean for you? Do you need to immediately update your site to this responsive thing? Well, not necessarily-- not yet, anyway. But, if you are considering refreshing your site, coming up with a new design, or moving to a new platform, it might not be a bad idea to consider it. The smartphone market isn't getting any smaller, and many of your potential customers will most likely be viewing you on a mobile device sometime in the future. As of now, this method is one of the best ways to make sure your message is received how you want it to be on each of those devices.
Posted on Wed, May 23, 2012
by LH Admin filed under