Responsive Web Design

Responsive Web Design

I gave a 2-day workshop on Responsive Web Design at Ken Saro-Wiwa Innovation Hub alongside Ben Ogie. The workshop covered the basics of RWD and gave a hands-on experience on how it can be achieved.

F95fe2cd54f59ca0453914b9f2ae7233?s=128

Kelvin Gobo

January 16, 2018
Tweet

Transcript

  1. Responsive Web Design By Kelvin Gobo

  2. • Kelvin Gobo • Front-End Developer • PWA Enthusiast •

    @kelvingobo A little about me
  3. A short story about the web

  4. The web was created to share information It has since

    expanded beyond that of course.
  5. Some of the early computers

  6. But the demand for the internet grew

  7. • Personal computers became more popular • Sizes of PC

    became smaller each year • Mobile devices joined the party • Tablets came some time later
  8. Problem How do we build websites to work on these

    multiple devices?
  9. Temporary solution If the user visits your website on a

    laptop, serve them the website Else if you detect a mobile device, serve them the mobile version
  10. Problem How do you know what device the user visits

    your site with?
  11. Another temporary solution / / check the devices screen width

    If(screen.width <= 800) { window.location = “http:/ /m.example.com”; }
  12. Problem Managing two code bases for the same website

  13. Enter Responsive web design

  14. None
  15. “Responsive design is not about designing for mobile. But it’s

    not about designing for desktop either. Rather it’s about adopting a more flexible, design-agnostic approach.” Ethan Marcotte - Author of Responsive Web Design -
  16. Tools to make your website responsive • Set the viewport

    • Media queries • CSS flexbox
  17. Set the Viewport <meta name=”viewport" content=”width=device-width, initial-scale=1”>

  18. Media queries (Set break points at different device widths)

  19. Using media queries • Embed media queries in css •

    Link to css file when device matches a query
  20. / / Embed media queries in CSS body { background-color:

    red; } @media (max-width: 800px) { background-color: blue; } @media (max-width: 500px) { background-color: yellow; }
  21. / / Link to css file when device matches a

    query <link rel="stylesheet" href="weather.css"> <link rel="stylesheet" media="(max-width:600px)" href="weather-2-small.css">
  22. Responsive patterns • Mostly fluid • Column drop • Layout

    shifter • Off canvas
  23. Mostly fluid The mostly fluid pattern consists primarily of a

    fluid grid. On large or medium screens, it usually remains the same size, simply adjusting the margins on wider screens.
  24. Column drop For full-width multi-column layouts, column drop simply stacks

    the columns vertically as the window width becomes too narrow for the content.
  25. Layout shifter Key to this layout is the way content

    moves about, instead of reflowing and dropping below other columns. Due to the significant differences between each major breakpoint, it is more complex to maintain and likely involves changes within elements, not just overall content layout.
  26. Off canvas Rather than stacking content vertically, the off canvas

    pattern places less frequently used content—perhaps navigation or app menus—off screen
  27. CSS Flexbox

  28. Thanks!