web hosting
build a website

Responsive Web Design

Apr 1, 2013   //   by Anthony Devine   //   Website Development tips  //  Comments Off on Responsive Web Design

There are a number of ways to build Websites for different devices, you can have an app that renders a Website just for an iphone or an android device or maybe creating a desktop Website and a seperate mobile Website to work on all mobile devices.

The method I prefer to use is Responsive Design. Basically Responsive Web Design is building 1 Website which will resize and adapt to all different sized devices, so your site will look differently on a desktop machine to a tablet and a mobile phone. It works by using media queries, which allows you to specify how a page should be displayed when the screens max-width is a certain pixel size or when its min-width is a certain size.

Media Queries look like this:

@media only screen and (min-width: 768px) and (max-width: 959px) {

}
The above says if the screen width is between 768px and 959px then use the css that is specified between the {}. That example is a good size to use for tablet devices.

With media queries you have a few options of how you can code up and move items around your pages.

  • The first option would be the easiest option, which is to give all images a percentage size instead of a pixel size, as this will automatically scale down when you view your Website on different devices, so if you had 2 images floated next to each other you could give each of them a 50% width and this will then alter automatically for you.
  • The second option is to have a different sized image for each device and then when you are on a certain device show 1 image and hide all of the others. An example of this is:
    
    <html>
    <body>
    <div class="largeimage"><img src="imagelarge.jpg"></div>
    
    <div class="tabletimage"><img src="imagetablet.jpg"></div>
    
    <div class="mobileimage"><img src="imagemobile.jpg"></div>
    
    <div class="widemobileimage"><img src="imagewidemobile.jpg"></div>
    </body>
    </html>
    
    /*CSS below*/
    
    /*Default Layout: 980px*/
    
    .largeimage{display:block;}
    .tabletimage{display:none;}
    .mobileimage{display:none;}
    .widemobileimage{display:none;}
    
    /*Tablet Layout: 768px*/
    @media only screen and (min-width: 768px) and (max-width: 959px) {
    .largeimage{display:none;}
    .tabletimage{display:block;}
    .mobileimage{display:none;}
    .widemobileimage{display:none;}
    }
    
    /*Mobile Layout: 320px*/
    @media only screen and (max-width: 767px) {
    .largeimage{display:none;}
    .tabletimage{display:none;}
    .mobileimage{display:block;}
    .widemobileimage{display:none;}
    }
    
    /*Wide Mobile Layout: 480px*/
    @media only screen and (min-width: 480px) and (max-width: 767px) {
    .largeimage{display:none;}
    .tabletimage{display:none;}
    .mobileimage{display:none;}
    .widemobileimage{display:block;}
    }
    
    So as you can see you can specify which images you want to show or hide depending on what the screen size is. The good part about this is that you do not need to work out any percentage sizes for your images and you can make your page look as accurate as you wish for each device. The bad points about this method are that it can be time consuming to do this for each page and it also puts more of a load on your server as the site loads up all of the image on the page and once the style sheet is loaded it hides them accordingly, the user will not see all of your images be loaded but the size of your page and style sheet will increase so keep this in mind.
  • The final way that you can use media queries is to have everything displayed on desktop mode and when you go down to smaller devices such as a mobile phone you can hide items by using display:none. This reduces the amount of functionality that a user will have when using your Website on a smaller device however some fucntions are not always neciserally needed, it also makes it easier for you sometimes to just hide something instead of completly changing the layout of your page to fit it in. If you want to hide an item for a smaller device but still want to give the user the option to have all of the functionality you can provide them a link to your full desktop site.

There is no specific sizes to use for which widths should be used for your media queries and this will be altering constantly as new sized devices are coming out all the time, but the above sizes are good ones to use.

Responsive Design is done by using CSS3 and certain browsers mainly older versions of Internet Explorer do not use CSS3. The way to get around this is to load in Javascript into your page, a popular libary using is Response JS. This Javascript finds out what browser you are using and then loads in the script if your browser requires it.

Developing template/ theme on a Content Management System or E-Commerce system such as WordPress or Magento from scratch is not always an easy option if it is your first time and it can be quite time consuming to complete. There are options you have if you do not wish to start building a responsive theme from scratch.

There are quite a few Responsive themes you can purchase for Magento, one of them is: http://www.magentocommerce.com/magento-connect/response-responsive-magento-theme-7523.html. There was a free Responsive Theme that I used myself on a Website called Respond and I have looked around and this theme seems to have been taken down now from the Website, I do however still have a copy of the theme if you wish to use it here: http://www.daemondesigns.co.uk/wp-content/uploads/2013/04/Respond-Theme-master.zip. Both of these themes are designed for Magento COmmunity, I have used the free Respond theme on Magento Enterprise and it works for that version however there are some parts where code has been stripped out for some of the extra funtionality of Magento Enterprise, this is not a big issue tho as you can just download the basic MAgento Enterprise theme and copy and paste them missing code into your Respond theme.

There are options for WordPress the best free theme I have found is http://www.dessign.net/simple-photo-responsive-theme/. This is really easy to setup and modify.

Once you have you themes installed you can modify them as much as you like to look just like your design. The above themes work in all modern browsers and older versions of Internet Explorer by using Javascript.

You do not need any mobile devices really to test out how your Website looks in the smaller resolutions. The easiest way to test out your Website is to grab the courner of your browser Window and drag it inward to reduce the size and you will see your Website automatically reducing to the correct size.

Give it a go and have fun creating your first mobile Websites!