(The audio for this podcast is no longer available, but it is summarized below.)

Mobile phones have overtaken desktop computers as the primary means of accessing information on the Internet. In fact, according to ComScore, an internet research firm, mobile Internet usage has surpassed desktop usage by a significant margin— 51 percent of Internet time is spent on a mobile device, compared to 42 percent on desktops. In this podcast, we’ll take a quick look at the history of web design for mobile, and discuss ways you can adapt your existing website to be more mobile-friendly.

The History of Mobile Web Design

Techniques for handling mobile and tablet Internet usage have come a long way over the past several years. Designers and web developers now have many effective tools and techniques for dealing with the challenge, including responsive design (where the website “responds” to the device and renders in the optimal size and design). It wasn’t always that way, though. When the mobile Internet initially gained popularity, there were two schools of thought among web designers.

First School of Thought

Leave the website alone. With limited knowledge or tools regarding mobile design, this school of thought held that websites designed for desktop computers would work well enough for mobile as they were. Besides, viewing the web on such a small screen would have to be a passing phase, right?

We now know that the mobile Internet is here to stay, and is continuing to grow. Recent statistics show that 64% of American adults own smartphones and 45% own tablets.

Second School of Thought

Create a separate version of your site designed for mobile. This idea was also flawed, as the website was drastically trimmed down. Content that was deemed unnecessary for a mobile device was removed, and these decisions were made by the site owner or designer, rather than the user. The result was that website owners had two separate sites to update, and often mobile users were unable to find the desired information.

Responsive Design

Today, we have responsive design. This technique is not only user-friendly, it’s future-friendly. With responsive design, there is no omission or screening of content, and there is only one version of the site. The design of the website is coded in a flexible manner, so that content is shifted and molded to adapt to the device being used. Design decisions are based on the content, rather than existing screen sizes, making it easy for the website to transition to new devices, which are constantly being developed.

Making a Non-Responsive Site More Mobile-Friendly

Ultimately, responsive design is our best option. However, not everyone has the means to move their website to a fully responsive design right away. What can we do to help the mobile user without a complete design overhaul?

Content

Having to sift through too much irrelevant content can make a website difficult to use on a mobile device. It may be time to re-evaluate your website content and make some cuts. Ask yourself:

• Is this content relevant or necessary for my user?
• Can this be said or displayed in a more simplified manner?

Think about what the user is seeking from you, and how you can best deliver it to them. Then content can be edited for both mobile and desktop users, making for a better user experience overall.

A possible example of unnecessary content could be a rotating image slider at the top of a page. If it is not adding any value to the site, then it is simply a luxury item and is could also be slowing down the loading process for mobile users.

Load Time

Load time is an important aspect of making your website mobile-friendly. Often times users will be trying to access information on poor Internet connections. Some simple ways to improve connection speeds on mobile devices are:

• Decrease the number of images
• Eliminate data-heavy animations
• Replace images with stylized text

Retina-display

Speaking on the subject of images, Apple and other companies now use retina-display on many of their devices. What is retina-display, exactly, and what does it mean for images on the web?

Retina-display involves understanding DPI (dots per inch), which is a unit of measurement for images. For example, a print image is usually 300 DPI, which means for every inch, there are 300 dots. Web images traditionally stand at 72 DPI.

Retina-display was created with the intent of presenting a much crisper, cleaner look to on-screen images. Traditional, 72 DPI images will oftentimes appear pixelated and fuzzy on a retina device. This is solved by increasing the dimensional size of your images. But this may negatively affect your load speeds, so images should be used with care.

Readable Copy

Even more important than having crisp images and nice design is having readable copy. What are some tips for making textual copy more readable on handheld devices?

• Increase your font size. Studies show that the ideal font size for web text is much larger than what was used in the past. It may look strange because we aren’t used to it, but using a font size of at least 14-16px will significantly improve the readability of your text.
• Text color plays an important role as well. There needs to be sufficient contrast between the text and background so the user can read without straining their eyes.

User interaction

Now that we’ve covered images and text, we must address the user interaction element. Can users perform necessary and available tasks on your site, such as submit a form, or navigate from page to page?

Links

Have you ever tried to click a link on an older site? It can be frustrating. The links are often too small and too close to one another, making it difficult to access different pages of the site. The optimal size for links on a touchscreen is at least 40-45 pixels tall. It’s also important to use significant spacing around links, to help users avoid inadvertently clicking the wrong one. Again, it may look strange but the user will appreciate the convenience.

Navigation Menu

When it comes to the navigation menu, try not to include too many items. We have to remember that the viewing area is much smaller on mobile and tablet devices. Drop-down menus, especially multi-level ones, are difficult to use on touch screens, so pay close attention to the functionality of these and test them on several devices to ensure that they are working properly.

Forms

Another interactive element on many websites is the form. Mobile devices have already taken some steps toward improving form functions. For example — if coded properly, a telephone form field can pull up a separate keyboard, showing only the symbols necessary for entering a telephone number.

Additional Tips

Remember, if you want to successfully support your mobile audience, keep things simple. More isn’t always better. Make sure what you are putting out there is serving a purpose and meeting the overall goals of the website and the user.

If you are using a separate mobile site, give users the option to switch to the desktop version, ensuring the availability of any information or tasks that aren’t present in the mobile version.

Finally, test your site on as many different devices as possible, not just the most popular or common. Your site needs to function properly on an array of mobile technology.