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