# Websites Must be Mobile First

My first DrupalCon was at the Denver Convention Center in March of 2012 and it was a life changing experience. One of the keynote speakers at the conference was Luke Wroblewski, Digital Product Design Lead, Speaker and Author at LukeW Ideation & Design. Luke’s presentation focused on mobile first design and occurred at an interesting time for web development. First, CSS3 was becoming widely adopted and accepted by the vast majority of web browsers in use. More specifically, the @media query which allows for responsive design was supported by most of the popular web browsers. The chart below shows the first version of major browsers that could use the @media CSS rule and what version we’re up to now.

Second, mobile devices with powerful web browsers like the Apple and Android phones were taking off in popularity. Third, mobile data speeds were increasing to the point where loading a website on your phone was almost as quick as loading it on your computer. This combination of factors led to a significant increase in the percentage of users visiting websites on their mobile devices. This trend has continued to the point where many media websites see significantly more of their overall traffic coming from mobile devices with smaller screens than desktop visitors. Even average websites have a significant amount of traffic from non-desktop browsers. Luke’s point during his talk was that the time for ignoring non-desktop visitors was over and the time for embracing a more modern design style had arrived. This was four years ago.

## The Old Days
Back in the early days of the web and mobile devices, businesses who wanted a better mobile experience for their users would build two websites: one for desktop users and one for mobile users. In those days you might visit a desktop site at www.websitexyz.com and the equivalent mobile website at m.websitexyz.com. The desktop site was designed for desktops and the mobile m. site was designed specifically for a mobile phone. There are programmer tricks that can detect that you are on a phone and automatically direct you to the mobile experience but either way it is two distinct experiences. The problem with this approach is pretty obvious: maintaining and updating two separate codebases is much more expensive and time consuming than managing a single codebase. Furthermore, a website optimized for a mobile phone might not look as great on an iPad which technically is also a mobile device. @media queries and mobile first design solve these problems.

## Mobile First Thinking
What if you only had a screen 5.5” from corner to corner to tell a new customer about your company? If that customer is coming to your website from their iPhone then the reality is that’s all the space you have. If you only had that amount of space you would have to focus on getting your message across quickly and with as little extraneous information as possible. Essentially, you have to re-think your business and what is most important for your customers. This is the premise of mobile first thinking. When designing a mobile first website you do exactly that, design the mobile experience first. With limited screen space you will be forced to evaluate your messaging and the most important actions you want your users to take. This helps to streamline your website and get your point across quickly. With @media queries programmers can build a website that responds to the size of the browser. View the same page on your phone and your desktop and you will see how the elements of the page spread out and additional messaging and actions are available. Gone are the days of having a mobile and desktop website, instead you have one website and codebase that responds to the size of the browser be it a small browser like on a phone, a medium browser on tablet or desktop or a huge browser like a giant billboard.

## Responsive CSS Frameworks
Mobile first responsive web design has only gotten more and more popular since I saw Luke give his presentation in 2012. The past few years have seen the rise and mass acceptance of open source CSS frameworks like Bootstrap and Foundation that make it even easier to use responsive design in web projects. The frameworks provide things like layouts, buttons, widgets, etc. which make it much easier to build complex responsive websites. In addition, as they are supported by a large open source community, these frameworks get updated over time to support new browsers and offer new functionality.

## Bottom Line
If you are not designing your website experience around mobile technology then you are ignoring most to all of your customers. This will result in lower conversion rates, higher page exit rates and a worse experience for your visitors. This trend isn’t new and companies can no longer be excused for ignoring this massive and important shift in web design. In today’s world you need a responsive website and everyone needs to take another look at their company and figure out the best way to get your messaging across beautifully and effectively in that 5.5” (or smaller) window. **Don't know where to start with your mobile first approach?** Talk to the experts at Fruition!


'It's 2016, it's finally time to commit to mobile first web design.

large_Generic-Blog-Hero-1.jpg

Strategy & Research

Digital Marketing

Web Development

Creative

AI Data & Analytics

Websites Must be Mobile First

Brad Anderson

Related Articles

Websites Must be Mobile First

Brad Anderson

Elevate SEO with Responsive Web Design | Mobile Search Optimization

Ben Smith

Sitemap Optimization: Enhance Website Navigation & SEO

Ben Smith

Enhancing Your Brand Website: Developers and UX Designers Unite at Fruition!

Ari Scott

Transform Your Website with Our Proven UX/UI Design Process

Sallie Wright Serene