Join Joseph Lowery for an in-depth discussion in this video Understanding the technique, part of Dreamweaver and WordPress: Building Mobile Sites.
In the previous chapter, we covered a technique for taking an existing WordPress Web design intended for the Desktop, and retrofitting it to tablet and phone screens. But happily, new WordPress Web site designs are needed every day. So how do modern Web designers react, knowing from the beginning that a multiple screen strategy is a requirement? In this movie, we'll explore the answer to that question a bit, and explain the technique that is detailed in the remainder of this course. Two guiding principles for Web professionals have emerged in recent years: responsive Web design, and mobile first.
Responsive Web design is a concept intended to tackle the challenge presented by the proliferation of Internet capable devices, and their accompanying varied screen sizes. The first serious argument for responsive Web design came from an article in A List Apart by Ethan Marcott, which you can find at the URL listed here. There are two main aspects to a responsive design, and they work together hand in glove: fluid grids, and media queries. A fluid grid responds to the browser window size; the columns of the layout expanding and contracting with the screen width.
Here's Ethan Marcott's example from an article for A List Apart on fluid grids. Watch how the layout reacts as I shrink and expand the browser window. As good as they are, fluid grids have their limits. If you contract them too much, the percentage values the column widths are based on fall apart. That's where the second part of responsive design equation comes into play; media queries. As we've seen earlier in this course, media queries allow CSS stylesheets to be conditionally applied. Typically, device screen width is a primary condition that triggers a media query to take effect, and apply a different stylesheet.
In the Setting up Media Queries movie in this chapter, we'll create a number of media queries, and link tags, rather than the @media statements as we did in Chapter 2. Responsive design has led to responsible design, and the desire to tackle the notable problem that exists when retrofitting Desktop designs to work with tablets and phones. If your CSS uses the Desktop design as the starting point, with a large-scale background image, browsers will still download that image, regardless of the screen, and which media query driven stylesheet is being used, so that, effectively, any time you're looking at a phone that has such a background, the larger background, even though it isn't used, is still downloaded to your phone.
This obviously slows mobile site's rendering time, and negatively impacts on resource management. A better approach is to structure your CSS styles with a base of core components, primarily text, and basic structure, and save the background imagery for media query specific styles. We'll follow that approach in the upcoming movies. This leads to our final corollary for responsive design. Web sites should also be responsive to the viewers needs. In the Targeting Configurable Site Elements movie, I mentioned the concept of responding to how the Web site was being used on different screens.
You might remember the very responsive example, glue Isobar, and how radically it shifted design and focus from Desktop to phone. We'll also incorporate that principle into the look and feel of our mobile phone design. Now that you understand better where we're going with the full mobile design strategy, you're ready to get started with creating the necessary media queries.
- Setting up an existing WordPress site
- Targeting configurable site elements
- Setting up media queries
- Preparing for adaptive images
- Styling a blog for tablets
- Restructuring navigation for different-sized displays
- Developing a WordPress site for phones