| This 36 message thread spans 2 pages: 36 (  2 ) > > || |
|Explaining Screen Resolution and Site Appearance|
A client can't understand why their site 'looks' different!
I wonder if you could help with a problem which is taking me to my wits end!
I am dealing with a client who has little knowledge on web browsers, site design and particularly screen resolution.
Under strict instruction, we have produced a highly structured site designed primarily for 800 x 600 resolution. The site required tables, with fixed pixel widths - there is no other way that the design (which they were also insistent they have to look like a brochure!) will work.
After convincing the client that they cannot avoid a minimum of 'scrolling' (they thought think that everyone views the web using precisely their own browser set up for toolbars, favourites etc.) they are now 'shocked' to see that their site which neatly occupies a 'standard' 800 x 600 screen looks 'smaller' when viewed at 1024 or 768 or above.
Everthing 'works', there are no differences in their site at either resolution, they just cannot get their head around the 'additional space' when viewed at a higher resolution.
I have told them to the best of my ability why their site appears smaller at a high resolution, the actual advantages of this, etc. etc. etc. but they are still 'very concerned'.
Can someone please offer any more help in explaining why a site is affected by the screen resolution!
To add insult to injury, the client is actually a leading technology consultancy! It's just the people who have been tasked with managing their site are complete novices.
I assure you, this post is not a 'wind-up' :)
Just tell 'em that viewing a site in 1024×768 (after viewing it in 800×600) is like stepping two feet back. The page still occupies the same space, there's just more "extra space" surrounding it.
You should really try to convince them to switch to a more fluid layout. The Web is not a print medium ;)
<added>If the above doesn't work, you can also tell them that in the end it doesn't matter. A person who uses one resolution or the other is used to the way the page looks, no matter if it's the "smaller" or "bigger" version.</added>
You might also try quoting some statistics. Off the top of my head, 45% of users use 800x600 and 45% of users use 1024x768. Therefore, the website will look different no matter what you do.
One option would be to add a link for users of a different screen size and then create a page for those users.
...Oh! And be sure to charge the client for your extra work!
|One option would be to add a link for users of a different screen size and then create a page for those users. |
Never, NEVER get started down THAT dark road..!
Liquid Layouts can emulate a "brochure." It just takes a different design approach. As DrDoc stated, the Web is NOT a medium
In fact, with a little creativity, I'll wager that you could create a stunningly visual 'liquid layout.' The liquid layout is easy.. the 'stunningly beautiful' part is up to you...
Client need some edj-yu-cation!
|Never, NEVER get started down THAT dark road..! |
It sounds like it's a matter of displaying a brochure almost exactly like it looks on paper. If that's the case, offering a link for another screen size shouldn't be a big deal. Doing a large site like this would be a big deal, but not a single brochure. To be safe, you could disallow google from the duplicated content.
Yet another option would be to open the brochure in a new window with no toolbars.
There goes ACCESSIBILITY! Blam!
I can relate to the dilemma, but each "fix" (pop-ups, sniff-n'-serve pages, etc.) only detracts from the real purpose of a site: communication of information.
If the sole purpose is simply to show a "picture" of a pretty brochure, well...
Webmasters get into trouble when attempting exact recreations of printed brochures in HTML format, unless, they first realise, the are WORKING in HTML format.
It really takes very little effort to convey the STYLE and FEEL of supporting printed material, WHILE adhering to sound HTML, Usability and Accessibility principles.
Following the above principles, the results should in fact, be superior to ANY printed material(s) since user interaction can be enhanced.
And, if the "exact" look is required, why not offer a downloadable PDF version of the brochure? The Web page should not, however, be considered equivalent to the brochure... otherwise, you cannot have any navigation or anything else the brochure hasn't. Either it's printed media on paper, or it's not. It can never be both.
>>>> why not offer a downloadable PDF version of the brochure? <<<<<<
Great suggestion DrDoc! Best of both worlds solution!
Hey! I'v had that exact same problem a while back, here is waht I did.
Sniff the visitors screen resolution with this .js
if (screen.width==800¦¦screen.height==600) //if 800x600
else if (screen.width==640¦¦screen.height==480) //if 640x480
1. replace index800.htm with your html
2. The default loads the 1024x768 or higher rez page
The other thing we did was to re-rez the images in MM fireworks, very time consuming but it kept the customer happy.
|Either it's printed media on paper, or it's not. It can never be both. |
Here's an interesting question > what does their market want?
In the bigger scheme of things... it matters not what the owner wants, it only matters what their visitors want, suprisingly most businesses never think to ask.
Their gut says, their ego says, and most often guess at it. In these cases however, visitors care far less about size (as long as they can read/see the info and far more about ease of use, quick intuitive navigation, and fast loading.
Therefore to get from where you are to "qualified evidence" that any changes are needed, should be accomplished by surveying the websites current visitors (stats software will help to show a breakdown of browser type and screen resolutions but this is really only half of the equation.
Find out precisely what the market will live with and what they won't.
Incidentally > if the client is stuck in "I need bigger" mode > find a 1024 optimized site > and drop the res down to 640x480... this will give some additional persepctive... qualified evidence is needed first > otherwaise they are designing blind! :)
A concept that might be helpful for the client would be the idea of maintaining a "family resemblance" between their web pages and their printed brochures, rather than exact replication. Consistency in things like colour schemes, logos, column structure, and so on can achieve a look that is clearly related to the existing corporate visual image, without crazy-making (and expensive) obsession with pixel-by-pixel equivalents.
No matter how uninformed a customers request might seem, if you at first tried to present a better way and they still were headstrong about a feature, I suggest give them what they want and charge them appropriately.
You know if it was a fluid site then you wouldn't have this problem - it would grow to fill the screen. And you could even have the browser scale up the graphics for you so they wouldn't look too small.
<img src="image.jpg" style="width:80%">
|It really takes very little effort to convey the STYLE and FEEL of supporting printed material, WHILE adhering to sound HTML, Usability and Accessibility principles. |
That's exactly the point. It is not difficult to maintain the 'style theme' of the original promo material.
Just a various print formats can maintain a theme while presenting material 'optimized' for each particular print format (notecard handouts, triple fold pamphlets, or multipage brochures), so can web pages. And, without resorting to "sniff 'n serve" (sounds like a questionable meal... and it IS!).
Also... perhaps even more important is the need to consider the growing number of 'small screen Internet devices.' Even here, you do not have to create 'versions' of each page. If you haven't tried out Opera 7's SMALL SCREEN RENDERING format, you are missing out on valuable insight of the coming wave.
I completely agree with the above arguments for a fluid design based on html and the internet as opposed to a carbon copy of the brochure.
If you were designing a TV ad would you be expected to copy the brochure exactly.....? I don't think so.
Also the studying of statistics must have a prime position in the desicion making process, yes, above personal preferences....
Give the customer what they want!
IMHO of course...
A late welcome back to papabaer
(Edit reason, bad spelling, LOL)
Hey tbear! thnx!
Great point too!
|If you were designing a TV ad would you be expected to copy the brochure exactly.....? |
And, I will DRIVE HOME THE POINT to cap it all off...
Web page, printed brochures, pamplets and TV ads.... now, the real deal: what if it was a radio commercial? No visuals, just spoken words. Consider the IMPORTANCE of each word and the message conveyed.
The SPOKEN message must, MUST, follow logical order, retain the listeners attention, and communicate the message intended.
Doesn't a similar analogy exist across each medium? Regardless of media type, whether spoken, visual, or combinations of both. It's all about effectively conveying the desired message effectively, through each format.
Educate the client.. YOU are the professional, the webmaster, designer, marketeer. Don't cave in and sell your client short. It's not worth it. And, don't be suprised if this same client starts questioning your value as a webmaster when he 'sees' a competitors site, displaying perfectly, on a pda, or a new Internet cell phone. Clients tend to forget that 'they wanted it that way...'
Thank you all so much for the excellent advice and your views - why can't you all be 'the client' :)
I may have misled you slightly in that the site is not literally a carbon copy of their brochure, IMHO I think we have done a good job in interpreting the very strong design of the brochure for use on the web.
The main point is that the client contact is such a complete novice, but senior in the company!, that his whims are battering the project from pillar to post.
He is adamant that there is a 'problem' that their site 'looks different' at resultions higher than 800 x 600. The other annoying thing is that he will pluck any number of sites from the web to use as examples of sites 'that work'.
The fact is that they are such an 'apples with oranges' comparison, including a Flash site!, is completely lost on him. This leads to me spending literally hours composing emails to explain the basics to him - hence my post here asking for some 'ground level' advice!
Don't even get me started on 'printing'! They insisted that every single page, regardless of content, should print on a single sheet of A4!.
Currently, their site did do this with only a third of the main site navigation cropping on the left hand side ie. all the text and pic content visible. But this wasn't good enough. We have had to produce a separate 'printable page' for each 'standard' site screen.
Not too bad you may think, but instead of 'extracting' all text content from the standard page to produce a 'text only printable page', they wanted it to retain all the formatting. Therefore, we are now producing each page, minus the nav on the left hand site, accessed via a Java pop-up!
What this has taught me is that sometimes you have to re-examine everything you take as second nature because it's such basic information. This is sometimes a lot harder than you think!
A bit like trying to explain to a learner driver why you change gear in your car!
Any more thoughts welcomed and thanks again!
ps. The thing that irks me the most is that if you saw some of the fantastic technical solutions this company invents you would not believe it, and yet they have a character handling their web site who doesn't know about screen resolutions!
pps. I also think that some of the excellent points made by Papabaer show that you cannot produce a web site which will work for all. Some will have Java turned off, use features unique to that browser etc. which is why I believe you should put a stake in the ground and specify 'minimum/maximum' parameters for the site (which we did and always do). Therefore, if someone accesses the site with Java turned off for example, not only will they not be able to view the site in question but also many, many other sites on the web. You pay you money and you take your choice.
I hope this is an hourly deal and not a fixed-price effort, markd! At least then you can carry out any ridiculous request and get paid for it.
I think when you have a client with limited understanding, you should do your best to educate him. Ultimately, I think, you either have to follow the client's direction (if it doesn't involve something unethical or illegal) or walk away from the job if you know it is doomed to failure or if it will reflect poorly on your ability.
One thing I have done in "client education" situations like this is bolster my credibility with articles, white papers, etc. If I say "designing a 1024 pixel fixed-width screen will be bad for usability," they may think I'm trying to cut corners by giving them fewer pixels. If I provide screen width statistics from a major publication, an article by <shudder> Jakob N, and other third party resources, even the densest client usually gets the picture.
(As an aside, having a well-formatted "print" page isn't all bad. Many less experienced web users print pages rather than reading them online. And business people often print pages for later viewing (e.g., while on the subway or flying). It's a good idea to include a logo and company contact info on them in most cases.)
<Added>One other thought - if this company is so strong technically, is there any internal resource that could help educate the person you are working with? Of course, sometimes internal people have the least credibility of all. ;)</Added>
just show the client some well know web sites that do the same,
eg microsoft, newspar sites, ect ..
that is the best way to resolve this issue.
You said he spent time showing you how sites work in different resolutions. I think a good idea is to spend some time looking at ones there and explaining why for whatever reason they wouldn't work for him... ie you mentioned flash - well open that page on a computer without the flash plugin installed. If he has many demands, it won't be hard to find the things that these sites can't do.
Although I agree with the others that a fluid design is the best (set your tables to percentages rather than fixed widths), maybe you could give it the other approach and center it nicely on the page optimised for 800x600. Show him the Lonely Planet site as an example of a hugely popular site doing the same. Good luck, I know the feeling :-)
When I was at University (studying cybernetics) on day one we were told that, as engineers, it was our job to give customers what they need, not what they want. The reason for this was quite simple. The people in charge of comissioning do not normally have a sufficient understanding of the problems.
Some years ago, a friend of mine asked for my help on a DIY job. He'd spent hours on detailed drawings of what he wanted. I looked at his drawings and told him in no uncertain terms that either we ditched them or I walked. He was not happy about it but I left him with no alternative. When the job was done, he understood the problem and was forced to conceed that I was right.
If you are desperate for work, in the real world you sometimes have to go along with a customer's stupid ideas but in general you should not.
Those that can do.
Those that can't teach.
Those that can't teach, teach teachers.
Those that can't teach teachers write books.
Those that can't write books become managers.
Those that can't manage become management consultants.
And the rest become politicians.
You don't have to send them to a different page entirely, just call up a different file.css. If js is disabled then they see the site in its normal (optomised for 600X800) format. If they have to squint then that is the price they must pay for their choice.;)
Admition: Haven't read entire thread. ;)
I'd also state that showing stats of some sort may help...and may confuse.
I think resolution stats are changing as new notebooks start to really sell well. This is from one of my own sites over a month:
1024 x 768 44.97%
800 x 600 24.4%
1280 x 1024 13.63%
1152 x 864 6.45%
My personal preference is to design images a 'bit bigger' than typical 800x600 sizes as far as stock photos and other misc items go.
I never go beyond 760px wide on an image.
That has nothing to do with your client's "concerns" though. :)
This [thepattysite.com] may help them understand a bit better.
It's odd that they don't run different resolutions from their work systems than home systems.
In short, I'd inform them that unless they have stats that show a very strong user base at a certain resolution designing for 800x600 covers the broadest audience.
Although it looks small and has a lot of empty space to them at 1024x768, for people that are used to that resolution it's normal.
Point to cnn and Yahoo. There's plenty of 'empty' space at higher resolutions at those sites and most others.
Personally, I run 1152x864, but my browser windows are set to 800 width.
Another reason to lean more to 800x600 is file size. If you designed a site for them that looked "better" in 1024x768 your images would be larger and therefore longer to download.
It's amazing how disgusting things are in 800x600, but many folks stay there even with 19 inch monitors.
|(As an aside, having a well-formatted "print" page isn't all bad. Many less experienced web users print pages rather than reading them online. And business people often print pages for later viewing (e.g., while on the subway or flying). It's a good idea to include a logo and company contact info on them in most cases.) |
That's what print style sheets are for. :)
Someone mentioned Flash. Well that must be the best solution. A majority of users have it. The beauty there is you could make the layout completely liquid. It can expand vertically and horizontally to fill the screen - text and graphics. That way the site will always look the same no matter what the resolution. One happy client!
Some excellent points made here - thank you so much for your input!
Just to bring you up to date with 'progress' so far...
I have explained that their brief (rightly IMHO) asked for a very tight, pixel-positioned site - luckily they put this in writing!
We concurred with this approach, as the information being presented is very pithy, well written copy giving byte sized information to the visitor which invites them to enquire. This info would be supported by some excellent photography, which reinforced the calibre of the company and the message of the text. Due to the complexity, and the downright 'jaw-dropping' nature of some of their solutions, their potential audience would NEVER commission work based on what they see on the site. Their 'sales cycle' would be protracted and long, so the site is an introduction to the company and their credibility - not the whole story. As part of our proposal (which was accepted,) we helped them develop the objectives/profile the visitor for the site. To maintain a newly launched corporate identity, and wider 'brand' values, it was (rightly) decided by the client that as much as possible of their ID and flagship brochure would be stylistically woven into the site.
We have then pointed out that in very general terms sites which have less 'design control' on the placement of elements etc. are more 'information-driven' and less reliant on conveying a tight corporate ID. More often than not, they are database-driven, allowing either non-technical users, or users from different locations to input information into the site. For this type of site, the prime objective is to effectively convey information, the extent of which will be far longer than their 'byte size' approach to copy and presenting their message.
All of this very general I know!
We have also provided examples of sites where a more 'fluid' layout is entirely appropriate and where a more 'fixed' approach is also the best solution, and showed them how they work (or don't) at varying screen resolutions - including examples which may be targeting a broadly similar audience.
The state of play is now that they are either considering us adjusting the current 800 x 600 optimised site to allow percentage resizing of the right-most table areas. Drawback is they don't like the effect on the carefully placed text width's once it 'expands'!
The second option (which I don't feel is the right course) is to produce a parallel site for 1024 x 768 resolutions. We are against this as:
The same 'problem' will be evident if a visitor uses higher resolutions.
All page elements will need to be scaled up for the larger resolution which will result in relatively longer download times (they are allergic to anything which 'dowloads', despite their target audience will probably be multi-nationals with high speed connections)
As described in my original post, we have put in place 'printer friendly pages' which exactly mirror the general site pages (minus the left hand site navigation) as they were insistent that EVERYTHING prints neatly on an A4 portrait page). The physically larger version of these pages may not achieve this.
Roger's point on the 'techinical proficiency' of the client is an interesting one, as this project also reflects the conflicting dynamics of the internal relationships of the client:
Of the three person client panel we have:
The Webmaster: who understands the issues and is very good, but is itching to get their hands on the site.
The Boss: who understands very little, but seems to have the balance of power and is the voice of the clients Board - may of whom seem to have very little knowledge or input into the original brief so he is obviously trying to stop the goalposts moving from them.
The Councillor: who is willing to 'listen', seems to be able to influence the Boss and is very pragmatic. However, this person seems to have very little actual decision making power.
So, that's the situation!
As time goes by, I think that they will take the 800 x 600 site from us and 'play with it' themselves until they reach a result which pleases them.
Will keep you posted....
Another solution is to wait for Windows Longhorn to come out in 2005 (chuckle) when all windows (including the browser) will resize their contents smoothly. So screen resolution will no longer be such a problem. Unless of course you're on a 19-inch screen and don't like large text!
Or you could just point them to the Opera browser and show them how to use the Zoom feature for enlarging small sites on larger screens. Hehe.
Seriously, they should be considering the future. What happens in 5 years' time when there are very few 800x600 screens left? What if cheap 21-inch screens suddenly flood the market? Their site is going to look well crud.
|Seriously, they should be considering the future. What happens in 5 years' time when there are very few 800x600 screens left? What if cheap 21-inch screens suddenly flood the market? Their site is going to look well crud. |
I don't think 800x600 will become a minority resolution any time soon.
A growing segment is Senior Citizens. They like stuff big so they can see it easily. 800x600 even on a 19 incher.
1280 x 1024 does seem to be catching on rather quickly due to the flood of LCD's and laptops.
Maybe aiming for a good image size for 1024x768 while not breaking any one image over say, 760px wide is a "best practice"?
The answer to your question is the holy grail of web design.
This is a huge issue, so I won't write a big response to it.
One simple suggestion is to resize the window to 800 width. This way users on any screen resolution will have the browser fit your site perfectly.
Things to keep in mind:
-there is no possible way to make a website look the same for every user. Even with fixed width and such. Different OS's use different font sizes. You should see some sites in Linux.
-making two sites, one for 800x600 and 1024x768, like you mentioned is a bad idea. Because they will need to do a third one in a few years if resolutions get bigger.
-sometimes it's impossible to 'teach' the client what's right. But sometimes you have to be firm. A client once asked me for music to play in the website background. I told him that it's unprofessional. He could get another web designer to do it if he really wanted it, but that designer would not be doing him justice and that I could not do it in good faith. The client understood. The client should trust your judgement, if they don't remind them why they hired you. You are the expert.
Well you probably know most of the stuff I said, but I figured I'd post those thoughts for the readers that don't.
-just a brief one, most have been said already i can see:
Screen size is only the same size as the browser window when the browser window is maximised.
Personally i have a large screen with good resolution, but i really prefer the "multi-window" approach. My windows almost never maximize. Some sites makes them do it using JS, but i curse at such sites for as long as it takes me to adjust to my preferred size again, and then some.
Especially for reading text, i find that the width of the page is important. A broad page simply makes reading slower than a narrow one because your eyes have to move around more.
| This 36 message thread spans 2 pages: 36 (  2 ) > > |