Published on February 17, 2014
Who Am I? A Weboniser and Rubyist A Blogger(vparihar01.github.com) 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
... 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 ...
Vivek Parihar - Mobile First Approach - The key to cross platform interface design HasGeek TV. Subscribe Subscribed Unsubscribe 3,826 3K ...
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 ...
Responsive web design (RWD) is an approach to web design aimed at crafting ... Mobile first, unobtrusive ... design in his brief 2011 book titled ...
... cross-platform, ... Responsive web design (RWD) is a Web design approach aimed at crafting the ... An open-source SDK for mobile platform app ...
The Pros and Cons of Cross-Platform App Design. ... a cross-platform approach to mobile ... approach cross-platform design and ...
Telerik Positioned as a Challenger in Gartner Magic Quadrant for Mobile Application Development Platforms Read the Report
... mobile-first and responsive design can help ... cross-platform. The vast number of mobile devices makes ... centered-approach-to-mobile-design/