CSS and the shaping of dynamic design

Cecily Kellogg

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.

CSS3

Site using CSS3: Solo

Interchangeable parts

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!

SEO

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.

Explore

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)

The author

Cecily Kellogg
Cecily Kellogg

Cecily Kellogg became an accidental designer when she worked at a short-handed non-profit and although she now prefers designing with words, the lessons she learned from doing graphic design make her work in content development more well-rounded. She writes about the intersection of family, technology, and social media for Babble Tech and runs her own web content business. She is also known for her raw tone and humor on various social media platforms including her own blog, Uppercase Woman. Cecily lives in the Philadelphia area, is happily married, is mom to a fierce and amazing daughter, and has occasionally been called a bad ass.

Related articles

The fundamentals of responsive website design

The fundamentals of responsive website design

The days of designing a website for a single desktop screen are well and truly over. Technology and the expansion of mobile websites are pushing web designers to re-think how their work is displayed across various devices. Think about it: how much browsing do you do every day on your phone vs. your desktop? Enter:…

The new Google Fonts is a win for designers

The new Google Fonts is a win for designers

Google launched Google Fonts in 2010 to provide web fonts free of charge. Over the next six years it grew considerably, becoming very popular with web designers—for the obvious reason of affordability. The original website was definitely what the startup world would call an MVP: minimal viable product. It got the job done, but it…

Current Design Contests

Designers, check out these contests so you can start building your career.
0%