responsive web design

27
RESPONSIVE WEB DESIGN Logan Chien

Upload: logan-chien

Post on 16-Apr-2017

72 views

Category:

Software


0 download

TRANSCRIPT

RESPONSIVE WEBDESIGN

Logan Chien

AGENDAIntroduction

Foundation of RWD

Retrospective

INTRODUCTION

WHAT IS RWD?1/4

Responsive Web Design is a methodology which advocatesone HTML file should be able to adapt to different screen

size.

WHAT IS RWD?2/4

screenshot with 1400x800 resolutionThe Next Web

WHAT IS RWD?3/4

screenshot with 1024px and 320px widthThe Next Web

WHAT IS RWD?4/4

12

3 4

1

2 3 4

12

3

4

Large Medium SmallDesktop Phone

MOTIVATIONToo many screen resolutions — width, height, and dpi

Difficult to determine screen size from user agent

FOUNDATION OF RWD

VIEW PORT1/2

Viewport is a rectangular area that is being viewed.

On mobile devices, the default width is usually larger thanthe actual screen size.

To build a mobile-friendly website, we should explicitlyspecify width=device‑width.

< m e t a n a m e = " v i e w p o r t " c o n t e n t = " w i d t h = d e v i c e - w i d t h , i n i t i a l - s c a l e = 1 . 0 " / >

VIEW PORT2/2

Name Description Value

width Viewport width Integer in pixels or device‑width

minimum-scale

Minimum possible zoomscale

Floating point between 0.0 — 10.0

maximum-scale

Maximum possible zoomscale

Floating point between 0.0 — 10.0

initial-scale

Initial scale when thepage is loaded

Floating point between minimum‑scaleand maximum‑scale

user-scalable

Can user zoom in/out? yes or no

CSS MEDIA QUERY@ m e d i a o n l y s c r e e n a n d ( m a x - w i d t h : 5 0 0 p x ) { / * A p p l i e s w h e n w i d t h i s l e s s t h a n o r e q u a l t o 5 0 0 p x . * / }

@ m e d i a o n l y s c r e e n a n d ( m i n - w i d t h : 5 0 0 p x ) { / * A p p l i e s w h e n w i d t h i s g r e a t e r t h a n o r e q u a l t o 5 0 0 p x . * / }

CSS MEDIA QUERY DETAILS 1/3

@ m e d i a o n l y s c r e e n a n d ( m i n - w i d t h : 5 0 0 p x ) a n d ( m a x - w i d t h : 1 2 0 0 p x ) { / * A p p l i e s w h e n w i d t h i s i n 5 0 0 - 1 2 0 0 p x . * / }

keyword only — No special effect on new browsers. Oldbrowsers will completely ignore the media query directive.

media type — all, screen, and print

CSS MEDIA QUERY DETAILS 2/3

@ m e d i a o n l y s c r e e n a n d ( m i n - w i d t h : 5 0 0 p x ) a n d ( m a x - w i d t h : 1 2 0 0 p x ) { / * R u l e s f o r s c r e e n s w i t h 5 0 0 - 1 2 0 0 p x v i e w p o r t w i d t h . * / }

MEDIA FEATURESprefix — min, max

viewport — width, height, aspect‑ratio

device — device‑width, device‑height, device‑aspect‑ratio

CSS MEDIA QUERY DETAILS 3/3

p { c o l o r : b l u e ; }

@ m e d i a o n l y s c r e e n a n d ( m a x - w i d t h : 7 6 8 p x ) { p { t e x t - d e c o r a t i o n : u n d e r l i n e ; } }

@ m e d i a o n l y s c r e e n a n d ( m a x - w i d t h : 3 2 0 p x ) { p { b a c k g r o u n d - c o l o r : y e l l o w ; } }

768px < width hello

320 < width <=768px hello

width <=320px hello

GRID AND FLUIDUse percentage instead of absolute measure units

Use grids to organize the content

33% 33% 33% 50% 50% 100%

100%

Control with CSS media query

MOBILE FIRST/ * C S S r u l e s f o r m o b i l e c o m e s f i r s t . * /

@ m e d i a o n l y s c r e e n a n d ( m i n - w i d t h : 3 2 1 p x ) { / * C S S r u l e s f o r t a b l e t o r l a r g e r d e v i c e s . * / }

@ m e d i a o n l y s c r e e n a n d ( m i n - w i d t h : 1 0 2 4 p x ) { / * C S S r u l e s f o r d e s k t o p . * / }

Reason: Some assets for desktop require a lot of networkbandwidth, which is undesired for mobile. Thus, it will be

preferred to give priority to mobile.

RANGE OVERLAP 1/2

. m e d i u m - o n l y { d i s p l a y : n o n e ; } . l a r g e - o n l y { d i s p l a y : n o n e ; }

@ m e d i a o n l y s c r e e n a n d ( m i n - w i d t h : 3 2 0 p x ) { . m e d i u m - o n l y { d i s p l a y : i n l i n e ; } }

@ m e d i a o n l y s c r e e n a n d ( m i n - w i d t h : 5 0 0 p x ) { . m e d i u m - o n l y { d i s p l a y : n o n e ; } / * r e s e t * / . l a r g e - o n l y { d i s p l a y : i n l i n e ; } }

This style sheet resets the CSS property when the screen sizeis larger than the desired width.

RANGE OVERLAP 2/2

. m e d i u m - o n l y { d i s p l a y : n o n e ; } . l a r g e - o n l y { d i s p l a y : n o n e ; }

@ m e d i a o n l y s c r e e n a n d ( m i n - w i d t h : 3 2 0 p x ) a n d ( m a x - w i d t h : 4 9 9 p x ) { . m e d i u m - o n l y { d i s p l a y : i n l i n e ; } }

@ m e d i a o n l y s c r e e n a n d ( m a x - w i d t h : 5 0 0 p x ) { . l a r g e - o n l y { d i s p l a y : i n l i n e ; } }

Off-by-one is necessary, otherwise both will be available on500px.

This style sheet uses exclusive media query, but this mightfail when the screen size is between 499px and 500px.

IMAGE AND PICTURE<img> tag with srcset and sizes attributes

<picture> tag with <source> tags and a fallback <img> tag

<IMG>, SRCSET, AND SIZES< i m g a l t = " p l a c e h o l d e r " s r c = " s m a l l . p n g " s r c s e t = " l a r g e . p n g 1 2 0 0 w , m e d i u m . p n g 5 0 0 w , s m a l l . p n g 3 2 0 w " s i z e s = " ( m i n - w i d t h : 8 0 0 p x ) 4 0 v w , 1 0 0 v w " / >

srcset — specifies 3 images large.png, medium.png, andsmall.png for screen that are larger than 1200px, 500px, and

320px respectively.

size — specifies 2 sizes. If the screen size is larger than orequal to 800px, then resize image to 40% of the screen size.

Otherwise, fit the image to the screen.

<PICTURE> AND <SOURCE>< p i c t u r e > < s o u r c e m e d i a = " ( m i n - w i d t h : 8 0 0 p x ) " s r c s e t = " l a r g e . j p g 1 0 2 4 w , m e d i u m . j p g 5 0 0 w , s m a l l . j p g 3 2 0 w " s i z e s = " ( m i n - w i d t h : 1 2 0 0 p x ) 3 0 v w , 4 0 v w " / > < s o u r c e s r c s e t = " c r o p p e d - l a r g e . j p g 2 x , c r o p p e d - s m a l l . j p g 1 x " / > < i m g s r c = " s m a l l . j p g " a l t = " p l a c e h o l d e r " / > < / p i c t u r e >

Remarks. <source> can refers to non-equivalent images (i.e.browsers might not be able to derive one from the other

with resizing algorithms.)

RETROSPECTIVE

IE SUPPORTIE 6-8 does not have CSS media query support.

An severe issue on mobile first website.

There is a shim layer named written inJavascript.

Respond.js

Guideline: Degrade the QoS gracefully even with mobile-based CSS.

ONE SIZE DON'T FIT ALLRWD is suboptimal because the users have to download

some unused content/asset. However, properly cra�ed sitecan mitigate the overhead.

RWD is not the answer to every questions. A good designshould be designed. A good mobile website requires not onlya responsive layout but also well-studied mobile use cases.

CONCLUSIONRWD is a technique for web pages to adjust itself ondifferent screen sizes.

Use CSS media query to support different screen sizes.

Use srcset, sizes, or even picture to load differentsource images.

RWD is the trend but mobile use case analyses are stillrequired.

THE ENDQ & A