5 Dead-Easy Things to do for a Better Mobile Website

There are many things you can do to make your website better for mobile (CSS3, SVG, Web fonts, CSS and JS minification).

Here are 5 dead-easy things (each one should take no more than 10 minutes) that you can do today that will have an impact.

5. Let your “desktop” site be viewable on mobile

Don’t isolate mobile users to a special mobile version. There’s nothing wrong with having a mobile version and you may even want to send a mobile user to it by default, but make it easy to let them get back to your “desktop” site. Even if it isn’t responsive.

4. Optimize your images

Most images from graphics apps have a little bit of bloat (and some have a lot). Running them through an image optimization process (like ImageOptim) slims them down without losing any quality. A smaller payload makes for a faster, better mobile (and desktop) experience.

3. Use a retina image for your logo

Making a retina image requires having a high-resolution version which you should definitely have for your logo. Having a retina logo means it will look clean and crisp across all devices.

To make an easy retina version, just double the dimensions in the actual image and halve them again in the markup. For instance, if the logo on your site is 100×50, just make it 200×100 in your graphics app and then width="100" height="50" in your markup.

A great (if a bit orange) resource for retina images is Retinafy your web sites & apps by Thomas Fuchs.

2. Form elements where you collect email should be type="email"

I wrote about this previously – mobile devices present a better keyboard for email.

1. Test your site on at least one mobile device

Everyone has some kind of access to a mobile device. Just bring up your site and take a look around – make sure that the experience is decent. If you find an issue, make a note of it.