Design and Development

Why should I design for Mobile-First?

By

Filed under: Mobile, Web Development.

Whether we want to admit it or not, the web is going mobile. If you don’t have a mobile version of your website, you are turning away a huge percentage of your users and customers. Well the latest counts are in that show that there are over 1.2 billion mobile Web users worldwide and over 25% of mobile users in the United States will never touch their desktop this year.  Last year, over 73 percent of consumers used their mobile phone while in a store shopping. On top of that, this year it is expected that more smartphones will sell than Desktop PC’s.

Mobile First is very important for website designs

This article will explain why you should design a website from the ground up or Mobile-First as it’s often called.

1. Mobile-First Forces You to Focus on Core Content and Functionality

When you are dealing with a screen-size that is 320px X 480px or less you have to rethink and design the layout of your traditional desktop website layout. You only have enough space on the screen for the most important and key parts of your website. So if something isn’t absolutely necessary for your clients, then ditch it for your mobile-first design!

Look at the difference between these two pictures to get an idea of how unusable a desktop-based design is on a smartphone: insert mobile image here…

2. Screen Sizes Abound in the Mobile Web

These days you can’t afford to adapt your website to the size and layout of every new device that comes out. Who knows when the next iPhone will change screen sizes or resolutions, or when the hottest new tablet is released with completely new dimensions. This is why your Mobile-First design must be fluid, not adaptive.

When your website layout is fluid through the use of css selectors like “min-width” instead of “max-width” your website easily “flows” between any screen size. Whether you are browsing on a iPhone with 320px width or that dinky flip phone with a 180px width, your website will “flow” and look beautiful on each and every device.

“Let the fluid grid do most of the work. You don’t want to manage 100 layouts caused by 100 media queries, so let the fluidity of the web do its thang.” – Brad Frost

3. New Capabilities with the Mobile Web

When you are designing a desktop based design you have to design it with the knowledge that many of your users may be using old browsers or aging hardware that can’t support new and exciting technologies. However with Mobile devices because users are constantly upgrading their phones and changing plans, there are huge possibilities to utilize new and exciting technologies in your Mobile website.

Some of these things include:

  • Location information from an onboard GPS
  • Multi-touch interaction from different gestures and actions
  • Bluetooth device connection
  • Modern browser and hardware acceleration
  • Device tilt and movement information from an accelerometer
  • Audio and Video input from onboard microphone and camera

4. Progressive Enhancement

The main reason we have a website is to give valuable content to our users.   Progressive enhancement focuses on the content first, then the presentation and styling, and finally the scripting and animation.

In Mobile-First design, progressive enhancement applies this concept by delivering more and more styling as the device-size and/or the connection quality increases. First off we deliver the content, that is, the words, images and forms that are vital to the experience and success of your users. Next we add some styling elements in CSS that beautify our website. We take the otherwise boring layout of the plain content and turn it into an amazing user-experience. After that we add extra touches and features via Javascript. These scripts are not essential to the user, but they do provide some added value in their use of the website.

“The number one thing to remember in designing is content, content, content.”

Here Are a Few Helpful Resources To Further Study Mobile-First and Responsive Design:

Links to Mobile-First Grids

I'm sorry, but comments are closed for this post.