responsive web design
TRANSCRIPT
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?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