Mobile Design is Important and Here Are the Mistakes to Avoid

You’ve probably heard how important it is to optimize your business site for mobile. If you don’t create a mobile version of your site, you’re bound to lose a huge chunk of potential customers – over one half of all Americans owned a cell phone in 2013, according to the Pew Research Center. Mobile technology is so new, however, that many entrepreneurs miss the mark when it comes to designing an effective mobile site. Here are five pitfalls to avoid:

Cramming a Full-Screen Layout Onto a Smartphone Screen

Image via Flickr Joi
Image via Flickr Joi

Laptop and desktop screens range from 11 to 30 inches in width, sometimes more. Smartphone and tablet screens, by contrast, run the gamut from 2 to 10 inches. Your site’s layout might look gorgeous on a PC screen, but if you don’t shrink it down for a smaller smartphone screen, your users will quickly get frustrated with you. What could go wrong? Well, columns might look misaligned, buttons might be too small for human fingers, and your all-important contact information could get buried beneath the entire garbled mess.

Some people don’t realize that their desktop brainchild won’t automatically convert to an accessible layout on a mobile screen. Others know it, but don’t know how to fix the problem. Google recommends that business owners select one of these three options:

  • Have a separate URL for mobile and desktop.
  • Assign different HTML to each URL, depending on which type of device it will service.
  • Use the same HTML for all devices, but differentiate using Cascading Style Sheets (CSS).

Overstuffing Your Mobile Site

Paging through screen after screen of literature on a smartphone can get tedious, especially if the display is small. Even if you feel the need to saturate your desktop site with oodles information, you’d be wise to take a bare bones approach with your mobile site. With phones becoming more affordable, more and more potential customers will be reaching out to you via smartphone.

If you don’t pare down your mobile site, customers could get overwhelmed, bored, or frustrated by your wordiness on their tiny smartphone screens. You might want to consider adopting the same approach as digital expert Luke Wroblewski, author of the hit e-book “Mobile First:” design your mobile website before you design your desktop website. It’s easier to start small and expand later, according to Wroblewski.

Forcing Readers to Wait for Heavy Image Files

Colorful graphics and detailed images make your desktop site shine, but they slow down the load time of your mobile site. On-the-go customers quickly grow impatient with sites that takes too long to load.

Digital sales and marketing expert Ted Verani recommends that mobile images be optimized at the server level for the best response times. Site operators can choose to use “server-side device detection and image optimization technology,” according to Verani.

Importing Too Many Scripts

Heavy images aren’t the only reason users experience long load times. Many mobile sites today use mobile app frameworks that import multiple scripts at once to get the job done. These software frameworks offer numerous advantages to business owners. The problem is, each script within a framework adds milliseconds to the load time.

If you use frameworks and are concerned about load time, evaluate whether you really need a complex framework for your mobile site. If you do, consider synthesizing your scripts to cut load time.

Ignoring Responsive Design

What is responsive design? If you can’t answer that question, you’re doing yourself – and your mobile customers – a disservice.

Google recommends that all websites use responsive design in their formatting. In broad terms, responsive design allows your site’s content to get the same bang for its buck no matter where readers view it – laptop, desktop, tablet, phone.

Mobile design is important, but it’s easy to make mistakes in its implementation. Ask yourself these questions: Have I thought about how potential customers will use my site? Does my site emphasize content and minimize graphics?Have I adjusted the HTML so my content will adapt to any screen? Is the site’s purpose crystal clear and laser-focused? If you answered yes to these questions, you are well on your way to creating an effective mobile site.