Mobile FirstThe key to cross platform interface design
91%of all people on earth have a mobile phone
56%of people own a smartphone out of the total no. of people
a owning mobile phone
75%of mobile users use their
mobile for shopping
75%
Over
of mobile users respond to mobile-optimized sites when making purchases
99%of smartphone owners use their mobile browser atleast once a day
80%of time on mobile is spent inside apps
2014By
mobile internet usage may have overtaken desktop internet usage
1.3millionAndroid and iOS devices
alone are being sold everyday
About
50%of mobile phone usersuse mobile as theirprimary internet source
91%
of adults have their mobiles phones within arm’s reach 24/7
The basics of a fluid interfaceVarious ways to go for a mobile first
01. Native app- A packaged application specific to mobile platforms
02. Mobile site- A website designed specifically for mobile browsers
03. Responsive site- A website adaptive to all screen sizes
Desktop Website
Desktop Website
Native App
Desktop Website
Mobile Site
Responsive Site Desktop Website
Is it a better approach towards Responsive Web Design?
● Conventional Top to Bottom approach - Graceful Degradation makes life difficult as the content and the features may not adapt easily to the smaller sized devices
● Progressive Enhancement - Bottom to Top approach
○ Core features always stays in focus
○ Deliver an accessible exp all screen sizes/ devices
○ Ensure ease of usability across various platforms
● Streamlined Content considering physical constraints of the device
Why MobileFirst?Using this method, questions like this come up a lot
Touch Gestures
Tap Double Tap Drag & Flick
Pinch
Touch and Hold
RotateScroll
Foursquare Tinder
Geolocation
QR Droid
Barcode/QR code scanning
Skype Nearest Tube
Camera Front & Back
GyroscopeFacebook Paper
Runkeeper Historical Landings game on Android
Accelerometer
Send : This app allows you to share files between NFC devices
Bluetooth & NFC
Google Now Evernote
Audio (Microphone & Speaker)
Limited size on small screens, calls for relevant & optimised content layouts
01. Gesture & Behaviours - Gestures: Tap, Double Tap, Drag, Pinch, Spread, Tap & Hold, Rotate- Behaviours: Swipe to Left, Swipe to Right, Pull down, Pull up
02. Menus & Navigation- Following a pattern of design in all 3 types of mobile solutions
03. Scrolls & Accordions- For large amount of articles/content sites
04. Progressive Disclosure of Content- Let User decide what to consume rather than showing him everything upfront.
05. Carousals- Allow the user to interact with a group of similar elements within a fixed place Eg. Featured Images, Featured Videos, Testimonials
06. Avoid using Videos- Instead use more images
07. Do away with popups- Display the content in a new window
Optimised content structuring
Behaviours
Carousal
Menu and Navigation - Responsive site
Tabbed Navigation in Native app
Menu and Navigation
Scrolls & Accordians
Thanks
Would Love to answer your queries…
Top Related