Common Website Layouts
There are three main screen widths, also known as breakpoints, you should keep in mind when designing your website. Let’s quickly run through them to ensure your website is responsive across the three major fixed layouts.
- Small: Mobile devices typically have a screen size of under 640 px. This is the smallest website width to adjust your UI design to.
- Medium: Corresponding to the size of most tablets and super large phones, the medium screen size is between 641 px and 1007 px.
- Large: Laptops, desktops, TVs, and other larger devices with a display width of 1008 px and above are another standard layout worth designing for.
Note that the dimensions will slightly change with specific mobile and computer models.
The Main Components of a Responsive Website
The term “responsive website design” was coined by Ethan Marcotte in an article published on A List Apart in 2010. Marcotte defines three foundational elements that create a responsive website: media queries, flexible images, and fluid grids. Here’s a breakdown of each.
Media Queries
A media query is a feature of CSS 3 that allows displaying web content according to screen size, orientation, and resolution. It checks the screen’s width before rendering the content to make sure the latter is appropriate for the screen. For example, if the screen layout is small, certain blocks can be rearranged to adapt the design to the display.
Media queries have two components: media type (phone, tablet, TV, etc.) and media feature (screen orientation, min-width, max-width).
Flexible Images
Flexible visuals are another key feature of a responsive design. They’re achieved by the use of responsive containers that automatically resize based on screen dimensions, scaling the image as well. When the max-width of an image is set to 100%, the percentage decreases as the website layout shrinks, thus scaling down the image. This also prevents the image from growing too large on extra broad displays and becoming pixelated as a result.
Source: Starbucks
Fluid Grids
Following the same principle of adopting percentage values instead of fixed pixels, fluid grids adjust web content in proportion to the browser window. It’s because of fluid grids that horizontally lined up columns can be stacked vertically when the user switches from a wider to a narrower screen. This is just one simple example of rearranging components; there are many other ways of working with flexible grids.
