I have been designing websites for over 15 years now. Typically, when I begin a web design project, the default has always been to start with the desktop view in mind and work the design to look beautiful on mobile devices once it laid out great and looked magnificent on a desktop or laptop screen.

The mobile design aspect has always been secondary to the layout on a full-size screen. When responsive design became ultra-popular, I still worked my way down to mobile in the end, rather than starting with that aspect in mind first.

I noticed that a lot of web designers in our industry are now beginning with a mobile-first design and designing the project to look beautiful on mobile first. Once they have laid out the mobile version, they proceed to bring out the beauty of the web project on the large screen last.

1.2 Billion Mobile Web Users Currently Active In The World

If you think that mobile web design is a fad or a trend, you’ll be quite surprised with these statistics I recently discovered. According to recent statistics online, mobile design and mobile marketing is the future and the future is here. Any web designer worth their weight knows that the key to future success is optimizing their web project to the mobile market and for the mobile user. The following statistics will give you an idea of how amazingly huge mobile first design is becoming and why:

• Verizon Wireless recently did a survey with their mobile customers and claims that 90% of Americans bring their mobile device to the bathroom with them. People are so attached to their mobile devices that they are bringing them with them everywhere they go. I am guilty of this statistic myself! As I write this, I am thinking of my last trip to the porcelain throne and yes, I had my iPhone with me for the journey. Designing a website with the mobile user in mind just might make the difference between a one-time visitor and a life-long fan.
• 57% of people shopping at a store use their mobile device to check the Internet and research whether they are getting a good deal or not. If you are designing an e-commerce website and your site looks absolutely beautiful on a computer, yet mediocre on a smartphone, you just might lose that sale.
• 9 out of 10 people are using their mobile devices to shop for an item. Companies are getting smarter and better at optimizing their websites and collectively joining together the in-store experience with the online experience.
• In the first quarter of 2015, mobile-only users overtook desktop users when it comes to total Internet usage statistics as a whole. With the rise of 3G and 4G data plans all over the world, more and more people are using their mobile device when it comes to anything Internet or world wide web related. I know a few people who don’t even own a computer anymore because they claim that their iPhone or Android device does everything they need.
• In 2016, 199 million Americans owned smartphones. This is nearly two-thirds of the entire United States population. With smartphones and mobile devices getting more and more powerful and dynamic, less and less people are jumping on a laptop or desktop when it comes to the Internet. The convenience factor of a “computer in your pocket,” a.k.a. a smartphone, is absolutely mind-blowing.
• According to Google, 9 out of 10 mobile searches now lead to action and more than 50% of those actions lead to sales. Think about this my fellow web designers and web developers. If your website looks beautiful on a computer screen and only “alright” on a mobile device, you or your client just might lose that sale to the next mobile first website that blows the end-user away. When people grab their mobile devices to search the Internet, they have a specific intent in mind.
• According to Cisco, by 2020, there will be more people that own a mobile device or smartphone than those that have running water or electricity. Retailers are spending an absolute fortune on mobile design right now and for good reason. With 7 billion plus people in the world, more of them currently own smartphones than toothbrushes. Wow.

Keep this in mind: most users will only see your mobile website and never your large screen version. That is a wake-up call for sure if I have ever had one. We live in the most amazing and interesting time the world has ever seen! No longer is the world wide web something that “hangs out” on our desks or in our homes. With smartphones everywhere and in everyone’s pockets, the Internet is becoming something that we all carry around with us and use all day long.

The Web Has Evolved Into Something New

The next time you are out in public, look around and tell me what you notice. The fact that everybody is constantly on their mobile device should be the first indicator that mobile first design is the future of web design and development. With this being such an evident, in-our-face fact, why do we, as web designers, continue to design our projects from the large screen down? As I write this article, it is bringing up a lot of questions that I will need to answer as an industry professional. Design for the large screen is still extremely important and never to be forgotten or taken for granted.

Google: A Mobile First Approach For All

As a society, we are witnessing the birth of a new mobile era where web users interact and convert in what Google has called, “mobile micro-moments.” Google explains this as the user wanting to “know something, go somewhere, do something or buy something” when they pick up their smartphone and browse the web. It is absolutely clear that optimizing your website for mobile content is the ultimate way to reach your potential audiences at the absolute best times. Throughout the past 7 years, Google has consistently been giving us, web designers and online marketers, clear indications that the world wide web is shifting to a mobile first platform as a whole. Mobile is no longer optional my fellow web designers and industry professionals.

Who Cares Where You Begin As Long As It Gets Done

Whether we are designing our web design project with the large screen in mind first or the mobile aspect, in the end, the project still gets completed and still looks gorgeous, right? It really isn’t that simple, unfortunately. When I begin a web design project, I often build an absolutely gorgeous product that utilizes and leverages tons of technology, only later to realize it scales down terribly to mobile. When this happens, I am often left with a much less dynamic mobile design and the browsing user is certainly affected. Keep in mind the fact that this might be the only design that the user ever sees, according to recent statistics. This story is far too common in our industry ladies and gentleman. Beginning with a mobile first design, my projects are often very lightweight and extremely dynamic and beautiful. When we design mobile first, our end product often looks and functions really, really well, despite all of the let-downs that a smaller viewport often brings with it. I have already trimmed my web design down to the absolute most vital elements on the small screen.

Bringing The Design To The Desktop

When my mobile first design is complete and it’s time to bring its beauty to the large screen, I now get to decide how to make it even better and more dynamic for my audience. When a mobile first approach is taken in my new design projects, the end result always comes out better. I have tried this on multiple client projects lately and had much success with the ultimate end product.

When I design a web project, regardless of the viewport or platform, all of the images, video, audio, etc. are all delivered and served to the end user no matter what. Regardless whether the given platform needed the content or not, all of it is already loaded and served. What ends up happening is we are delivering a ton of multimedia and content to the device with the absolute slowest download speed. With a mobile first design and philosophy, we begin by loading the minimal amount of items necessary to create a beautiful layout on a small screen. We avoid slow speeds and unnecessary waiting periods that often drive a web user to another website. If our audience is viewing the design on a larger screen, such as a desktop or laptop, the bells and whistles can be implemented to the platforms that handle them best. With responsive web design, as designers, we typically start big and reduce from there. It is completely designed around media queries that target specific viewports and screen sizes. Structuring your media queries from small to large, rather than what is popular now called responsive design, is a much, much better option.

Wrapping This All Up

By designing my new projects with a mobile first philosophy, I have been able to create an experience that is both mindful to my users and adapts both the layout and functionality based on the browser and device they are browsing on. If done correctly, a mobile first design will adapt beautifully to future devices and browsers. By implementing our new mobile first design philosophy, we as designers will have much more opportunities to reach our audience and potential clients and customers. When we address device constraints first, rather than last, all parties win. So, let’s all adhere to the principles of progressive enhancement and get to work on our mobile design!