: Are there any guidelines for laying out screen "real estate?" I'm wondering if there is any information about creating a decent page layout so that your website will appeal to users of all
I'm wondering if there is any information about creating a decent page layout so that your website will appeal to users of all resolutions.
For example, the optimal width for pages. It seems like on my resolution, most websites have their content centered and covers about 80% of the page, which is easy on the eyes.
Or maybe the height of the website's logo/header -- some sites I stumble upon have a huge logo with links or navigation under it, making it so that I need to scroll down to see the actual content, like articles or images (these sites don't keep me for very long).
I understand that every user is different and may have browser extensions, page zoom or may be running some ancient system that displays in 640x480. I'm not looking for a "best" solution, but rather, some guidelines about designing to accommodate different resolutions.
Basically, how can I make sure that I don't design a page where a paragraph might display in several easy-to-read lines on my resolution, but it turns into a single line on a 1920x1080 resolution and makes it hard for the user to follow?
More posts by @Jennifer507
2 Comments
Sorted by latest first Latest Oldest Best
Kendrick and the Smashing article he links to covers most of the bases, but I just want to add that you can't create a single layout that's suited to all possible resolutions, and it's probably not worth the trouble to even try.
Virtually no one these days is using a 640x480 desktop or laptop resolution. Even netbooks have higher resolutions than that. So unless you want to create a single layout for both desktop and mobile users (a bad idea 99% of the time), there's no point in trying to support such a low resolution. Your time would be better spent making sure the site works in text-only browsers and with screen readers.
Smashing Magazine has a discussion on the pros/cons of layout styles.
I tend to pick a fixed width that fits a large majority of resolutions and then go from there. You've already mentioned this, but I always make sure I try different font sizes when looking at how a layout looks in horizontal/vertical resolution. I'll also give it a try in an Android and iOS browser just to see if there are any major issues. You can use the max-width CSS property (and the associated IE-specific hacks) to help prevent long lines.
Google Labs has a neat overlay that shows various resolutions and the percentage of web browsers that have the given resolution. The about page has a bit more information on how they collected the data. It's also available as a Google Chrome plugin. I would imagine there are similar plugins for other browsers.
Terms of Use Create Support ticket Your support tickets Stock Market News! © vmapp.org2024 All Rights reserved.