Making Your Website Mobile - Part 1

By Mike Rohde

In Facebook's IPO statement filed in February 2012, they state, "We had more than 425 million mobile monthly active users in December 2011." That is a lot of people walking around staring into tiny black rectangles. This should also signal something very important to you as a web developer: it's in your very best interest to at least start thinking about, if not to start developing for, mobile sites; of course, that is, if you haven't already done so.

This is part one of a four-part series that will cover how to transform your website into a mobile site. Part two will cover media queries and a Joomla! extension for mobile devices. Part three will cover incorporating Google AdSense and analytics along with a discussion of mobile fonts. And part four will finish up with the best practices for coding in HTML5 and CSS3 for mobile sites.

Making a mobile version of your site makes a lot of sense these days. The number of mobile devices increases every day. More and more content is consumed through mobile devices. It's best to keep current and to learn some best practices when it comes time to developing code for mobile sites. It won't be easy though. Keeping a mobile site will likely double your workload in that you'll be keeping two sites up to date instead of one. Chances are though it will be very much worth your time and trouble. If you don't believe me, take a moment to check your website analytics. If you use Google Analytics you can easily check to see how much of your traffic is on a mobile device. Here's how: in the New Version of Google Analytics, scroll along the menu on the left and click Mobile from within the Audience section. Then click, Devices. Then, in the main window, you'll see a list of mobile devices that your visitors are using. For one of my sites, mobile devices represent 15% of my audience. To me, that's pretty significant considering I didn't have a mobile version of my site until just recently. Sure, my visitors could still access the content on a mobile device, but it's not very friendly. So, I set about to resolve that situation.

Here's the mobile site I made for my content site and here's the mobile site I made for a consulting firm.

Both mobile sites are very lean and cut to the important aspects of what the visitor needs. In the case of the content site, they want to read the articles. In the case of the consulting site, they most likely want contact information and a map for directions.

The remainder of this multi-part article will discuss how I made a simple HTML5 mobile site using a very small amount of JavaScript, small image files and CSS3 with no tables.

What Not to Do

Before we start discussing the best practices, let's run through a list of things not to do with a mobile site. There are several good reasons not to do these things because they will slow your mobile site down and if your visitor is on a bad 3G connection or has low-signal WiFi, then that can ruin the experience for them. That's exactly what you're trying to avoid. What you want is a lean, stripped-down, basic version of your main site that conveys your most important messages. To do that, you should avoid this:

  • Don't code in tables - you'll want one long vertical scrolling column
  • Don't use excessive JavaScript or PHP or any other code - you'll want to use good ole fashioned HTML - and plus, coding for a mobile site will allow you to use some of your HTML5 skills
  • Don't use large images that can take forever to load - you can use small images that leave a small footprint
  • Don't try and recreate the main site - your mobile site should contain only the most important content that your visitors need access to

Things to Think About Before You Start Coding

Just like when you designed and coded your main site, you'll need to sit down and plan how you're going to execute the mobile site. You'll want to think about things like if you want to use media queries or a redirect or maybe neither. You'll want to gather code snippets for your analytics tool and you'll want to decide if you want to incorporate advertising. Another item to consider is if you want to use custom fonts. Finally, you'll want to think about how you are going to preview and test your mobile site. The following several sections of this article will cover these topics. Then we'll dive into the CSS3 and the HTML5.



Make a Comment

Loading Comments...

  • Web Development Newsletter Signup

    Invalid email
    You have successfuly registered to our newsletter.
  •  
  •  
  •  
Thanks for your registration, follow us on our social networks to keep up-to-date