Submitted by “One area of Web design that is going to become more important in the coming years is high DPI. For those of us working on WebKit, this will also become an issue for WebKit applications and for Dashboard widgets.” Why? “On a screen with 1920×1200 resolution the [800×600] Web site is going to be tiny, taking up less than 50% of the screen’s width and half the screen’s height. In terms of absolute size, the text will be much smaller and harder to read.”
Seems to me to be much easier to let the web browser or client computer handle the zooming. Not saying that high DPI won’t have its uses though. I’m not going to put time into making my site high DPI. I have enough things to do already.
Most decent web browsers let us zoom text size already but I’ve not seen one that will do images or anything else. Feature request!
This seems like an easy add-on to XGL or any hardware based GUI.
JJ
The real solution is to respect the nature of the distribution media and simply don’t use absolute values. Never ever use pixel-based designs.
Very nice idea. I gave you a point.
In an ideal world we would all not be using absolute values in web page creation. Do we live in an ideal world?
Respecting the medium of the Internet means using the OSI layers. The application layer can handle zooming just fine, no requirement to do it in the presentation layer. (I presume HTML is in the presentation layer)
Seems to me your idea would require a reprogramming of countless (millions?) of web pages. Is it not much easier to just let the client browser or client computer do the zooming if the user wants it.
What about images? They have a number of pixels across and down. How can you have a photo without a set # of pixels? All digital cameras shoot images with absolute value resolution/dimentions. Is it practical to convert photos to a mathematical formula?
Edited 2006-04-22 18:21
Well, most of it can be done already by using percentages instead of applying width or height based on pixels.
Bitmap images and video, however… Well, you got me on that one.
The best part would be to let the OS handle it (or the application in use). Another solution (less good) would be to scale the images according to the screen resolution. This could be done by javascript or in php or whatever. But it would require a lot of rewriting everywhere, and become very messy. And people would probably apply with no regard to standards, as usual.
But as long as we stick to tables and text and other non-image elements, scalability is easy to handle.
If the IMG-tag was modified so it took percentages instead of pixels, then that would work better. But it would probably result in weird behaviour when resizing the browser window. This could be fixed somewhat by having a ratio-variable, describing the ratio between width and height. But then again. It begins to become messy.
I use EMs in nearly all my designs as of late, and everyhting zooms. I even did my site (DittoBox.net) in nearly all text (very few images), you zoom all you like.
Not bad. But it still doesn’t fill out the window, though. It still has semifixed width and height, now it just scales accordingly to font size.
Next step will be to make it scale accordingly to window size
As a designer I see that as close to evil. Maybe on option available but certainly never as default. Long text lines are difficult to read, that’s why books are taller than they are wide, that’s why there’s columns of text in newspapers and magazines.
It’s much more difficult for the human eye and brain to read long lines in a paragraph than it is to read short lines in a longer paragraph.
Most people run their browser full screen so that’s why I’ve got it set to fixed width. I run my browser (even on my 24″/1920×1200) at full screen simply to drown out the wallpaper and icons of my desktop.
Anyway, just my opinion.
XHTML/CSS, standards and web design have a long way to go technologically until it comes anywhere near the level of print design.
“Most decent web browsers let us zoom text size already but I’ve not seen one that will do images or anything else. Feature request!”
Umm…both IE and Firefox (there are several extensions for this) are capable of zooming images.
Additionally I think Opera is capable (with add-on/extensions??) but I’m not sure. I don’t really like Opera – don’t like the UI and the last time I used it, it was unable to handle a javascript call as a link. They’ve probably fixed that by now though.
Additionally I think Opera is capable (with add-on/extensions??) but I’m not sure. I don’t really like Opera – don’t like the UI and the last time I used it, it was unable to handle a javascript call as a link. They’ve probably fixed that by now though.
No extensions or any other such nonsense needed in Opera. You can scale a page (fonts, images and all) by 1) using the zoom drop-down at the top, or 2) by holding ctrl + mousewheel up or down.
“No extensions or any other such nonsense needed in Opera. You can scale a page (fonts, images and all) by 1) using the zoom drop-down at the top, or 2) by holding ctrl + mousewheel up or down.”
Thanks for the info. Like I said, I hadn’t used Opera in a while though I had heard of the tools like you mention having been built in. I did get a recent copy of it, but it never really kept my attention. I know a new one is in beta with some UI tweaks. I’m going to check that out and see if it is more to my liking.
There is a differnce between zooming the whole web page in proportion (keeping aspect ratio) and zooming frames and thus reaching the point of frames overlapping.
Opera zoom’s pages completely; text, graphics, etc. That is one of the reasons I use Opera, that and mouse gestures.
“On a screen with 1920×1200 resolution the [800×600] Web site is going to be tiny, taking up less than 50% of the screen’s width and half the screen’s height.”
You know, there are people who use 1920×1200 screens exactly because of the extra screen space…
Besides, the notion of “DPI” in computer monitors is bogus anyway. Most monitors offering those high-resolutions are also big, which means the definition (DPI) stays mostly the same.
Not so long ago, we started seeing lots of laptops with 15′ screens and 1400×1050 resolutions (which does mean increased DPI), but manufacturers seem to have given up on them, going for 1280×800 instead, just because people didn’t like the fact that stuff got too small without any way to fix it (increasing font DPI sucks, because the all the rest stays the same, and lowering the resolution also sucks because everything gets blurry and ugly).
“You know, there are people who use 1920×1200 screens exactly because of the extra screen space… ”
Yeah exactly! A better name/goal than High-DPI would be Variable-DPI. I can see a real need for that though, especially with a big screen. Sometimes I want a lot of real estate and sometimes I want to fill my screen with one page. It depends on what I’m doing.
You know, there are people who use 1920×1200 screens exactly because of the extra screen space…
This is the exact reason why I went to a 21″ monitor a while back. I am a graphic designer and a web designer, and I always found myself having issues reading the many windows I had arranged on my 17″ monitor, parked at a higher resolution. Now that I am filling up my 21″ (and using Exposé), I still would like to have some of my windows remain constant. That is why I am considering getting a second monitor.
Not so long ago, we started seeing lots of laptops with 15′ screens…
Amazing! Where can I get this 15 foot screen you speak of?
Although I am interested in a fluid interface, where the elements on screen can expand/contract with the resolution, I still hope that us users can turn this feature on/off.
“Amazing! Where can I get this 15 foot screen you speak of?”
I don’t know, how long is a foot? You people and your non-metric systems, it confuses the hell out of me…
It’s approx. 30-31 cm. The decimals differ a bit between USA and GB, I believe.
That’s only a problem on Windows though.
On some other systems, increasing the font DPI also makes the buttons larger. If you do it with Gnome images will also be scaled. That however does not look good, with anything but even factors (try scaling a picture with size of 100*100 with a factor of 102/96 – it does not look good).
heh, i wouldn’t want websites to go high dpi.
if i had a nice wide screen monitor, i would be watching videos on one side, and browsing on the other. its almost like having a dual monitor but on one screen. therefore it helps people multitask. People do not want to have a full screen website that forces them to maximise their browser.
Here is an example page that uses ems for text & image sizes. Should scale ‘correctly’ on every browser:
http://host.sonspring.com/em-image/
(Link to the original article on the bottom of the example page)
That’s right; Opera is designed not only for the desktop but also for phones. It’s got the *very* handy feature of fitting a page to the width of the browser window, text, images and all. You can also view the page in a thin column, phone-screen-style. This is handy for when you want to have a little window with some instructions or listings sitting next to the window you’re working in.
Around 99% of software written for all platforms are not considering resolutions of 1920×1200 and higher.
Firefox, Konqueror, Epiphany, IE and others do not consider that I want to see eg 2 pages side by side.
Even untill recently they were not offering multitab browsering.
Adobe reader on the other hand and MS word has this feature(and more ie up to 4 pages) which will revolutionize the way you present the contents you have in your files. But lack multitab browsing.
I hope both will learn from each other and plug their deficiencies
Eh? Surely you just place two browser windows side by side?
To my mind, this is the complete opposite of tabbed browsing. Tabbed browsing is there to compensate for smaller screens. You want something to take better advantage of your biggere screen!
“Eh? Surely you just place two browser windows side by side? ”
Two browser windows will show two different web sites (look at the address bar)unless both have the same web address; what I want is to flow text and frames of long web sites to the 2nd half of the screen.
“Tabbed browsing is there to compensate for smaller screens.”
Tabbed browsing is a great organizing container for sites you open which have common thing, eg, you make a search about a product with 10 different manufacturers and compare between them; with 10 windows open it would be a disaster to browse but with 10 tabs within 1 browser it would be great organizing tool; besides tabbed browsing is good when you want to save your session and reopen it once you have time for it, much like windows hibernation. For the last function you need sessionsaver plugin added to firefox, opera has it integrated.
Ah indeed, fair point. This probably would be a rather nice, novel feature to integrate.
Certainly on those web-sites designed to have a sort of “page of fixed width over a coloured/patterned background” (such as this one) this could be made to look really clean.
However, I do see one fairly major potential problem. Say your web page is taller than twice the screen height (as most are), how do handle where to display what?
Display half the page on the left and half on the right? This would probably break the page in the middle rather awkwardly!
No, I think what you really want is a simple split-view idea of the kind found in Word and many other programs. Simply add a vertical split in the window and effectively have two copies of the page open, each with their own scroll-bar.
As someone who runs 1600×1200 with large fonts on, I’m always pissed at websites who run fixed width content with fixed size fonts.
It’s called pt/em and tables – USE them.
But then, when a number of web coders will call using tables for layout a ‘hack’ but then will run 20k of javascripts on every page to make their page ‘IE compatable’ JUST because they are trying to use <div> instead of <table>, things like this are hardly a surprise.
OSNews is kind of a good example of this. It uses PT which means the text is at least legible on large screen settings, and it uses tables for layout meaning it doesn’t need hordes of stupid CSS tricks just to work semi-reliably… Now if it could just dump the use of the poorly supported ‘col’ tag, and lose the fixed There’s no good reason with this simple a page layout to need to shove it into this narrow little column down the middle of the page.
One of the whole original IDEAS for HTML was device independance – NOT in terms of the hardware or ‘lower power computing’ that seems to be the emphasis now, but in terms of screen resolution and default font sizes… something it seems a lot of HTML coders… and even the W3C itself seems to have forgotten of late.
I run 1600×1200 with cleartype on a 21″ screen for a REASON – I hate jaggies on my text – always have. Hell, I’ve been running the ‘large font’ windows system metrics since I discovered Windows 3.0 would go to 1024×768 in truecolor on my Tseng 2000 board a decade and a half ago; and that was on a 14″ screen. Needless to say I’m a big advocate of using dynamic font sizing and dynamic layout metrics instead of this fixed size bull.
Aye, Reverend
Quite easy to denounce, but it’s not that simple to fix.
Unless you develop your personal website, you are going to have deadlines while needing to achieve maximum compatibility. Sometimes, the client will even ask for a pixel-perfect design.
I took many hours to maximise the compatibility of our department’s website. Even then, we still got a rendering issue with MSIE. It is a minor annoyance coming from the browser, but I won’t have the choice to fix it with hacks… The majority of our clientele (76%) is using MSIE 6; we just cannot ignore them like we do for MSIE 5. Yeah, I’ve heard of graceful fallback, but I just don’t have the time to waste on that 1% when I am involved in other projects. It’s sad, but it’s the reality. For the same reason, our layout is fixed, On the bright side, the text is dynamic and it’s perfectly compatible and tested with Firefox, Opera, Konqueror and Safari. Long live standards!
As soon as you start meddling with complex designs, getting device independance is a chore. Unfortunately, time is usually going against you, hence why you have to make sacrifices. This is especially true when “webmaster” isn’t your only job.
Personally I’m more concerned with IE’s css bugs and keeping file size low on web pages. Despite having a 15 Mb/s connection at home, some pages are just plain d o g – s l o w. Heavy, poorly optimized web sites on slow/low bandwidth servers is what makes ME sick. Not fixed width, fixed font-size pages.
And yes, browsing full screen with a 1920×1200 resolution makes an 800×600 web site look tiny. Yep..
Edited 2006-04-23 14:41
>> Heavy, poorly optimized web sites on slow/low bandwidth servers is what makes ME sick.
That too… Part of why I support SVG and say flash and people who use it on their sites need to die a slow agonizing deaths.
Also why I’m NOT entirely thrilled with XHTML, mostly because a lot of the new ‘consistancies’ (taken from XML) just chew bandwidth without adding any REAL functionality. Like having to state all parameter values as strings (aka put them in quotes), the loss of standalone tags, and a 90+ character doctype tag that amounts to little more than a glorified comment and ego-stroking for the W3C. 99.999% of the people downloading your page don’t give a rats ass about:
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd“>
Making that about 80 bytes dead weight. The handful (relatively speaking) of people who would actually CARE about that information should already know where to get it. WORSE, after the rikki fits they throw about tags not being closed… I don’t see a close on !doctype
Even the stupid little bullshit like depreciating [i] and in favor of <em> and <strong> – just because bold and italic aren’t ‘politically correct’ for non-visual devices… (note both tags are longer, and that length difference is doubled, so two extra bytes using em and ten bytes using strong) or requiring alt tags on all images, resulting in endless hordes of sites with alt=”” o every image (five dead bytes per image); Like my 8×8 border corner needs a malfin alt tag… Worse, if you GIVE it alt text that’s larger than the image, a lot of browsers wont properly calculate the sizes of objects on the page – which in some cases (like IE) can completely screw up the site if you used relative positioning to move a element using CSS.
These little 80 bytes here and five bytes there might not seem like much, but over how many times per page times how many pages on the internet as a whole times how many hits? It adds up DAMNED fast. It may only total five percent total traffic max, but in real world figures that translates into how many dollars worth of wasted bandwidth?
And this is the specification they are pushing for everyone to use? GREAT.
“… a 90+ character doctype tag that amounts to little more than a glorified comment and ego-stroking for the W3C. 99.999% of the people downloading your page don’t give a rats ass about:
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd“>
Making that about 80 bytes dead weight”
Well, it’s not entirely dead weight. Doctypes tell browsers to render a page a certain way. If a doctype is invalid or omitted the browser switches to quirks mode (i.e. winging it). This is called doctype switching and was first used by Microsoft in IE 5 for Mac if I’m not mistaken, and quickly adopted by others. I like to think that doctypes give web site authors more control.
Also, if you want your images to do well in Google, you’re pretty much going to have to use alt attibutes IME. Besides that, it is intended for your pages to be more accessible (blind people, text-based browsers and such).
But I do agree with you that every byte counts.
>> Well, it’s not entirely dead weight. Doctypes tell browsers to render a page a certain way.
Should have been more specific – it’s 91 characters long. If I’d designed the spec instead of a doctype tag I’d have simply added it to the html tag as a parameter.
<html type=”4.01 strict EN”> for the html 4 version
<html type=”X trans EN”> for Xhtml Transitional
or something along those lines. The URL to the W3C site is dead weight as 99.99% of the people using it don’t ever see it or care about it, using it as a extra tag that doesn’t follow the ‘must close all tags’ convention that’s the heart of XML is a major inconsistancy.
The url is the part that annoys me most… again, the VAST majority of people viewing a website could really give a {Censored}. The only people who should care about that are the site coders, and they should know where to look up the specification.
“The URL to the W3C site is dead weight … “
No it’s not. The URL links to a doctype definition which defines what tag can go where an what is and is not allowed, so that the browser knows how to render a page with that specific doctype.
Of course normal people don’t look at source code or doctypes – it’s there for browsers.
Forgot this site actually pays attention to the bold and italic tags as HTML. My bad… of course that’s why BBCode was invented, and why I dont’ understand supporting BOTH at the same time.