Upload
today-software-magazine
View
226
Download
3
Tags:
Embed Size (px)
DESCRIPTION
Â
Citation preview
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