9 months ago


90 The Principles of

90 The Principles of Beautiful Web Design You could use a circle or an oval as your background image, then center all your text—inserting line breaks where necessary—to create the illusion that you have a circular block of text in your layout. Figure 3.7 shows an example of this approach. The problem is that if your text extends beyond the bottom of the oval, or if you forget to insert a line break somewhere, the oval won’t expand to fit the text. Figure 3.7. Text inside an oval Okay, so if we forget to format our text to fit the background image, this approach can be problematic. Another reason why this technique is impractical is that most web browsers give users the ability to resize the text, which would also break this fragile, if fanciful, layout technique. In reality, the best we can do is distract viewers from the fact that a layout is rectangular. Designing in CSS Some designers have created amazing artwork without images using pure CSS, such as the robot shown in Figure 3.8 below. The example shows you just a hint of the actual complex CSS that went into making this. You can see the full example on CodePen 2 . Other examples of pure CSS artwork include Nicolas Gallagher's pure CSS GUI icons 3 . Figure 3.8. A robot image created in pure CSS 2 3

Texture 91 Rounded Corners So we’re unable to count on the height of a content block remaining the same at all times, on all monitors. One thing we can do, though, is remove the 90-degree corners that so often characterize rectangle-based layouts. From a graphic design perspective, boxes with rounded-off corners soften the layout, creating a more organic, smoother feel. Remember when I asked if you could make a website design feel like a wet bar of soap? Well, rounded corners can certainly make a site feel a little more slippery. Take a look at the boxes on Simon Collison’s home page 4 in Figure 3.9. The corners of each of the boxes you see here have been slightly tapered to give this very gridtacular layout a slightly softer feel. The upper red box to the left of the image shows a close-up of those rounded corners. Figure 3.9. The Celebrated New Miscellany of Mr. Simon Collison So why does the lower red box in Figure 3.9 show a square corner? This is a close-up of what the corners on Simon’s site look like in Internet Explorer 8 and below. They are square because Simon has used the border-radius CSS3 property, which is only supported in Internet Explorer 9 and up. CSS3 is by far the easiest way to implement rounded corners. Because of the lack of IE support, though, it might be impractical unless you’re okay with some users seeing square corners. In Simon Collison’s case, losing the roundedness in IE isn’t a deal breaker. Besides, the real draw of Simon’s 4

Layout and Design - In Easy Steps
Boot Camp
30 ways to create amazing web experiences on tablets
Download PDF -
How to build a department web site (starter pack) - University of ...
Visual Design for Library Websites - WebJunction
Responsive Email Design Guide - e-Dialog
The Complete Guide to a High Converting Website
Web Site Design & Usability Testing - HIPNet
PDF Specimen Booklet - Fontworks UK Ltd
to download our handy prepress guide - Peel Graphics Inc.