Introduction to approaches and principles for designing for mobile.

1. Designing for a wide range of
smartphones and screen sizes.

2. Why?

3. Data + Design Source:www.inovis.cc

4. 67% of the population worldwide own a mobile phone.
Users spend on average 69% of their media time on smartphones.
The average number of apps people use is 9 apps daily, and 30 apps
monthly.
Mobile websites get more visitors than native apps. But those
people spend a lot less time on mobile websites than they do on apps.
48% of the buyers use smartphones to start searching with a search engine.
78% of mobile searches for local business information result in a purchase.
90% of smartphone owners use their phones while making purchasing
decisions in a brick and mortar store.
Worldwide - July 2018
Mobile
52.95%
Desktop
43.11%
Tablet
3.94%
India - July 2018
Mobile
77.99%
Desktop
21.53%
Tablet
0.48%

5. Let’s break some jargons

6. Responsive vs Adaptive Design
Both responsive and adaptive design attempt to optimize the user
experience across different devices, adjusting for different viewport
sizes, resolutions, usage contexts, control mechanisms, and so on.
Responsive design works on the principle of flexibility - a single fluid
website that can look good on any device. Responsive websites use
media queries, flexible grids, and responsive images to create a user
experience that flexes and changes based on a multitude of factors.
Adaptive design is more like the modern definition of progressive
enhancement. Instead of one flexible design, adaptive design detects
the device and other features, and then provides the appropriate
feature and layout based on a predefined set of viewport sizes and
other characteristics.
Source:froont.com

9. Hybrid vs Native
Image courtesy of goander.

10. Accelerated Mobile Pages (AMP)
https://www.ampproject.org/

11. Progressive Web Apps
Progressive web apps are a hybrid of regular web pages and a mobile application.

12. Breakpoints
A breakpoint is the range of predetermined screen sizes that have specific layout
requirements. At a given breakpoint range, the layout adjusts to suit the screen
size and orientation.

13. Let’s talk dev

14. CSS @media queries

15. Viewport

16. Understanding the canvas

17. Pixel Density ?
The number of pixels that fit into an inch is referred to as pixel density.

18. Density independence
Density independence refers to the uniform display of UI elements on screens with
different densities.

19. Physical vs. Logical
Effective pixels (epx)
Density-independent pixels (dp)
Scalable pixels (sp)
Points (pts)

20. Well begun is half done.

21. Start @1x

22. Choose a grid system that helps

23. Aspect Ratio

24. Approach
“Simplicity of approach is always best.”

25. Finger-Friendly Design
Source:smashingmagazine

26. Mobile First Design

27. Content First Design

28. Navigation

29. Navigation
Lateral, Forward & Reverse

30. ● Minimize Cognitive Load
● Optimized User Flow
● Cut Out The Clutter
● Make Navigation Self-Evident
● Optimize Interactions For the Medium
● Designed Elements Should Look Like How
They Behave
● Design Finger-friendly Tap-targets
● Consider the Thumb Zone
● Strive To Create Multichannel Experience
● Design For Interruption
● Intuitive Gestures
● Design Zero State
● Visual feedback
● Time your notification
● Personalization
● Anticipate users needs
● Break tasks into bite-sized chunks
● Show system status
● Functional Animation
● First Time Experience
● Minimize user input

31. Q&A
siddarth.design
fb.com/groups/kovaimadrasters/