homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

tips for making site look good on screen resolutions?
I want a site Im working on to look nice on all different screens

 1:57 pm on Aug 22, 2008 (gmt 0)

What is the best way to achieve a good look via CSS or html on all different kinds of screens and browsers? The site I am working on is very simple just HTML, CSS and a little JavaScript but my client is saying he doesnt like how the site looks different on his PC then his MAC, etc.
Is the best idea to just style for the most popular resolution and go with that? Im new to all this and would appreciate any tips. Thank you!



 2:34 pm on Aug 22, 2008 (gmt 0)

Good sites that expect a lot of visitors will either start at 800x600 or fit to scale for bigger resolutions. WebmasterWorld is currently a 'fit to scale' site.

As for designing, you want to make sure the site looks the same on the following browsers:


If you have a Mac handy, then test Safari as well.


 2:56 pm on Aug 22, 2008 (gmt 0)

A good site to look at is msdn.com

The panels have been designed using DIV floats, which allows the page to expand and collpase as the brwoser window is resized. It also accounts very well for different screen resolutions.

CSS aattributes such as float, width:100%, display will all come in handy.


 6:27 pm on Aug 22, 2008 (gmt 0)

Is the best idea to just style for the most popular resolution and go with that?

IMHO - Yes! (1024) Depending on the nature and content of the site, one that adjusts dynamically to screen width (width setting of 100%) can look really bad on wider screens. What was once a nice paragraph is now nothing more than a l o n g l i n e o f w o r d s.

Again, IMHO, design with a width no greater than 1024px and center the design so there is no a lot of white space on one side. A nice background image, or one appropriate to the specific content*, can be used to fill that area. Also, do not used fixed heights for your fonts, use percentages or em's so the viewer can adjust them if necessary.


* Just as an example, I did a site for a guy running for office. I made a background image of the voting form with a little filled in oval, his name next to the oval, and the text "Vote for no more than one" next to his name as it appears on the voting form. He won and I like to think my idea helped. But that is what I meant by content specific background.

Global Options:
 top home search open messages active posts  

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved