High resolution. Retina display. 4k. There are so many different versions of what is considered HD these days. With a growing market of laptops and tablets your responsive website can look different on every and any screen.
What is responsive design?
Responsive web design is when your website looks and behaves differently based on the size of the device it is being shown on.
The biggest concern of a responsive website is looking good on all platforms. The biggest challenge is creating a design that works on both desktop monitors and mobile phones. Usually, this is accomplished by resizing elements and stacking them differently based on screen size.
How does screen size play a role?
In an increasingly mobile world, laptops are constantly gaining in popularity over desktop computers as manufacturers learn how to pack more power into smaller machines at lower price points every year.
The immediate difference between these two types of computers are the physical screen size. The most popular monitors on the market right now vary between 22″-27″ in physical size, where the majority of laptop users are on screens between 11″-15″. Even sitting further away from the screen as a typical desktop user would, their screen is still roughly double the size of a typical laptop user’s, so naturally we need to show them the biggest, most zoomed out version of your website.
In this example you can see that the content stays the same size on both screens and what changes is the amount of space around the content
Screen Resolution vs Display Resolution
The single thing that makes this conversation most confusing is the difference between ‘screen resolution’ and ‘display resolution’. Screen resolution is the actual pixel count of the screen you’re using and display resolution is the size your device behaves at. A good example of this is the iPhone XR which has a screen resolution of 828×1792 (portrait) but responsively the device displays/behaves as if it is only 375px wide. This is because a mobile device is held quite close so you want the pixels to be small to get a clear image, but text needs to appear large enough to be read.
When we apply the same concept to laptops we can see the same problem on a different scale. While many Windows laptops will have a screen resolution of 1920×1080 and behave at 1920px wide, Macs or smaller Windows laptops often function similarly to smartphones where their screen resolution and display resolution do not match. A Retina display MacBook will have 5,000+ pixel screen resolution (which is what gives that super crisp look) but by default will display/behave at 1440px wide in order for text to show up at the correct size on the screen.
Display settings on Mac
You can manually toggle the display settings on your Mac to make it appear or behave differently. Apple does this to give their users more options for a better user experience, but it does contribute to the confusion on this topic.
Macs will provide you between 4–5 options depending on your model ranging between smaller options with ‘Larger Text’, larger options with ‘More Space’ and will default to one of the settings in the middle.
Here’s another way to view the results of that same process when applied to your website:
You’ll notice that on the smaller settings text will appear larger but it will begin to crop into the content of the website. This is when responsive design takes effect and elements begin to move to fit your screen appropriately.
As a designer I aim to have the most amount of space to work on, so I opt for the “largest” setting possible, zooming everything out to get more space and getting as close as I can to a typical windows user which makes up for a giant percentage of users and other members of my team, but this is all preference. What’s right for me may not be right for you since you may opt for wanting larger text and choose one of the “smaller” options or perhaps you’ve never played with these settings and have the default option. This is where we find that what one person sees on their computer is completely different from another person’s, even on identical machines.
How do we get around this?
As a company we tackle this issue on a client-by-client basis, but the best way to avoid confusion is by clear communication. If something is not appearing right in the design mock-up we provide, let us know! We’ll find out what display resolution you’re on and we can cater the view to your computer’s specifications.
How UXPin helps
If we have given you a link to view the project through UXPin, we have the ability to give you a responsive prototype in as many specific sizes as you need. When you visit the link in your browser, it determines automatically the most appropriate size design to show you from the ones we have created. You can toggle through the size options through this drop down.
Don’t see your size? Ask us to provide it for you. We’re happy to make sure you’re seeing a design prototype that’s as close to the final product as possible.
You can check what size your screen is displaying at here
Other Options
We may also provide a PDF of your design if that’s preferable to you.
Get in touch at leverage.it and we’ll talk about how to get your next idea off the ground.
