If you've had a look at your analytics lately, you've no doubt noticed that mobile website views are on the rise. But, for some of us, it's happening slowly and really isn't worth spending thousands of dollars or dozens of hours enhancing the site for mobile.
There are two very quick things you can do to make a huge impact.
- The iPhone assumes your site is 980px wide. If your site is more narrow, it will not fill the width of the phone, and will be scaled down unnecessarily. Add the following line to your head:
<meta name="viewport" content="width=device-width" />
- There may be a few very noticeable elements that break the layout of the page – often due to font-size inconsistencies. There's really no need to create a separate CSS file (introducing another HTTP connection – see JavaScript optimization, noting that the same applies to CSS files). Just add a CSS media query to your existing CSS file:
@media only screen and
(min-device-width : 320px)
and (max-device-width : 480px) {
.intro { font-size: .75rem; }
}
Those two steps are the equivalent of painting a room in your home – the biggest bang for your buck.