Overview
- One Web and Mobile First
- Adding flexibility to your layout
- Flexible images?
- Media queries
- Putting it all together
The fixed/flexible debate
User choice or designer control? A debate about how website layouts should be constructed followed. Some (mainly graphic designers) said that the designer should be in control of the layout because they knew what looked/worked best and that layouts should be fixed width. Others took a more “user-centred” approach and argued that the user should be able to choose what width they wanted the webpage to be and that layouts should be flexible (fluid or elastic).
One Web
The “One Web” debate is still ongoing. Does it mean exactly the same content/services for all devices/contexts or does it mean modified versions. What is agreed is that it doesn’t mean one website for mobile users and another for desktop users.
Responsive Web Design
Flexible, Adaptive, Responsive – what does it all mean? Flexible web design means that a webpage can easily be viewed full-screen or in a resized browser window on a desktop monitor because widths are defined as percentages. Adaptive design means that a webpage can sense the screen width and configure itself accordingly, using fixed break-points*. Responsive design combines these 2 ideas, using flexibility between break points.
Mobile First
Mobile is the true web experience? Some designers are now starting to wonder whether the desktop web is the richer experience. After all, a mobile phone can provide your geographic location, has a compass and accelerometer. Desktops can’t do that. Maybe the mobile web experience is the richer of the two with many more possibilities for interaction and real-time information gathering. Maybe websites should be designed for mobile devices first and then gracefully degrade for desktop devices?
Aren’t Apps better? Of course, there is still another (different) debate going on about whether content is better served to mobile devices using an app or a webpage. This whole debate is just about to get a lot more complicated as Windows 8 is set to bring apps to the desktop!
Ethan Marcotte
Ethan Marcotte – it’s all his fault… In May 2010, Ethan Marcotte wrote an article for A List Apart entitled Responsive Web Design. He was building on ideas first proposed in John Allsopp’s seminal article The Dao of Web Design (also for A List Apart), published in April 2000. In it, Allsopp says:
The control which designers know in the print medium, and often desire in the web medium, is simply a function of the limitation of the printed page. We should embrace the fact that the web doesn’t have the same constraints, and design for this flexibility. But first, we must “accept the ebb and flow of things.”
Marcotte believes that now is the time to put these ideas into practice and it is all made possible using CSS3 media queries, but that’s not the only ingerdient. Marcotte identifies 3:
- A flexible grid-based layout that uses relative sizing
- Flexible images and media, through dynamic resizing or CSS
- Media queries and media query listeners
Flexible Grids
target ÷ context = result When using percentages to specify the relative size of elements on a web page, the percentage is always relative to the parent element, or in this case, the context. The context is always 1 (full-size), so if the result you are after is a column with a width of 192px set within a containing element with a width of 960px, the formula gives us:
192 ÷ 960 = 0.2 (or 20%)
However, in most cases, our result isn’t a nice round number. Although the calculated percentage values look a bit ungainly, they work perfectly well – don’t be tempted to round the numbers up or down. Now, when the browser window is resized, the columns will also resize proportionally.
Flexible images
You want to display images smaller than they really are? To some extent, this technique goes against the grain. In order to conserve bandwidth, images should only be displayed at their actual size. However, responsive design requires that we resize images to maintain the integrity of our layouts.
HTML:
<div class=”figure”>
<p>
<img src=”robot.jpg” alt=”" />
<b>Lo, the robot walks</b>
</p>
</div>
The markup, above will be used to describe our image and a caption. Note that there are no width or height attributes on the image element.
CSS:
.figure {
float: right;
margin-bottom: 0.5em;
margin-left: 2.53164557%; /* 12px / 474px */
width: 48.7341772%; /* 231px / 474px */
}
img {
max-width: 100%;
}
In order to create a “fluid” image, we must apply the fluid bit (the percentage) to a container. We must then use the max-width rule for the image so that it remains inside its container and is therefore scaled with it. Of course, things are never quite that simple – older browsers may cause problems. See this article for more information.
Media Queries
The magic ingredient CSS3 media queries are the magic ingredient that make responsive web design possible. A media query is a bit like a conditional statement. If the condition is true, something changes, if not, nothing changes. In the case of webpage layouts, we can make the condition the width of the screen in pixels and then apply a rule to change the default layout if it is true. For example, we could say, if the screen is less than 700px wide, the horizontal navigation bar should be displayed vertically in a column. In this example, 700px would be the “break point” where the design changes.
@media screen and (min-width: 1024px) {
body {
font-size: 100%;
}
}
This media query says: if the media is a screen and if that screen is 1024px wide or more, set the font-size to 100%. Elsewhere in our stylesheet there may be a rule that says font-size: 80% as a default value. Meaning that if the screen width is less than 1024px, text will display at 80%.
min-width or max-width? Notice that in the previous example, we used min-width to control what happens when the screen gets wider than a certain number of pixels. However, we can also test for when the screen gets smaller by using max-width. For those scaling up from a Mobile First perspective, things will change when the min-width breakpoint is found, whereas if you are scaling down from a desktop design, you will want to test using max-width.
Which break points should I use? Well that depends…
Different devices will have set screen sizes (iPhone, iPad, Laptop, Desktop see Chris Coyier’s Media Queries for Standard Devices), you could target those devices but what happens when they change and resolutions increase (as they inevitably will)? Some designers believe that media queries should be content-focused rather than device specific… Another debate.
