Best way to code for different browser resolutions?

[eluser]Frank Rocco[/eluser]
Hello,

I have some users that cannot see all items on a page because of their browser settings.
What is the right way to code HTML to allow for different resolutions?

Thanks

[eluser]toopay[/eluser]
This sounds like CSS matter instead of CodeIgniter. What browser setting you mean? Did you mean screen resolution setting (this more related with user PC VGA i guess)?

If you are about detect user browser resolution, you can use javascript to detect using window.screen object that contains basic information about the screen of your user. If you're about detecting browser zooming on run-time, maybe these old article can give you an overview.

[eluser]John_Betong_002[/eluser]
[quote author="Frank Rocco" date="1313114851"]Hello,

I have some users that cannot see all items on a page because of their browser settings.
What is the right way to code HTML to allow for different resolutions?

Thanks[/quote]

Could you supply a link to the problem page.
 
 

[eluser]jblack199[/eluser]
Frank, I've had a few people that complain about some of my sites too.. and I tell them all the same thing... 'if you cant see it get thicker glasses and take your resolution off 800x600'...

in this day and age you cant realistically support all resolutions, you also cant support all browsers (nor should you)... if they cant see it, that's their problem -- not yours as the developer... sure it's your 'job' to build the site, but its not your job to cater to every blind person out there who cant either zoom out, or change their resolution to something more suitable for today's standards...

catering to idiots only does one thing: makes them keep being an idiot.

[eluser]boltsabre[/eluser]
According to the W3 schools browser display statistics (found here: http://www.w3schools.com/browsers/browsers_display.asp), 14% have screens of 1024 X 768 pixels, 85% of people have something larger, and 1% of people have something smaller (but this does not take into consideration the march of the smart phones into peoples browsing habits, but that's another story, and you should be detecting the user agent to handle this anyway).

So basically, I build for the screen resolution of 1024 X 768 pixels, if they have something smaller, that's their fault, anyway, that's what the bottom left-to-right scroll bar in your browser is for.

If you want to get right into it, you can use JS to detect their browser size and then use it to dynamically load an appropriate CSS style sheet, but I just use JS to center my website in the middle of the users screen - your choice!!!

I wouldn't get too bogged down into it all, just build for the majority (in this case 1024 X 768 pixels). And test it on these browsers, and all should be good for 97% of your users (depending on your target countries, but again, that is another story and involves more research): Firefox 3 and 4, Chrome, Opera, Safari and IE 7, 8 and 9.

Oh, on a side note, if you are doing a project for a company in your first 'research' phase you should find out what is the standard size monitor they use within their organsiation, you may have to build for something smaller than 1024 X 768 pixels. Get this sorted out in your 'Requirements' contract and you'll be safe! This is especially true if you are building for an Intranet.

[eluser]Frank Rocco[/eluser]
This is a Tire Warehouse app. Most of my users just know about cars, trucks and have no computer skills.

The link is http://ntwarehouse.net

The owner is driving me crazy to resolve this and even asked me to look into buying an eCommerce system.
I put a lot of time into this.

Thanks

[eluser]jblack199[/eluser]
Problem with most mechanics shops are at the shop they use tiny ass monitors (lucky if its a 15 inch) I pulled the site up on a 20 inch wide (my smallest monitor) and it looks fine. So odds are they are using 800x600 resolution. And therein lies their problem, however, with that layout there shouldnt be any issues.. I just opened it up in IE9 and zoomed in to 220% and can still see everything on the horizontal plane.

[eluser]farocco[/eluser]
Thanks for checking it out.
Not sure when you looked, I updated it today with a different CSS setting.

[eluser]Aken[/eluser]
This is a front end situation, that should be resolved with optimal HTML and CSS media queries (and possibly Javascript also in certain situations).

[eluser]boltsabre[/eluser]
If it is as Jblack199 says, (that your customer is using a small monitor, thus being unhappy with the way it looks now), then the problem is simply an educational one for you - all you have to do it explain it to him that on larger monitors the website looks fine (take your laptop down and show him!) and it's just on his small monitor that it looks bad. And then explain to him that less than 1% of users still use 800x600 pixel resolution monitors.

If he is still unhappy, learn to 'talk his language' to communicate the problem. Ask him, is it possible to build a car that performs well in all conditions, a car that can compete in the F1 and that can then go off road and up a rugged mountain track and be a people mover (ie, family van) and also have the amazing fuel economy for city driving and also have amazing fuel economy for highway driving. This guy will answer, no, it's not possible. And then you just have to explain to him a website is the same as a car, you cannot build one that is optimal for every situation. If he still has a problem, lead him down the 'yes' track (getting him to agree with your three or four times in a row). Say to him: would it be possible, hypothetically, to build a car that can drive on a F1 track, and offroad, carry many people, and have okay fuel efficiency? (yes). But it's unlikely that it could ever win a race, or do serious off road trail blazing? (yes). And it's fuel efficiency can never be good for city driving and highway driving at the same time (yes). If there was such a car on the market it wouldn't sell well would it? (no - but it's still an agreement with you). And would you say it wouldn't sell well because it would be average at everything, but good at nothing? (yes). Well sir, your website is the same, we have to make it good for what the majority of people for the majority of the time. You cannot keep all the people happy all the time. Do you understand this? (yes - well, we hope that's what he says!) The trick is, once someone has agreed with you several times in a row, it's then hard to give a negative response. Sales people use this technique on you all the time.

Good webdesign is not just about coding, it's also about good communication, good sales skills, and good education with your customers. Get this right and you can overcome issues before they become issues - and uneducated customer (in terms of the internet/websites, not their general eduactional level!) will want everything for nothing, it's your job to guide them to what is best for their business/purpose.

On a side note, this is why I love webdesign - one day I'm an artist playing around with photoshop and html/css, the next im a coder doing the php, the next im a storage expert tinkering with DBs and sql, the next I'm a psychologist playing around with 'landing pages' and 'calls to action', the next I'm a mentor to my clients, then next I'm an analyst looking at conversion rates, tracking user habits, the next I'm a marketer doing research into SEO/search terms and devising other ways to drive traffic... this job has it all!!!