How CSS3 can improve rankings and conversions

"Did you know that CSS3 offers powerful, lightweight features that anyone can use to improve their SEO (Search Engine Optimization) and maximize conversions?"

CSS3 is the latest version of CSS (Cascading Style Sheets), which are used by Web designers and developers to style HTML. CSS basically allows designers to separate the structure of a Web page (HTML) from the look and feel of the webpage (CSS).

CSS3 is supported by all modern browsers so you don't need to install anything in order to use it. Simply add it to your blog or site's style sheets and away you go.

A very brief guide to using CSS3

Using CSS3 is easy; regardless of whether you have Web design and development skills or not! There are two excellent CSS3 tools that can be used to implement the features you want without having to write a line of code:

Simply create the CSS3 effect you want and copy the CSS3 code generated by these tools into the appropriate CSS class or id declaration.

Why CSS3 is good for SEO and marketing

"How can a style sheet, something that is used to change the look and feel of a webpage, be good for SEO? "

Search optimization, at first glance, doesn't have much to do with CSS3. However, as you might know, Google takes into account a number of different metrics when deciding how high in search results to rank a given webpage. Some of those metrics relate to CSS3 in a fundamental way.

Here are two quick examples of CSS3 features that do have an effect on the SEO of a webpage:

  • Background gradients: specify a range of colors and gradient types for any background
  • Transitions: allow smooth transitions between one or more CSS properties on hover

Both of these CSS3 features affect the SEO of a webpage in different ways because they provide better, more elegant methods of doing things than were possible before CSS3.

Let's take a look...

SEO benefits of CSS3

Most of the SEO benefits of CSS3 arise from the fact that it requires less code from the server to implement, making things faster and simpler.

It is the browser itself that looks at the CSS3 and provides all the fancy effects.

CSS3 cuts down on clunky images

Images require additional server requests and are large. Using images slows down a webpage, and page speed is a factor in determining how high in the SERPs (Search Engine Results Pages) webpages appear.

Previously, it was not possible to create beautiful backgrounds with back-lighting effects, or top to bottom gradients without the use of images. However, a simple application of CSS3 background gradients can provide high quality gradients in a number of patterns without the use of images.

If you are still using images to create rounded corners or backgrounds then it is time to update, because competitors who are using CSS3 will have faster, lightweight sites with an SEO advantage.

CSS3 cuts down on JavaScript

If you take a look at the left hand margin of this article on SME Pals, you'll notice a pssst! tab.

Hover your mouse over that tab to see a CSS3 transition in all its glory. See how the tab slides elegantly out - smoothly, like an animation. I implemented this using nothing more than a few lines of CSS3 code - so lightweight it's virtually negligible.

Before CSS3, an effect like this would need JavaScript. Javascript can hide content from the search engines and prevent important links from being discovered - bad for SEO.

Plus, it is not a straightforward task to implement a slider effect like the one shown in JS. Either you have to invest some time in learning how to code JS, find some prebuilt JS libraries to do it for you (most common), or pay someone else to do it. Neither option is as simple, fast and effective as CSS3.

So CSS3 also helps to minimize JS, which further reduces page load time and may also improve navigation and indexing by the search engines.

How CSS3 benefits marketing and increases conversions

Because CSS3 allows pages to introduce features that previously required clunky images or JavaScript, it is now possible to spruce up pages without compromising on performance and speed.

I chose to use a CSS3 transition to implement an on-page dialog that has already:

  • lowered the bounce rate
  • increased the rate of social shares
  • help funnel visitors to make conversions

The idea behind the pssst! slider, visible on any blog page or forum post on SME Pals, is to engage visitors in a dialog - something they can interact with on the page.

Displaying the dialog on-screen would take up too much valuable real-estate, which is why it needs to be hidden behind a tab. But the interaction is important for marketing and conversion purposes.

The reader is asked "Did you find the information you wanted?". If the answer is yes, they are encouraged to share that page in order to grow their own social following by sharing quality information. If the answer is no, they are encouraged to find what they need by quickly using one or more of our on-site features - instead of finding that information somewhere else.

The net effect of the dialog slider, although it is early days, has been to drop SME Pals' bounce rate by around 7% and increase conversions by 15%.

Not bad from something that took a few minutes to create.

Are you using CSS3 on your website? What CSS3 features have you found to be most useful? How has using CSS3 improved SEO, marketing and conversions? Share your Web design and SEO thoughts, tips, advice and experiences in the comments or join me on Twitter, LinkedIn or Google+ to carry on the conversation.

Old HTML tables can be upgraded into a responsive design with CSS3 and media queries

Mobile first, responsive Web design is something that can't be ignored because devices likes tablets and smartphones are quickly becoming the dominant browsing device of choice for the burgeoning millennial market.

If you are one of those unlucky people to have built your site more than a few years ago, on a platform that used the old table based Web design paradigm, then you have two choices: