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.
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.
“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:
- http://www.abookapart.com/products/mobile-first-responsive-web-design-bundle (Mobile First & Responsive Web Design Book Bundle)
- http://mediaqueri.es/ (Great website that shows Responsive websites that are fluid and fit nicely on whatever size device they are on)
- http://www.lukew.com/presos/preso.asp?26 (Luke Wroblewski on Mobile-First design)
- http://www.html5rocks.com/en/mobile/responsivedesign/ (A tutorial for building an HTML5 Mobile-First design)
Links to Mobile-First Grids
- http://stuffandnonsense.co.uk/projects/320andup/ (320 and UP)
- http://html5boilerplate.com/mobile (HTML5 Boilerplate – Mobile)
- http://thatcoolguy.github.com/gridless-boilerplate/ (Gridless – HTML5 & CSS3 boilerplate for mobile first design)
- http://themble.com/bones/ (HTML5 Mobile-First Responsive Grid for Static HTML or WordPress)