The Designer’s Guide to CSS3: Intro

We’re in the midst of a very exciting time of change in the web industry with the introduction of CSS3. It’s a huge step forward in many ways. But for designers who don’t dig into the code all that much, it can be overwhelming. The developers of the world are scrambling to catch up, figure out what is possible and develop new best practices.

The Designer’s Guide to CSS3

As a designer, the more you understand what’s possible, what’s not possible and how you might work with it, the more valuable you’ll be. In this series I’m going to look at the possibilities of CSS3 for the people who aren’t working with code. Many people have developed great code-generating tools that allow non-developers to play with and preview the results, making your job a lot easier. This Designer’s Guide to CSS3 will focus on a different design topic in each installment, such as borders, backgrounds, text styles, transforming images and animation.

What is CSS3?

CSS stands for Cascading Style Sheets. CSS is a language used to define how HTML elements should be displayed. Things like: What size will my fonts be? What color background will the site have? How large will this column of text be? How much margin should be around a button?

Style sheets are typically stored in a file external to the web page you are working on. In this way, a single configuration can define the styles for an entire web site. This is one of the key reasons CSS is so powerful.

CSS3 is the third official revision to CSS by the World Wide Web Consortium (W3C). Prior to the adoption of CSS3, the world operated on CSS2.

Why CSS3 rocks

The reason why CSS3 is such a huge step forward and why the web community is going nuts over it is simple: CSS3 lets you code many things that used to require images or JavaScript-based extensions to happen.

The simplest example is rounded corners. In the past to create rounded corners we had to use images or using JavaScript-based tools, and it worked pretty well. But now, you can apply rounded corners to most anything with a dash of CSS. This makes the development process faster, pages load quicker, and it’s generally an awesome improvement.

Here is a sample container rendered using rounded corners based on CSS3. No images or JavaScript were required to create this:

Browser limitations

For as exciting all of this progress is, CSS3 does have its limitations. The biggest of these is browser support. Simply put, not all browsers support CSS3. This is where it gets complex: Many browsers offer up partial support for CSS3, implementing certain properties while offering no support for others. And some CSS3 properties, such as CSS-based animations, are barely supported by any browsers.

The best way to figure out how to determine if your desired effect is supported is to use this tool from findmebyip.com. This helpful chart summarizes what will work in each browser:

Graceful degradation

With the limited browser support, you might think CSS3 is just complicating things. Considering that for years the goal of the web community was to get sites to render the same on any browser, it’s kind of true. Let’s say you want to use rounded corners on containers in your design. Well, if you do it using CSS3, it won’t render on many older versions of Internet Explorer. If the majority of your target audience uses those browsers, you’ve got a problem. What to do? You’ve got a few options.

First, you could simply continue to use the older approaches that work across all browsers. This is a perfectly legitimate option. In essence, you can ignore CSS3 for the time being and feel zero impact from it.

Your next option is to use the modern techniques but provide a fallback option that renders identically. This means your developer will have to build the site two ways, one using the new CSS3 techniques and one with the older approaches. It’s twice the work, but it lets you embrace the new techniques and be prepared for the day when the new way is the only way to do things.

The final option is to accept that your design simply won’t look the same across all browsers. (Considering the extreme range of browsers, this is most likely the case anyway.) If you can accept that older browsers will simply not see the rounded corners (or whatever other CSS3 properties you use), you’re all set to put CSS3 to work on your site. Many of the things CSS3 accommodates for are visual styles, so losing a rounded corner or drop shadow won’t render a site non-functional.

This all comes down to the idea of graceful degradation. Also called fault-tolerant design, graceful degradation allows users with older browsers or operating systems to still access content. So your sites operate as needed and look OK when someone is using a decade-old browser that doesn’t support modern techniques. This approach starts with how you interact with your clients. You have to decide how you’ll address these issues and ensure your whole team is on board. Promising your design will look the same in all browsers and on all platforms and devices is a tall order and doesn’t match this approach.

Provide your own code

When you’re designing for the web and someone else is doing the coding, you can use online tools to not only preview what is possible but actually provide the code to generate the exact results you want.

Let’s stick with our rounded corners example. Using one of these CSS3 generator tools, you can generate the style you want, preview it in the browser and know exactly how it will look. Then you can provide the code to your developers, which helps streamline the entire process. Most developers will appreciate that you cut to the chase by providing code to produce the exact results you’re looking for. This saves everyone time and makes you a more valuable commodity.

It also gives you an extra layer of control over the end results of your design. It can be very frustrating to have your design only partially implemented. We work hard to get everything just right, and often we just have to hope the developer will understand and respect the nuances we put into it.

Next time: Border treatments in CSS3.

Resources

Here are some essential resources to help you out in your journey to embrace this technology:

  • CSS3 for Web Designers by Dan Cederholm: This fantastic book takes an in-depth look at CSS3 and helps designers understand how it works. If you want to learn to code your own CSS3 and are a creative, then this is a great place for you to start.
  • CSS3 Browser Support Checklist: A visual guide to understanding browser support for various CSS3 properties.
  • Browser stats: An important element to this is understanding what browsers are in use. W3schools.com provides tremendous statistics to help you understand the market.  For example, IE 6 still has 2.3% of the market. Considering Safari only has 3.7% that is a pretty large chunk. Combine this information with your sites analytics to figure out what will work for you.

CSS3 Resources from MyDesignShop.com

One thought on “The Designer’s Guide to CSS3: Intro

  1. Pingback: Meet CodedBits: All-in-one Toolbox for Web Developers | Inspired Magazine

COMMENT