Posted by Alison Strickland on Thursday, May 29, 2014 - 11:31 | Follow me
CSS3 media queries allow us to dynamically alter the design and layout of a web page in order to deliver an optimal user experience from a single set of HTML and CSS markup.
The techniques in this article explain how we can leverage this powerful capability of CSS to also change imagery, alter the navigation on hand-held devices, and set up default CSS for compatibility with older browsers. Watch the video by clicking on the image below.
Figure 1. Optimize user experience from a single set of HTML and CSS markup.
Adding Imagery With CSS Creating different images
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 of your graphic. Watch the video by clicking on the image below to learn more.
Figure 2. Create multiple versions of your graphics.
The example above shows the different sizing, and cropping choices, in addition to the varying amounts of compression that are 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.
Download the source Photoshop files and follow along. 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.
Assign images to HTML elements
Images are typically added to a web page using the image tag
<img>. While we can use media queries to alter the sizing of the images, we cannot change the actual graphic file being used. Instead of using the image tag, we can use an HTML element as a container, such as div tag, and assign an image into its background using CSS. Watch the video by clicking on the image below to learn more.
Figure 3. Change actual graphic with an HTML element as a container.
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.
Reposition the global navigation on hand-held devices
When viewing web pages on larger screens, the expected location of the navigation is at the top, or left side, of the screen. Considering larger screens allow us to see content in addition to the navigation, this user experience does not hinder the user from getting the content. On hand-held devices, however, the navigation can take up the entire screen real estate if it appears at the top. This can also lead the user to believe they must make another navigation choice instead of realizing there is content further below on the page.
For hand-held 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. Watch the video by clicking on the image below to learn more.
Figure 4. Navigation markup is placed after the main content markup.
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 hand-held 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.
Figure 5. Navigation is repositioned on smaller screens.
In addition to changing the position of the navigation, we can also change the style as well. Standard anchor tags are restyled on small screens to reflect the look of mobile buttons commonly used on hand-held devices. The figure below shows the dramatic transformation our CSS file can have on our navigation links.
Figure 6. CSS file can have a dramatic transformation on our navigation links.
Use large screen CSS as default for older browsers
In order to keep backwards compatibility with older browsers, keep the large screen rules outside of any media queries. This will ensure earlier versions of browsers that lack support for media queries can still "see" a set of CSS rules.
Figure 7. For backwards compatibility, keep the large screen rules outside of any media queries.
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.
Where to go from here
If you're interested in learning more about responsive web design, attend the next TCG Buzz Break on Wednesday, June 4, at 2 p.m. ET/11 a.m. PT. I'll be joining TCG executive director Diane Domeyer to discuss how to:
- Comp your ideas in Photoshop
- Extract web graphics and CSS from Photoshop
- Set up HTML pages and containers
- Load images with CSS
- Reposition navigation bars, and more!