Read more about web design Cork and drop us a message!

Responsive Web Design - Css Media Queries

<meta name="viewport" content="width=device-width; initial-scale=1.0" /> <!--[if lt IE 9]> <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script> <![endif]--> <link href="http://www.mydomain.com/css/core.css" type="text/css" media="screen and (min-width: 480px)" rel="stylesheet" /> <!--[if lt IE 9]> <link href="http://www.mydomain.com/css/core.css" type="text/css" media="all" rel="stylesheet" /> <![endif]--> <link rel="stylesheet" media="only screen and (max-width: 480px), only screen and (max-device-width: 480px)" href="http://www.mydomain.com/css/mobile.css" /> <link rel="apple-touch-icon" href="iphone_icon.png"/>

This code actually doesn’t render the core stylesheet first, then leaving you to strip everything out in your mobile stylesheet, it renders the mobile stylesheet as a stand-alone style, so you pick what you want to keep from your main stylesheet and everything else can be styled from scratch for mobile which I found much easier, and it saved me a huge amount of time.

Custom icon for Apple/iOS device

<link rel="apple-touch-icon" href="iphone_icon.png"/>

This displays a custom icon on iphone/ipad devices when your web site is added to home, the rounded corners and glossy effect are applied automatically, so just link it to a 57px x 57px icon and you’re done.

Css

The MOST important code snippet for your css is below, and handles the re-sizing of large images to stretch the width of the container div only:

img{ max-width: 100%; height: auto; }

The basic rule of thumb in mobile styling:

  • Make your header simple stretch the width of the mobile screen.
  • Make each link in navigation stretch the width of the screen, with enough padding that someone can easily use their finger to select the text without bumping into the next link
  • Make the content 1 column (can set display: none; on aside) and increase the size of the text to make it easily readable on the small screen

A great online mobile simulator I find quite handy is the Opera Mini Java tool.

Back to Top

Random Web Design Testimonials

“Hilary is quite an exceptional web designer and has a great eye for detail. After we gave her our concept from the outset she returned with an excellent offering. Superb designs, very efficient web design, best advice and we always got the feeling she was always looking after us. At every stage in dealing with her she has out done herself and truly is a gifted designer. Comes highly highly recommended by us and we have gotten huge praise from others we have referred to her. Keep up the excellent work Hilary.” January 24, 2011

Owen Purcell - mybodyworks.ie