Home / Coding // Community News // Design / What CSS3 Brings to the Table
May
10
2013

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

CSS3 border-radius property

Box-shadow

Text-shadows

CSS3 text-shadow property

Gradients

CSS3 gradient property

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 RauchKenneth 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.

About Bharani M

This article has been contributed by Bharani M, a web addict with a passion for everything that is well designed. He welcomes your suggestions and feedback.

Leave a comment

About us

9BlogTips.com is a community for bloggers and small business owners. We offer useful tips / tricks, snippets, tutorials, inspirational artworks and helpful resources that we hope will help you on your entrepreneurial journey.

Those new to blogging often find it difficult to get their blog off the ground and start making money. So here on this community blog we offer tips and advice for small businesses and bloggers. We talk about project management to help you become more efficient and are always interested in the latest tech for bloggers and small businesses.

We discuss training and coaching for business owners, how to promote yourself and your blog and how to raise finance that can help at difficult moments while building your business blog.

But a successful small business also has to consider cost-effective options for office space such as in a small business hub or self-storage instead of a warehouse.

Why not join our community by sharing a comment and getting the conversation started.

Follow us on:
9blogtips @ twitter 9blogtips @ facebook 9blogtips @ google 9blogtips @ digg 9blogtips @ delicious 9blogtips @ stumbleupon