| Web Design for Different Display Sizes |
|
|
|
Written by Paul Bromby December 19, 2005 Some years ago there was a statistic about the screen display size that people were using: - 640x480 pixels: 20% - 800x600 pixels: 50% - 1024x768 pixels: 30% Many prominent sites, like for instance, news.bbc.co.uk, still stick to a smaller screen format. Our policy is to design for 1024x768 on sites with corporate clientele, but to stick with 800x600 if we believe there will be visitors with older computers. Does anyone know what the statistics are now for screen display size? Paul Bromby pdcnet.org.uk Written by Michael Linehan December 2, 2005 800x600 is not just for older computers. It's also for older eyes. When I visit clients in their offices, I find an astounding number with modern computers running at 800x600 on a 15" or 17" screen. So I like to make sure a site is readable on 800 without horizontal scrolling. Until 800x600 is truly down to trivial levels (if ever), I think this is a good idea. 800 usually gives plenty of room for sentences of a comfortably readable length. Michael Linehan Marketing Alchemy Written by Brad Waller December 20, 2005 While I have not seen data from a large study in a while, I do have data courtesy Google Analytics for two of our sites. This will vary based on the type of site, but I think that we can safely say that 800x600 is now the smallest you need to worry about with more than 99% of our visitors having 800x600 or larger. Screen Size EPage AdJungle 1024 x 768 52.75% 54.49% 800 x 600 27.56% 24.52% 1280 x 1024 7.71% 10.59% 1152 x 864 2.90% 2.81% 1280 x 800 2.27% 1.85% 1600 x 1200 1.78% 1.74% 1920 x 1200 0.86% ---- 640 x 480 0.81% ---- 1280 x 768 0.54% 1.00% 1280 x 960 ---- 0.57% 1440 x 900 ---- 0.47% 1400 x 1050 0.53% 0.39% Cool stats aside, this does not mean that you should start to design 800 or 1000 pixel wide Web pages. I have found that most pages look better in a portrait format as people like to read from top to bottom, and not scan across a huge expanse of page from side to side. You have to use columns to make the pages readable, and when the page gets really wide, the columns either get too wide or too numerous. Also, just because the monitor is a certain width does not mean that the user keeps their browser at that full width, or even the active window of the browser. With side bars and tabs and toolbars, users do not leave everything for the Web page. A quick glance at my browser (Firefox) shows that it takes up maybe 80% of my available desktop at 1050 pixels wide, but the active window is only 819 pixels. For our own efforts, I try to keep the maximum page size under 780 pixels so that even users with 800 pixel wide monitors have room for scroll bars when they max out their browser screen. Brad Waller adjungle.com Written by Claudiu Spulber December 20, 2005 Hi Paul, According to w3schools browsers_stats July 2005 statistics say that: - 640x480 pixels: 0% - 800x600 pixels: 25% - 1024x768 pixels: 55% - higher: 14% Soon we'll have to optimize for higher than 1024 resolution. I think the solution for this is "modular" construction. For www.novapdf.com we have it optimized on 1024 but on 800x600 the right column disappears - which still doesn't affect the overall usability of the website. Regards, Claudiu Spulber backup4all.com Written by James Miller December 21, 2005 I am a great believer in laying out pages for how they will be used. For instance, if the page is solely for display then a well-laid out page of say 800x600 is fine. Note that if you can't get a nice page design on 800x600 it is likely you have put too much on the page. But when it comes to pages that need to be printed, I always design them so that if you hit the Print button in the browser they print neatly. I did this for a mediation company and business from the web site increased dramatically. I believe the reason is that for a lot of products and mediation is one, the decision to use is often taken by a committee, many of whom might be non-Internet users. So the ease of printing means that your site gets preference over your competitors. A related point is that recently I was in a large bank in the City of London. The analysts there have very large screens and were displaying lots of information in browser windows arranged portrait wise. As to the point about eyesight. One of my clients has a large 800x600 screen and has great difficulty with reading it. I took his glasses and they were a very expensive pair of varifocals. I then gave him mine, saying they were expensive computer glasses. He said what an improvement. I then told him they were reading glasses from Boots for a tenner! James Miller Daisy Analysis Written by Eddie Teo December 21, 2005 Adam, Just to let those who have optimized for the 1024 screen know this. I am one of the many out there who has a 1024 screen, but opt to resize my browser windows to show just 800. I did this so that I can open multiple windows (I am sure many programmers does this) and having "smaller" browser windows allows me to easily navigate between each window. I personally will make my sites at around 760 - 780 (width) max., I hate to see right columns off my screen, and only when left with no choice will I maximize a particular browser window. For those who relies on advertisement dollars, think of what would happen if your audience miss out all your right columns, assuming you have them placed on the right columns. Unless you are using Firefox which allows tabbed windows of course, that's another story altogether. :D eddie teo online-technology.com Written by R. Neilson December 21, 2005 While I don't know what the statistics are, I have a bit of advice. For those of us that are getting older and need glasses to read anything the very fine type is difficult to see and unless you have a 17" moniter or larger not very practical. You might want to ask what the statistics are for size of moniter used in additon to size of screen display as this plays an important role in how well others can view the page. R. Neilson H. L. Supply Written by Scott Marino December 22, 2005 Do what the big boys do... Right before my last redesign, I surveyed 20 of the top retail sites to see what they were doing. As billion dollar companies with lots of $$ to research these things, I follow their lead. Here is what I found (about 6 months ago): L.L.Bean 764 Eddie Bauer 762 Amazon 100% Buy 100% Overstock 760 B & N 766 EBAY 760 Walmart 720 Blockbuster 743 Target 729 Best Buy 760 Victoria Secret 733 IKEA 750 Staples 760 / 100% Zappos 738 Old Navy 750 American Eagle 700 Abercrombie 765 Banana Republic 750 J. Crew 755 Seems that the 750-760 range is most common. All you have to do is "view source" in your browser to see what they have. Many interesting things can be learned by seeing what others are doing. Regards, Scott Marino webundies.com Written by John Smart December 22, 2005 Screen size isn't the only issue. With large screens being so much cheaper, many of us now do have very large screens. Keeping those LCD's in native resolution locks them in to higher resolutions. But I don't ever have windows set to full screen. Knowing that I am on 1280x1024 will not help when I am only allowing my browser to use 60% of that screen. With that in mind, I think that 800 x 600 is definitely the safest path to follow, and will be for a long time to come. John Smart, Technical Director InternetDesign.com Written by Martha Retallick December 22, 2005 Since my studio switched to Web Standards-based design (using CSS and XHTML), I have been a strong advocate of "liquid" sites. What this means is that the website fills the browser window, regardless of the monitor size. That being said, I'm finding that the clientele seems to be most interested in how their sites look at 1024 x 768 in MSIE on a Windows computer. We test all of our sites at 800 x 600, 1024 x 768, and 1280 x 1024, using MSIE, Mozilla Firefox, Safari, and at least one brand of PDA. We've also tested sites on Internet-enabled cell phones, and here's an observation: Although these devices do a dandy job of sending and receiving text messages and e-mails, they are slow-w-w-w when it comes to viewing websites. I expect that in the future, the Web will look a lot snappier over a cell phone. As for printing out pages, we design all pages to be printer-friendly as the default. Which means that visitors no longer have to go hunting to find that little "printer-friendly" icon. Martha Retallick westernskycommunications.com Written by Tom Aman December 23, 2005 > Our policy is to design for 1024x768 on sites with > corporate clientele, but to stick with 800x600 if we > believe there will be visitors with older computers. - Paul Bromby > For novapdf.com we have it optimized on 1024 but > on 800x600 the right column disappears - which still > doesn't affect the overall usability of the website. - Claudiu Spulber > ... just because the monitor is a certain width does not > mean that the user keeps their browser at that full width... - Brad Waller Why, oh why do some designers want to "optimize" pages for the monitor width? I am glad to see that Brad understands that, just because a monitor is a certain width, it does not mean that a page should be that width. Paul, why do you assume 1024 for corporate clientele and 800 for others? Aside from the fact that many (possibly most) surfers do not run full screen, what about those who have their task bar at the side of the screen instead of along the bottom. Or those (like me) who have something on their computer that, in addition to the usual task bar at the bottom of the screen, may involve a task bar at the side? Also what about heights? A screen set to 800 x 600 with a task bar at the bottom does not have 600 pixels of display area available. Same problem with 768 height. Or Claudiu, you say "we have it optimized on 1024 but on 800 x 600 the right column disappears... doesn't affect the overall usability of the website". Want to bet? What if, as I did when I checked the site, my browser window is set to less that 800? Now the usability is really affected because part of the main body of the page is also cut off. The usability is also affected even if I am set a bit wider than 800 and see the cut-off column because I, like almost every surfer, will be curious about what is hidden and may take the time to side scroll. Or, more likely, unless they really, really need whatever is on the site and there is no other place to get it, just go elsewhere to a more useable site. My wife is a case in point. She has a 1024 wide screen but seldom runs her browser full screen. She is a jewellery maker and mostly uses her computer to search for materials she needs to buy to make jewellery. If she hits a site that requires side scrolling, she just leaves without looking at anything and does not include the site in her bookmarks of potential sources. She tells me she would do without something rather than put up with the annoyance of side scrolling. So, designers, listen up: ** Stop Designing Pages For A Certain Screen Width And Stop Assuming That Everyone Runs There Browsers Maxed. ** Many (most?) of us don't run our browsers full screen. And even if we do, full screen does not necessarily mean monitor screen width because of other task bars, scroll bars, etc. Even though my screen is set at 1024, I run my browser at a comfortable reading width. And, depending on what else I am doing, that "comfortable reading width" may even be less that 800. As a result, I get very annoyed with sites that are "optimized for ... ". As for "optimize for higher than 1024 resolution", please forget that. On a 21 inch monitor, 1024 is already a really uncomfortable reading width. My son now has a wide screen monitor. I don't know the resolution for width, but I would not even attempt to try reading text in a browser running full screen on that monitor. "Optimized for ..." - optimized for whom??? I think it means "optimized for the page designer" because "optimizing" for a specific width makes designing the page easier. It takes a lot more effort to "optimize" for whatever width the surfer happens to be using. When I see "optimized for ... ", my personal reaction is "lazy designer". By optimizing for a certain width, a designer is assuming a lot of things and I hope everyone knows what "assume" did. (In case you didn't, it made an "ass" out of "u" and "me"). Tom Aman Aman Software Written by Mark Medlicott December 23, 2005 Firstly, I am taking this chance to wish Adam and his family, along with all LED'ers all the best for Xmas and the New Year. I am writing this on a 17" monitor, set for 800x600 display like for many of us 'older' people. I struggle at a 1024x768 resolution to read the screen easily (who needs headaches), and as such also design my websites with this in mind. I have also noticed that maybe people in New Zealand like myself haven't upgraded so quickly to larger monitors or laptops and as such the stats below tend to reflect this compared to statistics shown by overseas websites. 46.88% 1024x768 39.58% 800x600 13.54% 1280x1024 Another point I wish to make, is this not a reason that you would design in percentages and not pixels? I understand that images should be in pixels, but tables or divs can be set to percent and degrade nicely. Generally all you add or subtract is whitespace, which can't be all bad. Thats my last post for the year, but I look forward to the continuation of this great digest, and to even more issues each week to run in from the sun (its summer where I live) to read! Regards Mark Medlicott Medlicott Design Written by Mal Bailey December 27, 2005 > Do what the big boys do... As billion dollar > companies with lots of $$ to research these things... - Scott Marino Having worked for agencies on two of the big names Scott mentions, don't believe they all run at those resolutions because of vast amounts spent on research. Marketing agencies are lazy - most of those sites are the size they are for the same reason Scott is suggesting. Simply because "thats what others do." Convention is a more reliable indicator of 'what others do' than 'what is right'. Cheers, Mal Bailey aethon.co.uk Written by David Starr December 27, 2005 Designers would be well-advised to listen to Tom's thoughts [Tom Aman]. In my 'regular' job I sell a commercial software product and visit corporate customers to install and train on the application. A very high percentage of desktops are still set at 800x600 in the business world, even though the machines and video cards are typically modern and capable of much higher resolutions. It's foolish, in my view, to design a commercially viable page to any higher resolution. Most 'internet enthusiasts' surf at much higher resolutions, but unless you are marketing only to the Internet community you may well miss the mark. Best regards David W. Starr, Customer Solutions SatViz Incorporated Written by Kathryn Martyn December 27, 2005 > For those of us that are getting older > and need glasses to read anything > the very fine type is difficult to see... - R. Neilson I agree. It's the older eyes, not the older computers. In the majority of offices, you'll see 800 X 600. I've brought in beautiful new monitors only to have the display look horrible because the users refuse to use the monitor's native resolution. I still tend to design using width under 750. Graphic professionals are about the only true exception to this rule as they most like all have higher resolution. If you want to get an opinion, don't ask online, ask those around you at work or at home. The online community is a different animal, IMO. Kathryn Martyn, M.NLP onemorebite-weightloss.com Written by Tom Anson December 27, 2005 I think the stats on browser resolution setting is interesting. I've wondered about how things stand today -- since addressing this subject a couple of years ago. However, are you LEDers suggesting a fixed-width web page? I've seen the term "optimized for" applied to this discussion. Does that mean you're talking about a variable-width page that is designed to look best at a certain pixel width? And, speaking of optimization for width: What do you do about font-size adjustments? Tom Anson Anson Digital Concerns Written by M. Shabeer December 27, 2005 > ... why do you assume 1024 for corporate clientele > and 800 for others? - Tom Aman Based on the demographic data, corporate professionals do tend to use 1024 * 768. Most of them also use laptops ... 800 * 600 for the rest of the world because thats what the MAJORITY use. Like you pointed, we designers might not be able to please everyone. And a good designer doesn't. We only focus on the target audience. The data on the target audience - found from server logs, case studies and experience. > ... what about those who have their task bar at > the side of the screen instead of along the bottom. What about those on the left, right and top? :) More seriously, there are ways to know the exact browser window size of the user. I can't speak for the others, but based on the data I have, people who resize their windows are a very small majority. > Also what about heights? We don't care about the height (unless it's some kind of tricky design that might break) simply because people don't mind scrolling up or down. Sidewise scrolling is what people hate the most. That's why width becomes so important. > My wife is a case in point. She has a 1024 wide screen but > seldom runs her browser full screen ... If she hits a site that > requires side scrolling, she just leaves without looking ... So how do you want us designers to handle this? No I'm not being sarcastic. Seriously. Say I re-design a site where the server logs show me that 63% of the target audience use 1024 * 768, another 20% use 800 * 600 and the rest have some other resolution? It is very, very difficult to create a design that can accomodate content within every possible width. So the best a designer can do is to try and ensure that the design doesn't break or messes up for the majority. > And Stop Assuming That Everyone > Runs Their Browsers Maxed ... The irony is, you are making the same assumption - just because you resize the browser window to a certain size doesn't mean that everyone too does the same. Trust me, a good designer always keeps his / her target audience in mind. Always. Bill Cosby said it best - "I don't know the key to success, but the key to failure is trying to please everybody." M. Shabeer Written by Kris Driessen December 28, 2005 Allow me to delurk for a moment and tell you what I am doing to cope with the screen size problem. I designed a site with three "columns". The two on the left are my main content screen - the one on the right is stuff I would like people to see, but it won't impact the content if they don't. For example, little hints and tips, an Amazon vertical banner, an Adsence skyscraper, etc. There is still a horizontal scrollbar, but it doesn't seem to be intrusive. Kris Driessen Written by Marty R. Milette December 28, 2005 Why do so many people try to 'force' hard-coded display and font sizes? The Internet is not paper -- that's the beauty of it! Why not take ADVANTAGE of the flexibility of the media? Don't be afraid to set the width to 100% and let the text flow as it may. It's the CONTENT that's important -- not the way it happens to be laid out on the screen. Do it this way, and it won't matter whether the user has 640x480, 2048x1546 or anything between. It also won't matter whether the user prefers to maximize their browser window or not. One thing that irks me (and many other people who's eyes aren't as young as they used to be) are the "Font Nazis" who decide that if the user can't read 2pt text at 1024x768, then they shouldn't be reading the site at all. Browsers DO have a View > Text Size option for a reason -- but in the vast majority of cases, designers have used CSS and fixed-size type which effectively disables it. If you feel that you really, really must take control over the user's viewing experience -- crack open PageMaker, design a paper brochure that is typographically beautiful and perfect and offer it as a download. :) Marty R. Milette Written by Viggie Bala December 28, 2005 > I have been a strong advocate of "liquid" sites. What > this means is that the website fills the browser window, > regardless of the monitor size. - Martha Retallick Having a liquid-design may not be a best remedy. Back in 2001, I redesigned my site to stay full screen (ok, full browser width) right from 640 pixels. There were many curved text boxes, but all of them were liquid. The design stayed intact up to 1280 resolution (haven't checked beyond that), but it quickly showed that reading is not comfortable if browser width is beyond 1000 pixels. Reading even 2 or 3 line text boxes in higher resolution was not pleasant, and you know it is not good to irritate the customer while introducing our business. Perhaps we should start another thread on 'What is the most comfortable text width on the screen display'. In a fixed with 800 res. design the actual width will be around 760 and deducting 160 pixels for a left or right menu, we have 600 pixels for running text. My assumption is that the most comfortable width should be around 550 pixels or shall we say it should not be beyond 6 inches of monitor space? Regards, Viggie Bala viggie.com Written by Tom Anson December 28, 2005 Dave Starr noted that, from his experience, "A very high percentage of desktops are still set at 800x600 in the business world, even though the machines and video cards are typically modern and capable of much higher resolutions". I'm not surprised at all by this statement. It would be my guess (based on the suspicion that I'm not too far outside the norm, technologically) that a majority of people using computers today have no idea that monitor resolutions can be adjusted. I found out "by accident", and if I had not purchased a 22" monitor specifically to display more pages at one time and been shocked that it still displayed the same thing -- just REALLY BIG -- I still might not know. My chiropractor was working online with a computer that had not been updated since 1997, and all of his setting were at default. He had no idea that settings could be changed or that font sizes on a page could be adjusted. I suspect he is more typical than not. So, unless you really know your target audience and would classify it as made up of "internet enthusiasts", I would tend to agree with Dave that "It's foolish... to design a commercially viable page to any higher resolution". I've started designing my pages with percentages. This way, page widths and font sizes can be easily adjusted by the viewer. The problem with this is: If the viewers still have computers with settings still at the defaults, pages may be unreadable anyway. Tom Anson Written by Karl L. Baldwin December 29, 2005 Hi Adam, I must be really missing something here or maybe the other contributors are. Am I the only designer using percentage rather than pixel count? Hell, it's even the default in Front Page. It essentially functions like word-wrap in Notepad. If you don't hit carriage return, everything fits into whatever screen size you are using, graphics excluded of course. As far as monitor size and resolution go, I use a 21" LCD monitor set at 1600 x 1200, which is the default. Text size is easily changed (mine to 150%) by right clicking on a blank area of your desktop; click properties; set your resolution as high as it will go; click the settings tab; click the advanced button; then pick a new DPI setting. By the way, if you're not using the highest resolution that your monitor can provide, you're missing out on the big picture (pun intended). It's the same difference as watching regular TV or High Definition TV. Best Regards, Karl L. Baldwin MountainLodging Written by Ed Clark December 29, 2005 I have found that 750 px is a good figure. However, when I view my sites on some newer large screen monitors, it sets the page to the left. I have forgotton the code to center the entire page in the browser, can anyone refresh my memory? I agree with the fact that older eyes are still setting their browsers to 800x600 and there are a large number of older computers still out there. I am at home on one right now. Thanks in advance for that center in browser code. Ed Clark Written by Peter D'Aprix December 29, 2005 I could not agree more with M. Shabeer. Everything about a web site should be directed at the target audience, not what one designer likes as a personal preference. And every client, every web site and every audience is always different. Thus the only rule can be - suit your site to the audience who has to use it. And you will never, ever please everyone. But you will probably catch more fish that way. Why does this concept seem so foreign to web designers so much of the time? I have been in the photography / advertising business for about 30 years and the whole foundation of visual communications is to present the content in a manner that is most likely to be understood and received by the largest number of the target audience. It should go without saying that the target audience needs to be identified by many characteristics such as language, geography, customs, education, literacy, buying habits and so on. With web sites, since they require computers which are connected to the web, then the characteristics of these must also be established long before pretty pages are even thought of. For example, I have a client (patinawoodfloors.com) for whom I have recently built a new site. This was necessary not only because the old one was a bit tired but their business plan had changed. (Yes Henry, a web site must also fit into a business plan, a marketing plan, an advertising plan etc.). Based on the previous year's visitor tracking, the majority of visitors who stayed on the site more than 2 pages, had their monitors set well above 800x600. They also were using millions of colors; important because the site is almost all photos since it is a gallery/portfolio site for the most part. Only a few were still using Windows 98. The new business plan called for shifting the target audience covering the gamut from the home owner to architects, to mainly architects, builders and interior designers. The client had already checked the computers of his target audience. He established they were all using large monitors, modern equipment and broad band. On the face of it, this would suggest we could concentrate on using larger than traditional photos since screen real-estate would not be a problem and down-load would be fast. Nevertheless, since I know that many employees work at home on lap tops, I did not want to assume that everyone would be working on 20" monitors, but could probably be assured that the laptops would be set at a resolution higher than 800x600. So I designed for a 15" screen at 1024x768. Will it satisfy everyone? No. But based on our visitor tracking, we only have 4% of visitors below that resolution. And in addition, I used CSS to set the font to a fixed pixel size, the table / cell sizes are fixed pixel sizes and the browser window size is also set so that the content will fit nicely into a window that does not have to be resized by the user. OK, I am a control freak in a medium that offers precious little. But in viewing the site on a range of computers from Windows 2000 and XP to Macs, on a range of browsers even though 95% of the visitors are using IE 6.0 or greater, and on desk tops with 15" monitors still on factory default as well as lap tops, the content all fits onto the screens without problems. Windows 98 and 95 using older browsers can have some problems as can older Macs with their older browsers. But our target audience is not using old stuff or dial up connection. Now if I was designing a site for the general public, I know that I would design for 800x600, use a larger pixel size for the type, use small photos that have been carefully optimized in PhotoShop for the web (I do that anyway) that with a click will yield a larger version at the whim of the visitor, keep the pages short with buttons to fuller content again at their whim. I will also assume that a significantly high proportion are viewing from home, are not computer techies, are probably on dial up by either choice or lack of access to broad band or even budgetary considerations, are connected through AOL (God save their souls), are probably using older computers with older OS's and aging browsers. Another reason for not using Flash and animation unless you are marketing to MTV generation. And wealth has nothing to do with it. Many executives have ancient lap tops and hate to even fire them up. That's what they have employees for. And what about the salesman on the road trying to bring up his own company's site to show off his products / services or bring up a stat's page or CAD drawing and the only connection is a telephone wire and jack? By doing this, I will be more assured of sweeping as many potential customers into the net as possible without loosing those with equipment more like my own. I check all my sites on an old Compaq using Windows 98 and dial up. Amazing how many errors you can catch that way that modern systems correct for you. Since I am not an IT guy, I have to find other tools to catch problems. So I have waffled on much too long. However, I do find a tendency in this highly technical medium to focus on the tools and personal preferences working from the inside>out; rather than focusing on the audience, thus working from the outside>in. That is not to say that all the other considerations that have been discussed on this topic and others are not also vitally important to a site. Such as SEO especially for products with many players in the same marketing space. But I still think the sequence of the design process should start with the product or service and the target audience before other considerations are factored in. Sincerely Peter D'Aprix peterdaprix.com Written by Malcom Bailey January 2, 2005 Happy New Year everybody, Having used the new year to make a break from full time employment to pursue other ventures (mostly still 'e' related and all funded by freelance work) I'll be less of a LED lurker and hopefully a more active participant. I just thought I had to comment on a few things after reading Peter D'Aprix's post in which he refers to a recent site. Peter states his target audience and their variety of screen resolutions yet he forces them all to work at the lowest common denominator by not only resizing the width of the browser but also the height - this is a terrible mistake, for people on larger monitors you are making them scroll to see content when they otherwise could have it all on screen at once if they so choose. You're actively making an effort to make it harder for visitors to view your content! I know I'm not personally part of the target audience, but I find window resizing of almost any type to be very annoying - especially when it's done on every page in a site. (If I load your site and resize the first page I see - chances are that's what I'll want throughout the rest of the site, not to have it jump around every time I go to a new page.) Other points of note include the use of Times New Roman as the set font - having "been in the photography / advertising business for about 30 years" I'm surprised he elected to use this font as it's primarily a print font rather than a screen font (notice how badly the edges appear, especially when bold) - now his target audience may prefer to print pages out in which case this is a valid choice (best practice would obviously be setting separate CSS for print and screen although budget may not have allowed for this?) One other final improvement I'd suggest is to give users some visual clue about where links are located in the page - you only get feedback where links are by waving your mouse all over the place - there's no indication when scanning the page (that's why in the good old days all links were underlined - now designers seem to think that unfashionable) On a totally unrelated note I was wondering if Edwin Hayward was going to return and peer into his crystal ball to make predictions for the forthcoming year as he used to? - I used to enjoy reading them and his end of year analysis... Take care all and have a prosperous 2006, Malcolm Bailey aethon.co.uk Written by Michael Linehan January 2, 2005 > By the way, if you're not using the highest resolution > that your monitor can provide, you're missing out on > the big picture (pun intended). - Karl L. Baldwin Ah Karl. Say that when you're the same age as many of the readers of this list. A lot of people don't have the choice of using the highest resolution and getting the 'big picture'. They wouldn't be able to read a thing. > It's the same difference as watching > regular TV or High Definition TV. Not at all. A higher resolution on a computer monitor shrinks everything. A higher resolution on a TV gives you the same size picture more clearly. Well said Peter D'Aprix... > I could not agree more with M. Shabeer. > Everything about a web site should be directed > at the target audience, not what one designer > likes as a personal preference. I would just add that the client's personal preference may also be irrelevant. Most of my clients know little of marketing and next to nothing about what works on the Web. While being diplomatic, it is sometimes necessary to point out that their personal preference matters little against what will work. I have been asked the same two questions over and over - some variation on, "Why don't I get more visitors to my site?" or "Why don't more of our visitors buy?" My reply is (briefly), "Well a website is a marketing tool, right?" The look puzzled and slowly say, "Well, yes.", looking at me with a "well, duh" expression. Then I say, "So which marketing specialist or web marketing specialist did you have helping you plan, build and promote your site?" Inevitably, their eyes widen and their mouths open slightly as they get it. So I'm getting around to saying EVERYTHING about the site should be directed to the target audience --- from the perspective of the site as a marketing tool. The whole project needs to be planned strategically. The site needs to be crafted as the best marketing / sales tool it can be. And then the site needs to be promoted effectively. Every factor should serve and support the marketing purpose of the site --- and that most definitely includes design and technology, the two factors that most often stray from a 'support the marketing' role to ascend inappropriately into predominance. Michael Linehan marketing-alchemy.com Written by Tom Aman January 2, 2005 In commenting on my earlier post, M. Shabeer wrote: > Based on the demographic data, corporate professionals do > tend to use 1024 * 768. Most of them also use laptops... > 800 * 600 for the rest of the world because thats what the > MAJORITY use... The data on the target audience - found > from server logs, case studies and experience. That is screen size, but what do the logs, case studies, and experience say about browser window size used by these corporate professionals? And what is magic about "corporate professional"? The computer smarts of an IT professional is likely significantly different from a lawyer or an accountant "corporate professional" who may not know a great deal more about computer settings than a non-professional home user. Bear in mind when looking at demographic data that statistics can be used to prove almost anything if one is not careful on how the numbers are used. > ... there are ways to know the exact browser window size of the > user. I can't speak for the others, but based on the data I have, > people who resize their windows are a very small majority. I expect you meant "small minority". In any case, you are really just confirming my point. You may have ways to know the exact browser window size, but not until the browser actually gets the page. At that point, if the user is running 700 pixels wide, it is a little late to redesign a page created for a specific width of 1024 to fit a width of 700. > We don't care about the height (unless it's some kind > of tricky design that might break) simply because people > don't mind scrolling up or down. Sidewise scrolling is > what people hate the most. That's why width becomes > so important. There used to be GREAT concern over height and ensuring that the critical content display "above the fold" so the user would not have to scroll down because "users hating having to scroll down". And that was in the days when the common height was 480 pixels. Interesting how "best design practices" change. > It is very, very difficult to create a design that can > accomodate content within every possible width. > So the best a designer can do is to try and ensure > that the design doesn't break or messes up for > the majority. That confirms exactly what I said. Designing to a specific width makes life easier *for the designer*, but does not necessarily make life better for the surfer. I totally agree that is is difficult (difficult, not impossible) to create a good design that can accomodate every possible width but that is what a really good designer should be attempting (within reason, of course - I would suggest the page should display reasonably well at anything from 600 or 700 pixels wide up to the screen max). And in commmenting on my statement [issue 2062], "And Stop Assuming That Everyone Runs Their Browsers Maxed ...", he said: > The irony is, you are making the same assumption - just > because you resize the browser window to a certain size > doesn't mean that everyone too does the same. I totally disagree that I am making any assumption other than the FACT that I cannot know in advance what size (height and width) a surfer will be using for his / her browser so designing to specific dimensions is almost always a bad move. About the only exception to that would be if you were designing for a corporate environment where company policy dictated monitor size of specified width and height and that all users were required to run browsers full screen. > Trust me, a good designer always keeps his / her > target audience in mind. Always. It is interesting to me to watch how times change and how designers seem to magically know all about their "target audience". Right now the discusssion revolves around monitor size. It was not all that long ago when we had heated discussions using similar logic (keeping the target audience in mind) about things like frames. Designers loved frames as they gave lots of page layout control and they argued that they "kept their target audience in mind" in designing framed sites. Notice how framed sites seem to be the exception now. What happened to that "target audience"?. Same can be said for Flash animations. Keeping the "target audience in mind", Flash showed up in the most inappropriate (and annoying) places. Designers seemed to love doing splash screens in Flash. While such screens still appear occasionally, they are now rare, and Flash now mostly appears only where it is really appropriate and the best choice for the animation and, more important, where it won't break the page if the surfer does not have the player installed. Tom Aman Aman Software Written by Jim Gatton January 2, 2005 I find myself following virtually every discussion thread in the LED because I never know when I might find something of value to me professionally and/or personally and I've discovered lots over the years. I've learned not to give a "what's the big deal shoulder shrug" and move on to other threads without completely reading each one in order. This has been the case with all of the posts on display size. I shoulda known better than to think they were not of any practical value to me. I found the postings interesting but since I "knew" that I universally used percentages instead of pixels (just as Google does) the discussion really didn't apply to me. Wrong! Wrong! Wrong! Last week I decided to dust off an old computer I'd been thinking about resurrecting anyway and hook up my 16" (diagonally. I guess it's really a 17"?) monitor to this old computer running an 800 x 600 display resolution. An 800 x 600 seems to be the least common (practical) denominator. Even Google doesn't display without sidescrolling at 640 x 480. Uh, at least on my two computer display combinations. Anyway, somehow just temporarily resetting my nice big LCD monitor to 800 x 600 was not to be trusted enough for this little experiment while following the LED thread. So I fired up the old combination and had "fun" checking out my more popular websites that I know display perfectly well but (coincidentally?) really don't make me much money. Oh, my God, what a mess! The first four out of five sites I checked necessitated scrolling side to side and fonts that seemed fine even on my resized LCD screen SCREAMED out at me on the smaller monitor / old computer. I've been putting in lots of time the last week reworking everything from font size to iframe dimensions and the sites are looking lots better. What a great difference it's made in my sites. Thank you everyone. Naturally I gave away my old 15" monitors last summer to a friend having a yard sale so now I'm in the market for another 15" monitor. I'm sure everything will be okay on the 15" monitor since it's now ok on the 17" but, well, that's where I was last Monday before firing up my old computer / monitor, too. You know where I was. My dreamworld where percentages made everything automatically ok. There are still problems. Compromises. I haven't decided whether to rework the tables on my bread and butter site yet (loans-finder.org.uk) because they do fit on an 800 x 600 running full screen, just not on a resized browser window, but you shoulda seen'em before last week! My advice to the other six design challenged readers of the LED is to fire up another monitor / computer combination or two and take a look at what you really have displaying to the public. You may be as shocked as I was (but I hope not) and as happy as I am that I finally took the display discussion to heart and did some investigating of my own sites. Jim Gatton Written by Brad Waller January 3, 2005 > ... the browser window size is also set so that the > content will fit nicely into a window that does not have > to be resized by the user. OK, I am a control freak > in a medium that offers precious little. - Peter D'Aprix You are indeed a control freak. I checked out the site and I ran into a huge issue. I have no problems with any of your design choices, except for one. You resize the browser to 800x750. Why do you need that much control? Not only that, but you do this on every page. When I visited the site, the browser window shrank (I have it set to about 1080x1000 for the window, and this leaves 850x750 for the view port after all my sidebars and toolbars) so small that I had to scroll to view the site. So I dragged it back to the size I wanted, clicked on a page to view it and guess what? You shrank my window again! You do need to allow the visitor some control. If they re-size the window, let them keep it. Leave your site set up to the fixed size as it is, but leave the window alone, please! Brad Waller adjungle.com Written by Amy D. Moore January 4, 2005 I do a lot of work with another local web developer. One time I went to visit her at her office. I found she had a graphic on her screen as her wallpaper. She kept her monitor resolution at whatever it was - say 1280x1024. But her wallpaper had a different colored box nested up to the top left corner for every other smaller resolution. This is a pretty easy image to create. Create a graphic with the pixel dimensions of your monitor. Then, make boxes inside that for the other standard monitor resolutions at the appropriate pixel dimensions: 1280 x 1024 1280 x 960 1280 x 768 1152 x 864 1024 x 768 960 x 720 800 x 600 Make each box a different color and label them. Make the image your design computer's wallpaper. Then, when you create a new design for a site, resize your browser windows to fit those colored boxes and see how they render. Frankly, every monitor has an ideal resolution to be set at. Resizing the browser window is much faster - although it will not necessarily re-render your fonts. But it will give you a quick and dirty idea of how well other site assets render in a browser. Regards, Amy D. Moore internetsupportservice.com Written by James Miller January 4, 2005 Just a small point! I am perhaps a control freak myself, in that I run a large 1280 x 1024 screen, with usually my browser windows set to about 800 x 600. I get really annoyed when someone automatically resizes my browser window, so I immediately stop looking at the site, delete the copy of the browser and load a new one. Which of course I have to resize! Grrr! So one thing I believe you should never never do, is resize the browser window. It annoys many intensely. How many sales have you lost? An interesting thing would be to check the log file and see how many people leave the site immediately after the resize. I always do! Remember too, that a lot of nasty sites do this and many people associate resizing with all of the worst parts of the Internet. Incidentally, I have a program that I wrote called the Daisy Multiple Browser that opens several copies of IE in the same dialog. The latest version of this allows me to set the dialog to a range of sizes. It also stops the windows being resized! One of the reasons I am so pedantic about window size is that I write extensive notes on how to use the Internet and I like to have all the captured images at exactly the same scale. James Miller daisy.co.uk Written by Steve Warriner January 4, 2005 A free tool for checking the display is available at www.pythoness.com (which oddly enough scrolls horizontally about 21 px. on my 800x600). Best, Steve Warriner Written by Peter D'Aprix January 4, 2005 Responding to Malcolm Bailey's comments about my post re. display size. Thank you, Malcolm, for taking the time to view the site and keeping notes. It is valuable feed back and I will certainly go back over the site, seek more feed back from the users of the site who are so far very complimentary but I find when questioned on specific points often provide more critical input than when asked for an over all assessment. However, thank you for reminding my about the difficulty of ID'ing the hot HTML links visually (the image ones are roll overs). I am rushing to adjust that element as we speak. Thank God for CSS! I have had, however, no negative feed back on the control of the window size other than yours. I do think though that we need to identify that there is no point in having a browser window (and we are talking about browser window size in this case whose maximum size is controlled by the size of the screen and the setting of the resolution of same) larger than the maximum width of the content itself. Viewed on a large monitor set at a high resolution, having a browser window set to fill the screen or any size larger than the width of the content would not enlarge the content of the page, just create a lot of empty black space. In this case, I chose to control the size and positioning of the type to maintain its relative size in relation to the heavy use of images on the site. Thus the overall size, especially the width, is locked in, at least until someone selects a large type view. (Us control freaks on the internet are doomed to disappointment). This is mainly a portfolio site, so what we say is less important than the photographs and the perception of our control over our product. By having the browser window open to the approximate size required for each page saves the viewer a step or a mouse movement; I hope! That is the intent. I have watched people from dummies to techies using the site on factory default set lap tops to 20" monitors and so far the usability seems to work. Only time will tell and feed back from people like yourself, Malcolm. Also, I want to control the length of the lines of copy. It is all very well to set a page at a percent, but then people with large monitors can find lines of copy going on forever. When combined with image files which don't change size, this can make a hell of a mess out of the look and feel of a page. I am still of the school that the first impression is what stays with people, and that first impression is always visual, not the written word. So you want to control as much as possible how that first page is displayed. In print this is easy; on the net it results in rapid baldness of the designer and a lifetime subscription to Tumms. We have found that our "target" (sorry Tom) tends to multi task and like to have use of excess screen real estate to compare products either from my client's site or with other manufacturers side by side. It's a pain to have to keep dragging a browser window smaller as you browse a site or widen it to accommodate some pages with wider content. Regarding the serif type face used. I agree, it is not the best for the net. But that is not the only consideration. It is the type face associated with all the visual material that issues from the client. It is also cross platform applicable. The light type on a black background is also not the best choice for readability on the net. But it too is the visual "branding" of this company. It is how all their ads, catalogues and other sales material is designed. To maintain visual identity, it must be maintained. However, I must come back to what the site is first and foremost. It is a photo portfolio site. Photos look richest and best against black. The photos, time has proven, are what sell the floors, not words. So the words and type take a back seat to the photos. But then, for the individual product pages, PDFs are supplied for down load and printing with a white background. We are sensitive to the fact that inkjet ink is bloody expensive. We don't want to piss off our visitors by making them purchase a new black cartridge every 3 pages. Sure you can print the page without the black background, but then the gold type will be very hard to read. This all does get rather complex with very little effort n'est pas? But I think all this brings us right back to the beginning to the fact that you simply cannot design a site in this fluid environment that will please all the people all the time. And as much as you can try to nail down characteristics of a "target" audience, you never really know who will visit your site in advance; only after you have some site tracker stats. By then, of course, you have already committed yourself to the site. Unless you have a client with a huge budget that will allow you to run test groups with several site approaches, you have to rely on past performance, input from the client which can be very suspect, and the weight of your experience and gut instinct. All hardly a scientific approach but often the best we can do. But then, this medium is in such a fast state of change, what we think we know today is wiped out tomorrow. And that would be my point to Tom Aman. Not only does the target audience change for any business, these days often very rapidly, but so do the tools we have to use to convey information on the net. That is not to mention that corporate and small business marketing plans can shift, product lines become modified or completely changed in response to consumer activity. Consumer activity can change overnight, competitors spring up like weeds after a rain. Everything is changing. So I know from all your posts over the years, Tom, that you are a very bright guy and know all this perfectly well. Tools that seemed like the best way to solve a problem a few years ago become out dated, new data show that user habits change, become more sophisticated, browsers more intelligent, connection speeds faster, monitors larger and of higher resolution and so on. So I was a little surprised at your post. So we too have to release some of our favorite tools and pick up new ones. This is especially hard for us old farts. This digest is such a rich source of these new ideas and debates over how to use them, we are all better off for Adam's willingness to sort through our responses and present them in a logical way. Thank's again Adam. Peter D'Aprix peterdaprix.com Written by Andreas Huttenrauch January 5, 2005 I really don't see how you can equate a dislike for resizing the browser window with being a "control freak". That seems a little light :-). We've all spent years getting our computer settings to be just the way we like them, and browser window size is one of them. For someone to resize your window upon visiting their site, is more like a visitor to your house repainting your walls. I immediately leave such sites and will never return. Thanks to some lovely issues with Internet Explorer, it takes a long time for you to get your proper window size back and for it to be remembered again in the long run. My professional opinion on the subject is not to resize windows for people without giving them a choice. Andreas Huttenrauch Globi Web Solutions Written by Tom Anson January 5, 2005 Hi Adam and other LED-ers, I think Tom Aman makes a very good point about optimization for display sizes. "Optimized for... whom?!?" I have a 22" monitor that is set to 1600 X 1200, and I set my browser to view in landscape. But I still find a lot of websites out there that force me to resize my browser window because the table structure is "optimized" for such an expansive width. I set my browser for a width that gives me comfortable line widths for reading; but really, some of these websites look like they were designed by someone who didn't know that text editors can be set to wrap lines. I appreciate Mark Medlicott's question, > ... is this not a reason that you would design > in percentages and not pixels? I guess it's really no big issue for me (it WAS when I still designed in a system that only allowed fixed-width tables). Maybe we could turn this discussion to why anyone should / might design in a fixed width and workable alternatives for that. I realize, as well, that optimizing for a certain width doesn't necessarily mean that the page is fixed-width. It might just be designed to look best at a certain width. But then, you get into issues of text resizing by the visitor and a host of things I wouldn't even think about. That would seem to make such "optimization" something of a sad joke, wouldn't it? Taking a look at these issues (again) might not be a bad idea. Tom Anson Anson Aromatic Essentials Written by Rick McLean January 5, 2005 This is my first "read" of LED, so if this has been posted, please accept my apologies. Back in the early days of web browsing, there used to be a web site that would, for a small charge, show you what your creations looked like on different platforms. It was very low tech. It captured a frame from each web cam pointed at each hardware/browser combination. However, it was good for finding problem combinations, a lot cheaper than ordering lots of hardware and a lot faster than loading browser after browser. If someone is able to fine it again, please post it. Rick McLean Written by Brad Waller January 5, 2005 There is a reasonable solution to the fixed table vs. percent issue. The problem with percent only layouts is that sometimes the page looks pretty bad with a narrow browser window. You may set the percentage, but that is only a "suggestion" to the browser when it needs to try to render the page. Columns set to be narrow might turn out to be wider than others that are supposed to be the fattest. Try making your window 500 pixels wide (or even 300) on a percent site and sometimes they start to look really funky. What you can do to fix this is decide what the minimum size should be for each column before they look bad, and then insert a 1x1 transparent GIF pixel into the header cells, but set them to the desired width (i.e. width="108") for each. This will constrain the minimum size, and then let the cells expand on your own terms for users with wider windows. In the case where sites look better "narrow" and you want to use fixed widths, you can center the page (but still have the text normally justified) so that it will look better on a massively wide window. You can also use background images and/or colors to improve the look of the "white space" for these types of designs. Brad Waller adjungle.com Written by Kris Driessen January 9, 2005 One thing no one has mentioned -- people occasionally print from websites! I changed the design of my site *real* quick when I noticed how many people came in my shop with printouts in their hands. Kris Driessen Written by Veronica Yuill January 10, 2005 You're probably thinking of Browsercam, Rick: www.browsercam.com It's no longer cheap -- a month's access is $59.95, or you can have a single day for $19.95! But increasingly web developers are setting up group memberships to spread the cost -- an anunal mebership at $400 can be shared with up to 10 users. Regards Veronica Yuill Archetype IT Written by Andreas Huttenrauch January 10, 2005 What we use these days is browsercam.com. It's the most economical way to do basic testing of a website in various environments without having to shell out for the equipment. These days it also does real captures, so it looks a little better than a cam frame. Andreas Huttenrauch globi.ca Comments (0)
 Write comment
|
