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 an experienced web designer who understands the most complex coding issues web designers can face. Very easy to work with and always meets her deadlines.” January 17, 2011

Paul Feeney - printing.com