The Design of Software (CLOSED)

A public forum for discussing the design of software, from the user interface to the code architecture. Now closed.

The "Design of Software" discussion group has been merged with the main Joel on Software discussion group.

The archives will remain online indefinitely.

Size of Graphics/Elements for Web Deployment

Are there pixel increment guidelines one should follow when designing graphics and other html elements (e.g. <td height="30">)?  Specifically, should you always avoid designing a odd number height/width graphic (use make graphic 30x30 instead of 29x29)?

We are having problems with a website when viewed using different resolutions and browsers.  What looks fine on one does not look acceptable on another.  And when we make a fix it no longer renders acceptably on the original platform.

Web Designer - Richard Gardner
Friday, December 21, 2007
Your problem is most likely unrelated to image sizes. Before you do anything else, make sure that your code passes the W3C HTML and CSS validators without errors and that you're triggering standards mode instead of quirks mode.

If you'd like to ask for further help here, please post the URL along with a more detailed description of the problem.
Friday, December 21, 2007
Try to break the problem down into smaller pieces. You have a lot of variables that could be contributing to the differences you're seeing. Your problem is going to be more manageable if you can change one variable at a time, and keep the rest constant.

For example, start with resolution differences. This is actually two variables: the monitor's resolution, and the resulting change in the browser's window size. The resolution itself isn't likely to cause any problems, but you can try changing it and seeing what happens. Next try changing the size of your browser's window -- does that cause problems?

Changing web browsers is another set of variables, and it's a big one for web sites. Not all browsers follow the HTML specifications exactly the same way. So if changing browsers causes a problem, you'll probably need to start breaking the web page into smaller pieces, and seeing what breaks.

For example, if you're having a problem with a particular table, remove everything else in the page except that table. Do you still have the problem? If not, the problem is probably caused by something else in the page. Otherwise, try removing things from the table until the problem no longer appears.

As for your specific question, I've never heard of an even number or odd number of pixels making any difference in an image.
Friday, December 21, 2007
If you want something to look identical on every platform, use a technology that was designed to make things look identical on every platform, like Flash.

HTML was specifically and deliberately _not_ designed to make things look identical on every browser -- the idea being that, for example, people can browse an HTML page just as easily on a 3" phone display as on a 30" widescreen monitor, or that visually-impaired people can double the text size, or that computers that don't have your chosen font installed can use a different font instead.

Good HTML design means designing things so that it doesn't _matter_ if the layout is slightly different on different browsers.
Saturday, December 22, 2007
Like clcr said, make sure you're rendering in strict mode (i.e. you have an appropriate doctype).
And as far as a guideline, I'd say to size things in ems, not pixels if at all possible.
Saturday, December 22, 2007
+1 Iago: HTML was specifically and deliberately _not_ designed to make things look identical on every browser

I still miss the browser I was using in OS/2 Warp. There was an options screen that let *me* set all the main tag properties. In effect, I was defining my own style sheet so that every site that made 'proper' use of the tags followed my preferred page layout conventions.

Heckuva note; the 'good old days' were only 15 years ago :)
Ron Porter Send private email
Sunday, December 23, 2007
Ron: you should look at Opera it lets you override the styles on any page with your own.
Monday, December 24, 2007
"Ron: you should look at Opera it lets you override the styles on any page with your own."

As do IE, Firefox and Safari. The feature is called User Stylesheets.
John Topley Send private email
Monday, December 24, 2007

This topic is archived. No further replies will be accepted.

Other recent topics Other recent topics
Powered by FogBugz