Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Thinking Outside the Box that Keeps Moving

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.

Luke Brooker

November 21, 2013
Tweet

More Decks by Luke Brooker

Other Decks in Design

Transcript

  1. 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 } ;
  2. 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
  3. According to Apple what is the minimum size a touch

    target should be a px b px c px d px
  4. Further Reading Touch Target Sizes On Touch Target Size lukew

    com ff entry asp maya com the feed on touch target size
  5. Web Components are coming < m y - w i

    d g e t > < / m y - w i d g e t >
  6. 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
  7. Further Reading github com csswizardry CSS Guidelines github com lukebrooker

    CSS Guidelines https github com airbnb javascript
  8. What is the best unit of measurement to use across

    a responsive web site a px b rems c ems d vw vh
  9. Implementation Use ems for almost all measurements Base measurements on

    vertical rhythm Use preprocessors to help Sass Stylus etc
  10. 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 ; }
  11. 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
  12. 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
  13. 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
  14. 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
  15. Further Reading Habits of Highly Effective Media Queries bradfrostweb com

    blog post habits of highly effective media queries
  16. 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
  17. Further Reading Touch And Mouse Together Again For The First

    Time html rocks com en mobile touchandmouse
  18. What CSS is needed to speed up scrolling on iOS

    a z index b overflow scroll c webkit overflow scrolling touch d scrolling butter
  19. 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
  20. 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
  21. What is the current front runner as a responsive images

    solution a picture b src N c srcset d Developers pulling their hair out
  22. 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 " >
  23. 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
  24. 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
  25. 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
  26. 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 >
  27. 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
  28. 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 ; }
  29. 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
  30. When should tables be used a For as much layout

    as possible b For tabular data c For tabular data and forms d Never
  31. 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
  32. 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
  33. 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 {