Diving Into Responsive Design: What are the main challenges?
Earlier this month, I wrote a post on getting started with responsive design, including basic design factors and aspects, current examples, and questions to consider. Responsive design is the process of developing your website so that the site can re-format and re-size itself according to the user's screen resolution. For example, this allows you to design your website in a four-column layout for desktop resolution that will, once it senses a change in screen resolution, change its layout to accommodate the user.
W3C has released its official recommendation of an element necessary to responsive design: CSS media queries. And with that, we say, what's next?
An official recommendation from W3C means that web browsers now must support these CSS media queries: code that consists of a media type and at least one expression that limits scope, using width, height, or color. This opens the door for companies and organizations considering responsive design – now a visitor's browser should not hinder his or her ability to view a responsive website.
But the integration of responsive design as a new norm brings certain challenges: specifically, looking at coding, which has become increasingly more complex throughout the years to allow for custom styling enhanced features, and dialing down the size.
For anyone visiting from a desktop, this poses no problem. However, for mobile and tablet visitors, the amount of data their devices need to process can take away from site speed, increasing your bounce rate and driving potential clients to competitors.
In a great article from Search Engine Land that addresses slimming down your website for responsive design, Sherwood Stranieri focuses on a few elements to concentrate on:
Resizing images the right way
Image files require a large amount of data, no matter the size to which they can shrink or enlarge. Style sheets need to be customized to select different image files for mobile and tablet users; ones that are pre-compressed. This means two sets of images pre-prepared.
Consolidating external files
Creating a responsive website redesign means considering the number of files on the site and the size of each of the files. Consolidating all of the CSS into one file is preferable, as is the case with JavaScript. Like with images, this will allow for the visitor to access files faster and makes downloading on a mobile device easier.
Consolidating styles
The article gets it exactly right in that "web pages have become very sophisticated graphic design documents, with rules dictating every font, margin, and border." The information used in coding these additions, custom design specifications, and constantly changing templating create an onslaught of information that would need to be consolidated in responsive design. Creating clean styles is key.
These are some of the ways to approach a cleaner, tighter website built responsively. But it's important to remember, when embarking on a website redesign using responsive design, that the customization options can be limited. Using this technology means creating simpler sites with a smaller library of files and fewer style options.
What is your experience with responsive design? Is it an option your company or organization is considering?