Introductions about Mobile First Design

TMO Group TMO Group

What is Mobile First Design?

In simple words, Mobile First Design is a way of designing websites for Smaller Screens, and then progressively adjusts your design for devices with larger screens using CSS Media Queries. While true that mobile is not a new channel or a revolutionary way to communicate, there is a lot of value that can be abstracted from adopting a mobile also strategy.

mobile first design

 

Why mobile first?

Odds are none of the people reading this have learned anything new up to this point. The $200+ phones in the pockets of everyone you know are all the indication you need that the web has broken out of its computer shaped box.

The fact that mobile web access is popular does almost nothing to convince me that I need to pursue a mobile strategy that actually puts mobile first. The flip side of 25% of mobile users being mobile-only is that 75% of them aren’t! Obviously, the desktop is still an important medium, not to be forgotten or pushed to the back burner quite yet. So why are we even considering taking the mobile first route?

One of the major catalysts for the rise of mobile first web design was the announcement from Eric Schmidt in 2010 that Google was going to be taking this approach from now on, going so far as to say “I think it’s now the joint project of all of us to make mobile the answer to pretty much everything”.

Does this mean we throw everything else out the window?

Not just yet. Designing for mobile first completely makes sense in theory. So many people use mobile devices in their everyday life. I myself have been known to use my tablet AND smartphone (and sometimes laptop!) at the same time on multiple occasions. The problem with mobile first is that many people will pick up their own device and use that as the focus of their design. However mobile means something different to everyone. Focusing only on an iPhone would overlook every other mobile device people have. Tablets, smartphones, feature phones, and e-readers are just some of the mobile devices used on a daily basis. Up until a month ago my dad was still using a “dumb” phone, but if you asked him he would likely call it a mobile phone too. There is also no way to know what new technologies are coming in the next few years. After all, Apple just announced their new iWatch – who knows, in a year or two we might have to worry about watch sized browsers! It’s just not realistic to take one device, design a mobile experience for said device and expect it to be sufficient for every other device available.

What are the Benefits?

By designing for the small screen first, the UX designer must determine how the site will be navigated with the least amount of effort and frustration.

Clear Site Navigation

In a smaller environment the user simply doesn’t have the real estate to get muddled with menu items and drop-down navigation. The rule of thumb for website navigation is no more than 6-7 menu items. A clear navigation is key to help direct each user to his intended destination. This will increase the amount of user conversions, whether that means more sales or newsletter subscriptions. Drop-downs have been removed from many site, and rightfully so. The tend to be problematic in a desktop environment, and do not translate to mobile devices due to the lack of a rollover function.

Solves Problems Quickly

Several struggles appear when a  company redesigns their website including site navigation, the order of important content and data, easy-of-use, and critical user functions. Mobile first helps to breakdown and solve these tricky areas into a concise set of solutions. Many complications arrive when developing a desktop site first, then trying to squeeze that content into a mobile framework. With mobile first, designers and developers uncover these issues first and resolve them early in the development process.

Focused on Content

It is easier to fill a house, than it is to move from one, into an apartment. In the desktop environment there is a tendency to add functions, images and content to “fill space.” This inevitably reduces the amount of white-space or breathing room and creates visual clutter. In mobile-first there simply is no real estate for this to happen. The content displayed has to be clear, concise and easy to understand. When done correctly, the mobile-first approach positively affects the tablet and desktop versions of your site, resulting in a more clean and polished look.

Finally, if you’re building a site for a client it is difficult for them to see the site come together. It’s much easier to “Wow” someone when presenting a design on a larger screen because there is a clear and impressive deliverable. Mobile-first has clear development advantages but challenges in presentation and workflow during UX and design on a project. The process of prioritizing content for a small screen is hard and requires a real understanding of your goals to do successfully.