Review #6

Website Coding

*Learning Plan 6*

Breakpoints vary for each developer as new mobile phones, tablets, and desktops are developed every day. The smart developer will always use breakpoints, usually declared in the css file, that properly displays and functions similarily on all devices. The breakpoints chosen by the developer are normally based on the structure of the website and the devices that it is intended to be displayed on. There are recommended breakpoints that are utilized so your site can be viewed on different devices and still function whether it is a cellphone, a tablet, or a desktop.

At devfacts.com , there are 4 basic breakpoints that they list that applies to most devices and computers. The smallest applies to cellphones as the screen is much smaller than a computer. A screen size that is between 576px and 768px are the values they list for small devices and applies to cellphones and other small devices. At 768px to 992px, Devfacts.com uses this range for tablets and larger landscape phones, where 992px to 1200px is used to display on a desktop. However,the author has listed only Apple products specs in the site. Android device screen specs are not listed here, as there are countless android devices out there, and too many different sizes to formulate breakpoints for every single device.

The developer can choose which points that are the optimum to display their site on each device. At these breakpoints, the developer can adjust the display and the responsiveness to the user by changing code in the css file to accomodate each screen. Saving time by not having to place a query for each and every device, instead using these queries to control the display.

Over at coder-coder.com, they have similar standard breakpoints as devfacts.com. They use min-width values that incude media queries for 688px(43em)and below for cellphones, 688px -992px for tablets and larger phones, such as the iphone 10, and 992px-1312px range for most desktops. Coder-coder.com does use a fourth media query for extra large screens as well, that include desktops larger than 1312px. All in all, the developer can choose any queries that operate best for the particular website's design and responsiveness, in that way the query breakpoints are used to optimize the experience and be fully interactive for the user on all devices.

David Mailand - Summer 2021