Rounded corners require images (sprites), i.e. extra bandwidth and I'm working with slow Internet connections (think dialup at 56k or less). What are some approaches for designing so that rounded corners can be avoided? Are there any circumstances in which rounded corners are so important that I should consider taking a hit on page load time?
-
If you're looking for rounded corners without CSS3 consider using a sprite for the corner images.– Marco CeppiAug 30, 2011 at 12:11
-
Yes, that's what I mean by "graphics". I'll edit the question.– iftheshoefritzAug 30, 2011 at 12:16
-
Would appreciate comment on what the downvote is for.– iftheshoefritzAug 30, 2011 at 12:17
-
3I did not vote the question down but it seems to be purely a coding/graphic design question. It's not really what UX is about in my mind.– GalaAug 30, 2011 at 13:03
-
Just let the people using old browsers miss the rounded borders. In general you've got to do quite a bit depending on rounded borders before you make a page look distinctly bad without them rendering.– Chris MorganAug 30, 2011 at 13:09
2 Answers
In your situation I'm not sure what better practice there would be beyond not attempting to round the corners of elements. It looks sort of nice (if a bit over used) but even in modern full CSS 3 designs it's just a plus, not an integral part of design in most sites. Any technical work around you try to implement (sprites or images for button corners) is likely to result in added workload, added complexity/compatibility issues and added bandwidth usage. Don't forget that designing for pre-css3 browsers is as complex and incompatible enough as it is without trying to integrate css3 elements.
If you're introducing rounded borders on buttons or other elements to make them stand out as unique elements, consider more CSS2 friendly methods of doing so; borders, different colors (Don't overdo it though), white space, clear linking/physical proximity to related elements.
If for some explicit reason you need a rounded corner or you feel something is lost in the design without it, please post an image so that we know what the situation is. Generally rounded borders are only for making it look modern and nice (something I'm sure you're already sacrificing to adapt to low bandwidth condition) or making elements look distinct or "like buttons," but as mentioned there are pre-CSS ways of doing this as well.
Generally I consider rounded corners to be a nice to have but not necessary feature. However, having rounded corners vs not can change the character (or emotional appeal, perhaps?) of the design. I worked on a site where just about everything was rounded off, for a very bubbly, soft feeling overall. We switched from sprites to css3 rounded corners and the site felt very different in browsers that didn't support css3. The page felt so much snappier that we kept the change, but it was definitely a trade-off.