New Feature: Playlist Center! Pick a topic and let our playlists guide the way.
By Chris Converse | Monday, November 19, 2012
When considering a responsive design for a website, many web designers and developers only consider the layout. While it is key to ensure the layout and composition make use of the user’s screen size, the download time should also be considered as part of the user experience.
To really understand the concept of designing for responsive download, we first need to take into account that CSS can be used to add imagery to HTML elements of webpages. From there it becomes more apparent that CSS3 media queries can be used to alter imagery, as well as layout, based on a user’s screen size.
With this in mind, the <header> is one HTML5 element to focus on when planning a web layout. Typically the header area of a website is used for corporate branding, navigation, and imagery that sets the tone of the design. When creating a responsive web design, three or more sets of CSS rules will need to be specified based on the user’s screen size. These CSS rules will then in turn make adjustments to the sizing- and layout-based properties of the header elements based on available screen real estate. If we use CSS to specify imagery to be used in the header area, we can also drive more of the design tone with CSS.
Now, with CSS driving the imagery for the header element, combining CSS3 media queries with image assignments allows the imagery to adjust based on screen size. This allows designers to use larger, less compressed images for larger screens, while smaller screens reference smaller, more compressed images.
The ability to call on CSS referenced images that have varying dimensions and compression settings results in reduced download sizes and times for devices with smaller screens. This means the same HTML and CSS files will call on files for small- and large-screen devices, but the files called on for small-screen devices will be up to one-fifth the size of those called on for large-screen devices.
This technique can be used in many elements of a responsive website, including photography galleries, graphics and diagrams, and even navigation or promotional elements. The amount of compression you apply to smaller images can be greater due to the higher pixel density of modern tablet and phone screens. That being said, compression versus quality has always been a trade-off on the web, so experiment with settings that will decrease file size while still maintaining the integrity of the original image. Also, make sure to always test your work on multiple devices if you get the chance.
If you’re interested in learning more about responsive web design in the lynda.com library, consider checking out Creating a Responsive Web Design from Chris Converse, or Responsive Design Fundamentals from James Williamson.
Interested in more?
• All web design courses on lynda.com
• All courses from Chris Converse on lynda.com
Suggested courses to watch next:• CSS: Core Concepts•CSS3 First Look•HTML Essential Training
With online video courses at lynda.com, you can reach your goals faster. Learn software, improve your skills, and get an inside look at how the professionals work.
Share this article:
Tags: HTML, CSS3, Responsive design, CSS, Chris Converse
You can change your email preferences at any time. We will never sell your email. More info
Thanks for signing up.
We’ll send you a confirmation email shortly.
Sign up and receive emails about lynda.com and our online training library:
Keep up with news, tips, and latest courses with emails from lynda.com.
We've updated our terms and conditions (now called terms of service).Go Review and accept our updated terms of service.