Responsive Website Design is the approach that suggests that design and development should respond to user behaviour coupled with the environment relating to screen size, platform and orientation. The practice consists of a mix of flexible grids and layouts, images and an intelligent use of code. As the user switches from their laptop to iPad, the website should automatically switch to accommodate for resolution, image size and scripting abilities. In other words, the website should have the technology to automatically respond to the user's preferences. This would eliminate the need for a different design and development phase for each new gadget on the market.
Adjusting Screen Resolution
As the number of devices grows, so does the variety in screen resolutions, definitions and orientations. New devices with new screen sizes will be able to handle variations in size, functionality and even colour. Some are in landscape, some in portrait and others completely square. As we write this, a key differentiating factor between the two leading smartphone developers, Apple and Samsung, is the different screen size of their respective flagship smartphone devices. Bring in the other players from the smartphone market, throw in a healthy mix of tablet computers such as the trend setting iPad and just try to comprehend how many devices are able to switch from portrait to landscape at the user's whim. How is one to design for these situations?
In addition to designing for both landscape and portrait (and enabling those orientations to possibly switch in an instant upon page load), we must consider the hundreds of different screen sizes. Yes, it is possible to group them into major categories, design for each of them, and make each design as flexible as necessary. But that can be overwhelming, and who knows what the usage figures will be in five years? Besides, many users do not maximise their browsers, which itself leaves far too much room for variety among screen sizes.
Responsive Design to the rescue!
A few years ago, when flexible layouts were almost a "luxury" for websites, the only things that were flexible in a design were the layout columns (structural elements) and the text. Images could easily break layouts. Flexible designs weren't really that flexible; they could give or take a few hundred pixels, but they often couldn't adjust from a large computer screen to a netbook or to a screen on a mobile device.
These days we can make things more flexible. Images can be automatically adjusted, and we have workarounds so that layouts never break (although they may become squashed and illegible in the process). While it's not a complete fix, the solution gives us far more options. It's perfect for devices that switch from portrait orientation to landscape in an instant or for when users switch from a large computer screen to an iPad.
Are there any cons to Responsive Web Design?
Yes, and some of these need to be considered quite carefully before diving head first. The biggest risk and issue with responsive design is that it is still maturing as a technology. Let's not forget there are still many old browsers and mobile devices in use that simply will not support it.
Here is a very brief list of pros and cons:
- One solution to fit them all - You must admit, having one version of a website that works on every screen width and various devices is a visionary concept. It will not only benefit your website users but it will also be easier to maintain.
- Avoiding device-alternating issues - One of the main downfalls of building both, a desktop version and a mobile version of a site, is the fact either way your website users are likely to share the URL, and the person who opens that shared link isn't always using the same device through which it was shared. Responsive web design avoids this completely.
- It's not just about the device - Even if we have a very large screen, we don't always have a full-screen sized window open for the web browser. Also your website users will, without a doubt, be accessing your website from different sized screens. With a responsive web site, even if the window is resized, we never end up with that horrible horizontal scroll.
- Attacking media display issues - Of course, a responsive website has to consider resizable media, in formats that can be viewed from every device or screen size.
- Development times, effort, resources... and budget - Building a responsive website has its complexity. Do you have the time and budget to do it correctly? Is your content management team ready to deal with the challenges of thinking about how the content will be rendered across various screen sizes? Is there a solid business case for spending more effort to design and maintain this kind of a website? Is there is a clear business benefit to your brand or bottom-line?
- Cross-browser compatibilities - HTML5 and CSS3 are very powerful allies for building a responsive website, but we all know that there are still many compatibility issues regarding these languages. Alternate ways of achieving the same results may be necessary, which brings a new issue to the list and again more budget and effort to ensure that your website behaves and displays correctly across all browsers (especially older versions of Internet Explorer).
- Performance and loading times - Internet connection speeds are improving but some users still have limited speeds across computers and mobile devices. Responsiveness requires extra server calls due to cross-browser and cross-platform compatibility issues (yes, we are back on the Internet Explorer topic). Media alternating also needs additional server calls, or else resizing a huge image every time will result in slower loading times since the same 700x700 image is still loaded on a 320x480 screen.
- Different devices, varying objectives - The objective of the desktop site (often informative as well as functional) is not always the same as that of the mobile version (often just functional - and normally not to the same extent as that of the full website). This makes it necessary to work on different versions for each purpose. This also means that content may need to be re-written and adjusted for desktop versus mobile consumption. Here, one-size-fits-all may not work as easily.
- Image resizing restrictions - Image resizing is a very important topic for responsiveness. But think about advertising. There are pre-established sizes for web advertising, and resizing or cropping ads may result in harmful distortion.
Responsive web design is visionary and without a doubt it is here to stay. As older versions of internet browsers disappear from our landscape we may finally be able to harness the power of new technologies that drive this new design concept. At the moment, our opinion is that responsive design should always be put in context of your business needs and make an educated call on whether the time is right to embrace this approach for your site now...or wait for this space to mature.
The main issue in our region (the Middle East) is that we still have a high number of internet users still accessing the web via old internet browsers. In this region, Internet Explorer 6 and 7 are still responsible for a high percentage of visits to our sites (much higher compared to global averages) and these browsers are not capable of supporting the latest technologies.
A Showcase of Responsive Web Design
Responsive Web Design in practice. Get inspired. Get excited. Then read the content below to get educated.
Below we have a few examples of responsive Web design in practice today. For many of these websites, there is more variation in structure and style than is shown in the pairs of screenshots provided. Many have several solutions for a variety of browsers, and some even adjust elements dynamically in size without the need for specific browser dimensions. Visit each of these, and adjust your browser size or change devices to see them in action.
NOTE: Responsive web design may not work correctly in older browsers like Internet explorer 6 or 7, (and even 8) thus don't be surprised if you don't see the magic happen if you are still using one of those browsers.