Confused About Mobile-Friendly Websites? The 6 Features That Really Matter.

When the iPhone was first released, one of its many innovative features was that it could display a full-sized website that had been designed for a desktop monitor, and shrink it down to the size of the phone’s screen, without breaking the design or layout. Of course the text at that level was generally too small to read, so one was required to zoom in to the desired portion of the page to read text or click links. This isn’t very mobile-friendly, but this is how most websites are still experienced on mobile phones today. Thankfully, things are rapidly evolving.

It has now become quite common for popular websites to offer mobile visitors a separate mobile version of their site (e.g. mobile.nytimes.com). Google has advocated for this in the past. To be clear, these website will automatically direct mobile visitors to the mobile version of the website, so there is no need for mobile users to type in a different URL from what desktop users type in. It is also quite common to offer a choice on the bottom of each page to mobile users to revert to the non-mobile version of the site, just in case that is what they are familiar with and want to continue using.

So what’s different about these mobile sites anyhow?  What makes them mobile-friendly? Here are 6 important considerations:

  1. No Zooming Required: Content is designed to automatically fit the width of mobile devices so there is no scrolling left and right needed.
  2. Quick Loading Time: Minimized file sizes to keep site loading time to a minimum. Mobile Internet speeds can still be fairly slow, and many people have to pay for each kilobyte of data they download.
  3. Simplified Navigation: Wide navigation bars just don’t fit on small screens. It’s better to stack navigation links vertically or store them in a drop-down list.
  4. Optimized for Touch: Large buttons are best for thumbs and it’s critical that the site doesn’t implement anything that depends on a mouse cursor hovering above something. On touch-based devices, there is no mouse cursor.
  5. No Flash: Adobe has discontinued support for Flash on mobile devices. Instead of using Flash, mobile-friendly websites use HTML5 and CSS3 techniques.
  6. Easy Contact Information: Making it easy for visitors to find and tap your phone number, email address, and street address makes it easier for them to engage you while out and about.

Recently, an alternative approach to providing a mobile-friendly website has gained tremendous popularity amongst web designers. It’s called Responsive Design and is based on a concept called One Web. A longer form of it goes like this: “One Web. One site. Every User. Every Device.” It encourages the production of single websites that can morph their structure to suit both desktop screens and mobile devices equally well. This means that instead of having one domain name for your desktop website (yoursite.com) and another for your mobile website (mobile.yoursite.com), there is only yoursite.com, and the layout of that site changes depending on what kind of device is being used to access it.  If you visit http://bostonglobe.com/ on your desktop computer, try resizing your browser window to make it as small as an iPhone screen and you’ll see what I mean.

This method to create a mobile-friendly site is nice because it will modify the site’s layout in real-time to fit the user’s browser size perfectly. That means it is useful not only for mobile users, but also desktop users, who might have their browser window set to any number of sizes. The major challenge with this method, however, is keeping file sizes and loading times to a minimum for mobile users. This is because large content designed for large screens is still downloaded to mobile devices with small screens, and then either hidden or re-sized. This may or may not be a real problem, depending on the type and size of the website being designed. If it looks like it could make for a slow experience for mobile users, then Responsive Design may not be the best solution for the project, and a separate mobile site can be developed instead to ensures the speediest loading times possible.

Regardless of the approach taken, the goals remain the same. Give all users an efficient, intuitive experience, no matter what device they are using.