August 5, 2011 Firebelly Marketing

5 Easy Ways To Optimize Your Website For Mobile

Firebelly iOS icon

Apple iOS icons are a professional touch.

Recently, HubSpot’s Website Grader began factoring mobile optimization in to its scores. After all, it’s about time for mobile platforms to be considered in the production of every website, as more people are owning smartphones. This doesn’t mean making a completely new version of the website built just for mobile. There are three essential steps, though, that should be followed during website production.

[fancyquote]The most important thing to do is test, test, test.[/fancyquote]While none of these steps are completely vital, it’s essential to realize how quickly mobile web traffic is growing and if a user doesn’t have a good experience viewing certain websites, they’ll be unlikely to stay or come back. The most important thing to do is test, test, test. If you’re not enjoying the mobile version of your website, why would anyone else?

Build CSS for Mobile

Websites tend to have multiple stylesheets already – screen, print, IE-only, etc. – and adding one more can’t hurt. Setting up a special CSS stylesheet for mobile-only. This allows webmasters to define how the website shows up on touch-screen devices, and allows it to be more streamlined and load faster for mobile devices. You can even define separate styles for iOS and non-iOS devices.

Futher reading: Optimizing Your Website For Mobile

Implement Meta Tags

If you think you have a lot of stylesheets, you probably have even more meta tags. But is “viewport” one of those? The meta viewport tag is simple – it defines if the user can scale a website larger or smaller, or if it should rotate along with the device. For example, if a website has been built to be the exact width and size of a mobile screen, it’s unlikely that the users will need to zoom in and out.

Further reading: Using The Viewport Tag

Don’t Hide The Non-Mobile Site

If the mobile version of the website differs significantly from the “full” version, include a link to go to the non-mobile site. Countless websites will force the user to a terrible mobile version that doesn’t provide the same functionality as the full version. This can especially be a pain on tablets, where the screen can be almost as big as a traditional laptop. Including a quick link to disable the mobile version is essential.

Use Apple iOS Icons

Click to enlarge

Most people aren’t even aware of this, but it’s a nice touch that adds a new level of detail to a web project. iOS allows any website to be added to the home screen springboard by simply clicking a button in the browser. If no icon is defined, then an icon is created using a screenshot of the page you’re on, which can result in an ugly icon. According to The Register and Net Applications, iOS devices make up for two-thirds of all mobile web browsing, so a small touch such as this could greatly benefit those users and make them more likely to come back.

Further reading: Apple Touch Icons

Un-Flash Your Website

Flash is fine for desktops and laptops, so keep it there. But, it won’t show up at all on iOS devices, and can slow down Android phones. An alternative needs to be considered for mobile phones. Either hide that Flash element altogether, or replace its functionality using HTML – especially if the functionality is vital. Almost all mobile browsers now support HTML5 and Javascript, which can work similarly to Flash elements if needed.

Contact Us



Join our mailing list to receive social media tips & news delivered to your inbox 2x a month.

Thanks! You have successfully subscribed.

Pin It on Pinterest