Website Review 6

AARP Local: Gillett

Find a site that lists a recent version of all the media breakpoints for responsive design. How does a developer choose which breakpoints to use?

Full Width
There are 2 column, "Join" and "Renew" buttons with different buttons: "Register" and "Login".
Min—Width 768px and Up
Goes down to one column. The hamburger menu appears on the right and the 3 nav menus disappears from the top of the page. An arrow appears with a way to go "Back to Things to Do". Drop down menu appears named "Sections".1
Min—Width 576px
The next breakpoint, the two buttons "Join" and "Renew" disappear. The fonts get smaller.

This webpage has 585 errors from the html validator. 😳 🤯

Learn about media breakpoints, and then create a valid HTML5 web page to document your findings. Please cite at least two different websites.

Breakpoints create content from their website to veiwed better on different sizes or screens. Examples would be a phone, tablet and desktop. Also known as Responsive Web Design (RWD). The same HTML is used for all the devices and the CSS changes the layout of the webpages. The content reshuffles the design as the viewports grow or shrink.

Because responsive design relies on shuffling elements around the page, design and development need to work closely together to ensure a usable experience across devices. Responsive design often turns into solving a puzzle—how to reorganize elements on larger pages to fit skinnier, longer pages or vice versa.1

Another reason breakpoints are important is because long lines of text can be difficult to read on different screens. The text is viewed better in columns on a monitor but my appear squashed on a mobile phone. Web designers used to have to rely on two or more differnt websites to design and maintain.2

"Responsive design" was coined by Ethan Marcotte in 2010 and used fluid grids, images and media queries to maintain content responsive. Ethan Marocotte has website with 6 different breakpoints. The purpose of his site is to promote his books and blog. Two books about Responsive Web Design are available to read for free on his site and another book: You Deserve a Tech Union for $20.