Mobile first design has been taking centrestage in the consumer internet media stage. This makes it extremely important for the Design/development community to understand the intricacies, pitfalls and the right practices about it. From my own experiments, I have elicited few interesting protcols and practices for the same. The presentation aims to share the results of the successful experiments and open up discussion on what the best way forward can be. Outline of the talk: 1. Understanding the need for mobile sites 2. Going through the basics of a fluid interface; differences between responsive sites and mobile sites 3. Bottom up approach - first build minimum features for the smaller screens. It helps keep the lean approach alive. 4. Optimized content structuring - limited size on small screens calls for relevant and optimized content layouts 5. Ensuring the right experience on small screen devices via optimized front end

1. Who Am I?
A Weboniser and Rubyist
A Blogger(vparihar01.github.com)
An Aesthetics Geek
An Aspiring Tech Innovator
DevOps Guy
Tweet with @vparihar

2. Mobile First
The key to cross platform
interface design

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

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

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

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

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

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

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

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

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

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

13. Why
Mobile
First?
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.
Using this method,
questions like this
come up a lot

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

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

16. 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)

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

18. Geolocation
Foursquare
Tinder

19. Barcode/ QR code scanning
QR Droid

20. Camera Front & Back
Skype
Nearest Tube

21. Gyroscope
Facebook Paper

22. Accelerometer
Runkeeper
Historical Landings game on Android

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

24. Audio (Microphone & Speaker)
Skype
Tango

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

26. Native App
Desktop Website
Desktop Website

27. Mobile Site
Desktop Website

28. Responsive Site
Desktop Website

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

30. Behaviours

31. Carousal

32. Menu and Navigation - Responsive site

33. Menu and Navigation - Tabbed Navigation in Native app

34. Scrolls & Accordians

35. Thanks
Would Love to answer your queries…
Vivek Parihar
@vparihar