The Mobile First Strategy to Web Design & Development

 Mobile first design and developmentHaving been in web design and development for over a decade now, I’ve seen trends come and go – pretty much like fashion. In that time I’ve also seen several iterative evolutions, that rolled out like logical steps. And during that time I’ve also seen more seismic shifts take place; shifts that go beyond aesthetic differences. You could call these game-changing turning points. Of these shifts, the one that stands out the most is probably the mobile revolution.

If you think about it, a few shorts years ago the “mobile” conversation didn’t even really exist. Why? Because the websites you pulled up on your phone – the phones that had the capability to do so that is – looked like scrunched down versions of the desktop sites. At that point no one really imagined that web access on mobile devices would grow so much that it would completely change how web designers and web developers approach the process. No, back then you had to stretch your screen just to be able to make legible the text you were seeing.

And the funny thing is, at the time we thought the whole stretchable thing was so cool and trendy that no one really gave it a second thought. Nobody thought then “Hey, is this a good way to actually view a website on a small screen?” Of course, it wasn’t ideal. But everything was so new that no one really questioned it – at first.

And then we moved into a period when mobile finally became a consideration – even if it was effectively as an afterthought. In this middle stage you began to see so called “responsive” website and web templates begin to roll out. And what this basically meant was that the site would render uniquely when viewed on a small screen. Put plainly, the content was delivered in vertical stacks – one on top of the other, so as to finally rid the user of the need to swipe left or right, or stretch their screen to even see what was there.

I know a lot of web designers and developers who assumed we’d reached a new stasis point in this middle stage. But, of course, looking back that now seems remarkably short-sighted. And why? Well, simply put, because now we’ve evolved to a web marketplace that is run from a “mobile-first” philosophy. Yes, not just “mobile-accessible”; not even just “mobile responsive”, but actually “mobile first”.

What does that mean, in the real world of development. Well, it means that you start the process with the mobile marketplace in mind. And then when that’s been planned for – and only then! – you envision what to do with the expanded real estate made available to you on tablets, laptops, desktops, etc. Yes, that’s right. Now it’s really the desktop environment that is the afterthought. Oh, how things have changed!

But why has this revolution taken place? Did designers and developers just one day fall in love with their iPhones and Android devices? No. What happened, sometime between 2014 and 2015, was that – globally – mobile devices began to outpace desktops in terms of Web access. And of course, this shouldn’t be surprising. After all, in a continent like Africa, for instance, many people’s ONLY way to connect to the Web is via a phone. We westerners might have migrated from desktops, to laptops, to smart phones. But in other parts of the world the one and only access point has been phones.

So how has this mobile revolution affected web design and development. Well, many things have changed. Take menus, for example. Now select screens not only show up on your phones – replacing the traditional left to right horizontal menu – typically assigned to the space right below your logo – but we’re now seeing even desktop sites utilizing these same select menus to let users navigate through a site.

Now at first this came as a shock to the system. Often this minimalistic approach leads to huge open spaces in the desktop screen environment. But of course this trend has moved – hand in hand – with the trend towards simplicity and minimalism in general. In fact those two aspects have created a re-enforcing loop of sorts when it comes to web design.

After all, design became more minimalist at first for very practical reasons. When you have limited real estate, features like gradient shading, textures, depth, etc., all begin to seem not only unnecessary, but even distracting.

And as designers responded to this pragmatically, by simplifying their design schemes, these more minimalistic designs began to trend as the aesthetic preference, by their own right. You see how that worked? It’s evolved into a kind of circular reasoning!

Now, will the design schemes eventually trend away from clean/simple/minimal? Yes, of course. All trends come and go. However, whatever emerges in its place will still need to address the practical considerations of the mobile-first landscape. Because, believe me, that’s not going anywhere anytime soon.

Ultimately we would do well to remember what Steve Jobs said regarding design. From his perspective – and essential to the approach of Apple in general – design is as much about what something “does” as what it looks like. So true. And that’s why design and development and technological evolution will always have this reflectively influential relationship.

And this is something I’ve realized is essential for the healthy perspective of any world-class web designer/developer. Simply put, to be an effective designer or developer you must also have your eye to the horizon of our technological tomorrow.

Posted in Musings, Web Design, Web Development Tagged with: , , , , , ,