Building Websites For Mobile Audiences

The majority of internet traffic now tends to use mobile devices, as our browsing habits evolve away from desktop computers and laptops towards portable devices. Most people take mobile-friendly websites for granted, as we swipe and scroll our way around ecommerce or media platforms. But what does it take to construct and launch a mobile-friendly website?

The answer to that question could fill a decent-sized book, and it depends in part on your particular industry or offering. A clothing retail website poses different challenges to a community forum or hobbyist’s blog. Even so, certain design elements are universal. These are Midphase’s recommendations for creating mobile-friendly websites, starting with a brilliantly simple suggestion:

1. Use a mobile-optimized template.

Rather than attempting to create efficient web code in HTML and CSS, why not modify an existing tried-and-tested template? Professional website themes are readily available, and Midphase’s own Website Builder offers 165 customizable templates which automatically rescale to suit each device’s screen size. Beginners can simply upload content and hit ‘publish’, while experts can edit and adjust each template to create a completely unique site, from fonts to menus.

2. Minimize loading times.

Even an optimized website template will become slow and unwieldy if it’s filled with swathes of text or large BMP graphics. And by large, we mean filesize, not full-screen. It’s possible to compress some image file sizes by 90% without significantly diminishing their appearance. Every WordPress plugin and cascading style sheet needs to justify its presence, otherwise, it’s an unnecessary drain on sluggish mobile bandwidth and limited device processing power. The same is true of auto-playing video files and background animations.

3. Stick to universal elements.

If a user device doesn’t recognize an obscure font, it will not display properly. A number of browsers will also struggle with Flash animations. Always try to upload website elements which will be universally recognized – any screen should display JPG images and Arial text, for example. Sans-serif fonts are easier to read when they’re reduced in size, while media files should be MP4s – ideally embedded from third-party servers like YouTube.

4. Keep navigation simple.

Subtle details often vanish on small screens, so tiny navigation buttons won’t suit people using their thumbs to move around a site on an iPhone. Many mobile templates automatically transform menu bars into drop-down hamburger menus on smaller screens. Some users don’t spot these horizontal lines and end up trapped on the landing page, but the trade-off is more

efficient usage of on-screen real estate. Don’t be tempted to create single-page websites; these load slowly, gobble up system resources, and may also confuse first-time visitors.

5. Avoid interstitial ads.

Online advertising is a crucial revenue-raiser, especially for digital media outlets. However, a mobile-friendly website design can easily be compromised by screen-filling interstitial or hover ads. Even worse, their content may be judged by search engines to be the actual page elements, contributing to poor SEO performance. Ads should never be intrusive – obscuring page content, auto-playing, or forcing a Close command to reveal what’s underneath, for example.

6. Beta-test the site on as many devices as possible.

From ebook readers to tablets and phablets, the list of internet-enabled mobile devices is constantly expanding. To ensure a mobile-friendly website lives up to its billing, test it on as many devices as possible. Visit every page, complete spoof ecommerce transactions, submit data via contact forms and generally probe the site’s durability. If fonts don’t display on Amazon Kindle e-readers, change them. If menus overlap on BlackBerry handsets, increase the spacing. Identifying problems at this stage could eliminate audience frustration later on.