Mobile-First Website Design | The New Paradigm

 Published: Sep 20, 2024

Welcome to Our Blog.
Visit the Homepage for regular articles or Subscribe here to receive email updates on our new eBooks and Video Workshops.

Different devices

© Image by Depositphotos

When we started out with the website in 2018 the percentage of mobile users (i.e. those who use small mobile devices, particularly smartphones and tablets) was about 35% of the visits we received.

At the time, I found that already a lot, but imagine 2024: of the visitors we receive on our website, 78% use a smartphone and 3% a tablet, making a total of 81% mobile users. What a staggering difference! Of course, it was a gradual increase happening year after year, but the dynamics changed totally in just about 5 years’ time.

The result is that you need to design your website in a way that it’s mobile-first and mobile-friendly. But what does that mean?

Well, it means that your website needs to be “responsive,” as it’s called. This involves that your website scales well on all ranges of mobile devices with all their different screen sizes and different resolutions. Moreover, if someone zooms-in (or zooms-out) or turns their phone horizontally … the items on the website still needs to be clear, logically placed, well in focus, and sharp, and text needs to flow smoothly around images and videos, etc. no matter the level of zooming in or out.

Another thing is that speed and performance of the same website differ depending on using a desktop environment, phone, or tablet. So, you need to design in a way that your website runs fast on all types of platforms.

In any case, for us it meant that we needed to redesign our website, because in the beginning we had a desktop-first approach. It’s quite different to design for mobile, because a mobile device, compared to a desktop device (computer, notebook, or laptop), has less space to offer (as for screen size) in which to show things. This has all sorts of consequences, such as for your navigation menu, and for what’s actually “in sight” on a given moment when somebody enters your website page or scrolls a page.

On a desktop screen you have a good overview of a page. For instance, it means that you — as a website developer — don’t need to repeat things. On a mobile screen you actually need to repeat items (to remind people of what you offer, because items go out of sight), and in addition you also need to put everything you have on just one page. The latter is because the webpage people come on with a smartphone would often give them the feeling that “that is the whole website.”

What I mean is that on a desktop environment (apart from seeing more) you more easily access navigation menus (because the menu shows clearly, and with all topics available) and you quickly understand that the page is just “part” of the website, but on a mobile device it’s usually different. For instance, many website developers “hide” the menu because the items in it don’t fit well on a mobile screen together with the content you want to show.

However, we don’t follow the latter approach. By contrast, we’ve placed our menu items in full view on top of all our pages (we’ve chosen the topics we really want people to see), so that visitors can always see (on any of our pages) what we offer while it also makes everything that we find important on our site directly accessible. Hence, we don’t show the well-known menu symbol ( ☰ ), which one would need to tap on to open it and understand what the website offers.

Anyway, there are many other things to think about nowadays to make a website run and show well on smartphones and tablets. It’s just a totally different concept and approach compared to the desktop computer, and it’s quite some extra work, because you need to develop and test for multiple environments. But when it comes down to it and you are forced to make a design choice, you would always prioritize mobile users and the mobile experience because you’d rather serve 81% (smartphone + tablet users) of your visitors well than 19% (desktop devices including laptops and notebooks).

Paradoxically enough, we as developers work on desktops (well, actually laptops) because it’s really not handy — and often even impossible — to use a smartphone to write an article, do research, edit images, format a webpage, and maintain the technical aspects of the site, etc. All by all, the mobile-first world we live in nowadays has drastically changed website development and hence our work, and I feel we haven’t really seen the end of it yet.


Other Blog Posts
You can read more about us or about the website in Our Blog or Subscribe here to receive email updates on our new eBooks and Video Workshops.