Who Am I?
A Weboniser and Rubyist
A Blogger(vparihar01.github.com)
An Aesthetics Geek
An Aspiring Tech Innovator
DevOps Gu...
Mobile First
The key to cross platform
interface design
75%
of mobile users use their
mobile for shopping
56%
of people own a smart phone
out of the total no. of people
owning a mobile phone
Over

75%

of mobile users respond to
mobile-optimized sites when
making purchases
99%
of smartphone owners use
their mobile browser atleast
once a day
2014

By

mobile internet usage will
overtake desktop internet usage
80%
of time on mobile
is spent inside apps
About

1.3million
Android and iOS devices
alone are being sold everyday
91%
of all people on earth
have a mobile phone
50%

of mobile phone users
use mobile as their
primary internet source
91%

of adults have
their mobiles phones
within arm’s reach 24/7
Why
Mobile
First?

What is the first thing you want
end-users to see?
●

The core idea should be the principle
highlight.
...
Why
Mobile
First?
Using this method,
questions like this
come up a lot

What is the first thing you want
end-users to see?...
Why
Mobile
First?
Using this method,
questions like this
come up a lot

Is it a better approach towards
Responsive Web Des...
Why
Mobile
First?
Using this method,
questions like this
come up a lot

Mobile first philosophy allows
use of new capabili...
Touch Gestures
Tap

Double Tap

Scroll

Drag & Flick

Touch and Hold

Pinch

Rotate
Geolocation
Foursquare

Tinder
Barcode/ QR code scanning
QR Droid
Camera Front & Back
Skype

Nearest Tube
Gyroscope
Facebook Paper
Accelerometer
Runkeeper

Historical Landings game on Android
Bluetooth & NFC
Send : This app allows you to share files between NFC devices
Audio (Microphone & Speaker)
Skype

Tango
The basics of a fluid interface
Various ways to go for a mobile first
01. Native app
- A packaged application specific to ...
Native App

Desktop Website

Desktop Website
Mobile Site

Desktop Website
Responsive Site

Desktop Website
Optimised content structuring
Limited size on small screens, calls for relevant & optimised content layouts

01. Gesture &...
Behaviours
Carousal
Menu and Navigation - Responsive site
Menu and Navigation - Tabbed Navigation in Native app
Scrolls & Accordians
Thanks
Would Love to answer your queries…

Vivek Parihar
@vparihar
Upcoming SlideShare
Loading in...5
×

Mobile First Approach - The key to cross platform interface design

693

Published on

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

Published in: Design
0 Comments
5 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
693
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
64
Comments
0
Likes
5
Embeds 0
No embeds

No notes for slide

Mobile First Approach - The key to cross platform interface design

  1. 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. 2. Mobile First The key to cross platform interface design
  3. 3. 75% of mobile users use their mobile for shopping
  4. 4. 56% of people own a smart phone out of the total no. of people owning a mobile phone
  5. 5. Over 75% of mobile users respond to mobile-optimized sites when making purchases
  6. 6. 99% of smartphone owners use their mobile browser atleast once a day
  7. 7. 2014 By mobile internet usage will overtake desktop internet usage
  8. 8. 80% of time on mobile is spent inside apps
  9. 9. About 1.3million Android and iOS devices alone are being sold everyday
  10. 10. 91% of all people on earth have a mobile phone
  11. 11. 50% of mobile phone users use mobile as their primary internet source
  12. 12. 91% of adults have their mobiles phones within arm’s reach 24/7
  13. 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. 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. 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. 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. 17. Touch Gestures Tap Double Tap Scroll Drag & Flick Touch and Hold Pinch Rotate
  18. 18. Geolocation Foursquare Tinder
  19. 19. Barcode/ QR code scanning QR Droid
  20. 20. Camera Front & Back Skype Nearest Tube
  21. 21. Gyroscope Facebook Paper
  22. 22. Accelerometer Runkeeper Historical Landings game on Android
  23. 23. Bluetooth & NFC Send : This app allows you to share files between NFC devices
  24. 24. Audio (Microphone & Speaker) Skype Tango
  25. 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. 26. Native App Desktop Website Desktop Website
  27. 27. Mobile Site Desktop Website
  28. 28. Responsive Site Desktop Website
  29. 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. 30. Behaviours
  31. 31. Carousal
  32. 32. Menu and Navigation - Responsive site
  33. 33. Menu and Navigation - Tabbed Navigation in Native app
  34. 34. Scrolls & Accordians
  35. 35. Thanks Would Love to answer your queries… Vivek Parihar @vparihar
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×