Optimizing Your Website for Mobile

Now that we all have smartphones, tablets, and other mobile devices capable of accessing the internet, fewer people than ever will be viewing the full desktop version of your website. Having a website that can adapt to the mobile format is an essential requirement for any modern business and the rise of HTML 5 has made building adaptable websites easier than ever before.

There are a number of simple design principles that you can apply to the design of your website, which will make browsing it a much more streamlined and enjoyable experience when on a mobile device.

Use Empty Space

It used to be the case that web designers would have to design and build two distinct versions of their website, one for mobile and one for desktop. Now, however, we can use coding to design web pages that will rearrange themselves according to the device they are being viewed on.

It is, therefore, important that the full desktop version of your site doesn’t include a large number of unnecessary elements that cause clutter. Cluttered websites are much more difficult to rearrange for smaller devices. Instead, you should embrace the use of empty space in your design. You don’t need every pixel of your website to be doing something! Have a look at this page from DIY formula, both on desktop and mobile, for an example or a page that can effectively rearrange itself to suit the device.

Go Light on Multimedia

It is generally good web design practice to be as restrained as possible. Unnecessary design elements make your page ‘heavier’, meaning it requires more data to load for the user. Much of the browsing from mobile devices will occur over mobile data networks rather than Wi-Fi and therefore users will have a limited data allowance.

Sometimes, the use of images and video is unavoidable. No one is suggesting that your website should consist purely of text, but you will find that by forcing yourself to use media elements sparingly you will encourage smarter, more considered design choices that your audience will be grateful for.

Scroll Triggers

Scroll triggers are an excellent way of optimizing a website. As the name suggests, a scroll trigger is activated when the user scrolls down to a certain position on the page. This means that you can prevent the more data-intensive elements of your page from loading unless they are needed.

Similarly, you can use scroll triggers to avoid having video or audio automatically playing when the user loads a page. Instead, they are triggered by the user bringing them into view. Many viewers find it obtrusive and annoying to have video or audio automatically play whether they want it to or not.

Search Engine Optimization

Search engine optimization (SEO) is one of the most important tools at the disposal of the modern web developer. SEO is what determines how high your site appears in search results list when users search for a particular word or phrase.

The nature of web design has changed a lot in recent times, but the tips above will help you bring your website well and truly into the twenty-first century.

Previous post

Old Technology in a New Package: Should You Buy the SNES Classic Edition?

Next post

A Look at How Shared Web Hosting Works



Ive been blogging now for 5 years on various sites for the love of knowledge share. I decided to start my own blog a few years back to share everything from tech to business news. Follow me on twitter for more.