Hi all. Does any anyone have an approach for designing for different screen resolutions when your PC doesn’t have a particular resolution? My laptop resolution max is 1280 x 800. I need to make adjustments for 1366 x 768 as I have seen my site on a friends laptop. The way my site is designed, width will never be a problem it’s height. I can change my resolution to a height of 768, but it doesn’t display near the same as a screen with a default 768 height .
1 Like
The dev tools in Chrome allow you to view a site at virtually any height and width.
For example you can see a screen larger than your own, zoomed out.
Generally height isn’t much of a consideration in RWD, so I wonder why you ask about a specific page height. Is this some special case where you want height queries?
Hi Sam,
My site is a fullpage scroll so I’m bound by height. If I don’t adjust the content height with resolution in mind, some content will overlap other as its trying to fit within the given area. Where is that chrome to you referred?
I’m not really clear about what you mean, can you illustrate the problem?
The browser Chrome, in Developer Tools.
Here I’m looking at a page at larger resolution than my monitor at 50% size.
I meant where in Chrome sorry haha. I see I need to select Elements. Thanks so much for the suggestion! How accurate is the rendering? If I design for 1366 x 768, how close will it be if I view on a device with that actual resolution?
AFAIK it should be fairly accurate, though you still get variations across browsers.
The usual RWD strategy in not the think about specific sizes, but to make a layout fluid enough to cope with any size, then apply queries only if and when required, at the point the layout breaks.
1 Like
It should be the same as 768px is the amount of space available. Closing the browser to 768px or viewing at 768px resolution is the same except perhaps for browser chrome.
If indeed you are thinking in terms like this then the concept is wrong to start with. It should not matter what width or height a device is and your site should adapt to fit.
A fullpage scroll is usually a viewport scroll which is 100% so you don’t need to know the px.
Issues will arise if you are forcing the issue by giving elements a height because you never know the height of a visitors browser. I have a 27’ imac with 2560 x 1440px resolution but I never have the browser opened that wide or tall. On my PC I have a 2560 x 1000px resolution but my browser is never fully opened there either and I usually have the screen arranged with 4 applications (1 in each quadrant) so my browser height is about 500px.
There are so many other variations that it makes sense that you make your design work best for all and not just pick on yours and your mates computer as the guide.
We may be able to be more specific if you care to share the link to the site in question so we can offer more specific advice.
1 Like
I completely understand what both of you are referring with RWD, it should be fluid to adapt to all resolutions. This came about when I used a friends laptop with default 1366 x 768 resolution using IE. The page below, which shows as rendering fine in developer tools at that resolution.
On my friends laptop, the bottom of the list (REMOVAL POTENTIAL) in that screen was behind the “SEE THE PROCESS” sticky. Developer tools doesn’t even render the page the same at 1280 x 800 as my 1280 x 800 laptop renders it.
Developer tools doesn’t even render the page the same as my device with the same resolution:
Developer at 1280 x800
My laptop at 1280 x 800
https://snag.gy/REbr5a.jpg
My vertical spacing is done in percentages, I’m sure thats not the best way to do that as Paul has kindly commented before in one of my other posts. What I dont understand about using px for my vertical spacing is how everything will remain proportional. Screen height of 1080 has 312 extra pics versus 768 that would create spacing gaps. In your case Paul, with a height of 1440px, if browser is fully opened, there would be a huge gap between the bottom of my content and the bottom of the page. My content row widths are all 100% and my fonts are all in em, which in theory that should increase the size of the content to propotional fit, the additional height, but it doesn’t in my case.
Here is my page.
As Paul already mentioned, if you need specific sizes ( especially is you need BOTH dimension to be a specific amount) then your approach is fundamentally flawed. Assuming you have painted yourself in a corner and have no other option, you might consider : ‘shrinking’ the design, using quantum design break points, and allowing for a flexible margin.
for example, between 1240-1336px , your container may be a fixed 1240px wide with margin:auto; ( essentially you would be eating into this margin as the screen is resized until you hit your next break point and repeat the process with different starting dimensions); as far height, you could work of an aspect ratio.
<html>
<head>
<title><div</title>
<style type="text/css" media="screen">
.ratio {
position: relative;
background: pink;
max-width: 1000px;
margin:0 auto;
}
.ratio:before {
display: block;
content: "";
width: 100%;
padding-top: 56.25%;
}
.ratio > .cont {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
</style>
</head>
<body>
<div class="ratio">
<div class="cont"> wrapped ina fixed ratio shell</div>
</div>
<div class="ratio">
<div class="cont"> wrapped ina fixed ratio shell</div>
</div>
</body>
</html>
hope that helps.
Thanks dresden, I will look into that approach! Im still rather green at all of this so it will take me a little while to figure it out. I think ill stick with the media query just to get it working on a 768 resolution so my page is workable until I can change to your suggestion of a more universal approach. I just have to figure out how to accommodate for a 768 height without having an actual device to test on. All emulators I have tried aren’t even close to accurate.
If a site is truly responsive, you should be able to zoom in and zoom out on your browser to get a sense of how it works on larger and smaller screens. I tend to design in ems and %, which helps with this. I enjoy being able to zoom in on my sites to the max and read them as if I’m on a phone.
1 Like
Sad to say the site irritates when viewed on an iPad Mini 2. Reason for the irritation occurs when paging down, the screen jumps to the next page and the title is hidden above the fold. Scrolling up jumps to the previous fixed page and does not show the title on the previous page.
Yeah, it’s ugly on an iPad. That’s my next task.
Yeah most everything is in ems and % on the site. The fullpage scroll has thrown me for a loop, but it’s what I wanted so I’ll have to figure out to make things smooth across all formats.
If you are just designing this for your friends laptop at the resolution he has set and the browser that he is using then by all means do this and you and him will be happy.
However, it is highly unlikely that anyone else will have this exact same set up. Just because a monitor may have a resolution of 768px does not mean that the browser available viewport height will match this.
All browsers have different heights available for the viewport (and only when maximised of course) because they come with browser chrome (the edge of the browser all around the viewport and the space in which scrollbars and status bars as shown). More importantly the top of the browser chrome can be anything from one thin bar at the top to about 4 or 5 bars at the top depending on set up and options/plugins selected. (The Google Chrome browser on the mac has no browser chrome at the bottom or on the sides and indeed shows no scrollbars by default).
Some browsers allowed you to hide the address bar, and favourites bar and plugin bar and some have them hidden or selected by default. Therefore on a 768px monitor you could lose up to a 100px or more assuming that a user browsed maximised anyway which most do not.
I’m not trying to make it awkward for you but simply pointing out the futility of thinking in terms of fixed sizes.
These one page scroll at a time sites are really only useful for displaying minimal content that takes up no more than a few hundred pixel heights. A lot of ‘small company’ sites use this approach but simply have ‘call to action’ sections in the middle of each screen.
The choices you need to make are clear and if you want this one page scroll at a time site to work you need to ensure that your content is minimal or that you control the height of the elements with media queries so that at no time you get a vertical scrollbar. This means not thinking in terms of 768px but thinking in terms of how much space does this content take up and what can I remove/change to make it fit now the screen is smaller. It’s basically the same approach as responsive design where you gradually make the browser window narrower and then adjust content whenever a scrollbar appears horizontally and then organise the content to fit better. (To check smaller resolutions than your own you don’t need to change resolution or check on other computers you simply need to grab the bottom edge of your browsers and move it up or down.)
Making a page just fit yours or your friends computer is no guarantee that anyone else in the world will benefit or see the same as you. You need a more structured approach that caters for all sizes or use designs that work more easily cross browser/device.
Web design these days means designing for the web and the web is no longer measurable.
4 Likes
Paul, thank for your explanation, it makes perfect sense. I think I will put more of the content in containers and have the content within to adjust as the container does relative to the viewport. I didn’t think about some of points about browsers with the same resolution not exhibiting equivalent pixels due to sizing and various menu bars. Back to the drawing board. Thanks again!
1 Like
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.