Design adaptiv - un moft sau o necesitate

Responsive Design - A fad or a necessity

Bogdan Nastasă

UX/UI Design Lead

IN YOUR ZONE

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

Agenda

2

IN YOUR ZONE

Responsive design - definition

3

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

Responsive design - definition

4

IN YOUR ZONE

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

Agenda

5

IN YOUR ZONE

1. Flexible grid 2. Adaptive media elements

The magic 3

6

3. Media Queries @media screen and (max-device-width: 480px)

IN YOUR ZONE

1. Flexible grid

The magic 3

7

IN YOUR ZONE

2. Adaptive media elements

The magic 3

8

IN YOUR ZONE

3. Media Queries – CSS3

The magic 3

9

iPhone - landscape @media screen and (max-device-width: 480px)

iPad - portrait @media screen (min-device-width: 480px) and (max-device-width: 768px)

IN YOUR ZONE

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

Agenda

10

IN YOUR ZONE

The Good, the Bad and the Ugly

11

www.microsoft.com

IN YOUR ZONE

The Good, the Bad and the Ugly

12

www.starbucks.com

IN YOUR ZONE

The Good, the Bad and the Ugly

13

Client satisfaction after visiting the web sites

I hope the website will

load fast

Great! 5 seconds rule!

Sweet! Let’s start to

navigate

Awesome! Great web site.

FENOMENAL UX

Clicked on that link and now I need to zoom to read the text? Me SAD Oh Not again! I will

go for a coffee now!

Responsive video! Uray! What’s next?

I will revisit this web site again..

but now I will go for a coffee! Responsive

shopping site! Sweeeeet…

IN YOUR ZONE

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

Agenda

14

IN YOUR ZONE

Responsive design – Solution kit

15

Ergonomic

Conditional Content

HTML 5

Performance & Optimization

CSS3

IN YOUR ZONE

Responsive design – Solution kit

16

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

Responsive design – Solution kit

17

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

Responsive design – Solution kit

18

HTML 5 & CSS3

IN YOUR ZONE

Responsive design – Solution kit

19

Performance & Optimization

Oldies but Goldie's: 56K/s

IN YOUR ZONE

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

Agenda

20

IN YOUR ZONE

Conclusion

21

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

Bonus

22

IN YOUR ZONE

Thank you

23

Bogdan Nastasă UX / UI Design Lead