Thinking Outside the Box that Keeps Moving

Original Slides: http://lukebrooker.com/presentations/thinking-outside-the-box-that-keeps-moving

Tips and Tricks for a Responsive Web.

From my Brisbane Web Design Talk November 21st 2013.

Transcript

1. Thinking Outside the Box That Keeps Moving Tips and Tricks for a Responsive Web lukebrooker
2. Responsive Trivia
3. Round Foundations
4. 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 } ;
5. Demo a cdpn io vAjcp b cdpn io DBAbL c cdpn io eyqgf
6. 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
7. According to Apple what is the minimum size a touch target should be a px b px c px d px
8. Keep your designs finger friendly Try for at least mm with some spacing
9. Further Reading Touch Target Sizes On Touch Target Size lukew com ff entry asp maya com the feed on touch target size
10. Tip Build components
11. Web Components are coming < m y - w i d g e t > < / m y - w i d g e t >
12. 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
13. Tip Create guidelines and stick to them
14. Save yourself from yourself
15. Further Reading github com csswizardry CSS Guidelines github com lukebrooker CSS Guidelines https github com airbnb javascript
16. Round Adaption
17. What is the best unit of measurement to use across a responsive web site a px b rems c ems d vw vh
18. Demo Pixels Ems getbootstrap com zanata org
19. Implementation Use ems for almost all measurements Base measurements on vertical rhythm Use preprocessors to help Sass Stylus etc
20. 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 ; }
21. Further Reading Rhythm Grid Mailchimp http bit ly hWf WP
22. 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
23. 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
24. Further Reading Creating Intrinsic Ratios for Video alistapart com article creating intrinsic ratios for video
25. 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
26. 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
27. But also New media queries are coming Pointer Hover Luminosity
28. Further Reading jordanm co uk post responding to environmental lighting with css media
29. Tip Be specific with breakpoints
30. Further Reading Habits of Highly Effective Media Queries bradfrostweb com blog post habits of highly effective media queries
31. Round Performance
32. 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
33. fastclick js github com ftlabs fastclick
34. Further Reading Touch And Mouse Together Again For The First Time html rocks com en mobile touchandmouse
35. What CSS is needed to speed up scrolling on iOS a z index b overflow scroll c webkit overflow scrolling touch d scrolling butter
36. Demo cdpn io sltrB
37. 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
38. Opacity Transform Translate Rotate Scale
39. Demo CSS animation of top/left vs transform in slow­mo. 0:00 / 1:03
40. Further Reading High Performance Animations html rocks com en tutorials speed high performance animations
41. 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
43. Further Reading Automating Front end Workflow speakerdeck com addyosmani automating front end workflow
44. Tip Get to know your Developer Tools
45. Further Reading Chrome DevTools developers google com chrome developer tools
46. Round Images
47. What is the current front runner as a responsive images solution a picture b src N c srcset d Developers pulling their hair out
48. 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 " >
49. Tip Other image solutions
50. 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
51. More image solutions The Lazy times technique Paid services e g resrc it
52. 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
54. 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
55. 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 >
56. Further Reading SVG and image tag tricks lynn ru examples svg en html
57. Round Layout
58. 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
59. 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 ; }
60. Further Reading paulirish com box sizing border box ftw
61. Tip Inline block grids
62. 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
63. When should tables be used a For as much layout as possible b For tabular data c For tabular data and forms d Never
64. I ve got tables and a responsive solution for each one
65. 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
66. 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
67. Further Reading This is Responsive bradfrost github io this is responsive patterns html tables
68. 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 {
69. Finally
70. When should you use carousels
71. Never
72. Thanks Now it s your turn for questions lukebrooker