Udemy excerpt: Techniques in responsive web design

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 CSSS for compatibility older browsers. Watch the video below to learn more.

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 you design loads on smaller screens, and gives you the opportunity to customize each version your graphic. Watch the video below to learn more.

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 below to learn more.

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.

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 the 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 below to learn more.

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 my setting absolute positioning properties on the navigation container when viewed on larger screens, and removing the position properties on small 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 to 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.

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.

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.

Follow along with Chris Converse as he teaches you to create the above web design step-by-step. Chris is offering the Adobe Developer Community readers a 67% discount on his Udemy.com course Creating Responsive Web Design. Use the coupon code adobe-devnet to take this course for only $49. This course includes all HTML and CSS markup, graphic files, as well as pre-sliced Photoshop files to help get started in creating and customizing your own responsive web designs.