The document discusses the importance of mobile-first design. Some key points:
- Over 75% of mobile users now respond to mobile-optimized sites for purchases.
- By 2014, mobile internet usage will surpass desktop usage.
- 80% of mobile time is spent in apps.
- Over 1.3 million Android and iOS devices are sold daily.
- Mobile phones allow the use of new capabilities like touch gestures, geolocation, cameras, and sensors.
- Content needs to be optimized for small screens through techniques like menus, navigation, scrolling, and progressive disclosure of content.
12. Why
Mobile
First?
Using this method,
questions like this
come up a lot
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.
13. Why
Mobile
First?
Using this method,
questions like this
come up a lot
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
14. Why
Mobile
First?
Using this method,
questions like this
come up a lot
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
○
○
Deliver an accessible experience to
all screen sizes/ devices
○
●
Core features always stays in focus
Ensure ease of usability across
various platforms
Streamlined Content considering physical
constraints of the device
15. Why
Mobile
First?
Using this method,
questions like this
come up a lot
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)
24. The basics of a fluid interface
Various 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
28. Optimised content structuring
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