I redesigned my website recently. While I’m no expert website developer, I know my way around my content management system (CMS). The redesign was going well with my new copy, headers, etc.
However, there was a problem.
While the website looked great on my MacBook, the elements didn’t quite fit when I checked it on my iPhone. Some parts of the navigation menu were missing, and the text was cut off. I realized I couldn’t publish it just yet and needed to adjust it to render perfectly on other common screen sizes — namely, mobile.
This redesign experience highlights the importance of responsive design. As of 2023, there were over 7.3 billion mobile users, and this number is expected to rise to over 7.49 billion by 2025. Imagine the number of leads or millions of dollars you’d lose if your website doesn’t cater to these users.
Your audience uses different devices with varying screen sizes to access your website. As such, you must design your website to adapt to each screen.
In this article, we’ll examine the different screen sizes to consider when designing, why screen sizes matter, and how to code a responsive design for various screen sizes.
Let’s begin with an understanding of what a responsive design means.
Table of Contents
What Is Responsive Design?
Responsive or responsive web design refers to the technique or procedure of creating websites that change or adapt to look good on a visitor's device.
With responsive design, your website’s content, media, and other elements remain consistent, readable, and accessible when rendered on a mobile device, iPad, tablet, or desktop.
Fluid layouts, CSS media queries, a single codebase, and flexible media, among other things, make responsive website design possible.
Responsive web design is not a nice-to-have feature. Instead, it should be the standard for any website you create.
Why? Well, have you ever visited a website and got excited to see some elements out of frame or not properly loading?
Not at all.
You and, by extension, your users want websites optimized for whatever device they use to access the site.
Here are some other reasons to make creating responsive web designs a priority.
- SEO benefits. Because Google uses mobile-first indexing, sites with responsive design have a significantly better chance of ranking higher than those with nonresponsive design.
- Improved user experience. A responsive website design means consistent displays across all platforms. So users get the same experience no matter what their device is.
- More leads. Your website must come off as trustworthy because trust plays a crucial role in lead generation and sales. A responsive web design will help you achieve just that, as poorly designed websites appear scammy.
- Lower bounce rates. Websites with non-responsive designs do not give off a great first impression. When users don’t like how a site looks on their device, they’ll leave, resulting in high bounce rates. You can fix this issue with a responsive website design.
Responsive Design vs. Adaptive Design
Designers typically use one of two approaches — responsive or adaptive design — to ensure users have the best experience when browsing websites and applications.
Though they have the same end goal, they work in different ways. Here’s how they compare.
Responsive design, as you’ve learned, involves creating a website that adjusts its layout and elements based on a device’s screen size.
Adaptive design, on the other hand, involves creating fixed layouts for specific screen sizes for devices. This means the layout created for a mobile device wouldn’t work for a desktop.
Key Characteristics of Responsive Design
- It uses fluid layouts that resize based on a user’s device.
- It uses CSS media queries to adapt a website to fit the dimensions of different devices.
- The code used in responsive design is from a single codebase.
Key Characteristics of Adaptive Design
- It uses layouts tailored to specific screen sizes or pixel widths — 320, 480, 760, 960, 1200, and 1600.
- It uses a method like user-agent detection to identify devices and deliver content that fits those device screen sizes.
- It uses multiple codebases since different layouts need to be created.
When to Use Responsive Design Over Adaptive Design
Use responsive design when you want a:
- Consistent user experience across different devices and screen sizes.
- Design approach that’s easy to maintain and update.
- Website that’s designed for mobile users and optimized for search engines.
- Reduction in design costs. Adaptive design requires creating six different site templates, which cost significantly more than a responsive design that only needs to scale up or down depending on the user’s device.
When to Use Adaptive Design Over Responsive Design
Use adaptive design when you want a:
- Hyper-tailored design or functionality for each of your target audience’s screens.
The video below provides more detail about responsive website design and how it differs from adaptive and fluid designs.
https://youtu.be/Mco_Qfs1BgU?si=PyqOzGCyqkfid_93
What Are Screen Sizes?
Screen size measures a device’s diagonal length, usually from one corner to the opposite corner.
Screen sizes are typically measured in inches (for example, 4”, 20”, etc.) or aspect ratio (for example, 16:9, 5:4, etc.).
Aside from a screen’s size, you should also consider a screen’s resolution.
Screen resolutions measure the number of pixels that make up a display. Say your phone has a 360x800 screen resolution, which means the phone can display 360 pixels horizontally and 800 vertically.
The higher the resolution, the higher the quality and detail of a display. Devices of different sizes can also have the same resolution.
Why Screen Size Matters
Size matters. Yes, your screen size is crucial in responsive design because it determines how your content is displayed and how users interact with it.
Here are other reasons why responsive design screen sizes matter.
User Experience
The whole point of responsive design is to give an excellent user experience. Say your design doesn’t account for mobile screens. It will leave users zooming in and out to navigate or scroll on your website.
Such interaction will likely drive them away from your site. So as you design for the big screens, remember to do the same for the smaller ones. Seeing as mobile devices have 61.74% of the worldwide market share, it’d be a considerable amount of people you’d likely turn away if you don’t cater to their screen size.
Content Prioritization
Designing for different screens means accommodating different breakpoints. It is best to create the mobile (or smallest) screens first and then progress to tablets and desktops, as these have a higher breakpoint.
By prioritizing the smaller screens, you ensure that the crucial information users need doesn’t get lost.
Common Screen Sizes to Know
Knowing your screen sizes and resolutions helps you deliver designs that always meet your audience’s needs.
Below, I’ve grouped the standard screen sizes based on mobile, tablet, and desktop displays.
Mobile Screen Sizes
Over the years, mobile screen sizes have changed and we now see phones with displays of around 6.5 -7 inches.
These are the most common mobile screen sizes to consider:
- 360x800, as seen on the Samsung Galaxy S21 and Xiaomi Redmi Note 9 Pro. This size makes up 11.28% of mobile screen sizes.
- 390x844, as seen on the iPhone 12 and iPhone 12 Pro. This size makes up 6.9% of mobile screen sizes.
- 393x873, as seen on the Google Pixel 6a and Xiaomi Mi 10T Pro, owns 5.57% of mobile screen resolutions.
- 412x915, as seen on the OnePlus 8 and Samsung Galaxy Note 20. This makes up 4.5% of mobile screen resolutions.
- 414x896, as seen on the iPhone 11 Pro Max and iPhone XS Max, makes up 4.01% of mobile screen resolutions.
Other screen resolutions for mobile devices include but are not limited to 360x780, 375x812, 385x854, 428x926, and 360x640.
Tablet Screen Sizes
While tablets might only have a 2.17% market share, you still need to create your website so that it renders perfectly on them.
The following are common screen sizes for tablets:
- 768x1024, as seen on the iPad Air 2 and iPad Pro 9. This accounts for 21.89% of all tablet screen resolutions.
- 810x1080 as seen on the iPad 10.2. This makes up 11.31% of tablet screen resolutions.
- 820x1180, as seen on the iPad Air 10.1. This makes up 7.5% of tablet screen resolutions.
- 800x1280, as seen on the Samsung Galaxy Tab 3. This size makes up 6.43%.
- 1280x800, as seen on the Samsung Galaxy Tab A and Umidigi G1 Tab. This makes up 6.42% of tablet screen resolutions.
Other tablet resolutions include 834x1194, 1024x1366, and 744x1133.
Remember to consider landscape and portrait orientations when designing mobile and tablet screens.
Desktop Screen Sizes
Millions of people use their desktops to access the internet, whether working from a traditional office or remotely.
Here are some of the common desktop screen sizes to keep in mind:
- 1920x1080, as seen on the Asus VG245H. This resolution takes 23.37% of desktop screen resolutions.
- 1366x768, as seen on the Acer Chromebook 315. 12.54% of desktops have this screen resolution.
- 1536x864, as seen on the Dell E2318H. It makes up 11.59% of screen resolutions.
- 1280x720, as seen on the Acer V206HQL. This resolution makes up 6.48% of desktop screen resolutions.
- 1440x900, as seen on the MacBook Pro 15”. You can find this resolution on 4.22% of desktops.
Other desktop resolutions include 1600x900, 2560x1440, 1280x1024, 810x1080, and others.
How to Code for Different Screen Sizes
CSS media queries play a significant role in making responsive design possible. With these media queries, you can adapt your website’s layout, content, and display to different screen sizes and resolutions.
And the best part? It’s not too difficult to learn how to use these media queries.
Let me show you.
First, think of CSS media queries as instructions or rules that allow your website to look different based on the screen size.
To write a media query, you must first use the @media rule followed by the CSS styles and conditions you want to apply.
For example, examine the syntax below:
See the Pen media query syntax example by HubSpot (@hubspot) on CodePen.
The p {...} part of the code sets the style for all screens — making paragraphs appear black and in font size 16px.
However, the second part sets a new rule using @media. The @media (max-width:600px) {...} command tells the website to change the font size to 14px and color to blue if the screen is 600px or smaller.
With commands like these, you can adjust your website to different screens. You’ll only have to set the screen's maximum width and change elements like font size, color, height, etc.
You can use different media types when making a CSS media query. The most commonly used ones are:
- all: is used when a condition is suitable for all devices.
- print: is used to adjust a website’s layout when it’s to be printed.
- screen: is used to define styles for computers, laptops, tablets, and mobile devices.
- speech: is used for screen readers and similar devices.
Example: Creating a Line Break for Different Screen
Here’s what it would look like to code a line break for different screens using CSS media queries.
In this example, a line of text will break into two lines on smaller screens but stay on one line on larger screens.
Since this is CSS code, you’ll need to add it to your HTML code. The HTML code looks like this:
See the Pen media query syntax example 2 by HubSpot (@hubspot) on CodePen.
Running the code, you’ll discover that the line of text stays in one line on a laptop, and breaks on a smaller screen.
If the code doesn’t run on the first try, continue to test and refine until you get it right.
Make Your Websites Responsive
Creating a responsive website is essential for providing a seamless user experience across various devices, improving SEO, and maximizing engagement and conversions.
By understanding and implementing responsive design principles, using CSS media queries effectively, and continuously testing your design, I guarantee you can create a website that looks and works great on any screen.
![Copyright Notice Examples: How to Write One for Your Website [+Template]](https://knowledge.hubspot.com/hubfs/copyright-notice-1-20241010-1359425.webp)
