Fixed Width vs Variable Width and CSS vs Graphics For Rounded Corners

HTML & CSS
1

Hi folks, please can I pick your brains on layout styling methods, please?

I’m writing a website and we’re pulling in a design company to make it look pretty as I have the colour co-ordination skills of a duck. They have been made up these pretty design layouts in photoshop that have a nice containing border with drop-shadows and curved corners and a gray “lower” page background and it all looks very pretty, however this needs to be converted into cross-browser HTML.

They said they design for a certain width (IIRC it was 900px) but I’ve resisted this and have gone for a flowing width, as (as far as I recall) the current advice/best practice is to code as much as possible without absolute widths and to let the browser and its settings handle the code, so this not only allows for different screen sizes - esp nowadays with sizes varying from tablets and mobile phones up to very large monitors - and it also minimises interference with any browser settings, such as differnt base font being selected for either visibility purposes (in the case of a very high-res monitor) or accessibility purposes. They also recommended specific font sizes, but I also discounted that and am using relative sizes everywhere.

Also, as I mentioned, they have nice curved borders on their containers. I have got this working fine on Firefox, Opera, Chrome, etc using CSS but it doesn’t work in IE - they just appear as square, which I think looks ok. However, as their nice photoshopped mock-up has rounded corners there is nudgings to try to get this working. I spoke to them and they say it’s easy with a fixed width, as they can do it with graphics, and it may, again, be possible on a flowing width with graphics, but they’d need to play around to get it working. I’m somewhat resistant to this as, as far as I’m aware, this is the “old” way of doing things, and is somewhat frowned upon nowadays. Am I being too purist on this, and is it likely to work reliably?

I’m very aware that they’re a design company and I just a programmer, so they should know best, but I’m somewhat doubtful as they seem to be stuck in the past a bit with their design methods (their own company site is purely written in flash), plus this site really needs to work on not only tablets, etc, but also on old machines on dial-up - some of the users will potentially be in third world countries with limited/old machines and slow connections. There’s also the issue that most of the design articles and advice I’ve read and received all seem to say to move to flowing design using CSS rather than graphics to produce effects, so that if an older browser doesn’t support certain things it will still work but just won’t look as pretty.

Any comments would be welcome - am I being too much of a CSS purist and should I slacken off, or are they a bit stuck in the past with their design methods - during a conversation I did say the days of fixed width websites are gone but the reply was that it’s not and there’s loads of websites out there that use fixed width, but to my mind:-
a) just because other people are doing it, it doesn’t make it right
b) there are plenty of “badly” written sites out there that proabably need an overhaul, or they’re “badly” written by today’s standards but when they were written, those methodologies were fine.

I know there’s not necessarily a black-and-white right or wrong answer to this, but I was wondering on peoples’ thoughts

Thanks
MH

2

Heh heh, nice write-up. :slight_smile: Yes, there is a big tug-of-war between the past and the future in this area. The web 2.0 glam has had its day … just most people haven’t realized yet. I think that within a few years, the rope will snap, and all those doing it the old way will fall flat on their face … but we’ll see. Graphic designers still have not, in general, faced up to what the web really is, and are trying to cling to their print traditions. Letting go of all the past design trends is hard for a lot of people.

An alternative to images for CSS3 stuff is a bit of JS, though that can mean unnecessary downloads as well if you start to use things like jQuery. So it could be out of the frying pan … you know. Like you, I’m fine with square corners for … square people. :slight_smile:

I keep getting asked to do things the old way–converting fixed-width stuff from Ps etc – and I’m SO over it, I’ve decided to refuse any more after this year. I’m ready for flexible, mobile-friendly design with minimal fluff, minimal images, simple colors. Mobile design is helping with this. I think when the mobile web really kicks off in the next few years there will be a big change.

3

Perhaps designers should all be made to discuss their designs not with their clients, but with the end users. I suspect they’d get a very different perspective. I build sites mainly for very small businesses, which are only interested in gaining customers, not in corporate image or branding. Pretty much without exception, the owners say “I’m not that bothered what it looks like, as long as it’s clear and easy to use.” I’d guess that’s probably the view of most web users, too. That doesn’t mean that I don’t do my best to make the site attractive, but usability comes first.

Ask your designers if they think the site’s users will consider rounded corners worth the extended download time required for the extra graphics. It’s not that long ago that I was stuck with a dial-up connection that ran at about 22kbps (if I was lucky) and all I really cared about was whether a page could load before I lost the will to live. :slight_smile:

Just my tuppence-worth.

4

Rounded corners are supported by all modern browsers except IE8. So people using that browser get the version of the page with square corners - which is their choice because they chose that browser. If they wanted rounded corners they’d have switched to a browser that supports them. Therefore applying anything to force the rounded corners on those who have selected a browser that doesn’t support them will just result in a bad experience for everyone.

5

There is always a tug of war between designers and coders as designers like to control every last pixel but the web is all geared about letting go of control as you can never really tell where or what your design will be viewed on.

Obviously designs should look good but they should also be usable so there is always a compromise or trade off between what is wanted and what can be done easily. You have to meet in the middle and agree on some things and disagree on others.

I do have some clients who need pixel perfection (as they see it) and won’t be talked around and yet I have others who see the light straight away.

These days most of my clients can be talked out of round corners for IE8 and under especially as IE10 is due out soon and eventually chrome is likely to be the main browser in a few years anyway.