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

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

← Older Newer →

Back to Top

Random Web Design Testimonials

“Hilary is the most passionate, multi-talented web expert I know! She is totally committed to delivering the absolute best for her clients, and is a pleasure to work with and be around. Not only does Hilary deliver beautiful websites, they are also fully standards compliant, and use the most up-to-date technology. I would have no hesitation recommending Hilary and Proximo Web Design to anyone – and I often do!”

Lauren O'Donovan - Digital Strategist at Creative B'stro