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.
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:
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 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.
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.
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.
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.
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!