Copyblogger

How to Make Your Website Mobile Friendly (And Keep Your Readers Happy)

written by Shane Ketterman
posted on
Tweet
Share
Share
Pin
0 Shares
How to Make Your Website Mobile Friendly (And Keep Your Readers Happy)

Is your website content ready for mobile devices?

By the year 2013, forecasts predict that there will be 1.7 billion mobile internet users.

And it’s a pretty safe bet that at least a few of them are visiting your site, and seeing it on a screen that takes up just a few inches.

So what happens when readers feel cramped or have to work hard to navigate your site or read your content?

They leave.

Connection speed can also frustrate readers. A lot of the time, people are trying to access your site on slow cellular data connections. And despite the attempts by providers to increase capacity, it still feels “slow,� since the more they add, the more we consume.

You want both regular and new readers to have a great experience with your site, whether it’s at home on a nice large screen or while they are mobile and seeing it on a tiny device.

Brian Gardner of StudioPress summed it up pretty well when asked about mobile site design.

Many folks spend a lot of time working on the design of their site for modern browsers, but fail to realize the ever-increasing percentage of site visitors that come by way of mobile devices.

Not only is having a great site design important, you also need to prioritize usability and a quality user experience. That’s why we recommend using a plugin like WP Touch.

So how can you make sure your site is up to par for all those mobile readers out there?

Well, as luck would have it, there are some fairly easy things you can do to assure a more mobile-friendly site.

Here are some quick improvements you can make, starting today.

Install a mobile plugin

If you are using WordPress, you can transform your site into a mobile-friendly version in about 30 seconds with a simple plugin.

There are a lot of these plugins out there, but as Brian recommended, WP Touch is a great place to begin. It’s free, and you can customize it in several ways to best suit your site.

Learn more about WP Touch here.

Oh and one other thing about mobile versions of your site. Make sure you give readers the choice of viewing the standard site as well.

There are options in each plugin to do this. There are times when readers will want to view the full website, depending on their device and internet speed.

Note: before you install and activate any plugin, make sure your site has been properly backed up.

Create smart navigation

How’s your site navigation? Creating smart, thorough navigation for your website is a key aspect to making your site mobile friendly.

Make sure you offer readers clear and distinct ways to get to your most important content.

For example, do you see the red tabs along the top of this site? Those are examples of links to cornerstone content. Not only are they great ways to attract traffic, but they are perfect examples of clear navigation.

Write clear content

Now more than ever, you need to grab reader attention instantly.

When your site is being viewed on a much smaller screen, make sure you have compelling headlines that let the reader know she’s going to have a great experience reading this content.

Clear content that gets right to the point also assures readers can digest your material on their mobile devices, even while they’re distracted and busy.

Don’t use too many images

I’ve been guilty of this one. And I’ve also noticed in my analytics that when I include a lot of images in a particular article, I get less traffic reading it on mobile devices.

Lately, I have been limiting my use of images to one or two, and now my articles are getting read more by those with mobile devices.

Images are a great way to get a point across or break up text, but just try to imagine someone reading your content on a really slow connection with a tiny little screen. It might mean you don’t need that 20th image after all.

Notice that Copyblogger has, for most types of content, always had just one single, attention-getting image per post.

Don’t rely on Flash or Javascript

All arguments aside about the relevance of Flash, it is generally a safe bet that not all mobile devices will be able serve up either of these technologies.

Even if they do, it tends to be an extra step or two to actually view the content. The best practice is to stick with plain (X)HTML/CSS standards.

Practice good design

In the non-mobile web version of your site, it might be easier to get away with a few design problems that are far more visible and obvious in the mobile version.

Keep in mind the whitespace around paragraphs and words. If your content is so cramped that it makes readers physically uncomfortable, they might not hang out for very long.

Making your content scannable and breaking up long blocks of text is great for all readers, but even more so for mobile readers.

And cluttered, visually busy sites are hard enough to read on a large screen. Don’t ask mobile readers to go there!

So there are several ways you can begin making your website content more mobile friendly. Get started on a few of these and you will be way ahead of the competition.

(If you’re not sure where to start, the best payoff for the least amount of effort is probably getting a mobile plugin for WordPress like WP Touch.)

Have you recently turned your website mobile and noticed more readers? Fewer?

Share your experience with others in the comments below. And let us know your favorite tip for making your site more mobile friendly!

Reader Interactions

Previous article:
Next article:

Reader Comments (89)

  1. Wow, I’m first… That’s a first.

    Mobile access to your site is becoming more necessary than most people think. WP Touch is one of the best plugins for this I think. I have tried several others and have had problems with my flash video players with them.

    • Andrew –
      You are absolutely correct. I have been watching my own analytics and noticing that the percentage of “mobile” device readers far outweigh my desktop readers. And WP touch is also good because it is customizable and so far I’ve had no stability issues or complaints.

      • You know I read an article that said that the Mobile App industry will be bigger than the internet itself in 50 years. That is a huge statement but its starting to come true. The only thing that will never work well on mobiles is typing – they are all just too slow. Other than that you can do practically everything.

        One word of warning about WordPress plugins – sometimes they convert to iPhone compatible but disable your comments, Tweet buttons, etc. Problogger’s was doing it for a while.

        Tyrant

        • Hey Tyrant!

          love your stuff by the way so thanks for the comment and the heads up about the plugins.

          The mobile app industry is definitely growing at a huge clip. I can see why. I call apps “engines of innovation” because they are small, portable, and pretty darn amazing for what they can do.

          • Thanks Shane.

            Yeah it is going to be really interesting to see where they go. The one downfall with apps is the time-lag. Like, here in Australia it takes years before we get apps that the US has. Now that there are all new smart phones coming out its years before we see apps for them.

            Websites, on the other hand, are always available.

            Tyrant

  2. I like your post today, as it centers around technology. Being a former Tech Geek myself, I can appreciate these rare gems on Copy Blogger. I know! Copy Blogger must cater to general topics in marketing, blogging, etc. But an element of technology thrown in, is an added plus.

    It’s interesting that some elements you caution for mobile, has their caution equivalency in SEM (i.e. Search Engine Marketing, with components like Search Engine Optimization). I’m specifically referring to ,”don’t use too many images,” and, “don’t rely on flash or JavaScript.” To some degree, they do have a corresponding point in SEM.

    I know you can test a URL or blog in different browsers, via sites like Browser Shots. I would suspect they can perfect a website to simulate how a URL “might” look in a mobile device. If such a website exists, it would be very useful.

    Keep the technology guest posts flowing!

    Randy

    • Randy,

      Thank you for the comment. I appreciate it. Some of the cautions are general recommendations and for those folks who see in their analytics that their readers come to their site on very slow connections (it still occurs, believe it or not).

      But yeah, it’s going to be an interesting year because we have SEM + mobile + various mobile operating systems. And somehow the website owners have to juggle all this to keep their readers content!

  3. Thanks for the info. I’m allergic to technology speak and that can be difficult when running an online business, I’ll definitely get the WP Touch plugin for my blog.

    Thanks 🙂

    • Jax. You are more than welcome. I have to say that WP Touch is one you can use even if you are not Tech Savvy. And do their credit, they also provide some pretty good videos on getting it running.

  4. Thank you, thank you for pointing this out! Websites that aren’t mobile-friendly are a huge annoyance for those of us with smartphones. I’ve noticed that restaurants and bars seem to be among the worst offenders, because their sites tend to use lots of flash or javascript and have menus formatted as PDFs, which my BlackBerry can’t read. This is a huge mistake, though, because I often try to look up a restaurant’s website on the go and it’s disappointing when I can’t even read the menu!

    • Hi Susan. I too have noticed that and yes, restaurants are huge offenders. Oddly enough, these tips and especially the plugin really are not that intense in terms of time and labor. I think a lot of businesses which are brick and mortar don’t want to ruin their brand since the website is so representative of who they are.

      But in all seriousness when I go to one of their sites I am usually looking for 3 things. Phone number. Address. Menu. And all that can be done very nicely via some good mobile design.

  6. This is great advice! I’m going to install WP Touch now. A lot people in my field (Real Estate) will be left behind with old sites that cant be viewed on phones.

    • Perhaps Shane can explain this. When I looked at WP Touch, it alluded to the fact it functions as a theme. Am I reading too much into the WP Touch Plug-in? To you have to also replace the existing WordPress theme, or am I misunderstanding the plug-in functionality?

      • Randy.
        WP Touch stands on its own. When they mention “theme” they are referring to the fact that you can make it look various ways to your readers. This includes colors, icons, etc. I used the basic at first and then did some find tuning later. But no, you do not have to change your wordpress Theme to use it.

    • Thanks Todd!

      Yeah, definitely give it a look and test it out. When you get the plugin installed, you will notice that there are a ton of options. But I initially did the basics and then once I saw it was running well, I went back in and did some fine tuning.

      And I agree with you about Real Estate. I was very happy to see them at Blog World. If there is one area that could benefit from good content marketing online it is that one.

  7. Another way to make your blog,website and/or social network mobile friendly is by means of an app dedicated to your online content. Each piece of your online presence makes a great tab in an app dedicated to your blog or company. I make these for Bloggers and other celebrities/businesses with an online presence. Here is one that I did for Tim Ferriss’ Four Hour Work week: http://itunes.apple.com/us/app/4-hour-app/id399059231?mt=8

  9. Brian,

    I installed the WP Touch plug-in two days ago just to check it out. Haven’t had a chance to play around with any settings yet, but it is impressive how quickly & easily you can generate a “mobile friendly” version of your site!

    Jason

  11. Love it when a site is mobile friendly and I can pull up on my phone. I really *dislike* when a site isn’t and it freezes my Blackberry (yeah, I know, I know, “Get an iPhone!) 🙂

    Good write-up and recommendation!

    • Ricardo,

      Ha! Despite the media attention, iPhones do have issues too 😉

      But yeah I agree with you – it can really be agonizing especially when I enter into an area with a bad 3G connection.

  12. Great post, Shane. Thanks for this. Very cool about the WPtouch plugin. I am still somewhat new (using for about the past 5-6 months) to WordPress, but I keep learning stuff like this that makes me love it more all the time. Thanks again.

  13. You are more than welcome Ted. WordPress is one of the best platforms I’ve ever used. It took awhile before getting used to it but one thing I did was set up a test domain which is my “playground” so I can test out plugins, etc.

  14. Having mobilized several e-commerce sites already, I encourage anybody with the opportunity to do the same for their websites.

    “Less is more” never meant so much, after trimming away nested tags and Javascript that accumulated on my full-sized websites. The performance boost was so impressive that I transferred several optimizations on the mobile version back up to the full-sized version of the website.

  15. Shane,

    Thanks very much for bringing this up because it’s something I’ve been worrying about for a bit. I will definitely install WP Touch ASAP, because it sounds like low-hanging fruit. But I was wondering if you (or any other readers) might be able to provide just a hair of clarification regarding speed of loading. For example, currently my home page pulls up 10 previous posts, each of which has one image. Plus, I have sidebar widgets for subscribe form, some links and catagory/tag navigation, and each post has some social bookmarking glam too. Would this be considered “too busy” for reasonable loading on a mobile browser?

    (Not that I’m looking for free consultation, btw, 😉 Just a generic idea, if it’s possible.)

    Thanks so much!

    • Justin. I think rather than clutter I look at it as ease on the eyes from a small screen. Some sites could get away with no mobile plugins and be ok. I will say that with something like WPTouch, you get the advantage of it not loading so much in the background. But to still give a good reader experience I enabled it to show my thumbnail “featured images” and it still loads fast.

  16. Hey, Shane!

    Thank you, thank you, thank you! As someone who (as of now, anyway) has only been able to afford a cell phone with web access and not also a laptop or PC (and access), I chose the phone because I get so much from it as both a mini-laptop and cell phone. But I’ve spent SO much time telling bloggers and ezines and sales sites and… well… EVERYONE that they need to pay attention to how awful their sites are for phones that I finally gave up. (On the sites, not the phones.)

    Annie

  18. Mobile marketing will definitely begin to explode in 2011 that is why I am currently in the process of preparing my blog around this trend. I don’t want to get be left behind like I did with blogging and i want to be ahead of this trend.

    • Donny,
      That’s great to hear! I agree with you on the mobile trend. It’s definitely here to stay and 2011 it will be even more prominent.

  20. Thanks for the article, Shane!

    I’ve been visiting a lot of sites on my iPod touch. To be honest, I DISLIKE it when there is a separate mobile version. It makes you “learn” two different ways to get around your favorite sites. Often, on the mobile version, I can’t find what I’m looking for and end up leaving.

    At 960 pixels wide, the new iPhone/iPod touch screens are very capable of displaying webpages as most sites are designed for a width of 1024 pixels. I can see most sites clearly and then zoom in.

    I think the future of mobile computing will bring even better screens that are capable of displaying the same resolution as many desktop monitors.

    For these reasons, I’m not creating a separate version of my site for mobile users, I think they’d probably prefer the familiar look of the desktop version and simply be able to zoom in on the areas they want to read.

    • Thanks for the “other side of the coin” Tom!

      It comes down to your readers and their experience. If they don’t mind visiting a non-mobile version then ideally there is really no reason to use a plugin.

      The other suggestions, however, are good because even a site that has no “mobile” version should still follow best practice when it comes down to viewing it on tiny screens or cellular networks.

      • That’s true, Shane. One usability problem with my site is the drop-down menus – those aren’t too mobile-friendly. I guess it’s just a big compromise between being easily-readable and familiar navigation.

        To be honest, I have no idea whether my users like the fact that I don’t have a mobile version – it’s just what I like so I assume they will too 🙂

  22. What I say? Really, I should follow your instructions.

    I don’t see my analytics information too much but now I am going to check, how many visitors are visiting my blog on Mobile and yes, I am going to use this Plugin now.

    Really useful information.

  23. I use WP Touch on most of my 31 sites, but I think the real issue is what you mentioned – speed of site. I have a virtual server package with Knownhost – and it’s fast. Superfast. I pay about $35 per month. When I had 5 sites on it – it was blazing fast. Now that I have 30+ it’s slowing down and I need to up the RAM and maybe the entire plan soon so I can regain some of that speed.

    Visitors want to have an immediately interactive site – not wait for pages to load. With mobile I think it’s even more important. On my notebook computer and using Chrome browser I can open up 19 different tabs and wait for all the sites to load. Visitors are not likely to do that with their mobile browsers. I don’t believe it’s even possible yet.

    WP Touch works well, and yet it’s a completely different online experience for someone coming to my site via mobile versus computer with full screen. QUITE a different experience. I wish WP Touch could be more of a blend between the aesthetic GUI interface of my non-mobile site and the text-style that is the WP Touch experience.

    Cheers all…

    MF

  24. A very timely post. I was just thinking about this very thing only yesterday.

    I have a question though – for one of my sites I attract a lot of traffic via video, do the video aggregator sites like YouTube automatically reformat their sites for mobile devices?

    • Youtube actually takes another route. They use an app on mobile devices to access their content in a more “mobile friendly” way. You can access the full site as well but the app provides a much better experience. I think you will see more of this as time goes on because app development is increasing, not decreasing.

  26. Hi Shane,

    Thanks for this post. I’ve been using WP Touch for more than a year. My brother was totally fascinated after I installed it on his blog. It is such a pleasure to read blogs using this plug-in from my iPod Touch.

    There was one weird bug that I noticed. After installing the plugin, Facebook wasn’t able to pull RSS Feeds from my blog into FB Notes. Has this ever happened to you?

    Thanks
    Swarup

    • Hi Swarup,

      Thank you. I have not noticed that in WPTouch, but I think as BlogTyrant was mentioning some of these plugins can effect RSS feeds,etc.

      I am not 100% certain but since these mobile plugins are trying to reduce overhead and deliver the minimal, yet effective, set of features then perhaps that’s why not all RSS feeds work. On the other hand, it could be a bug 🙂

      I did a quick look and it seems there are some threads out there that point to it being a FB issue.

  27. Having a mobile friendly website these days is as critical as having the conventional website because smart phones and other mobile devices are fast outselling computers and laptops. More and more people are accessing the Internet via their smart phones and it is rightly said that they leave the website if they cannot access it on their mobile devices.

    Even if you are not running your website on WordPress using simple tweaks you can create mobile phone versions of your website very easily. Of course you can also host a separate, mobile version of your website on a .mobi domain.

    • Thanks StormDriver. Yeah, I agree with you and I will be looking forward to next year at this very same time to see the latest stats on sales and adoption of even newer mobile technologies.

      And thanks for the .mobi suggestion as well.

  28. I LOVE WPTouch – It makes my blog look so professional on an iPhone and Android (and hopefully other phones too, I have to find a user to test)! My only regret is that I can’t get the (free version of plugin) to THREAD the comments! I have seen some other blogs do it. I realize now there is a Pro version out so maybe that is the only way to get the threading?
    Right now, all comments appear in sequential order so it’s very hard to follow conversations….! And needless to add, threading works fine on my blog. Any ideas?

  29. Hi Shane,

    Great article only recently I had trouble viewing my website on my mobile but some how I figured it out or I added a mobile plug in. Not sure which one sorry but I actually read your article on my iPhone through RSS app. Great job. Your the first article i have seen online discussing mobile online viewing.

    Thanks
    Akil

    • Akil,
      Thank you. I appreciate the feedback. It is interesting because as some readers have pointed out, mobile sites are not as important for their own audience. There are sites such as Amazon where I actually prefer the non-mobile version but that is mostly due to the fact that they did not design their mobile version very well. Design and thought about what you are presenting to readers is just as important as having it be mobile in the first place.

  30. I have considered this to be very important for a long time, but I also see the mobile device industry working hard to meet developers in the middle. For example, the phone I use has an 800×400 pixel screen. That is not bad, considering just a couple years ago it was unheard of, and unimaginable to most people.

    Stylesheets are such a wonderful thing, and can do so much to help. Unfortunately, with so many billions of pages on the Internet, many will still be clumsy overstuffed globs of images and flash (and don’t expect that to work on an iProduct any time soon … or ever).

    Another possibility is that RSS feeds will become increasingly popular for mobile users, so I think it is important to keep an eye on those numbers. Making your feed friendly (think links) can be a nice bonus gift to your users.

    In any case, neglecting the mobile users is a mistake.

    • Mark,
      Thanks for the great insight – you bring up a great point about RSS. For those that do not want to “mobilize” their site, I think RSS will definitely be playing a larger role. Part of it is design and the other part is pure education. I certainly know what RSS is but once i’m out of my circle, people think I’m speaking a foreign language.

  31. This is very true. As time passes by, there are more people who are getting into using their cellphone or mobile phones to connect to the internet. Now you can connect to Twitter, Facebook and other websites through mobile phones. So this is really possible in the near future. That is why it is really important to make each website mobile friendly so that it won’t be lost in the technological that is happening right now.

    This is a great article. Thank you very much for sharing this. I am a big fan. Kzee

  33. My wordpress blog does not function on mobile. It seems that the articles are too long. But I will look at the plugin you recommend. I have installed another. Maybe it’ll help. Thank you!

  35. I’ve been trying to use these plug ins but they didn’t seem to work well of my Boston-based company. I think I’ll try it again because it seems to be a big hit with all of you!

  37. The need to connect via mobile is increasingly necessary. In Spain, every day and more people are asking Internet companies to the mobile program to access at any time.

    I think sooner or later all companies will be present in the mobile.

  38. This is really good post highlighting all the pron and cons of building website, one must keep these things in mind before designing the website.

  39. Here’s a funny fact. You’ve written a killer article, but as I write this on my iPod touch, I’ve got to say that Copyblogger isn’t too mobile-friendly itself, compared to Problogger, Chris Brogan, etc.

    Eh, Brian?
    (Shane, I’m not holding you responsible, heh.)

  40. Hi Shane,

    This is definitely a very interesting article. However, I do think it is important to consider options such as a dedicated app for the site. It’s been said that people are more likely to consume your content if you have an app icon on their homescreens.

    To that extent, services such as iSites.us allow people to create their own apps easily.

    Yamini

  41. A few great point in this article for sure. Plug-ins like WPTouch are alright but it doesn’t really give you the flexibility to really make your site look the way you would like it to. I would suggest Mobify which for anyone that can play with there own CSS it’s a breeze! I would definitely recommend you give it a try!

    Cheers

  43. This blog was a life safer. I have limited knowledge of programming and thought I was going to be stuck with one of these free ad supported app builders just to get a mobile friendly site (and to create a short cut to my site for promotion purposes). WP Touch was the perfect answer.

    The creator of WP Touch must of been thinking of me when he/she made it, it’s dummy proof. 🙂

  44. I have my own wordpress site . i want to make it to mobile site ,i have installed the WP-TOUCH plugin,but when i switch on the mobile theme in the device,mobile version is not coming for my site in the device.Can any one tell me how to do the mobile site.thanks for any help.

This article's comments are closed.