Companion plugin for zem_contact_reborn - pro_modernizr_form

Modernizr placeholder fallback

Download a copy of Modernizr with HTML5 input attributes and input types compatibility, host this via your own web site. It is not recommended to use the CDN for Modernizr, however there is a production copy available for temporary use only:

<script type="text/javascript" src="//"></script>

Read More

What's wrong with my mobile site?

I see a lot of mobile friendly web sites being implemented in a way that makes my coder heart shed a little tear.

x (wrong)
x (wrong)
✔ (right!)

Problem 1, Duplicate Content

Google HATES duplicate content, and will enforce penalties for it, meaning you rank lower in search results. One web site is your mobile site, one web site is your desktop site, both are built as separate stand-alone systems, with two separate sets of content. Anyone that has owned and run a web site knows by the very sound of that that it’s going to be a nightmare.

Read More

Responsive Web Design - Css Media Queries

<meta name="viewport" content="width=device-width; initial-scale=1.0" /> <!--[if lt IE 9]> <script src=""></script> <![endif]--> <link href="" type="text/css" media="screen and (min-width: 480px)" rel="stylesheet" /> <!--[if lt IE 9]> <link href="" 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="" /> <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.


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.

← Older Newer →

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 -