Mobile First Approach - The key to cross platform interface design

60 %
40 %
Information about Mobile First Approach - The key to cross platform interface design

Published on February 17, 2014

Author: vivekparihar1



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

Who Am I? A Weboniser and Rubyist A Blogger( An Aesthetics Geek An Aspiring Tech Innovator DevOps Guy Tweet with @vparihar

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

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

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

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)

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 mobile platforms 02. Mobile site - A website designed specifically for mobile browsers 03. Responsive site - A website adaptive to all screen sizes

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



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

Add a comment

Related presentations

My Music Magazine Pitch

My Music Magazine Pitch

October 30, 2014

music mag pitch

Questionaire charts

Questionaire charts

November 4, 2014


Final research

Final research

November 5, 2014

final research

Cersaie 2014

Cersaie 2014

October 30, 2014

allestimento in cartone per il Cersaie 2014 alberi in cartone scultura in cartone

Quarta turma do workshop de Infografia, ministrado por Beatriz Blanco e Marcos Sin...

Related pages

Mobile First Approach - The key to cross platform ...

... The key to cross platform interface design by vivek ... Another key factor for taking a mobile first approach is the fact that the majority of ...
Read more

Vivek Parihar - Mobile First Approach - The key to cross ...

Vivek Parihar - Mobile First Approach - The key to cross platform interface design HasGeek TV. Subscribe Subscribed Unsubscribe 3,826 3K ...
Read more

Mobile First Design: Why It’s Great and Why It Sucks

Hooray for mobile first web design. It’s obviously the greatest thing to hit the web since The Oatmeal. So why am I not excited about it? Why, even ...
Read more

Responsive web design - Wikipedia, the free encyclopedia

Responsive web design (RWD) is an approach to web design aimed at crafting ... Mobile first, unobtrusive ... design in his brief 2011 book titled ...
Read more

Cross-platform - Wikipedia, the free encyclopedia

... cross-platform, ... Responsive web design (RWD) is a Web design approach aimed at crafting the ... An open-source SDK for mobile platform app ...
Read more

The Pros and Cons of Cross-Platform App Design - Mashable

The Pros and Cons of Cross-Platform App Design. ... a cross-platform approach to mobile ... approach cross-platform design and ...
Read more

Enterprise Mobile Application Development Platform

Telerik Positioned as a Challenger in Gartner Magic Quadrant for Mobile Application Development Platforms Read the Report
Read more

Guidelines For Mobile Web Development – Smashing Magazine

... mobile-first and responsive design can help ... cross-platform. The vast number of mobile devices makes ... centered-approach-to-mobile-design/
Read more