Booklet

author

Fullstack HQ

Design

An Introduction to Mobile First Design

design

Design

|

An Introduction to Mobile First Design

BOOTSTRAP WAS THE FIRST ONE WHO STARTED TO PROMOTE THE MOBILE-FIRST IDEA

Mobile First means that we start the design from the mobile end which has more restrictions, then expand its features to create a tablet or desktop version.

WHY MOBILE-FIRST MATTERS?
Today, more than half of web browsing happens on mobile. Meaning the internet is being accessed by more pocket size devices than desktops! Also, Google favors mobile-first sites.

HOW IMPLEMENT MOBILE FIRST?
The key to mobile first principle is, in fact, a content centered mind.
Let's make an app for hotel booking.
We first sort the content by importance:
1. Website name
2. Hotel (Domestic Hotel, Foreign Hotel, Hour Room, Special Hotel)
3. Time selector (check-in time, departure time)
4. My Order
5. Customer service
6. Promotion & Advertising

THEN WE GET A MOBILE VERSION LIKE THIS:
Domestic, foreign hotels and time selectors are the most important content. They are located in the most prominent part of the interface.

By adding more features on the mobile version and enlarging the promotion & advertising displaying we get a desktop version like this: area

This way, designers are able to create a product for multiple devices in an efficient way instead of removing good features to get an afterthought.

Thinking mobile doesn't mean eliminating info. It forces designers to pay more attention to the content, creating a neat and practical designs
Mobile has the most limitations, screen size and bandwidth to name a few, and so designing within these constraints force you to prioritize content.
AIso, it helps to save design time and improve designers' productivity

More booklets by Fullstack HQ

More Design booklets

Your recently viewed booklets

  • booklet-slide-images
  • booklet-slide-images
  • booklet-slide-images
  • booklet-slide-images
  • booklet-slide-images
  • booklet-slide-images
  • booklet-slide-images
  • booklet-slide-images
  • booklet-slide-images
  • booklet-slide-images
See all booklets