Thinking Outside the Box That Keeps Moving Tips and Tricks for a Responsive Web lukebrooker

Responsive Trivia

Round Foundations

What meta tags are needed to make your site adapt to every devices size no matter the orientation a < 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 " > b < 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 " > c < 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 , m a x i m u m - s c a l e = 1 " > d Bug in IE mobile fix is rolling out @ v i e w p o r t { w i d t h : d e v i c e - w i d t h } ;

Demo a cdpn io vAjcp b cdpn io DBAbL c cdpn io eyqgf

Further reading Preliminary meta viewport research Responsive Design in IE on Windows Phone quirksmode org blog archives preliminary met html mattstow com responsive design in ie on windows phone html

According to Apple what is the minimum size a touch target should be a px b px c px d px

Keep your designs finger friendly Try for at least mm with some spacing

Further Reading Touch Target Sizes On Touch Target Size lukew com ff entry asp maya com the feed on touch target size

Tip Build components

Web Components are coming < m y - w i d g e t > < / m y - w i d g e t >

Further Reading Improving Your Responsive Workflow with Style Guides Web Components Revolution lukebrooker com presentations improving your responsive workflow with style guides robdodson me webcomponents revolution

Tip Create guidelines and stick to them

Save yourself from yourself

Further Reading github com csswizardry CSS Guidelines github com lukebrooker CSS Guidelines https github com airbnb javascript

Round Adaption

What is the best unit of measurement to use across a responsive web site a px b rems c ems d vw vh

Demo Pixels Ems getbootstrap com zanata org

Implementation Use ems for almost all measurements Base measurements on vertical rhythm Use preprocessors to help Sass Stylus etc

Demo HTML SCSS Result Edit on < h 1 > H e a d i n g < / h 1 > < d i v c l a s s = " p a n e l " > < p > L o r e m i p s u m d o l o r s i t a m e t , c o n s e c t e t u r a d i p i s c i n g e l i t . D u i s l u c t u s n i s i e t e r o s b i b e n d u m l a c i n i a . C u r a b i t u r s e d e s t n e c < p > L o r e m i p s u m d o l o r s i t a m e t , c o n s e c t e t u r a d i p i s c i n g e l i t . D u i s l u c t u s n i s i e t e r o s b i b e n d u m l a c i n i a . C u r a b i t u r s e d e s t n e c < / d i v > @ i m p o r t " c o m p a s s " ; $ b a s e - l i n e - h e i g h t : 2 4 p x ; $ b a s e - f o n t - s i z e : 1 6 p x ; h t m l { l i n e - h e i g h t : r h y t h m ( 1 ) ; f o n t - s i z e : $ b a s e - f o n t - s i z e ; f o n t - f a m i l y : H e l v e t i c a , s a n s - s e r i f ; }

Further Reading Rhythm Grid Mailchimp http bit ly hWf WP

How do can we keep the aspect ratio of a video or any other element across different screen sizes a fitvids js b m a x - w i d t h : 1 0 0 % c m a x - h e i g h t : 1 0 0 % d Zero height padding hack

Demo HTML SCSS Result Edit on < d i v c l a s s = " m e d i a - - r a t i o - 1 6 - 9 " > < i f r a m e w i d t h = " 4 2 0 " h e i g h t = " 3 1 5 " s r c = " / / w w w . y o u t u b e . c o m / e m b e d / U G - 0 F R m m 5 J E " f r a m e b o r d e r = " 0 " a l l o w f u l l s c r e e n > < / i f r a m e < / d i v > < d i v c l a s s = " m e d i a - - r a t i o - 4 - 3 " > < i m g c l a s s = " m e d i a - - r a t i o _ _ i n n e r " s r c = " h t t p : / / i . i m g u r . c o m / J 4 V p c k x . j p g " a l t = " D o g e H u n t e r " / > < / d i v > @ i m p o r t " c o m p a s s " ; b o d y { f o n t - f a m i l y : H e l v e t i c a , s a n s - s e r i f ; m a r g i n : r h y t h m ( 1 ) a u t o ; m a x - w i d t h : r h y t h m ( 4 0 ) ; } % m e d i a - - r a t i o { p o s i t i o n : r e l a t i v e ; p a d d i n g - t o p : r h y t h m ( 1 ) ; h e i g h t : 0 ; m a r g i n : 0 0 r h y t h m ( 1 ) ; o v e r f l o w : h i d d e n ; i f r a m e , o b j e c t , v i d e o , cdpn io Ctroe

Further Reading Creating Intrinsic Ratios for Video alistapart com article creating intrinsic ratios for video

How could we make something that is hoverable on pointer devices but touchable on touch devices a Media Queries Soon b Feature detection e g Modernizr c Custom javascript event handlers d User agent detection

Demo HTML SCSS JS Result Edit on < p > S h o w t h e m e n u o n h o v e r , c l i c k o r t o u c h . P e r s i s t i f i t i s c l i c k o r t o u c h . < / p > < d i v i d = " m e n u _ _ c o n t a i n e r " c l a s s = " m e n u _ _ c o n t a i n e r " > < a h r e f = " # m e n u " i d = " m e n u _ _ b u t t o n " c l a s s = " m e n u _ _ b u t t o n " > M e n u < / a > cdpn io aCiol

But also New media queries are coming Pointer Hover Luminosity

Further Reading jordanm co uk post responding to environmental lighting with css media

Tip Be specific with breakpoints

Further Reading Habits of Highly Effective Media Queries bradfrostweb com blog post habits of highly effective media queries

Round Performance

How do you remove the ms lag from a touch event a fastclick js b < m e t a n a m e = " v i e w p o r t " c o n t e n t = " u s e r - s c a l a b l e = n o " > c Use native javascript touch events d All of the above But try not to use user scalable no

fastclick js github com ftlabs fastclick

Further Reading Touch And Mouse Together Again For The First Time html rocks com en mobile touchandmouse

What CSS is needed to speed up scrolling on iOS a z index b overflow scroll c webkit overflow scrolling touch d scrolling butter

Demo cdpn io sltrB

What CSS propertie s can be used to animate cheaply i e Keep frame rates at fps a Position b Opacity c Color d Transform

Opacity Transform Translate Rotate Scale

Demo CSS animation of top/left vs transform in slow­mo. 0:00 / 1:03

Further Reading High Performance Animations html rocks com en tutorials speed high performance animations

What advantages do automation and build tools like Grunt Bower and Yeoman have a Linting concatenating and minifying JS CSS b Compiling CSS Preprocessors Sass Stylus etc c Optimising images d Automatically scaffold new apps e Handle external dependencies f Recompile your project and refresh your browser on save g Automatically create icon fonts h Deploy your project i Inflate your ego j All of the above

No content

Further Reading Automating Front end Workflow speakerdeck com addyosmani automating front end workflow

Tip Get to know your Developer Tools

Further Reading Chrome DevTools developers google com chrome developer tools

Round Images

What is the current front runner as a responsive images solution a picture b src N c srcset d Developers pulling their hair out

src N < i m g s r c = " h t t p : / / p l a c e h o l d . i t / 3 0 0 . j p g " s r c - 1 = " ( m i n - w i d t h : 3 0 0 p x ) h t t p : / / p l a c e h o l d . i t / 5 0 0 . j p g " s r c - 2 = " ( m i n - w i d t h : 5 0 0 p x ) h t t p : / / p l a c e h o l d . i t / 8 0 0 . j p g " a l t = " P l a c e h o l d e r I m a g e " >

Tip Other image solutions

Clown Car Technique HTML CSS Result Edit on < d i v > < s v g x m l n s = " h t t p : / / w w w . w 3 . o r g / 2 0 0 0 / s v g " v i e w B o x = " 0 0 3 7 5 2 3 1 " p r e s e r v e A s p e c t R a t i o = " x M i d Y M i d m e e t " t a b i n d e x = " - 1 " a r i a - l a b e l = " t h e a r i a l a b e l i s b e i n g r e a d " r o l e = " i m g " t i t l e = " t h e t i t l e a t t r i b u t e o f t h e S V G i s b e i n g r e a d " > < t i t l e > C l o w n C a r T e c h n i q u e < / t i t l e > < s t y l e > s v g { b a c k g r o u n d - s i z e : 1 0 0 % 1 0 0 % ; b a c k g r o u n d - r e p e a t : n o - r e p e a t ; } @ m e d i a s c r e e n a n d ( m a x - w i d t h : 4 0 0 p x ) { s v g { b a c k g r o u n d - i m a g e : u r l ( " h t t p : / / s . c d p n . i o / 1 6 8 / p i c - M e d i u m - 3 7 5 x 2 3 1 - @ 1 x - 7 2 p p i . j p g " ) ; o u t l i n e : g r e e n s o l i d 5 p x ; } } @ m e d i a s c r e e n a n d ( m i n - w i d t h : 4 0 1 p x ) , s c r e e n a n d ( m a x - w i d t h : 4 0 0 p x ) a n d ( - w e b k i t - m i n - d e v i c e - p i x e l - r a t i o : 1 . 7 5 ) { s v g { cdpn io idLHt

More image solutions The Lazy times technique Paid services e g resrc it

Further Reading Proposal for RespImg Syntax Responsive images end of year report Clown Car Technique Solving Adaptive Images In Responsive Web Design tabatkins github io specs respimg Overview html html doctor com responsive images end of year report bit ly hW hVc

No content

What browsers do not support SVG a IE b IE Android Browser c IE Android Browser Opera Mini Sort of d Android Browser Opera Mini

Demo HTML CSS Result Edit on < d i v > < s v g w i d t h = " 9 6 " h e i g h t = " 9 6 " > < i m a g e x l i n k : h r e f = " h t t p : / / a s s e t s - z a n a t a . r h c l o u d . c o m / m a s t e r / l o g o . s v g " s r c = " h t t p : / / a s s e t s - z a n a t a . r < / d i v >

Further Reading SVG and image tag tricks lynn ru examples svg en html

Round Layout

How could we set a fixed padding and margin but keep a fluid defined width a flex box b box sizing border box c max width d display table cell

Replace all the box models * , * : b e f o r e , * : a f t e r { b o x - s i z i n g : b o r d e r - b o x ; }

Further Reading paulirish com box sizing border box ftw

Tip Inline block grids

Demo HTML SCSS Result Edit on < u l c l a s s = " g " > < l i c l a s s = " g _ _ i t e m w - - 1 - 4 p h " > 1 ( 1 / 4 ) < / l i > < l i c l a s s = " g _ _ i t e m w - - 1 - 2 p h " > 2 ( 1 / 2 ) < / l i > < l i c l a s s = " g _ _ i t e m w - - 1 - 4 p h " > 3 ( 1 / 4 ) < / l i > < l i c l a s s = " g _ _ i t e m w - - 1 - 4 p h " > 4 ( 1 / 4 ) < / l i > < l i c l a s s = " g _ _ i t e m w - - 1 - 4 p h " > 5 ( 1 / 4 ) < / l i > < l i c l a s s = " g _ _ i t e m w - - 1 - 4 p h " > 6 ( 1 / 4 ) < / l i > < l i c l a s s = " g _ _ i t e m w - - 1 - 8 p h " > 7 ( 1 / 8 ) < / l i > < l i c l a s s = " g _ _ i t e m w - - 1 - 8 p h " > 8 ( 1 / 8 ) < / l i > < / u l > @ i m p o r t " c o m p a s s " ; $ g r i d - p a d d i n g : r h y t h m ( 1 ) ; cdpn io GitgI

When should tables be used a For as much layout as possible b For tabular data c For tabular data and forms d Never

I ve got tables and a responsive solution for each one

Horizontal overflow Easy HTML SCSS Result Edit on < d i v c l a s s = " t a b l e - - o v e r f l o w " > < t a b l e > < t r > < t h > T a b l e H e a d e r 1 < / t h > < t h > T a b l e H e a d e r 2 < / t h > < t h > T a b l e H e a d e r 3 < / t h > < t h > T a b l e H e a d e r 4 < / t h > < t h > T a b l e H e a d e r 5 < / t h > < t h > T a b l e H e a d e r 6 < / t h > cdpn io xFbKk

Priority Columns For large amounts of data Selectively displaying data The number of columns displayed in the table below depends on the available screen space, by default; a smartphone will display 2 columns, for example, while an expanded desktop browser displays the full set. This is accomplished by assigning semantic classes to the column headings that indicate which data values take precedence (essential vs optional), in combination with media queries to display them at different screen widths (a.k.a., responsive design). We added a bit of JavaScript logic so you can control which data is displayed by checking column names in the "Display" menu on the right. Once an option is checked, the associated data will persist and display at all screen widths until the option is unchecked. You can also set a column to always persist by assigning a class in the markup, in which case it has no menu option. Here, the "Company" column is persistent. Company Last Trade Change GOOG 597.74 14.81 (2.54%) AAPL 378.94 5.74 (1.54%) AMZN 191.55 3.16 (1.68%) ORCL 31.15 1.41 (4.72%) MSFT 25.50 0.66 (2.67%) CSCO 18.65 0.97 (5.49%) YHOO 15.81 0.11 (0.67%) Display Google Inc. Apple Inc. Amazon.com Inc. Oracle Corporation Microsoft Corporation Cisco Systems, Inc. Yahoo! Inc. filamentgroup com examples rwd table patterns

Further Reading This is Responsive bradfrost github io this is responsive patterns html tables

How do you keep this text from wrapping HTML SCSS Result Edit on < d i v c l a s s = " f l o a t e r " > < d i v c l a s s = " f l o a t e r _ _ i t e m " > < i m g s r c = " h t t p : / / p l a c e h o l d . i t / 1 5 0 " a l t = " " / > < / d i v > < d i v c l a s s = " f l o a t e r _ _ c o n t e n t " > < p > L o r e m i p s u m d o l o r s i t a m e t , c o n s e c t e t u r a d i p i s c i n g e l i t . D u i s l u c t u s n i s i e t e r o s b i b e n d u m l a c i n i a . C u r a b i t u r s e d e s t n e < p > L o r e m i p s u m d o l o r s i t a m e t , c o n s e c t e t u r a d i p i s c i n g e l i t . D u i s l u c t u s n i s i e t e r o s b i b e n d u m l a c i n i a . C u r a b i t u r s e d e s t n e < p > L o r e m i p s u m d o l o r s i t a m e t , c o n s e c t e t u r a d i p i s c i n g e l i t . D u i s l u c t u s n i s i e t e r o s b i b e n d u m l a c i n i a . C u r a b i t u r s e d e s t n e < / d i v > < / d i v > @ i m p o r t " c o m p a s s " ; b o d y { f o n t - f a m i l y : H e l v e t i c a , s a n s - s e r i f ; m a r g i n : 0 ; p a d d i n g : r h y t h m ( 1 ) ; l i n e - h e i g h t : r h y t h m ( 1 ) ; } i m g {

Finally

When should you use carousels

Never

Thanks Now it s your turn for questions lukebrooker