Responsive Web Design By Kelvin Gobo 

● Kelvin Gobo ● Front-End Developer ● PWA Enthusiast ● @kelvingobo A little about me 

A short story about the web 

The web was created to share information It has since expanded beyond that of course. 

Some of the early computers 

But the demand for the internet grew 

● Personal computers became more popular ● Sizes of PC became smaller each year ● Mobile devices joined the party ● Tablets came some time later 

Problem How do we build websites to work on these multiple devices? 

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 

Problem How do you know what device the user visits your site with? 

Another temporary solution / / check the devices screen width If(screen.width <= 800) { window.location = “http:/ /m.example.com”; } 

Problem Managing two code bases for the same website 

Enter Responsive web design 

No content

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

Tools to make your website responsive ● Set the viewport ● Media queries ● CSS flexbox 

Set the Viewport 

Media queries (Set break points at different device widths) 

Using media queries ● Embed media queries in css ● Link to css file when device matches a query 

/ / Embed media queries in CSS body { background-color: red; } @media (max-width: 800px) { background-color: blue; } @media (max-width: 500px) { background-color: yellow; } 

/ / Link to css file when device matches a query 

Responsive patterns ● Mostly fluid ● Column drop ● Layout shifter ● Off canvas 

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. 

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. 

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. 

Off canvas Rather than stacking content vertically, the off canvas pattern places less frequently used content—perhaps navigation or app menus—off screen 

CSS Flexbox 

Thanks!