7 months ago


92 The Principles of

92 The Principles of Beautiful Web Design site is his jaw-dropping use of media queries. A media query is a feature of CSS3 that allows us to define a conditional rule for applying a certain set of styles. In this case, Simon is using them to automatically change the layout of his site as you resize the browser or view it in different devices. While it’s not a true “responsive layout” (because it’s not fluid), it’s still an impressive and practical way to adapt to the many devices we use to access the Web. Now, go on, open in a browser and resize away. When I wrote the first edition of this book, border-radius was a glimmering ray of hope for a design technique we’d been trying to implement for years with HTML and CSS. For that reason, I highlighted several techniques for creating rounded corners using extraneous markup or JavaScript. Most of those techniques have been abandoned. If you’re unable to create the effect with simple CSS, I’d advise you to follow Simon’s lead and keep the corner effect subtle enough; that way, your design will still look good with square corners. Visit for a further explanation of my stance on this topic. Rotation I mentioned in the section above that diagonal lines evoke a sense of movement and excitement. Rotating shapes and elements in your design have the same effect. Rotated objects break up the horizontal and vertical monotony of the Web and, like rounded corners, help it to feel more organic. Take a look at the Ithaca Events 5 site in Figure 3.10. There’s a lot of rich texture in this design that gives it a handmade feel. The subtle rotation of the logo, “view all” links at the bottom of each date, and other background elements give the site a lot of character. To me, this design really looks like a flyer that might be stapled onto the wall of a local entertainment venue. It’s a perfect look for a regional arts and culture calendar website. 5

Texture 93 Figure 3.10. Ithaca Events Currently, the most common way to accomplish the rotation effect is by saving images for your design pre-rotated in your image editor of choice. As with rounded corners, this is a practice that will soon be made obsolete with CSS3. The transform property of CSS3 promises us the ability to scale, skew, and rotate objects directly in the browser window. While the effect will no doubt be overused and abused, having this much design control within CSS is a revolutionary step forward in web design. Just because CSS rotation lacks universal support, it doesn’t mean you should avoid using it. Pointless Corp. is a great example of rotation of elements. The logo and text are rotated, which adds to the nostalgic-feel of the rest of the site. To reinforce the concept, the blue/green ribbon and text are rotated, too.

Layout and Design - In Easy Steps
Boot Camp
30 ways to create amazing web experiences on tablets
Download PDF -
The Complete Guide to a High Converting Website
PDF Specimen Booklet - Fontworks UK Ltd
Web Site Design & Usability Testing - HIPNet
How to build a department web site (starter pack) - University of ...
Visual Design and Web Site Usability
Creative Services - Keiger Graphic Communications
slides - HTML5 Developer Conference