How to make your website mobile friendly

The iPhone, iPad and Android devices are taking over the world.  More and more people are hopping on the mobile touch interface device train every second.  Even both of my parents and in-laws own at least one iOS device!  They use them a ton and love them.  If you have a website, there's more than a good chance that it will be viewed by one of these popular mobile web devices.  Should you be worried about making sure your website works for them?... YES!  Do you need to pay someone to build you a mobile version of your website?… Maybe.
 

Mobile websites

Let's cover the second question first.  But before we get to that, we to make sure we understand what a mobile site IS.  Basically it's a simplified version of your regular website that's optimized for navigating and reading on a smaller screen such as on a smartphone.  The way it works is that all web browsers tell websites which flavor and version they are (Internet Explorer 7/8/9, Chrome, Firefox, Safari, etc.), and from that data Costco.com can tell an iPhone to show a mobile version of site at m.costco.com.  Take a look at screenshots I took with my iPhone 4 of both versions of Costco's website:

Which one do you like better?  For me, it's the full version of the site even though I have to zoom in to be able to read and tap on links.  Why?  Well for starters, I've used Costco.com so much that I know exactly how to quickly get to what I'm looking for.  On the mobile site it requires a LOT more navigating/tapping.  I'd rather "pinch to zoom" and tap on what I want on the full site, than tap and wait for the page to load, then tap again and wait for another page to load, then tap AGAIN…  you get the idea.  The user experience (called UX by web geeks) on mobile sites to me is completely thrown out the window for the sake of making everything fit on a tiny screen.  Both iPhones and Android phones - and even Windows Phone phones (I know, it's stupid but that's what their OS is called… blame Ballmer) - do a wonderful job of rendering REGULAR web pages and then easily allow you to double tap on blocks of text to be able to read them, as well as offering a quick reverse pinch to zoom in on any part of a web page.  Maybe I'm crazy, but I'd MUCH rather do that.

Plus, just looking at the two images, which one is more compelling and engaging to you?  For me it's definitely NOT the mobile version.  And for many sites that serve up a mobile version of their site, the graphics are dumbed down severely since the defacto standard way of laying out a mobile site is to offer more text and buttons than images.  Images grab the user's attention much more quickly and hold onto it longer than text or monochromatic buttons.  So that's two strikes against offering a mobile version of your website.

Strike three is a straightforward practical business decision: do you want to pay for your website developer (or spend your own time if you do your own sites) to build a SECOND website for you?  Or would you rather spend your time an money on other business needs?  I'm constantly weighing the amount of effort and cost is requires to accomplish something against the payoff of the end result.  Is it worth spending all that money and time on a summed down duplicate of your site when most people will be able, or even prefer to get what they need from your full site?  For the vast majority of us, probably not.

Now that said, if your target is mobile device users and you have a unique way to engage those users by offering a mobile site experience, then it probably is worth the extra effort to build a mobile site.  Personally, I think Costco missed the mark with their mobile site effort.

I will point out for those of you that feel they DO need a mobile website, many 3rd party template services like Rockettheme.com offer options for a mobile website within their paid templates for both WordPress and Joomla.  While it makes it easier to set a mobile site up, it does still take some effort to get it to look good and work well.  And the UX is definitely still not as good as the primary template's functionality.
 

Optimizing your website for mobile browsing

So since most of us will probably not bother with a mobile version of our site, we do need to make sure our websites work as flawlessly as possible on all of the most popular devices and browsers - which gets us back to the original question.  Here are a few practices to help ensure your website works well on mobile and desktop devices:

1) Use Flash content as little as possible.  Sometimes it's unavoidable with video, music or image galleries.  But if you're in an ecosystem like WordPress or Joomla, it's always possible to find a plugin that is HTML5 compatible - which is the easiest way to determine if it will work on iOS and Android.  Use services like YouTube and Vimeo to host your video since they both offer HTML5 compatible players.  Just make sure to enable "mobile viewing" in the video's settings.

2) Elements that move or change when you move your mouse's cursor over them will work differently on touch devices.  A drop-down menu will need to be tapped on to reveal the "onmouseover" elements.  For example, the navigation arrows that appear when you mouse over the slides at mixtusmedia.com which allow you to manually scroll between each slide, do not appear until after you click on the image link on my iPhone.  So mobile users don't have the option to manually browse the slides and are forced to wait for the automatic scrolling.  That's not a huge deal for our website, but if you're a photography site, the user's ability to manually navigate your images is probably more important.

3) As with any website, make sure your images are optimized for the web (e.g., don't load images straight off your 8 MP camera into your blog post).  Use the "save for web and mobile" function in any photo editing program like Pixelmator, Photoshop Elements, and Aviary.  Large un-optimized images are huge files which take a long time to download and render on a web page, especially when out and about on a cellular data connection.  If a website takes too long load on my phone, I give up and close the app and move on with being mobile.  :)

4) You might want to look for templates or ask your web designer to use a "fluid layout" (also called "responsive layout").  This refers to coding the website's width and fonts as relative percentages compared to fixed pixel values.  Since the millions of devices out there have different screen sizes, especially comparing an iMac to an iPhone, fonts and layout elements will be rendered differently in each browser for each screen size - mobile or desktop.  With "fluid layout" using percentages, your content will stretch or compress to better fit a wider variety of screen sizes when used properly.  One way to tell if your website has fluid layout is to grab the bottom right corner of your browser window on your computer and shrink it down by dragging up and to the left.  If the content and lines of text adjust to the size of the window, then your site is "fluid".  If scrollbars appear, then your site uses fixed pixel dimensions.  That said, fixed pixel layouts SHOULD render just fine on small screens, so don't stress this one too much.  Our website does not use a fluid layout, but I do use percentages for font sizes.

5) If you want to check what your website looks like on various devices, you can either download a User Agent Switcher plugin for either Chrome or Firefox, or if you use Safari you can simply activate the "Develop" menu in the Advanced Preferences pane, and choose the desired User Agent browser that you want to test (see HERE on how to add Android devices).  It's the next best thing to testing it on the physical devices.  I still try to load websites I've built when I'm at Best Buy or in the Apple Store on devices I don't own.

 

The mobile web is the future of how we will all primarily interact with internet content.  While you don't necessarily need to invest in a dedicated mobile website along side your primary site, it is always a good idea to make sure your website works on popular mobile devices like the iPhone.  It's only going to get more important as the days go by and as more and more people buy smartphones (aka, pocket computer) to replace their old mobile phones.

Do you have a mobile web device with a touchscreen?  If so, what are some websites that frustrate you while trying to browse on the go?  Conversely, what are some websites that do a good job in offering the same if not better user experience as on your home computer?

Did you find this blog helpful? Share it with your friends! And if you want more information like this that we only share through email, subscribe to our newsletter and get on the list.