As a website designer, we should always be focussed on learning new techniques and moving ourselves forward. One of the newest techniques is to design responsively. This means that a website should always fit onto a browser window, whatever resolution or size, and still look good. For a mobile screen such as the iPhone, the page should scale down with some elements being hidden and the page generally becoming simpler and more streamlined.
Introduction to responsive design
How is this achieved, though? Ethan Marcotte, known as the founder of responsive design, wrote a book called Responsive Web Design for popular publishing company A Book Apart about this very topic. Inside he tells us that there are 3 conditions needed to be filled for a page to responsive. These 3 things are:
- Fluid Grid
- Flexible Images
- Media Queries
In this article we will explore the basics of these three points and why responsive design matters so much in this modern world dominated by mobile devices.
Below, I have explained how to implement these 3 things into your websites. It is a very quick overview, and I recommend that you read Ethan's book - it will go a lot more in depth than I can here. There are also a few more books and articles that I have linked to at the bottom of this post, and also some tools I use when creating and testing my responsive designs.
Using Fluid Grids
The first condition Ethan talks about is the fluid grid: the idea that the elements you write in your HTML should be able to scale and move as the browser viewport changes in size (either increase or decrease). This is done by using percentages (%) instead of hard coded 'px' values. You take the width value of the object you are trying to convert into a %, and the width of it's container element and divide them, then multiply by 100 to get the percentage value. For example, say our object was 160px, and the container is 320px, we would divide 160 by 320 (160 ÷ 320) and then multiply by 100. This would give us a nice round value of 50%. While this is a good value, usually you get horrible decimal numbers. For example, try (125 ÷ 235) x 100. This comes out as 38.461538462%. You should always keep as many decimal places in as possible because it keeps the object the most accurate width. One last thing: if you work on a Mac, you don't need to write out all the decimal places; you can do the calculation in Spotlight (CMD + Space) and then simply copy the % value using CMD + C and paste into your editor of choice using CMD + V.
Getting to grips with Flexible Images
So, very briefly, we have touched on what it takes to make a responsive, fluid grid. There's so much to learn about that and I'd recommend you go and read up a lot more about it. There are some links to articles I've read that I think are great at the bottom that will hopefully interest you.
But the internet does have something other than text, called images (Shock horror!). Unfortunatley we need to add a little more CSS to get images to work within the flexible grid.
Lets say we want an image to fit it's container element. Normally, we'd use width: 100%; and leave it at that. However, because this is telling the image to be at 100% width, the browser renders it at the original dimensions of the image. To fix this, we need to use a new property: max-width. This tells the browser to render the image at 100% of it's containing element. Now it should fit into the flexible grid. As a bonus, browsers have advanced sufficiently so that when the browser window is resized, it will also resize the image.
There is a lot more to do with flexible images, including Internet Explorer (grr!) support, but most of that is included in Ethan Marcotte's excellent book that I listed above. Enjoy!
Using media queries
But this isn't all you need to do to create a responsive design. While your design may now be fluid, the design will often break at very small screen sizes because the styles are still the same for each element as they were when you were on a desktop screen. To change this, you need to use a technique called Media Queries. In the past these have been use for a number of things, such as how to print out a webpage. However, they are now used mostly for making websites responsive. The syntax is below:
@media screen and (min-width: size in px) {
/* styles */
}
There are many more words that could in replace of 'screen', however I'm not going to go through them here because I want to keep this on topic. What Media Queries allow you to do is target a specific screen size or range and then give it some particular CSS styles. At a different screen resolution outside of this range, these styles would not appear. Let's have an example:
@media screen and (min-width: 768px) {
.container {
width: 85%;
color: red;
}
}
In the example, all screen sizes are targeted that are above 768px. I've used min-width, which essentially means that the minimum screen size that these styles can appear is at 768px. There is also a condition called max-width, which targets all the screen sizes up until it hits the size in the media query.
The importance of mobile
However, min-width and max-width form a larger picture when you consider how small mobile screens are to desktop screens. Also, think about how many new devices and gadgets are coming in every few months, each with their own screen resolution. We already have the PS Vita, the Nintendo 3DS, 7 and 10 inch Android Tablets (which are a category all on their own), the iPad, Android Phones (with all manner of different screen resolutions). These devices don't have as much processing power as a normal desktop PC, and are often operating on 3G/4G data or maybe even below at 2G or EDGE. We need to conscious that if we supply the same assets to these devices as we do to desktop PCs, they may have trouble rendering them or take a while to load them. To overcome this, a technique called Mobile First responsiveness has been developed, which essentially means that we design for the smaller screens first and progressively make the move towards the bigger screens. This makes logical sense in a number of ways; for example, it seems logical to design smaller at first and then move up, and also it means we have to give a bit more thought to the Mobile landscape. Also, soon, mobile devices will overtake desktop computers, so we have to give some real thought to this large section of the market.
Mobile First design
The technique that focusses on mobile devices primarily (as well as scaling up to produce a fully functional desktop website) is known as Mobile First design. Essentially, when you are writing your CSS Stylesheet, the styles that are not nested in any media queries, which are usually targeted for desktop screens, should be re-targeted for mobile screens, and any general styles such as link colours that need to apply to all versions of the site, whether on mobile or desktop. We then write media queries, using min-width, that progressively scale up the website so it can be viewed appropriately on bigger screens. Each Media Query that is targeted is called a breakpoint. There are a lot of boilerplates for breakpoints out there, however many people, including me, have come to the conclusion that a breakpoint should occur whenever the design starts to break at a certain point. It feels much more organised and clean to keep the breakpoints you write standard across each website, but each site is different, and if the design breaks, you need to compensate.
This technique, Mobile First, has a more technical name, which is Progressive Enhancement. This is because you have progressively increasing the screen size and enhancing the website for bigger screens. The opposite of this, building websites the normal way and then using max-width media queries to scale down, is called Graceful Degradation, because the website should scale down well.
Let's have an example of progressive enhancement:
/* mobile styles and any general styles. E.g styles for screen sizes from 320px until the next media query, 640px */ @media screen and (min-width: 640px) { /* styles */ } @media screen and (min-width: 768px) { /* styles */ } @media screen and (min-width: 960px) { /* styles */ } @media screen and (min-width: 1024px) { /* styles */ } @media screen and (min-width: 1280px) { /* styles */ } @media screen and (min-width: 1440px) { /* styles */ } @media screen and (min-width: 1920px) { /* styles */ }
Remember, these are a guide only. If your design breaks when you're testing it, just add another media query in to fix it.
Media Queries Compatibility with Internet Explorer
As you may have guessed, because Media Queries are a part of the CSS3 spec, they are not compatible with Internet Explorer 8 (IE8) and below. This can create a huge problem for Mobile First CSS stylesheets, because the styles for the desktop website are wrapped in Media Queries. It wouldn't matter as much if it was for a mobile site, because they aren't wrapped in the media queries (don't get me wrong though - it matters). But it creates a huge problem for Desktop IE users. Luckily, those genius Javascript developers yet again come to the rescue. Scott Jehl has created a script called respond.js which enables Media Queries to work on IE8 and below. Awesome!
More on Responsive Design
This post barely scratches the surface on what Responsive Design is and what's possible with it. There are so many books and articles available that will stretch and challenge what's possible. And if you add a bit of Javascript/jQuery, then the sky's limit, as they say. Well, almost. There are a few books and articles that I consider standout on the topic of Responsive Design. I'm sure there are other big names I've missed, if there are, I'd love to read them, so be sure to tweet or email me. Or you could just comment down below. So here comes the list:- A Book Apart
- Responsive Web Design by Ethan Marcotte
- Mobile First by Luke Wroblewski
- (In fact, just buy the whole collection. They're all excellent.)
- Why Mobile First? by Luke Wroblewski
- Summer Reading Issue from A List Apart. Not all the articles here are about Responsive Design, but nevertheless they're all excellent. Better still, they're put into categories. Slowly making my way through them.
- On Responsive Images by Chris Coyier (CSS Tricks)
- Notes to an Agency Starting Their First Responsive Web Project by Chris Coyier (CSS Tricks)
Online Resources for Responsive Design
There are many, many resources for testing out responsively on your site, and getting inspiration on how to solve a problem by looking at what other people have done. Going to list a few of them here: