Thinking Outside the Box that Keeps Moving

1a06ed07575b1a77fa2b324e1385c2ea?s=47 Luke Brooker
November 21, 2013

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.

1a06ed07575b1a77fa2b324e1385c2ea?s=128

Luke Brooker

November 21, 2013
Tweet

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
  42. None
  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
  53. None
  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