Download - Mobile first approach
![Page 1: Mobile first approach](https://reader036.vdocument.in/reader036/viewer/2022070516/587245e21a28ab852f8b45a3/html5/thumbnails/1.jpg)
Mobile FirstThe key to cross platform interface design
![Page 2: Mobile first approach](https://reader036.vdocument.in/reader036/viewer/2022070516/587245e21a28ab852f8b45a3/html5/thumbnails/2.jpg)
75%of mobile users use their
mobile for shopping
![Page 3: Mobile first approach](https://reader036.vdocument.in/reader036/viewer/2022070516/587245e21a28ab852f8b45a3/html5/thumbnails/3.jpg)
56%of people own a smart phone out of the total no. of people
owning a mobile phone
![Page 4: Mobile first approach](https://reader036.vdocument.in/reader036/viewer/2022070516/587245e21a28ab852f8b45a3/html5/thumbnails/4.jpg)
75%of mobile users respond to mobile-optimized sites when making purchases
Over
![Page 5: Mobile first approach](https://reader036.vdocument.in/reader036/viewer/2022070516/587245e21a28ab852f8b45a3/html5/thumbnails/5.jpg)
99%of smartphone owners use their mobile browser atleast once a day
![Page 6: Mobile first approach](https://reader036.vdocument.in/reader036/viewer/2022070516/587245e21a28ab852f8b45a3/html5/thumbnails/6.jpg)
2014mobile internet usage will overtake desktop internet usage
By
![Page 7: Mobile first approach](https://reader036.vdocument.in/reader036/viewer/2022070516/587245e21a28ab852f8b45a3/html5/thumbnails/7.jpg)
80%of time on mobile is spent inside apps
![Page 8: Mobile first approach](https://reader036.vdocument.in/reader036/viewer/2022070516/587245e21a28ab852f8b45a3/html5/thumbnails/8.jpg)
1.3millionAndroid and iOS devices alone are being sold everyday
About
![Page 9: Mobile first approach](https://reader036.vdocument.in/reader036/viewer/2022070516/587245e21a28ab852f8b45a3/html5/thumbnails/9.jpg)
91%of all people on earth have a mobile phone
![Page 10: Mobile first approach](https://reader036.vdocument.in/reader036/viewer/2022070516/587245e21a28ab852f8b45a3/html5/thumbnails/10.jpg)
50%of mobile phone usersuse mobile as theirprimary internet source
![Page 11: Mobile first approach](https://reader036.vdocument.in/reader036/viewer/2022070516/587245e21a28ab852f8b45a3/html5/thumbnails/11.jpg)
91% of adults have their mobiles phones within arm’s reach 24/7
![Page 12: Mobile first approach](https://reader036.vdocument.in/reader036/viewer/2022070516/587245e21a28ab852f8b45a3/html5/thumbnails/12.jpg)
What is the first thing you want end-users to see?
● The core idea should be the principle highlight.
● Users should be able to interact, consume, action upon that core idea using a mobile phone.
● Concentrate on the primary use cases
● Flesh out the most important feature/content and make sure that the user sees this as the first thing.
Why Mobile First?Using this method, questions like this come up a lot
![Page 13: Mobile first approach](https://reader036.vdocument.in/reader036/viewer/2022070516/587245e21a28ab852f8b45a3/html5/thumbnails/13.jpg)
What is the first thing you want end-users to see? (contd.)
● Place Content that is closest to conversion
● Facilitate user by providing proactive inputs using exclusive native hardware
● Precise directions/ questions to minimise user efforts
Why Mobile First?Using this method, questions like this come up a lot
![Page 14: Mobile first approach](https://reader036.vdocument.in/reader036/viewer/2022070516/587245e21a28ab852f8b45a3/html5/thumbnails/14.jpg)
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 experience to all screen sizes/ devices
○ Ensure ease of usability across various platforms
● Streamlined Content considering physical constraints of the device
Why Mobile First?Using this method, questions like this come up a lot
![Page 15: Mobile first approach](https://reader036.vdocument.in/reader036/viewer/2022070516/587245e21a28ab852f8b45a3/html5/thumbnails/15.jpg)
Mobile first philosophy allows use of new capabilities● Touch gestures (Tap, Double Tap, Drag, Pinch,
Spread, Tap & Hold, Rotate)
● Geolocation (apps like Foursquare, Tinder)
● Barcode/ QR code scanning (Platforms like Smarterplaces)
● Camera Front & Back ( Skype, Line, Instagram)
● Gyroscope (Facebook Paper)
● Accelerometer (Runkeeper)
● Ambient Light Sensor (Camera App)
● Bluetooth & NFC (Audio Streaming)
● Audio (Microphone & Speaker) (Skype,Tango)
Why Mobile First?Using this method, questions like this come up a lot
![Page 16: Mobile first approach](https://reader036.vdocument.in/reader036/viewer/2022070516/587245e21a28ab852f8b45a3/html5/thumbnails/16.jpg)
Touch Gestures
Tap Double Tap Drag & Flick Pinch
Touch and Hold RotateScroll
![Page 17: Mobile first approach](https://reader036.vdocument.in/reader036/viewer/2022070516/587245e21a28ab852f8b45a3/html5/thumbnails/17.jpg)
Geolocation
Foursquare Tinder
![Page 18: Mobile first approach](https://reader036.vdocument.in/reader036/viewer/2022070516/587245e21a28ab852f8b45a3/html5/thumbnails/18.jpg)
Barcode/ QR code scanning
QR Droid
![Page 19: Mobile first approach](https://reader036.vdocument.in/reader036/viewer/2022070516/587245e21a28ab852f8b45a3/html5/thumbnails/19.jpg)
Camera Front & Back
Skype Nearest Tube
![Page 20: Mobile first approach](https://reader036.vdocument.in/reader036/viewer/2022070516/587245e21a28ab852f8b45a3/html5/thumbnails/20.jpg)
Gyroscope
Facebook Paper
![Page 21: Mobile first approach](https://reader036.vdocument.in/reader036/viewer/2022070516/587245e21a28ab852f8b45a3/html5/thumbnails/21.jpg)
Accelerometer
Runkeeper Historical Landings game on Android
![Page 22: Mobile first approach](https://reader036.vdocument.in/reader036/viewer/2022070516/587245e21a28ab852f8b45a3/html5/thumbnails/22.jpg)
Bluetooth & NFC
Send : This app allows you to share files between NFC devices
![Page 23: Mobile first approach](https://reader036.vdocument.in/reader036/viewer/2022070516/587245e21a28ab852f8b45a3/html5/thumbnails/23.jpg)
Audio (Microphone & Speaker)
Skype Tango
![Page 24: Mobile first approach](https://reader036.vdocument.in/reader036/viewer/2022070516/587245e21a28ab852f8b45a3/html5/thumbnails/24.jpg)
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
![Page 25: Mobile first approach](https://reader036.vdocument.in/reader036/viewer/2022070516/587245e21a28ab852f8b45a3/html5/thumbnails/25.jpg)
Desktop Website
Desktop WebsiteNative App
![Page 26: Mobile first approach](https://reader036.vdocument.in/reader036/viewer/2022070516/587245e21a28ab852f8b45a3/html5/thumbnails/26.jpg)
Desktop WebsiteMobile Site
![Page 27: Mobile first approach](https://reader036.vdocument.in/reader036/viewer/2022070516/587245e21a28ab852f8b45a3/html5/thumbnails/27.jpg)
Responsive Site Desktop Website
![Page 28: Mobile first approach](https://reader036.vdocument.in/reader036/viewer/2022070516/587245e21a28ab852f8b45a3/html5/thumbnails/28.jpg)
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
![Page 29: Mobile first approach](https://reader036.vdocument.in/reader036/viewer/2022070516/587245e21a28ab852f8b45a3/html5/thumbnails/29.jpg)
Behaviours
![Page 30: Mobile first approach](https://reader036.vdocument.in/reader036/viewer/2022070516/587245e21a28ab852f8b45a3/html5/thumbnails/30.jpg)
Carousal
![Page 31: Mobile first approach](https://reader036.vdocument.in/reader036/viewer/2022070516/587245e21a28ab852f8b45a3/html5/thumbnails/31.jpg)
Menu and Navigation - Responsive site
![Page 32: Mobile first approach](https://reader036.vdocument.in/reader036/viewer/2022070516/587245e21a28ab852f8b45a3/html5/thumbnails/32.jpg)
Menu and Navigation - Tabbed Navigation in Native app
![Page 33: Mobile first approach](https://reader036.vdocument.in/reader036/viewer/2022070516/587245e21a28ab852f8b45a3/html5/thumbnails/33.jpg)
Scrolls & Accordians
![Page 34: Mobile first approach](https://reader036.vdocument.in/reader036/viewer/2022070516/587245e21a28ab852f8b45a3/html5/thumbnails/34.jpg)
Thank You