Responsive Design - A fad or a necessity Bogdan Nastasă UX/UI Design Lead
Agenda
Responsive design – THE Definition
First 3 steps to know before starting the Responsive Web Design
The Good, the Bad and the Ugly
Responsive design – Solution kit IN YOUR ZONE
2
Responsive design - definition
Responsive web design (RWD) is a web design approach aimed at crafting sites to provide an optimal viewing experience—easy reading and navigation with a minimum of resizing and scrolling—across a wide range of devices (from TV or desktop computer monitors to mobile phones) IN YOUR ZONE
3
Responsive design - definition
IN YOUR ZONE
4
Agenda
Responsive design – THE Definition
First 3 steps to know before starting the Responsive Web Design
The Good, the Bad and the Ugly
Responsive design – Solution kit IN YOUR ZONE
5
The magic 3 1. Flexible grid
2. Adaptive media elements
3. Media Queries @media screen and (max-devicewidth: 480px)
IN YOUR ZONE
6
The magic 3 1. Flexible grid
IN YOUR ZONE
7
The magic 3 2. Adaptive media elements
IN YOUR ZONE
8
The magic 3 3. Media Queries – CSS3
iPad - portrait @media screen (min-device-width: 480px) and (max-device-width: 768px) iPhone - landscape @media screen and (max-device-width: 480px) IN YOUR ZONE
9
Agenda
Responsive design – THE Definition
First 3 steps to know before starting the Responsive Web Design The Good, the Bad and the Ugly
Responsive design – Solution kit IN YOUR ZONE
10
The Good, the Bad and the Ugly
www.microsoft.com
IN YOUR ZONE
11
The Good, the Bad and the Ugly
www.starbucks.com
IN YOUR ZONE
12
The Good, the Bad and the Ugly I will revisit this web site again.. but now I will go for a Responsive coffee! shopping site! Responsive video! Awesome! Great Sweeeeet… Uray! What’s next? web site. FENOMENAL UX Sweet! Let’s start to navigate Great! 5 Clicked on that link seconds rule! and now I need to zoom to read the I hope the Oh Not text? Me SAD again! I will website will go for a coffee now! load fast
Client satisfaction after visiting the web sites
IN YOUR ZONE
13
Agenda
Responsive design – THE Definition
First 3 steps to know before starting the Responsive Web Design
The Good, the Bad and the Ugly Responsive design – Solution kit IN YOUR ZONE
14
Responsive design – Solution kit
Ergonomic Conditional Content
HTML 5 CSS3 Performance & Optimization
IN YOUR ZONE
15
Responsive design – Solution kit
Ergonomic (don’t make the user think) Accessibility Users must be able to find what they are looking for. Consistency Apply consistency over your interface.
Grouping Information should be organized in intuitive and related groupings Simplicity Use simple, brief and intuitive labels and naming conventions. Stick to short copy blocks and limited scrolling. IN YOUR ZONE
16
Responsive design – Solution kit
Conditional Content Not everything shown on a PC site can fit reasonably onto a mobile web page, where space is short and every pixel counts. It's important to reduce the amount of content shown on the mobile-optimised version Mobile websites should be very focused. This makes them easier to read and move around, as well as quicker to load on devices that can sometimes have slow Internet connection speed Single column layouts work best Wide web pages are difficult to view on small mobile phone screens
IN YOUR ZONE
17
Responsive design – Solution kit
HTML 5 & CSS3
IN YOUR ZONE
18
Responsive design – Solution kit
Performance & Optimization
Oldies but Goldie's: 56K/s
IN YOUR ZONE
19
Agenda
Responsive design – THE Definition
First 3 steps to know before starting the Responsive Web Design
The Good, the Bad and the Ugly
Responsive design – Solution kit IN YOUR ZONE
20
Conclusion
The good: • Continuous great User eXperience • Better SEO • Target on multiple devices – iOS, Android, Windows • Less time to develop • 1 cost for building one web site. • Less time to maintain the content of the website The bad: • Low performance on loading the page • Compatibility between the browsers
It’s recommended to integrate a Responsive Design, but deliver entire solution kit to cover all the majority of devices.
IN YOUR ZONE
21
Bonus
IN YOUR ZONE
22
Thank you
Bogdan Nastasă UX / UI Design Lead
IN YOUR ZONE
23