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.

1. Mobile First
The key to cross platform
interface design

2. 75%
of mobile users use their
mobile for shopping

3. 56%
of people own a smart phone
out of the total no. of people
owning a mobile phone

4. Over
75%
of mobile users respond to
mobile-optimized sites when
making purchases

5. 99%
of smartphone owners use
their mobile browser atleast
once a day

6. 2014
By
mobile internet usage will
overtake desktop internet usage

7. 80%
of time on mobile
is spent inside apps

8. About
1.3million
Android and iOS devices
alone are being sold everyday

9. 91%
of all people on earth
have a mobile phone

10. 50%
of mobile phone users
use mobile as their
primary internet source

11. 91%
of adults have
their mobiles phones
within arm’s reach 24/7

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)

16. Touch Gestures
Tap
Double Tap
Scroll
Drag & Flick
Touch and Hold
Pinch
Rotate

17. Geolocation
Foursquare
Tinder

18. Barcode/ QR code scanning
QR Droid

19. Camera Front & Back
Skype
Nearest Tube

20. Gyroscope
Facebook Paper

21. Accelerometer
Runkeeper
Historical Landings game on Android

22. Bluetooth & NFC
Send : This app allows you to share files between NFC devices

23. 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

25. Native App
Desktop Website
Desktop Website

26. Mobile Site
Desktop Website

27. Responsive Site
Desktop Website

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

29. Behaviours

30. Carousal

31. Menu and Navigation - Responsive site

32. Menu and Navigation - Tabbed Navigation in Native
app

33. Scrolls & Accordians