Responsive Web Design Basics by Pete LePage & Rachel Andrew from web.dev
In lecture 7 we looked at Responsive Web Design and since then I have done a good bit of my own research into response and adaptive web design approaches to understand how they work better. This is an article that I came across that I found to be very helpful on this topic.
This is an article by web.dev that goes into detail about the basics of responsive web design.
The article explains how to create websites that respond to the needs and capabilities of the device the website is being viewed on by the user.
The article goes on to discuss how mobile is the main device presently being used worldwide to surf the web.
As smart phones come in many different shapes and sizes the display size constraints differ greatly, therefore an alternative approach needs to be used to accommodate how content is laid out on a screen. Also, desktop, laptop and tablet screens need to be taken into account too. The approach of today, however, is mobile first.
The article discusses in detail the viewport, images, layout, FlexBox, the CSS Grid Layout, multiple-column layouts, CSS media queries for responsiveness, breakpoints and how to choose them, optimising text and Chrome Dev Tools too.
The URL Link To The Article:
https://web.dev/responsive-web-design-basics/
Examples of Responsiveness:
