Forum Moderators: open
Thanks
Tom
Designing for screen sizes is passe. What if I want to look at your site on my cell phone?
Liquid sites are just about the only type I can see on my phone (unless the site has been specifically designed for my phone. The side scroll on an 800px table is killer, let me tell you.)
[edited by: bill at 8:57 am (utc) on Jan. 13, 2004]
My father uses 800x600, but the amount of sites he gives up on because of horizontal scrolling is quite high. He has the sidebar with favorites folder open all the time.
Controlling text line length is not what the web is about. If is for information and not graphical representation.
In fact, I can't think of many big sites that don't use liquid layout: Think Amazon, Dealtime, EBay, Alexa, WebMasterWorld...
Small screen browsers do their own thing anyway, but we do check client sites in Opera's small screen view and/or a WAP simulator where we feel that matters to the business. It really doesn't for most of the sites I work with.
Generally speaking 800x600 is a good standard today, even though my logs now show 1024x768 is the most popular by a couple of percent. 43% are still 800x600 users are that is big chunk of change, can't be ignored.
As for those surfing with phones....it depends upon the category. I doubt any phone based surfers are ever going to buy real estate based upon what they can see using current phone technology!
I recently completed a site that looks as good at 640x480 as it does on a 1024x768 display. Same HTML for both, just nice fluid CSS design.
This was important as the site was public information targetted at a disadvantaged area where people are unlikely to have big flashy monitors.
Note: it also looks pretty reasonable on Opera's small screen, but that is mainly due to using semantically correct markup, as small screen rendering ignores a lot of the CSS.
A user should be able to change their window size to be wide and short or tall and skinny and still be able to view your site. A coworker with a 23 inch cinema display looks at all their web sites with the window full screen... I can't stand it, but it's how they prefer to experience web sites.
On the flip side, if you look at some of the major companies on the web, (think of the biggest company sites that you visit regularly) they seem to be standardizing on a particular type of fixed width centered column layout for their front page and then a liquid page for their product or article pages.
[edited by: whoisgregg at 3:33 pm (utc) on Jan. 13, 2004]
liquid
I need to find an accurate emulator (anyone know of any?)
Opera has a small screen rendering mode whih simulates the Opera browser that is available for mobile phones.
Also check out The Openwave simulator available at htt*p://developer.openwave.com/dvl/tools_and_sdk/openwave_mobile_sdk/phone_simulator/
I guess the lesson here is that you must still cater for the few who need lower screen settings.
Using 640x480 on a big screen means the text will look really pixellated and be difficult to read. it would make a lot more sense if they insisted that your sites had to respond correctly to text resizing (such as the View->Text Size menu in IE).
Then they could use a resolution that suited their monitor (e.g. 1024x768) and have nice big text that was smooth and easy to read, rather than all jaggy.
However, if it is an issue for you, then you can scale your graphics in much the same way as anything else, by specifying their width as a percentage or in ems instead of an absolute pixel value.
IE remains the dominant browser. It does not support max-width. There is a reason why print media limits the width of a line of text - readability.
That nice liquid layout may prove to be difficult to read on a high-res display.
Also, I have seen anomolies crop up when collapsing a div containing graphics where the pic ends up obscuring text at one point or another. Odd artifacts indeed.
And then there is the client that has yet to make the shift in paradigm from print to screen.
If I have to go fixed, I use 800 (actually 750). If I can go liquid, I do, but with care (and a bit of trepidation).
Regarding scaling graphics, they can be sized in ems, which is a trick that I don't see often. Do a search for "sizing images in ems"
WBF
What about using the scripts that detect screen size and load the page based on what the script detects?
that nice liquid layout may prove to be difficult to read on a high-res display.
Hmm... I don't agree. The point of a fluid layout is that the user can resize the window to what they feel comfortable with. I seriously doubt that anyone who uses a display that is greater than 1280x1024 would surf with their browser window maximised, as you say, its just not comfortable. (anyone with a big ass display care to comment?)
I use another approach, all work -sorta. Mostly, I'm just being a devil's advocate, liquid isn't a cure-all for resolution creep.
Is that like designing with % instead of pixels so they scale accordingly?
That's one of the keys. It's an artful combination of certain fixed size areas and other flexibly sized areas.
What about using the scripts that detect screen size and load the page based on what the script detects?
That's another approach - very high maintenance and not used nearly as often for exactly that reason. It's expensive to execute and maintain.
That makes absolutely no sense: so it sounds like a perfect government guideline :)
Using 640x480 on a big screen means the text will look really pixellated and be difficult to read.
What are you liquid guys doing about scaling your graphics?
This is exactly where the added time and effort comes into liquid layouts. As tedster said, liquid/fluid layouts are by in large the combination of absolute units width (eg pixels) areas with relative unit width (eg %) areas.
In general I keep my graphics in fixed width areas and put my text in the variable areas - that way image scaling is less of a problem.
