26 Jun

Responsive design made easy

Responsive design
 
Responsive web design is a web design approach for crafting sites to offer an ideal viewing experience across a range of devices. Or so that’s what Wikipedia will tell you.
 
I would like to talk about the different approaches and the best tips and tools you can use to get a responsive designed website.

Desktop VS Mobile

2012 – Look mommy I’m on a mobile phone!

Responsivedesign2012


You can see that the website is on a mobile phone, but it’s far from user-friendly. The font is too small, you have to zoom in completely, website doesn’t fit proper… Not really responsive.

 

2013 – Yeah I’m mobile… I guess…

Responsivedesign2013
 

This is starting to get better. The website fills the screen completely, but font size is still small and you still have to zoom in to actually read what’s on it.

 

2014 – Of course I’m mobile!

Responsivedesign2014

 

Here you can see that the website is perfectly adjusted to the mobile phone. Everything is nice and readable, no need to zoom in or out just to see everything. Perfect!

 

As you can see by the examples. In only 3 years time a lot has changed and fast. That’s because more and more mobile devices get access to internet and more internet traffic is generated from them. That’s why websites need to look nice both on a computer and on a mobile device.

How?

Well there are two ways of doing this:

  • Progressive enhancement
    mobile => desktop
  • Graceful degradation
    desktop => mobile

 

My way

HML5 + CSS3
I’ll be talking about the Graceful degradation approach.
 
We’ll be using a lot of modern website frameworks, but mainly we will be using HTML5 and CSS3.
 
I’ll be going by the following steps:

  • Create CSS for none CSS3 browsers
  • Create CSS for CSS3 browsers
  • Start degradation

 

Issues

Supporting all major browsers can be hard due to different engines running on them.

 

Advantage

All (good) mobile devices support modern browsers with HTML5 and CSS3.

 

Should I use frameworks?

Yes, but it will not solve everything.
 
For the best solution you should be using a combination of a framework and CSS3.
Then you should go and create a CSS file for each device so you will the best possible view for each screen size.

CSS3 media queries

<!-- CSS media query on a link element -->
<link rel="stylesheet" media="(max-width: 800px)" href="example.css" />

<!-- CSS media query within a style sheet -->
<style>
@media (max-width: 600px) {
  .facet_sidebar {
    display: none;
  }
}
</style>


This is one of the best tools for responsive design in my opinion.
Here you can easily say which CSS class or file that should be used on which view. Totally awesome!

A man needs his tools

Now let’s talk about some handy tools and frameworks you can use to create a good responsive designed website.

 

Bootstrap (V3.1.1)

Media queries helpers
/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */

/* Small devices (tablets, 768px and up) */
@media (min-width: @screen-sm-min) { ... }

/* Medium devices (desktops, 992px and up) */
@media (min-width: @screen-md-min) { ... }

/* Large devices (large desktops, 1200px and up) */
@media (min-width: @screen-lg-min) { ... }

 

@media (max-width: @screen-xs-max) { ... }
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... }
@media (min-width: @screen-lg-min) { ... }

 

Grid options
bootstrap_grid

 

Example 1: Desktop
bootstrap_gridexample1

 

Example 2: Mobile and desktop
bootstrap_gridexample2

 

Example 3: Mobile, tablet and desktop
bootstrap_gridexample3
To show or not to show
bootstrap_sizevissible

 

Components like the Navbar are auto-responsive.
So are many other Bootstrap components


Viewport resizer

viewport resizer
“Responsive design testing tool”
A very handy tool to check how your website would look like on other devices, without changing the windows size of your browser.

 

So I hope this post helped you on creating your own responsive website.
Feel free gives comments and feedback below.

 

Sources

 

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.