Responsive design is now one of the biggest considerations for any team when developing or re-developing a website. I tend to work on website refreshes — sites that typically haven’t had much work done in a while and need some restructuring to achieve proper responsiveness for mobile devices.
Depending on the existing site structure and the depth of the refresh, developers and I have some decisions to make about dimensions for both the site itself and the content within it. To do that, I have some benchmark website dimensions to rely on and some techniques I can implement to make those dimensions responsive on any device.
In this article, I’ll explain my process and share some key specs you should consider when designing your site.
Table of Contents
- What Influences Website Dimensions?
- How Website Dimensions Are Measured
- Web Dimensions to Know
- Considerations for Image Sizes
What Influences Website Dimensions?
For me, the biggest influence on website dimensions will always be responsiveness. I want to fcous on building responsiveness into the website in a way that all content looks great on all screen sizes.
But that can all depend on the layout you’re using and the content on your site.
There is no single recommended website size, regardless of the device where your site will be viewed. While there are some recommended height and width combinations and aspect ratios you can use, there are several things that will influence which one you ultimately choose.
User Experience
Today, websites absolutely need to be responsive to ensure a good user experience, because they are accessed through mobile more than ever. By the end of 2023, mobile devices (not including tablets) accounted for 58.67% of global web traffic.
While this used to occur predominantly through social media, mobile viewing now applies to website visits from all kinds of sources.
Recent research also suggests that users actively look for mobile-friendly content when they visit a site and will leave if they don’t find it. According to a GoodFirms report, 34.6% of users scan for proper content structure and bounce if they don’t find it.
If users can’t access a website on mobile, or if the experience is poor, they’ll head straight for a competitor.
Not only does your site content need to be responsive, but the principle should expand to your navigation, too. When I work on a website redesign, navigation is an area where I spend a lot of time. It can heavily impact your organic search performance, your bounce rates, and your conversion rates.
In terms of website sizing, your navigation items need proper sizing and spacing. They also need to respond well across multiple devices, which is why I usually reduce and streamline navigation for mobile design.
Designing for Multiple Screen Sizes
Desktop monitors, tablets, and cellphones do not all adhere to the same screen sizes within their respective categories. Depending on the make and model of a device, you have to take multiple screen sizes into account.
That’s where breakpoints come into play. Breakpoints are what developers use to make sure content rearranges itself appropriately across different screen sizes. Up until the breakpoint (e.g. 340px for mobile), you might have a slight variation in website width and, therefore, how the content appears. The breakpoint helps identify the minimum or maximum width the website should display the content a certain way.
Content Layout
Different websites serve very different functions. If I’m working on a news website or ecommerce website, for example, I’ll likely be working with lots of different columns and grid layouts. But for a portfolio website or anything image-heavy, the layout can be much cleaner.
The website dimensions you choose across different screen sizes impact how content is rearranged on the page. When the screen size reduces, you have to make decisions about how to resize and stack the content. On desktop, there might be some elements that are “nice to have” that there simply isn’t room for on mobile. You may need to bump an image down for the sake of keeping important forms or buttons higher up the page.
Browsers
Each browser renders websites slightly differently. These differences are largely due to the varying engines each browser uses to process and render your website’s code and their default settings.
Make sure you’re designing with website dimensions that work across all popular browsers, including Google Chrome, Safari, Microsoft Edge, and Mozilla Firefox.
Need some help with your website dimensions and overall design? Get 50 free coding templates here!
How Website Dimensions Are Measured
There are a few ways you can tell a browser about the dimensions of your page so it knows how to render it. The measurement method you use largely depends on the type of content on the page and its expected behavior. I typically reference web designs in pixels, which is the most commonly used unit.
1. Pixels (px)
When it comes to digital displays, pixels are the smallest unit of measurement. In this way, they give designers and developers a high level of precision in defining dimensions. You might see them throughout a web page defining specific widths and heights on elements like images and buttons.
Pixel dimensions on their own are fixed, meaning they’re not very scalable across different device sizes. So they need to be paired with responsive design like media queries, viewport units, or flexible grid systems to make them responsive. These techniques are often built into website builders to make sites responsive.
2. Ems (em)
An “em” is a unit of measurement that relates to the font size of your selected typography. For example, if your default paragraph text size is 16px, then 16px is equal to 1em and 32px would be equal to 2em.
These types of dimensions are usually used to make text and spacing responsive. So you can set these types of website elements to scale up or down depending on the parent element’s font size on the page, making it a good way to build responsiveness into your site.
However, using ems can lead to issues between parent and child elements. As more and more child elements are nested under the parent, the initial em continues to increase the size of subsequent child elements. So, if your initial child element is set to 2em of the parent, that has a compounding effect on any other child elements nested underneath. The end result can be unexpectedly large text sizes that take a lot of unpicking as you need to go back and adjust multiple styles.
3. Rems (rem)
Rems can be used to mitigate a lot of the issues that can crop up with using ems.
Rems are relevant to the root element, rather than the parent element. So if the root font size is 16px, then 16px is 1rem. This means that, regardless of what’s happening with a parent element on the page, the child element will refer back to the root element. It’s a good way to scalably manage responsive design in your typography.
Although rems are easier to manage than ems, you still need to be careful with changes to the root font size so your scaling stays consistent.
4. Percentages (%)
Percentage means assigning a width to an element that is a certain percentage of the parent element. This means that the child element automatically scales to the new width of the parent element on different screen sizes.
For example, for overall website dimensions you could set the main content container to take up a certain percentage (say, 80%) of the viewport width. Flexible grid systems are also a good example of using percentages on column widths relative to the container, so that grids automatically rearrange themselves on different device sizes.
However, percentages don’t work for setting dimensions for everything on your webpage. Lots of visual elements like logos or buttons are not suitable for percentages because it can end up making them far too small on mobile devices.
.png)
Free Website Design Inspiration Guide
77 Brilliant Examples of Homepages, Blogs & Landing Pages to Inspire You
- Agency Pages
- Ecommerce Pages
- Tech Company Pages
- And More!
Download Free
All fields are required.
5. Viewport Units (vw, vh)
The viewport refers to the visible area of a webpage on the screen of whichever device a person is using. Viewport units allow you to set the dimensions of your website, and content within it, in a way that is relative to any given viewport size. You can set Viewport Width (vw) or Viewport Heights (vh), although only width is really recommended.
1vw is the same as 1% of the viewport’s width and 100vw is equal to 100% of the viewport’s width. So if the viewport width is 1,000px and you have set your dimensions to 50vw, your content will take up 50% of the screen.
6. Absolute Units
You can also use absolute measurements or units to define your website dimensions, such as inches, centimeters, millimeters, or points. But this is rarely done and not advisable because an absolute measurement is inflexible, and therefore won’t scale to different viewport sizes and provide responsive design.
Web Dimensions to Know
There are a few reasons it’s important for me to know the dimensions of a website I’m working with. For example, it can impact the size and dimensions I set for logos and images. It can also influence decisions like breakpoints. Or it might impact how I test my website’s responsiveness to make sure it looks good on all versions of a mobile screen, all versions of a desktop screen, etc.
Web Dimensions for Mobile
Mobile screens can vary pretty significantly in size depending on the make, the model, and the generation of the phone. Here are a few standard dimensions for mobile to keep in mind.
Small Phones
- Width: 320-375px
- Height: 568-667px
- This would cover phones like the iPhone SE and older Android devices.
Medium Phones
- Width: 375-414px
- Height: 667-736px
- This would cover mobile devices like iPhone 6 onwards up to the iPhone X, and Google Pixel.
Large Phones
- Width: 414-480px
- Height: 736-853px
- These dimensions would cover phones such as iPhone Plus models and larger Android phones.
Web Dimensions for Tablet
Just like phones, tablet dimensions quickly started to vary as more brands started developing them and newer generations have been released. Here are some standard dimensions for tablets to know.
Small Tablets
- Width: 600-768px
- Height: 960-1024px
- Kindle Fire and iPad Mini are examples of devices within these dimensions.
Medium Tablets
- Width: 768-834px
- Height: 1024-1112px
- These dimensions include devices like Samsung Galaxy Tab and iPads when used in portrait mode.
Large Tablets
- Width: 834-1024px
- Height: 1112-1366px
- Larger Android tablets and iPad Pro in portrait mode would fall within these dimensions.
Web Dimensions for Laptop amd Desktops
People often focus on mobile when considering responsiveness. But from small laptops to large gaming desktop monitors, there’s a large variance in standard web dimensions for desktop. Here are a few to keep in mind:
Small Desktop Monitor
- Width: 1024-1280px
- Height: 768-800px
- This would cover older and smaller laptop screens and small desktop monitors.
Medium Desktop Monitor
- Width: 1280-1440px
- Height: 800-900px
- Standard laptop screens and desktop monitors would fit within these dimensions.
Large Desktop Monitor
- Width: 1440-1920px
- Height: 900-1080px
- These dimensions include large desktop monitors and large laptops with higher-resolution screens.
Extra-Large Desktop Monitors
- Width: 1920px+
- Height: 1080-2160
- Ultra-wide monitors (often used by gamers) and 4k display monitors would fall into these dimensions.
Considerations for Image Sizes
With so many dimensions to consider, sizing and uploading images is a particularly tricky process. Having unnecessarily large files can slow down the speed of your website, especially on mobile devices. But I recommend keeping quality in mind, too. The goal is to aim for the minimum file size without compromising on how your images look to users.
Here are a few other things to think about when selecting the width and height of images.
Image Placement
Are you uploading a full-width background image? A logo? A banner? The dimensions of the container your image will be sitting in is a key consideration when selecting a size.
Even if you don’t define the pixels strictly in line with the container, you should at least take the aspect ratio into account. Trying to fit an image that is horizontal with a small height into a square container, for example, can lead to issues. Your CMS might auto-crop the image, so some of it is cut off. Or, it could be squished into the space and distorted. Even if the image looks fine, you might end up with tons of unintended extra space around the top and bottom.
Matching Display Size
In the interest of having a fast website, make sure your images are no wider than they have to be. The larger the image, the bigger the file size and the more strain you put on your site’s resources to load it quickly.
For example, if you’re uploading an image for a mobile site and it only needs to be 300px wide, avoid uploading an image that’s 1200px wide. Instead, properly resize and compress the image first.
Adding Techniques for Responsiveness
I covered just how much screen sizes can vary, even within the same device category. So it’s also important to add responsiveness to your images to make sure they fit well on any screen size.
You can use the “srcset” attribute in your HTML to define minimum widths and display a specific image size accordingly. Or you can use a CSS media query to automatically resize the image according to the viewport. Another method is to ensure the container itself, like a grid layout, is flexible so your images remain responsive with the container.
Website Dimension Benchmarks Speed Up Your Development
When you’ve spent enough time digging around in web design and back end code, the intricacies of web dimensions and responsiveness become more clear. But I like to have standard web dimensions in my back pocket because it gives me a baseline to work from which can be refined during testing. Otherwise, you can end up finishing a beautiful desktop design only to realize it needs a lot of work on mobile.
Ultimately, standard web dimensions for different devices and screen sizes give you the foundation of a user-friendly website. By building them into your standard design procedures, you can anticipate responsiveness challenges and streamline the development phase to publish a better website faster.
Free Website Design Inspiration Guide
77 Brilliant Examples of Homepages, Blogs & Landing Pages to Inspire You
- Agency Pages
- Ecommerce Pages
- Tech Company Pages
- And More!
Download Free
All fields are required.
![Copyright Notice Examples: How to Write One for Your Website [+Template]](https://knowledge.hubspot.com/hubfs/copyright-notice-1-20241010-1359425.webp)
