An Introduction to Responsive & Adaptive Web Design

My presentation from CodeMash 2012 on responsive web design. The code examples are here (https://github.com/sparkbox/CodeMash-RWD).

Transcript

1. Hands-On Responsive &
   Adaptive Web Design
   https://github.com/sparkbox/CodeMash-RWD
   1
   Monday, January 16, 2012
   

   View Slide

2. Ben Callahan
   President of Sparkbox
   @bencallahan
   http://seesparkbox.com
   https://github.com/sparkbox/CodeMash-RWD
   2
   Monday, January 16, 2012
   

   View Slide

3. The web is not fixed-width.
   3
   Monday, January 16, 2012
   

   View Slide

4. This is a paradigm shift.
   “...scientific advancement is not evolutionary, but
   rather is a series of peaceful interludes
   punctuated by intellectually violent revolutions,
   and in those revolutions one conceptual world is
   replaced by another...”
   Thomas Kuhn
   4
   Monday, January 16, 2012
   

   View Slide

5. This is a paradigm shift.
   ENIAC, 1946
   5
   Monday, January 16, 2012
   

   View Slide

6. This is a paradigm shift.
   Micral, 1972
   6
   Monday, January 16, 2012
   

   View Slide

7. This is a paradigm shift.
   Ericsson R380, 2000
   7
   Monday, January 16, 2012
   

   View Slide

8. This is a paradigm shift.
   Over 60% of new handset sales are smartphones.
   8
   Monday, January 16, 2012
   

   View Slide

9. This is a paradigm shift.
   Apple sold around
   13 million iPads in
   Q4 of 2011.
   9
   Monday, January 16, 2012
   

   View Slide

10. This is a paradigm shift.
    Amazon sold over
    4 million Kindle Fires
    in December of 2011.
    10
    Monday, January 16, 2012
    

    View Slide

11. Flexibility is the new norm.
    11
    Monday, January 16, 2012
    

    View Slide

12. Flexibility is the new norm.
    Mobile internet
    usage is predicted to
    overtake desktop in
    the next two years.
    12
    Monday, January 16, 2012
    

    View Slide

13. Flexibility is the new norm.
    People are trying to browse your
    websites on these devices, today.
    13
    Monday, January 16, 2012
    

    View Slide

14. Responsive Web Design
    Ethan Marcotte
    • article on alistapart.com
    • book via A Book Apart
    14
    Monday, January 16, 2012
    

    View Slide

15. Responsive Web Design
    Ethan Marcotte
    • stickler on definitions
    15
    Monday, January 16, 2012
    

    View Slide

16. Responsive Web Design
    • A flexible foundation (fluid grid)
    • Flexible content (images, video, etc.)
    • Media queries
    https://github.com/sparkbox/CodeMash-RWD
    16
    Monday, January 16, 2012
    

    View Slide

17. A Flexible Foundation
    17
    Monday, January 16, 2012
    

    View Slide

18. A Flexible Foundation
    
    
    
    
    
    
    18
    Monday, January 16, 2012
    

    View Slide

19. A Flexible Foundation
    Open up cm-1.html
    The CSS is all in the of the
    example files.
    19
    Monday, January 16, 2012
    

    View Slide

20. A Flexible Foundation
    .span-1, .span-2, .span-3 {
    margin-right: 10px;
    }
    .span-1, .span-2, .span-3 {
    margin-right: /* ??% */
    }
    Fixed-Width
    Fluid
    20
    Monday, January 16, 2012
    

    View Slide

21. A Flexible Foundation
    .span-1, .span-2, .span-3 {
    margin-right: 10px;
    }
    .span-1, .span-2, .span-3 {
    margin-right: 3.33333%;
    }
    Fixed-Width
    Fluid
    10 / 300 = .0333
    21
    Monday, January 16, 2012
    

    View Slide

22. A Flexible Foundation
    Turn the 300px 3-column grid into
    a fluid grid.
    cm-1.html
    22
    Monday, January 16, 2012
    

    View Slide

23. A Flexible Foundation
    .span-1, .span-2, .span-3 {
    margin-right: 10px;
    }
    .span-1, .span-2, .span-3 {
    margin-right: 3%;
    }
    Fixed-Width
    Fluid
    9 / 300 = .03
    23
    Monday, January 16, 2012
    

    View Slide

24. A Flexible Foundation
    www.semantic.gs
    with
    LESS or SASS
    24
    Monday, January 16, 2012
    

    View Slide

25. A Flexible Foundation
    There are links to more resources on
    this in the readme file.
    25
    Monday, January 16, 2012
    

    View Slide

26. Flexible Content
    26
    Monday, January 16, 2012
    

    View Slide

27. Flexible Content
    img {
    float: right;
    max-width: 100%;
    }
    27
    Monday, January 16, 2012
    

    View Slide

28. Flexible Content
    28
    Monday, January 16, 2012
    

    View Slide

29. Flexible Content
    http://www.netmagazine.com/tutorials/create-fluid-width-videos
    • set width to 100%, remove height
    • add a wrapper to maintain aspect ratio
    • use JS to detect and maintain size
    29
    Monday, January 16, 2012
    

    View Slide

30. Media Queries
    • width, height
    • device-width, device-height
    • orientation
    • aspect ratio
    • several others
    http://www.w3.org/TR/css3-mediaqueries/
    30
    Monday, January 16, 2012
    

    View Slide

31. Media Queries
    @media only screen and (min-width: 600px)
    {
    /* styles for 600px and up here */
    }
    @media only screen and (max-width: 600px)
    {
    /* styles for 600px and down here */
    }
    31
    Monday, January 16, 2012
    

    View Slide

32. Media Queries
    /* Large Resolution First CSS File Structure */
    /* large resolution layouts here */
    @media only screen and (max-width: 850px) {
    /* styles for 850px and down here */
    }
    @media only screen and (max-width: 450px) {
    /* styles for 450px and down here */
    }
    32
    Monday, January 16, 2012
    

    View Slide

33. Media Queries
    /* Small Resolution First CSS File Structure */
    /* smallest resolution layouts here */
    @media only screen and (min-width: 450px) {
    /* styles for 450px and up here */
    }
    @media only screen and (min-width: 850px) {
    /* styles for 850px and up here */
    }
    33
    Monday, January 16, 2012
    

    View Slide

34. Media Queries
    Large Resolution First
    PRO: IE support by default
    CON: Smallest devices load all assets
    Small Resolution First
    PRO: More logical (build up vs tear down)
    CON: IE support is tricky
    34
    Monday, January 16, 2012
    

    View Slide

35. Media Queries
    Large Resolution First
    PRO: IE support by default
    CON: Smallest devices load all assets
    Small Resolution First
    PRO: More logical (build up vs tear down)
    CON: IE support is tricky
    35
    Monday, January 16, 2012
    

    View Slide

36. How We Do It
    Use a fluid grid.
    Keep your eye on the image issue.
    Mobile first CSS.
    Test on actual devices.
    36
    Monday, January 16, 2012
    

    View Slide

37. Major Challenges
    • Images
    • Ads
    • Big Tables
    • Complex Navigation
    • Process
    37
    Monday, January 16, 2012
    

    View Slide

38. Challenge: Images
    It’s irresponsible to serve large
    images to small screens.
    38
    Monday, January 16, 2012
    

    View Slide

39. Challenge: Images
    JavaScript
    Device Detection
    Resize Service
    Headers
    New tag
    New format
    There are quite a few
    potential solutions
    39
    Monday, January 16, 2012
    

    View Slide

40. Challenge: Images
    JavaScript
    Device Detection
    Resize Service
    Headers
    New tag
    New format
    
    
    
    
    40
    Monday, January 16, 2012
    

    View Slide

41. Challenge: Images
    Join in the conversation:
    @grigs, @scottjehl, @beep, @yoavweiss,
    @robertnyman, @necolas
    http://cloudfour.com/responsive-imgs/
    41
    Monday, January 16, 2012
    

    View Slide

42. Challenge: Ads
    Ads are sold based on size and
    position, which is dynamic in
    responsive web design.
    42
    Monday, January 16, 2012
    

    View Slide

43. Challenge: Ads
    Boston Globe
    Mark Boulton • Use JavaScript to reposition
    • Fixed-width and centered
    • Clipped at some resolutions
    43
    Monday, January 16, 2012
    

    View Slide

44. Challenge: Ads
    Boston Globe
    Mark Boulton Mark wrote a solid summary
    of the major issues he’s facing
    while working on this.
    (Google “responsive advertising”)
    44
    Monday, January 16, 2012
    

    View Slide

45. Challenge: Big Tables
    Tables with large amounts of data
    become unmanageable at smaller
    resolutions.
    45
    Monday, January 16, 2012
    

    View Slide

46. Challenge: Big Tables
    Switch Orientation
    Hide Columns
    Visualize
    Chris Coyer originally
    suggested that we use some
    CSS to change the orientation.
    46
    Monday, January 16, 2012
    

    View Slide

47. Challenge: Big Tables
    Switch Orientation
    Hide Columns
    Visualize
    Use CSS to hide specific
    columns at certain
    resolutions.
    47
    Monday, January 16, 2012
    

    View Slide

48. Challenge: Big Tables
    Switch Orientation
    Hide Columns
    Visualize
    We could replace the table of
    data with a chart that provides
    a summary.
    48
    Monday, January 16, 2012
    

    View Slide

49. Challenge: Complex Navigation
    Large navigations are challenging
    to build and use on small and mid-
    sized devices.
    49
    Monday, January 16, 2012
    

    View Slide

50. Challenge: Process
    Design deliverables become very
    difficult to define when so many
    resolutions are supported.
    50
    Monday, January 16, 2012
    

    View Slide

51. Resources
    The readme.md file is a list of resources.
    Check it out.
    51
    Monday, January 16, 2012
    

    View Slide

52. Thanks.
    Ben Callahan
    President of Sparkbox
    @bencallahan
    http://seesparkbox.com
    I’ll be publishing this presentation soon.
    Follow me on Twitter for more info.
    52
    Monday, January 16, 2012
    

    View Slide

53. And, finally...
    Ben Callahan
    President of Sparkbox
    @bencallahan
    http://seesparkbox.com
    Responsive web design is always the right
    decision, but it’s not always the only decision.
    (a bit of controversy to discuss instead of questions...)
    53
    Monday, January 16, 2012
    

    View Slide