I always wonder what computer setups/browsers people have as their defaults to make layout sizing less intrusive.
I would rather not recommend you to accommodate according to "default", but rather do so for at least few varieties of resolutions. Many people today run 1920x1080 (full-HD), and some would
inflict themselves with 3840x2160 (4K), true; but webmasters outright targeting these in their designs in the manner you asked, is exactly what brought you the problem of this content-obscuring screen edge decorations (and
header/footers) in the first place.
Instead of actually "targeting" these contemporary resolutions; I would rather recommend you to do
legacy-first design and make your site accommodate
all of these low-end "modern" screen resolutions, from important first:
- 1366x768 (16:9 Mid-2010s laptop)
- 1280x720 (16:9 HD-ready LCD TV)
- 1024x768 (4:3 XGA; Windows XP-era desktop)
Once these view well, people viewing it under full-HD 1920x1080 would not have accessibility problem; and by doing it this way, you'd also avoid breaking the bank for people who use cellular Internet in the process. (People who inflicted themselves with 4K 3840x2160 will already have their browser/OS upscale everything anyway; but if you're trying to explicitly accommodate them, see my next point about "font size-centric design")
If you are also explicitly accommodate retro systems, then consider testing on the following resolutions as well:
- 800x600 (4:3 SVGA; Windows 98/dotcom-era desktop)
- 640x480 (4:3 VGA; NCSA Mosaic era, the first mainstream appearance of WWW)
- 840x480 (16:9 WVGA; a bit unusual)
- 480x800/800x480 (The last of pre-smartphone PDAs)
Note that retro software from early-2010s and the time before will not support CSS media query and CSS/MovingGoalpost (CSS3). Thus when accommodating these, you would have to make everything usable in retro resolutions under CSS2 (including its `@media handheld {}`, if any) first, then progressively-enhance it to look proper under current resolutions via CSS media queries; not the other way around!
Another approach which I've been using in the mix, is "
font size-centric design"-- which basically mean that I size+position many strategic design elements using classic CSS `em` unit
(1), which the actual dimension is multiplied by display font's pixel size at the place where the element is declared.
Once you carefully designed the typesetting of the entire page to use font size that is relative to each other (declared in `%` or `em`) down to the `<html>`-- which has no font size declared (i.e. uses user's default body font size configuration)
(2); you'll get a page which is automatically scaled based on the accessibility/font-size setting. When done well, it would mean you now automatically accommodate with people who use smartphones, and rich kids who inflict themselves with
4K screens altogether.
(1) NOT the newfangled CSS/MovingGoalpost's `ch`, `rem`, `vw`, `vh`, `vmin`, `vmax`, and all that jazz.
(2) And at one "default" desktop resolution (usually 1024x768), I would assume a 16px default font size, and adjust things to make sure that images would be displayed with no scaling in that configuration.
Are u having fun?
Author
Enter
Random
Recent
Tenement
Arcade
Web Craft Guide
Graphic Catalogue
Wiki
Help I'm Lost!
Link Land
Newsletters
Image Stream
Passport Sites
Asatte
Add your site?
