Web Design How-To: Get Started with Responsive Web Design
With the introduction and proliferation of smart phones and tablets, the way websites are designed is changing. As more websites are visited by users of tablets and phones, your design has to accommodate a myriad of screen sizes. In more traditional web design workflows, designers and developers target a specific screen width, then let smaller devices invoke pinch-and-zoom actions to change the size of the page and in so doing allow visitors to explore your page more extensively.
While the capability to pinch-and-zoom to expose more content is a great feature of modern mobile devices, your content will benefit greatly if it can adapt to multiple screen sizes. This can, however, be a daunting task when you consider the growing number of devices available. This is where responsive design comes in.
Responsive web design is a principle that makes extensive use of CSS3 media queries. A media query allows you to specify certain CSS rules based on the user's screen size. By creating multiple CSS rules for varying screen sizes, you can create one HTML file that adapts itself automatically for multiple devices. This alleviates the need for your visitors to use pinch-and-zoom features, and presents your content in a reader-friendly format. In addition to readability, you can also make layout adjustments and even show or hide content based on the user's screen size.
Figure 1: Today's websites need to accommodate a variety of screen sizes, not just that of your computer screen.
Below are three techniques to help optimize the user experience for your website and to give you more control over the design as it adapts to multiple screen sizes. (Editor's Note: At the end of this article, look for a special offer for CreativePro.com readers to receive a 66-percent discount on an online course to teach you this technique step-by-step.)
Adding Imagery With CSS
When altering your design for different devices, consider creating multiple versions of your graphics. This can greatly affect the speed at which your design loads on smaller screens and gives you the opportunity to customize each version your graphic.
The example below shows different sizing and cropping choices you can make as well as varying amounts of compression applied to each set of images. Since many small-screen devices have higher resolution screens, the extra compression is unnoticeable, and the file size is significantly smaller.
Figure 2: Making different size images for each device can make loading faster on each device. Notice that the compression assigned to each images is barely discernible as the image size decreases.
Take advantage of the fact you can switch your images dynamically and customize the sizing and cropping of your images for each screen size. In the example above, the sidebar photo for the large screen size shows more detail of the stained glass window, whereas the smaller images show more context of the window.
Apply Images to Your Web Page with CSS
Images are typically added to a web page using the image tag "img". We can use media queries to alter the size of the displayed image, but we cannot change the size of the actual graphic file being used. So instead of using the static "img" tag, we can use an HTML element as a container — such as "div" tag — and assign an image into its background using CSS.
Figure 3: By adding an HTML tag "div", we can change the size of the actual image for each display's screen size.
The second block in the image shows the same div tag with the CSS rule for small screen devices being applied. The third block shows the same div tag with the large screen CSS rule applied. What is happening is that the same div tag is being changed based on the user’s screen size.
Assigning images to an element's background allows us to change the referenced graphic file, in addition to being able to alter the dimensions and position properties of the container.
Adapting Navigation for Handheld Devices
When viewing web pages on larger screens, the expected location of the navigation is at the top or left side of the screen. Because larger screens allow us to see the content in addition to the navigation, the user sees at a glance what and how much content is available. On handheld devices, however, the navigation can take up the entire screen real estate if it appears at the top. This can also lead users to believe they must make another navigation choice rather than grasp that the content is further below on the page.
For handheld devices, global navigation typically appears after the content, so a user can swipe upward through the content, then be presented with additional navigation options. The challenge here is to reposition the navigation with CSS without needing to alter the HTML
Figure 4: Website navigation on small screens typically appears at the bottom of the screen so the user sees content first. Using CSS to reset the absolute positing of the navigation bar addresses this.
The figure above shows that the navigation markup is placed after the main content markup. This allows us to keep the natural flow of content for handheld devices and reposition the navigation on larger screens. This is achieved by setting absolute positioning properties on the navigation container when viewed on larger screens and removing the position properties on small screens.
This video shows responsive web design in action as it demonstrates a single set of HTML and CSS working in Windows, Macintosh, iOS and Android. Click the screen to play.
Restyle Navigation Elements for Small Screens
In addition to changing the position of the navigation, we can also change its style as well. Standard anchor tags are restyled on small screens to reflect to look of mobile buttons commonly used on handheld devices. The figure below shows the dramatic transformation our CSS file can have on our navigation links.
Figure 5: Navigation links on handheld devices have a different appearance than they do on larger screens. Bigger buttons are easier to see and touch on small screens.
Use Large Screen CSS as Default for Older Browsers
Older browsers don't understand media queries. So in order to keep backwards compatibility with older browsers, keep the rules for large screens outside of any media queries. This will ensure earlier versions of browsers that lack support for media queries can still recognize a set of CSS rules.
When the media query conditions are met by your user's screen size, the rules defined within the query will override the rules outside of any queries for large screen devices. This will give you some built-in backwards compatibility to browsers that support CSS-based layouts, but not CSS3 media queries.
Editor's Note: If you liked the video included in this story, you can get a 66 percent discount on Chris Converse's course "Creating Responsive Web Design" on Udemy.com.
Chris teaches step-by-step how to create the web design used in this story. The course includes all HTML and CSS markup and graphic files, as well as pre-sliced Photoshop files to help get started in creating and customizing your own responsive web designs. The course retails for $150, but CreativePro.com readers pay only $49. To get your discount, use the coupon code creativepro.com when purchasing.