7 months ago


40 The Principles of

40 The Principles of Beautiful Web Design breakpoints are ranges of pixel widths for the different screen sizes you wish to target. For example, you may set breakpoints for mobile devices from 0px to 568px. The CSS to set this particular breakpoint would look something like this: @media only screen and (min-device-width: 320px) ➥and (max-device-width: 568px) Then, you may set the next breakpoint to a range that fits most tablet devices, and then desktop. The advantage of using breakpoints and media queries is that you can set as many breakpoints as you want. While we can’t discuss the technical aspects of responsive design fully in this book, there are tons of great resources available to learn more about it. Be sure to check out these great books: ■ Responsive Web Design By Ethan Marcotte 34 ■ Responsive Web Design with HTML5 and CSS3 by Ben Frain 35 ■ Mobile First by Luke Wroblewski 36 ■ Jump Start Responsive Web Design by Craig Sharkie and Andrew Fisher 37 Screen Resolution Responsive design developed from the need to be able to create a consistent design for different devices and screen sizes. In the past few years, screen resolutions have increased tremendously. Looking at Figure 1.41 below, containing screen resolution statistics from W3Schools, in 2007 and 2008, 6% of users had a screen resolution of lower than 800x600. Now, in 2014 the percentage of devices lower than 800x600 is 0.5%. Another 0.5% of devices are at the 800x600 resolution. This means that 99% of devices are set to a screen resolution of 1024x768 pixels or larger. When you look at the chart, a total of 78% of devices actually have a resolution of 1366x768 pixels or higher. That said, it’s assumed that modern desktop browsers display at least 1024x768. Even the majority of netbook computers now have a 1024x600 or higher resolution. For that reason, 960px has become the de facto width for most web design projects. With W3Schools reporting the growth of users with resolutions greater than 1024, you’d think we’d be looking to push the standard width past 960, but there are a couple of reasons why this probably won’t happen. First, many users with larger monitors actually keep their browser window set less than 1024px wide, so they can see other applications they have running. The other reason is line length. If a line of text is too long, it becomes less readable. 34 35 36 37

Layout and Composition 41 Figure 1.41. W3Schools’ screen resolution statistics There are different methods to achieve responsive design. Some use a CSS grid with calculated columns and gutter widths. Many designers create their own custom grids, making calculations for columns widths, etc. As the popularity of responsive design grew, web development teams collaborated to create highly optimized grid systems. These included the most common features required by developers and designers, such as a responsive, flexible layout, image slider, and responsive navigation menu. These systems are known as responsive frameworks. Figure 1.42. on iOS (as seen on

Layout and Design - In Easy Steps
Boot Camp
The Complete Guide to a High Converting Website
Web Site Design & Usability Testing - HIPNet
30 ways to create amazing web experiences on tablets
Download PDF -
Creative Services - Keiger Graphic Communications
slides - HTML5 Developer Conference
A Kick-Ass Guide to Building an Awesome Website
ESL Essay Writing and Formatting Rules in 2018