Learning Plan 6 - Responsive Design
- What are media breakpoints?
According to the MDN Web Docs, CSS media queries allow certain CSS properties to be applied only to browsers with certain features (such as a wide or narrow viewport). They can also detect whether or not the user is using a touchscreen or a mouse when accessing a webpage.
- Why are media breakpoints important in responsive web design?
Media breakpoints, although they require more coding from a developer, allow for more-clearly designed code and a "mobile first" development model. This development model starts by writing CSS code designed for smaller screens, then ends by adding media breakpoints for larger screens (such as tablets, laptops, and desktops).
- Why should I design for mobile first?
According to Vincent Xia from Medium.com, many of the higher end features that come with a desktop enviornment are not supported on mobile devices. By using a well-designed mobile interface as the base, web developers can add features for desktop users.
- What are the recommended browser sizes to target for?
-
According to W3Schools, the most-commonly used breakpoints for a responsive web design include...
- Devices less than 600 pixels in width (smaller phones)...
- Devices between 600 and 768 pixels (larger phones and smaller tablets)...
- Devices between 768 and 992 pixels (larger tablets)...
- Devices between 992 and 1200 pixels (laptops and smaller desktop monitors)...
- Devices with 1200 pixels or more (larger desktop monitors).
- Which of these breakpoints should I target for?
Personally, I would recommend testing your website design on different devices. It will become evident if a certain web page layout won't work on a particular device resolution. If you don't have a particular-sized device, the Chrome developer tools has a feature that allows you to test different viewports on your web browser conveniently. It has pre-set values for the iPhone SE, iPhone 12 Pro, Samsung Galaxy S20 Ultra, and more.