What CSS3 Brings to the Table
Do you think I’m insane because CSS3 has nothing to do with SEO? Well, let me prove you wrong. If I fail, I’ll buy you a bottle of beer if we meet someday. Lots of innovations that came with CSS3 directly influenced SEO (specifically technical on-page SEO) because they made a whole lot of things more search engine friendly. What’s more, CSS3 made it obvious that some technologies should not be used for creating sites at all because the last version of CSS has most of the necessary features built-in. Once you’re done with reading the post, you’ll be able to confidently talk to your web designers about if and when you need to use CSS3 in your new design. And specifically WHY you should do that.
The Idea
The other day, I did the TutsPlus – CSS3 Essentials video course from Jeffrey Way and it occurred to me that CSS3 actually has a lot of features that inbound marketing guys may be interested to learn about. So, if you’re an SEO, but you’re not exactly sure what CSS3 brings to the table, this post will answer all your questions.
Less Images
It looks that one of the best things that CSS3 has to offer is using CSS rules instead of images. The point is that lots of things that we needed to use images for can be created with mere CSS from now on. The following CSS3 properties (just to name a few) are changing the game:
Border-radius
Box-shadow
Text-shadows
Gradients
Though you also need to use a 3rd party tool called Prefixr.com to make sure that your CSS3 works with all the major browsers out there, it still remains worth it because you are not supposed to sue that many images, which usually cause slower load speed for your site.
Previously, you were supposed to use Adobe Photoshop or an alternative piece of software to achieve similar results. That implied using images. Sometimes a lot of images. The more images you use, the slower your site gets. The slower the site, the less customers or visitors and the worse SEO metrics for your site. End of chain. So, keep all the CSS3 benefits in mind when you start a new site.
Moving to Responsive
The columns property allows you to specify the amount of columns you want your text to be dynamically broken into. Combining that with media queries, you can change your page structure depending on what kind of device (iPhone, iPad, etc) or just screen resolution you use for viewing. In other words, you can use it for creating responsive designs which are all the rage now.
Flashless Animation
The CSS3 transition and transformation properties make it possible to create stunning animations without Flash or any other 3rd party technology. You’ll be shocked when you learn what kind of animation can be created just with the help of CSS3. Sure thing, you won’t be able to create all kinds of animation, but if you need to add some cool dynamic effects to your images or a whole image gallery, you definitely need to use CSS3 properties, because they are lightweight and easy to implement. That’s why you don’t need any extra software or technology.
Before, it actually made sense to use Flash in some cases (for example for buttons or slideshows with cool effects), but now you can create all those bells and whistles just with the help of CSS.
Dynamic Text Effects
If you go to WebDesy.com and scroll down to the very footer, you’ll see the Recent Posts widget. Just roll over the items in that list and see what happens. The items just smoothly move to the right if you roll over them and return if you roll out. Think it’s Flash or perhaps JavaScript? Nope, it’s plain CSS3.
Font-face is a Breeze
You had to use cufon or some Flash workarounds if you wanted to use a non-standard font in your design back in the day. Those times are long gone now because you can just copy and paste 2 short lines of code in order to do that. Google web fonts make that possible. They have lots of fonts to choose from. Plus the number is regularly growing.
In Conclusion
CSS3 is a total must in terms of SEO, because it allows to use CSS instead of images and 3rd party technologies such as Flash or even JavaScript. If you can use plain text instead of an image, that’s always good for search engine optimization because it makes your site more user friendly (faster to load, easier to crawl and index. etc). So, if you plan a redesign or just start a new online project, make sure that your make use of the new CSS3 features it has to offer.
Author’s by-line
Kenneth von Rauch is with WebDesy.com and does content marketing using the best inbound marketing practices ever. Also, he’s into web design and development.
