Many of us can remember a time when the typical web page resembled a poster publicizing a high school dance. No banners, no sidebars and certainly no flash. When a designer wanted to grab your attention they used red type on a blue background, which resulted in more migraines than anything else. Thankfully, web design has made great strides in the last 20 years.
These days, Cascading Style Sheets (CSS) allow designers to create, lay out and manipulate design elements with a few lines of code. Everyone from the solo blogger to the established businesses can, with CSS, give their website a professional and sophisticated appearance. Here we’ll take a look at a few of the basic ways CSS has changed the way websites look and altered the way designers conceptualize your projects.
Site using CSS3: Solo
Just as the assembly line revolutionized manufacturing, CSS has allowed for the creation of a range of design template options with a few lines of code. These days a wealth of websites — from blogs to commercial sites to social media sites like Tumblr — let users change the look of their page by selecting from an array of templates.
Placement of elements like headers and sidebars, the organization of columns, and the selection of backing and trim colors can all be chosen by users with zero design experience. Why? Because somewhere along the line a designer used CSS coding to make that possible. So, on behalf of everyone, thank you.
Changes on the fly
Customization has been a critical selling advantage for decades, ever since Burger King told us, “have it your way.” Making custom changes easily and on the fly is another way CSS has changed web design. Elements can be easily altered and rearranged as needed, without overhauling the design.
Want to move a sidebar? No problem. Change a background color in the header? Easy peasy. Contouring the text or wrapping text around a curved image, once a real challenge, is now a relatively simple operation. And for designers whose clients enjoy making last-minute changes (i.e. most of them), CSS has rescued many from a late night at the computer.
Shapes, shapes, shapes
The sophistication of CSS coding has allowed far greater versatility in shaping both text and non-text elements. It’s not just about rectangles and squares anymore. Triangles, circles, ovals, trapezoids and the like add motion and grab viewer interest. Combine this with responsive design for mobile, and you get some pretty interesting possibilities. An added plus, CSS also saves on bandwidth!
Designers have even used CSS coding to add weighted keywords to a header, sidebar or text. This can be done without changing how the font style appears on screen, so the change is visible only to web crawlers—improving the search rank of a page without interrupting the flow of the design with boldfaced keywords.
There are many sites out there featuring a range of CSS tutorials for every skill level, from beginner to expert. They’re worth a look, even for the code-phobic. As CSS becomes more sophisticated, there are always new tricks and shortcuts to be learned. If design is an interest of yours, keep abreast of the latest developments and consider the ways they can influence your design choices.
In what other ways has CSS changed the way that websites look? Share your favorite examples in the comments!
Featured image: xmodulo (via Flickr)