Website Dimensions, Best Practices

Nowadays, more users than ever access websites from different devices such as phones, tablets, and desktop computers, which means it’s essential for websites to be responsive – meaning they adjust accordingly based on device size and orientation. This makes life easier for users by not having to manually adjust things like text size or button sizes each time they switch between devices and helps ensure that all information is accessible regardless of platform.

The media queries workflow.

First, we will define our so-called ‘breakpoints’ in our CSS file. These breakpoints target the screen resolution and, more specifically, the width.

We could instruct our website to act as follows:

• If the end user’s screen is smaller than 480 pixels, show the smartphone layout
• If the screen is larger than 480 pixels but smaller than 1024 pixels, show the tablet layout
• If the screen is larger than 1024 pixels, show the regular desktop layout

Why target the width, not the height?

• We want our site to fit in the browser window without horizontal scrollbars
• The height is relative (we are used to scrolling these days)
• Vertical scrolling feels natural, and horizontal scrolling does not

Can we ignore the height?

That depends on the content of your website. Crucial information should be ‘above the fold,’ which means: visible without scrolling. So it’s always good to know the available height on the most used devices to avoid cutting off banners in the middle or putting that essential call-to-action button out of sight.

Why not target the device?

I’m not saying you never should. Maybe in some particular cases you’d want to target a Samsung Galaxy or an iPhone 5. But in general you should keep your media queries as simple as possible. Everyday new devices are lauched and if you have dozen or more websites with very complex, device specific media queries you’ll have a hell of a job to keep everything up to date.

What can I change?

Simply put: every CSS rule.
You can make a ‘normal web page’ look like a native app on smartphones if you’d wish.

• Change font, colors, spacing,
• Change images
• Show/hide elements
• Change column widths, layouts, …
• The look of elements like buttons, form fields… and so much more

Current desktop screen resolutions in use (worldwide)

This table can be your guideline for your media queries.

CSS Breakpoints: where & how many?

You don’t need to write media queries for every possible screen resolution. To keep things simple, you could target four groups:

• smaller than or equal to 768 px (smartphones)
• larger than 768 px (small devices, tablets)
• larger than 992 px (medium devices)
• larger than 1200px (large devices)

Those are the breakpoints used by the very popular Twitter Bootstrap framework.

Commonly used breakpoints?

Not all websites use the same breakpoints. Needless to say, they all have their reasons. Microsoft, for instance, will not use the iPhone and iPod breakpoints for apparent reasons.

CSS breakdown of some major websites.

Here is an overview of six well-known websites. As you can see, all work with media queries but have their own preferences.

Note: these are the major breakpoints where the site’s look drastically changes. Some of these sites have more, or less important breakpoints.

All the above figures will be updated regularly.

Author: admin

I am the creative director at IGRAPHI and an award winning designer and web developer with 20 years of experience conceiving and implementing design and technical solutions across traditional, digital, and social media platforms to effectively engage target audiences with clients’ messages and products. Built and managed brands from the ground up, worn every hat on the rack, one brand at a time.