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.

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
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!