Companion plugin for zem_contact_reborn - pro_modernizr_form

Textpattern plugin Modernizr HTML5 form input fallback

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="//cdnjs.cloudflare.com/ajax/libs/modernizr/2.6.2/modernizr.min.js"></script>

Read More

What's wrong with my mobile site?

Why responsive is best for mobile

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

x m.mywebsite.com (wrong)
x www.mywebsite.com/mobile (wrong)
✔ www.mywebsite.com (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="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.

Comment!

← Older Newer →

Back to Top

Random Web Design Testimonials

“Hilary is personable and easy to work with. She has helped us over the last 15 years with our website and graphics. Nothing is a problem. She is reliable and trustworthy. We would recommend her.”

Laura Jane Walsh - Manager at Lindas Of Kinsale

February 28, 2014