Blog

CSS3/Best Practices Part 2

If you haven't read Part 1, you can read CSS3/Best Practices Part 1.

Time has slipped by amidst the hustle and bustle of daily life at Quick Left, but finally part 2 of the CSS3/Best Practices has arrived! Rejoice! It only took a month and a half. Let's get to business, I've got clients to think about here!

Let's talk about the conversations you should be having with your clients and bosses (oh those pesky ne'er-do-futures!) about using CSS3 on your next site. How should you approach it?

Little to No Flash or Javascript for effects!

I think the Flash part goes without saying given the ridiculous amount of negative press heaped onto the technology the last few years. But I'll say it anyways, the process of updating a Flash piece in that idE, where it never seems like there is enough space, is pain enough. Many of us have been through it, some of us very recently (4 months ago, too soon, too soon!). Javascript allows flexible development, but it can add to page load time and if you can use CSS3 instead, you could make your page faster. The trade off may be small, but is worth looking into, depending on audience and needs.

So limiting your need for fancy animations by using transitions and keyframes (plugging css3please.com again, copy paste!), you can achieve some amazing results: google 'CSS3 Hover Effects'. This translates to lower initial cost to develop sites.

Reduced development/maintenance time

If you don't have to dig into Flash, Javascript or open up Photoshop to update images, its easy to see how your initial development time and maintenance commitment are decreased. CSS can be tweaked and updated as quickly as you can type (or autocomplete) and refresh the browser page. Simple as that. This translates to lower cost to develop and maintain sites. Your boss is seeing it your way already!

Increase page performance

With less images, Flash and Javascript to load, your page size can decrease substantially! Every little bit helps to decrease markup and other assets downloaded from the server (saving HTTP Requests, unless your adding in @font-face font downloads). Since you end up relying more on the user's browser to render out effects, animations and the like, you'll want to make sure you aren't overdoing it and test, test, test for any downsides. I.E. Chrome at one point could not handle box-shadows with a blur greater than 18px. Fun times. This translates to faster page loads, if done right, thereby making your customers/visitors able to use your site that much more quickly. Its well known that visitor's have a very short attention span, so get your content in front of them as fast as possible!

Increase usability/accessibility

The ability to use real text instead of images increases screen readers ability to translate page content for their disabled user using @font-face with licensed fonts for the Web. Search engine spiders can also parse the text much faster, better indexing your content for potential search results. Google has started including page load time a ranking factor, as well. This leads directly into our last point.

Enhance search engine placement

This one is the real winner for the clients/bosses, it drives home the ROI of switching over your Flash/JS/Image heavy to CSS3 alternatives (with some exceptions). If search engines can parse your content easily and you have quick page load times, you have increased your site's potential for showing higher in the search engine results pages. This increases traffic to your site if you're on the first page and thereby increases potential for your site's purpose gaining traction.

In general, the tradeoff we're attempting to minimize is between over-the-wire bits vs. rendering time and client CPU cycles. Specifically on mobile, this isn't always an obvious tradeoff to make because the hardware isn't very powerful compared to desktop browsers (but the networks are also slow). As always, keep your audience in mind!

If all else fails, refer to the "if its on the Internet it must be true" and link 'em to: dowebsitesneedtolookexactlythesameineverybrowser.com/. Now get to inspiring us with your clever CSS3 manipulations and quick loading, easy to maintain sites!