Mobile first websites

The web development industry is continually evolving. Most of the time, these evolutions are small permutations on a previous best practice or method of application.

But, every once in a while, something happens which causes every web development agency to seriously rethink how they handle projects. One of the most significant examples of such a change recently is the meteoric rise of the mobile phone. In 2009, only 0.7% of all global web pages were served on mobile phones.  Compare this to Q3 2019, where 51% of worldwide website visits were via mobile devices! This increase has led to a ‘mobile-first’ approach to development.

So, what exactly is the mobile-first approach? Well, it’s the theory (of sorts) that as more and more of the world uses mobile devices to settle pub disputes over whether Neil Armstrong was indeed the first man on the moon, web developers should ‘follow the crowd’ and develop for the mobile devices first. In contrast to traditional development, where you would develop for desktop sizes first. With this paradigm shift comes a magical technique called the Media Query.

Media Queries are a way to define a device size (usually width) and then change the layout and feel of a website if the device is below that size. For example, where a smartphone screen has less horizontal room than a standard desktop, the typical 50/50 image left, text right layout is going to look a little cramped. With a media query, we can tell the browser to stack that section on smaller devices.

But Media Queries aren’t the only thing mobile devices have caused to change. The famous ‘burger navigation’ button is a direct response to small screens not being big enough to display most standard navigations appealingly. Incidentally, some desktop websites have now adopted the burger navigation for a sleeker design.

Fixed headers are also a direct result of more of the planet using a mobile device for their daily surfing. Scrolling through long web pages can feel like an arduous task. So, having to then navigate back up to the top to access a different page is something that most people won’t do, resulting in users dropping off the site at that stage. The solution to this was to scroll the header (and subsequently the navigation) with you for easier access.

There is a myriad of other things which the arrival of mobile devices has changed about the web development landscape that we don’t have time to discuss in this blog. One thing that it’s safe to say, however, is that the mobile-first approach is here to stay! It’s not a UI/UX fad that is going to pass. And, with over half the world’s internet usage being handled through a mobile device; creating websites in a mobile-first fashion is something that more and more developers are going to adopt.

By: Mike Earl