How (And Why) to Make Your Website Mobile-Friendly

Are you guilty of using your phone while driving, checking Facebook while walking down the street, or comparing the price of a potential purchase at the store on your smartphone while still in the store? You’re not alone. The use of the mobile Web is skyrocketing as more websites, more blogs, and more commerce sites are developing their websites in a way that is friendly for smartphone users. Simple changes to a theme or adding in geolocation features allow users to easily find the nearest store, read a blog while on-the-go, or easily make a purchase right from their phone — without having to wait until they get to their desktop at home.

In fact, one of the latest studies by the Pew Internet & American Life Project revealed that more than half of adult cellphone owners used their cellphones while they were in a store during the 2011 holiday season to seek help with purchasing decisions . During the holiday shopping season, Pew found that 24% of cell owners used their phone to look up reviews of a product online while they were in a store, and 25% of adult cell owners used their phones to look up the price of a product online while they were in a store, to see if they could get a better price somewhere else. None of this would have been possible without mobile-friendly websites to display the product reviews and competitive prices.

Why You Need a Mobile-Friendly Website

If you own your own blog, website, or even online store, it is critical to offer a mobile-friendly version of your site. Seattle-based developer Andrew Woods says that “all design should take into account mobile,” especially considering the data that the majority of both content and retail consumers are using mobile on-the-go. Andrew points out that many sites offer mobile-friendly versions of sites, including Facebook, which directs mobile users to m.Facebook.com for easier access when used with a mobile browser (as opposed to the native app).

Unfortunately, Andrew explains that these are “two completely different sites to manage and maintain.” He continues that this is similar to the history of accessibility sites, when people used to make text-only sites. Andrew says that “what happened there is that the text-only version didn’t get updated with the rest of the website.” Now, he says the remedy is a trend called “responsive Web design,” where you can serve both sites with different style sheets with same content. Andrew says that blog and website owners “need to think about the things that their readers and customers do on mobile devices, such as consume content and search for things nearby, and take this into account when designing [a] website.” It’s critical to consider how your customers will be accessing your website, blog, or store from their smartphones.

If you’re not sure you need a mobile-friendly version of your website, a quick way to test your website is by opening it up in your phone and testing its usability. A red flag for any website, however, is if it is designed with a fixed width. If you can drag the corner of your browser and the layout doesn’t flex, then your mobile customers will likely encounter problems using your website or blog.

How to Make a Mobile-Friendly Website Yourself

When you’re ready to create a mobile-friendly version of your website, Andrew says to “first think about what kind of business you are.” If you’re a store, you may want to integrate geolocation, whereas a blog may need to be more concerned with making content more easy to read. For blogs, Andrew suggests that a great starting point is using something like the WPtouch plugin that can transform your site into a mobile-friendly version without much heavy lifting. However, this will create a very generic mobile version of your website, and Andrew suggests that brands consider other options to create a unique mobile version to convey their unique brand image.

If you are a blogger with a bit of technical (read: HTML/CSS) skill, Andrew suggests an alternative that should only take an hour or two that’ll give you a good starting point. You can create a simplified, one column mobile version from your stylesheets. To do this, we’ll assume your CSS file is named “style.css.” In the head of the HTML document, add a meta viewport tag to use the device width. Then, copy style.css and rename the copy “desktop.css.” Then, edit style.css and remove any layout aspects like floats and absolute and relative positioning. At the bottom of style.css, add a media query that imports the desktop.css stylesheet. The conditional of the media query should check the minimum width of the browser window user. Many blogs are designed using fixed grids, and while this looks good on large screens, it can make it difficult to read a blog in mobile browsers. Creating a one column layout using this stylesheet resolves the problem.

Of course, if that sounds a bit complex, you may want to give your blog or website developer a call and ask them to help design a mobile-friendly theme. Andrew says that unless you can do it yourself, “this is really the best thing you can do, because nothing is going to be the best solution out of the box.” He also recommends to “talk to your designer about modifying a theme to be best suited for your business.” If you find that your website designer is not fluent in mobile design, consider asking friends and others in the industry for a recommendation for a designer who can help you. LinkedIn is a also a great repository for designers with specialized skills.

Have you been looking for a great way to make your blog or website mobile-friendly, or have you recently made a mobile-friendly version of your site? Feel free to share your favorite solutions in the comments below.

Article Written by

  • http://lance.compulsivetech.biz/ Lance Seidman

    To those who DO NOT run WordPress, you can make your site more mobile friendly by setting up a separate CSS file. Normally you’d use style.css in the (E.g.) of your site but to make your site mobile aware without heavy duty screen detection, you can simply type “” as this will scale your site to be more mobile friendly without heavy duty re-programming of your website and no need for a new Stylesheet.

    What if your website has a lot of DIV’s and what not? Well, if your trying to really make it more mobile friendly, you can always slide in a “<div style" with something similar to: "margin-left:auto; margin-right:auto; width: 100%;".

    I hope this helps you guys, if you have any more questions about making your site go Mobile without using a CMS (Content Management System; E.g. WordPress, Post/PHP Nuke, etc…), please leave a message here and I will try to help.

    • http://lance.compulsivetech.biz/ Lance Seidman

      I am sorry guys, it seems that it won’t accept some of my coding properly… Hopefully you guys don’t get upset, but I posted the proper coding on Pastebin here:
      http://pastebin.com/0byY5hMZ

  • Eric Santos

    Thank you for this. I’ll utilize it. :)

    • http://lance.compulsivetech.biz/ Lance Seidman

      Awesome, hope it works out for you :)

  • Me

    I want lockergnome to be mobile friendly.