With the growing number of Smartphone produced in the last three years and the diversity of screen sizes it’s practically impossible to ignore users that browse on a mobile device. Whether they use an Android phone, Windows Mobile phone, a BlackBerry device or an iPhone, whether they are on a tablet, on a Smartphone or on a big screen, each user deserves the best experience possible. As designers, it is our goal to provide those users a nice experience browsing the websites we created, whatever the device used to browse is.
Today most of the clients want their website to be mobile compatible, so this is particularly challenging. Creating a version for each device is impossible, due to the number and diversity of those devices, but also simply because we don’t know what will be created tomorrow. That’s where the concept of “Responsive Webdesign” comes to the rescue.
A responsive website is a website that will respond and adapt to the user’s behavior and screen size. The idea is to resize and reorder the design, adapt images, typography, columns, etc., based on screen - browser size, resolution and orientation instead of providing each device a specific website.
The idea is pretty simple: instead of giving the layout rigid width in pixels, we will give it relative ones in percentage. The fluid layout based websites usually take the whole browser width, hence the 100% in this example.
You can see a demo of a fluid design here.
Data JavaScript credit: Andreas Bovens
The
This design adapts perfectly on big screens, but we can see that the sidebar content tend to become hard to read when we resize too small.
For each of those break point, we will use media queries (will come back to explain them in detail in the second part of the article) to adapt the layout of our website so that content is not too hard to read.
You can see and example of adaptive layout here.
The HTML and
The "normal" website uses this CSS:
This nice thing about adaptive layout is the possibility to modify and adapt not only the size of the blocs, but the layout and there place on the page.
The big difficulty is then to choose those break points. A first technique could be to base the break points on most "common" device width. Chris Coyier from CSStricks put a nice list of media queries together. Another way to choose the break points it to actually test the design at different screen sizes and see when it gets ugly or when user can’t really read the text easily, and put break point at those size.
Live example of adaptive layout :
Foodsense
Here you can see the demo of our previous example, in responsive layout.
You can see here how fluid the design is: using percentage enables us to create very smooth transition between the different break points of our design.
Here is our stylesheet for the "normal" version:
And the CSS for the media queries:
Note that for screen size under 540px, we once again gave the sidebars and the content a 100% width, and place the sidebars under the content using some clear: both.
The advantage of the responsive layout is that you won’t have to use too many break points. Since the size are given in percentage, they will adapt automatically, so the major role of the break points will be to be place where design breaks, to re-order our layout (putting sidebars under content in our example) and give the user a more pleasant reading.
Fore Fathers Group
As for print style sheets, media queries can be used as external or internal styles sheets. An external style sheet is easier to organize, it is not downloaded by browsers which don’t support it, but it uses extra http request. An internal style sheet on the other hand does not require extra http request, but the whole stylesheet is downloaded for browsers even if they do not support media queries, and it can be harder to organize. Both have then pro and cons, you’ll have.
You already saw the internal syntax in the example above:
Consider the following example:
If the width of our browser is bigger than
The first media query will only be applied for screen between
You’ll need a viewport meta tag to make the media queries work. The viewport meta tag enables you to take control of the viewport of the device. Basically, if no viewport is set, mobile device will try to fit the whole page on the screen, resulting in very small websites.
The viewport meta tag looks like this:
We know have an xbox that can connect to internet, some of the box our internet providers provide us are equipped with a browser, and even some television are able to connect to internet. Maybe tomorrow you will get a web browser on your fridge, who knows. If we use responsive webdesign to optimize for smaller screens, we can also use them to optimize for bigger ones.
Let's remember: responsive webdesign is about adapting layout to the user's browser size, orientation, whatever that size might be!
read more
Today most of the clients want their website to be mobile compatible, so this is particularly challenging. Creating a version for each device is impossible, due to the number and diversity of those devices, but also simply because we don’t know what will be created tomorrow. That’s where the concept of “Responsive Webdesign” comes to the rescue.
A responsive website is a website that will respond and adapt to the user’s behavior and screen size. The idea is to resize and reorder the design, adapt images, typography, columns, etc., based on screen - browser size, resolution and orientation instead of providing each device a specific website.
A Look at 3 Different Types of Layout
Basic Fluid Layout
Fluid layout is based on a system of relative units instead of absolute pixels. This kind of layout has been around for a while now, and most of the designers use fluid grids created in percentage to achieve such layouts.The idea is pretty simple: instead of giving the layout rigid width in pixels, we will give it relative ones in percentage. The fluid layout based websites usually take the whole browser width, hence the 100% in this example.
You can see a demo of a fluid design here.
Data JavaScript credit: Andreas Bovens
The
style.css gives us common styles for the page (color, typo), but let’s take a look at our fluid.CSS file : #header {
width: 100%;
margin: 0;
padding: 0;
}
#content {
float: left;
width: 60%;
margin: 0 0 20px 0;
padding: 0;
}
#content .inner {
margin-right: 2%;
}
.sidebar{
float: left;
margin: 0 0 20px 1%;
padding: 0;
}
#bar1{
width:20%;
}
#bar2{
width:18%;
}
#footer {
clear: both;
width: 100%;
margin: 0;
padding: 0;
}
Our header and footer have a 100% width, so they’ll take the whole screen available. The main content has a 60%, and our sidebars 20% and 18% so that we will be able to create a design that will fit the whole space available.This design adapts perfectly on big screens, but we can see that the sidebar content tend to become hard to read when we resize too small.
Adaptive Layout
The adaptive layout is based on a pretty simple idea: instead of using percentage we will give our layout fixe sizes, but we will adapt those sizes depending of the width of the browser/viewport, thus creating a layout with different “break points”.For each of those break point, we will use media queries (will come back to explain them in detail in the second part of the article) to adapt the layout of our website so that content is not too hard to read.
You can see and example of adaptive layout here.
The HTML and
style.css did not change; all we changed was the structure of the page. Let’s take a closer look at our CSS file.The "normal" website uses this CSS:
body{
width:1280px;
margin:0 auto;
}
#header {
width: 100%;
margin: 0;
padding: 0;
}
#content {
float: left;
width: 800px;
margin: 0 0 20px 0;
padding: 0;
}
#content .bloc{
margin-right: 10px;
}
.sidebar{
float: left;
margin: 0 0 20px 20px;
padding: 0;
width:220px;
}
#footer {
clear: both;
width: 100%;
margin: 0;
padding: 0;
}
I gave the header and footer a 100% width, but the content has a fixed width. Now the good part, the break points with media queries:/* Media queries */
@media screen and (max-width: 1200px) {
body{
width:1000px;
margin:0 auto;
}
#content {
width: 700px;
}
.sidebar{
width:280px;
}
}
@media screen and (max-width: 980px) {
body{
width:850px;
margin:0 auto;
}
#content {
width: 550px;
}
.sidebar{
width:280px;
}
}
@media screen and (max-width: 750px) {
body{
width:600px;
margin:0 auto;
}
#content {
width: 400px;
}
.sidebar{
width:190px;
margin: 0 0 20px 10px;
}
}
@media screen and (max-width: 540px) {
body{
width:450px;
margin:0 auto;
}
#content {
width: 450px;
}
#content .bloc{
margin:0px;
}
.sidebar{
width:450px;
margin: 0 0 10px 0;
}
}
@media screen and (max-width: 380px) {
body{
width:360px;
margin:0 auto;
}
#content {
width: 360px;
}
#content .bloc {
margin:0px;
}
.sidebar{
width:360px;
margin: 0 0 10px 0;
}
}
For each break point given by a media query, I changed the size of the body, the content, and the sidebar. Under 540px, the text in the sidebar was too hard to read, so I gave the sidebar the same size as the content, what has the effect of putting the sidebars under the content.This nice thing about adaptive layout is the possibility to modify and adapt not only the size of the blocs, but the layout and there place on the page.
The big difficulty is then to choose those break points. A first technique could be to base the break points on most "common" device width. Chris Coyier from CSStricks put a nice list of media queries together. Another way to choose the break points it to actually test the design at different screen sizes and see when it gets ugly or when user can’t really read the text easily, and put break point at those size.
Live example of adaptive layout :
Foodsense
Responsive Layout
We could define the responsive layout, as a mix between the fluid and adaptive layouts. It will use the relative units of the fluid layout and the break points of the adaptive one.Here you can see the demo of our previous example, in responsive layout.
You can see here how fluid the design is: using percentage enables us to create very smooth transition between the different break points of our design.
Here is our stylesheet for the "normal" version:
#page{
max-width:1280px;
}
#header {
width: 100%;
margin: 0;
padding: 0;
}
#content {
float: left;
width: 60%;
margin: 0 0 20px 0;
padding: 0;
}
#content .bloc {
margin-right: 2%;
}
.sidebar{
float: left;
margin: 0 0 20px 1%;
padding: 0;
}
#bar1{
width:20%;
}
#bar2{
width:18%;
}
#footer {
clear: both;
width: 100%;
margin: 0;
padding: 0;
}
What’s important here is the use of max-width (instead of width for an adaptive layout). It’s this property that enables us to create this smooth transition. Using a max-width, we won’t have to use as many break points as for an adaptive layout, and all the other sizes will be given in a relative unit (percentage for our example).And the CSS for the media queries:
/* The media queries*/
@media screen and (max-width: 1000px) {
#bar1,
#bar2{
width:39%;
}
.sidebar{
float: left;
margin: 0 0 20px 1%;
padding: 0;
}
}
@media screen and (max-width: 540px) {
#bar1,
#bar2{
clear:both;
width:100%;
}
.sidebar{
float: left;
margin: 0 0 20px 1%;
padding: 0;
}
#content {
clear:both;
width:100%;
}
#content .bloc {
margin:0;
}
}
All the other size will be once again given in percentage, relative to the max-width of our body.Note that for screen size under 540px, we once again gave the sidebars and the content a 100% width, and place the sidebars under the content using some clear: both.
The advantage of the responsive layout is that you won’t have to use too many break points. Since the size are given in percentage, they will adapt automatically, so the major role of the break points will be to be place where design breaks, to re-order our layout (putting sidebars under content in our example) and give the user a more pleasant reading.
Fore Fathers Group
Media Queries: Create and Define Break Points
Media queries where introduced in the CSS3 specifications. Put in a simple way, media queries enables the web designer to create conditionals stylesheets based on width, height, but also orientation, color, etc. There’s a huge list of media queries available on the official w3c website but we will only use some of them in our case. Here is a list of the most commonly used media queries and what they do :Media Query Utilisation
| Media Query | Use |
| min-width: … px | Used when the viewport’s width is bigger or equal to width |
| max-width: … px | Used when the viewport’s width is smaller or equal to width |
| min-device-width: … px | Used when the device’s width is bigger or equal to width |
| max-device-width: … px | Used when the device’s width is smaller or equal to width |
| orientation : portrait // orientation: landscape | Target orientation |
| -webkit-min-device-pixel-ratio : 1.5 | Used to target high density device on android and ios |
You already saw the internal syntax in the example above:
body {
background: gray;
}
@media all and (max-width:500px) {
body {
background: blue;
}
}
And here is the external syntaxes:<link rel="stylesheet" type="text/CSS" media="screen and (max-device-width: 480px) " href="mobile.CSS" />
Some "tricks" Worth Knowing About Media Queries
Cascade Matters
Yeah that’s right, as for any peace of CSS code, cascade matters.Consider the following example:
#container{
background:rgba(111, 78, 152, 0.9); /*violet */
color:rgb(1, 1, 1);
@media all and (min-width:500px) {
#container{
background: rgba(255, 0, 0, 0.9); /* red */
color: white;
}
}
@media all and (min-width:700px) {
#container{
background: rgba(0, 0, 255,0.9); /*blue */
font-family: serif;
}
}
See the example on jsfiddle.If the width of our browser is bigger than
500px, the color of the text gets white, and the background red. If we enlarge the screen up to more than 700px, the background gets blue, but the color of the text stays white because it inherited the color of the min-width:500px media query applied before (700 being, well, bigger than 500).Creating Stacked Media Queries
Consider the following example :#container{
background:rgba(111, 78, 152, 0.9); /*violet */
padding:10px 5px;
color:rgb(1, 1, 1);
}
@media all and (min-width:500px) and (max-width:699px) {
#container{
background: rgba(255, 0, 0, 0.9); /* rouge */
font-family: serif;
}
}
@media all and (min-width:700px) {
#container{
background: rgba(0, 0, 255,0.9); /*bleu */
color: white;
font-family: serif;
}
}
See the example on jsfiddle.The first media query will only be applied for screen between
500px and 699px, and the second for screen bigger than 700px. In the case of stacked media queries, since property is only applied for a certain width, they are not herited. In our example, if we also want to apply a serif font the layout bigger than 700px, we will have to repeat this property.You’ll need a viewport meta tag to make the media queries work. The viewport meta tag enables you to take control of the viewport of the device. Basically, if no viewport is set, mobile device will try to fit the whole page on the screen, resulting in very small websites.
The viewport meta tag looks like this:
<meta name="viewport" content="initial-scale=1, width=device-width">We basically tell the device, that we will be using the device width as the width of our page, and that there will be no zooming on the page when we first launch it.
It’s Not Only About the Mobile!
In my examples, I showed some media queries used for mobile optimization, tablets and smaller screens. But I wanted as a conclusion, to emphasize the fact that media queries are not only about mobile optimization. We tend to see more and more mobile device, but also more and bigger screens.We know have an xbox that can connect to internet, some of the box our internet providers provide us are equipped with a browser, and even some television are able to connect to internet. Maybe tomorrow you will get a web browser on your fridge, who knows. If we use responsive webdesign to optimize for smaller screens, we can also use them to optimize for bigger ones.
Let's remember: responsive webdesign is about adapting layout to the user's browser size, orientation, whatever that size might be!
Some Useful Resources:
- Media queries for browser which don’t support them: Github Respond
- Mobile hardboiler template : HTML5boilerplate Mobile
- Testing responsive design: Responsive Design Tester and Responsivepx
Conclusion
As you can see, responsive webdesign is not that hard to use and enables web designers to create nice layouts that will adapt to many devices and screen sizes. Your now it’s your turn: did you ever used responsive design? In what kind of projects? Do you have some advice and special tips? How do you define your break points? Let us know in the comments.- Using CSS Background-size Responsively
- 40 Beautiful Watercolor Effects in Web Design
- Neuro Web Design: Tips and Techniques
- Is the Development Community Alive?
Posted in: 
