11 Must Use SEO Tips for Web Designers

Today most web designers do more than just design the look and feel of a web site. They often play a major part in writing the front end code. This means that a big part of the SEO or Search Engine Optimization responsibilities should fall on the designer. However, there is a large number of web designers that don’t understand this subject well enough to create a site that is fully optimized for search engines.
This article is here to provide some important tips that will aid the average and even above average web designer in improving their SEO skills.

1. Make the code prettier than the design

When building the front end of your site, make sure to use semantic code. By using descriptive tags to structure your pages, search engines will be able to read and have a better understanding of your content. This will also make the process of styling your site much easier and cleaner.

2. Use but don’t abuse your keywords

Keywords are the words that describe your content. It’s important to have them appear in strategic places throughout your page, such as: URL, title tag, and main heading tags. It’s also important to have it appear often in the body of the content, but not too often, which might cause your content to be penalized for keyword stuffing.

3. Avoid using Flash for navigation

As tempting as it is to whip out some nice looking drop down effects for your site’s navigation using flash, don’t do it. Search engines have trouble reading flash files, which means the links used in the navigation can’t be followed.

4. Use unique page titles

Each page on your web site should have a title attribute, and each title should be unique. If you use the same title for every page, search engines will think that every page on your site is about the same subject.

5. Don’t forget about images

Make use of the alt attribute of an image to properly describe it. As smart as search engines are, they can’t see what an image looks like. Failing to this can cost you substantial traffic from image searches.

6. Don’t use generic links

Search engines place a high importance on links. So when linking to relevant content, be sure to use a word that describes the content. For example, if you were giving your reader a link to learn more about Photosop, use something like “Learn more about Photoshop” as opposed to just “Learn More”.

7. Don’t use images to replace text

As designers, we always want to make things look as good as possible. This means sometimes replacing ugly browser rendered heading text with a nice smooth image. Try to avoid doing this. Again, search engines can’t see the contents of an image, and this is where you should be putting your keywords.
Edit: Looks like I misspoke(or mistyped) on this one. There are valid ways to accomplish this, such as FIR.

8. Use AJAX sparingly

Ajax is great for enhancing the user experience, but try not to over do it. Content generated with ajax can’t be linked to. A good rule of thumb is: if what you are loading with AJAX can be an individual page, then avoid using it.

9. Get indexed quickly

To get your site indexed in search engines in a timely manner, try getting it linked to by a popular site in a related niche. Submitting it to Google also works, but sometimes it can take several days if not weeks.

10. Build incoming links

The number and quality of incoming links plays a big role in the placement of your site in search results. Having quality and unique content is a good way to get people to link to your site. Another way is to be generous with your own links.

11. Use a consistent URL

When you build a site, decide from the beginning if you want to use or drop the “www”. Once you decide, stick with it. Search engines, for example, see www.webdesignledger and webdesignledger.com as two different sites and as duplicate content, which they do not like.

Do you have any additional SEO tips? Let us know.

Faster button styling with Sass

Everybody loves a nicely styled CSS button but here it is explained how to use Sass and Compass to create a mixin to implement a variety of buttons in no time and also covers browser support fallbacks

Another button tutorial?!? I hear you cry. Well yes, but this one’s a bit different. There’s plenty of tutorials out there on how to style buttons but this is a tutorial less about that and more about implementation.

As a frontend developer I work on lots of different user interfaces for web apps, services and sites and obviously one of the most common elements for all of these are buttons, or more specifically for this tutorial, buttons that allow for different icons and coloured backgrounds. So with the use of Sass and Compass I’ve created the following mixin for quickly implementing different buttons in my projects.

Base variables

We start off by declaring some base variables. Firstly the default button colour:

1. $background-default: #D5D5D5;

We’re going to apply a gradient to the buttons using a shader. This is layered over the top of the default colour using CSS multiple backgrounds. We also declare an inverted shader which we’ll use on the active state for the buttons and for browsers that don’t support CSS gradients we’ll declare a fallback shader image:

• View source
• Copy code

1. $background-shader: linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,0.25));
2. $background-shader-i: linear-gradient(top, rgba(0,0,0,0.25), rgba(0,0,0,0));
3. $background-shader-f: url(../images/site/button-shader.png) left center repeat-x;

There are two other images we’ll be using to style our buttons. A striped texture to give the button some depth and a divider line which is positioned between the icons and the text:

1. $background-divider: url(../images/site/button-divider.png) 44px top repeat-y;
2. $background-stripe: url(../images/site/button-stripe.png) left top repeat;

Finally, we’ll be using a sprite for all the icons. This sprite is divided into 40px segments so we declare this in a variable as well:

• View source
• Copy code

1. $sprite-division: 40px;

Default button styles

We want to have a default state for regular buttons that don’t have an icon so let's declare those styles first:

1. .button {
2.         @include background($background-stripe,
3.                                   $background-shader,
4.                                   $background-default);
5.         @include border-radius();
6.         @include single-box-shadow(rgba(0,0,0,0.4), 0, 1px, 2px);
7.         @include single-text-shadow(rgba(0,0,0,0.2), 0, -1px, 1px);
8.        
9.         color: #FFF;
10.         display: inline-block;
11.         font-size: 15px;
12.         line-height: 15px;
13.         margin-bottom: 24px;
14.         padding: 12px 24px;
15.         text-align: center;
16.  
17.         //more styles to go here

Fallback styles

We need to account for browsers that don’t support CSS gradients but do support multiple backgrounds (for example, Internet Explorer 9). We can use the Sass Parent Selector along with Modernizr to apply this easily:

1.         .no-cssgradients & {
2.                 @include background($background-stripe,
3.                                           $background-shader-f,
4.                                           $background-default);
5.         }

Here, instead of applying the shader gradient we apply the shader image to achieve the same effect.

The final fallback is for browsers that don’t support CSS multiple backgrounds (for example, Internet Explorer 8 and 7):

• View source
• Copy code

1.         .no-multiplebgs & {
2.                 background-color: $background-default;
3.         }

Here we’re just applying the default colour of the button.

Pseudo styles

For this example we want the buttons to invert their gradient shader and for the box shadow to disappear on click (:active) to create the illusion of the button being pressed. Here are the styles to achieve this including the fallback styles for no gradients and no mulitple background support:

1.         &:hover,
2.         &:focus  {
3.                 color: #FFF;
4.         }
5.         &:active {
6.                 @include background($background-stripe,
7.                                           $background-shader-i,
8.                                           $background-default);
9.                 @include single-box-shadow(none);
10.                
11.                 .no-cssgradients & {
12.                         @include background($background-stripe,
13.                                                   $background-shader-f,
14.                                                   darken($background-default, 5%));
15.                 }
16.                 .no-multiplebgs & {
17.                         background-color: darken($background-default, 5%);
18.                         border-color: #FFF;
19.                 }
20.         }
21. }

Just a note about these styles. On the .no-cssgradients style we’re not inverting the gradient and instead using Sass’s darken function to make the background colour five per cent darker. I opted for this because to invert the gradient we’d need to load in a new background image for the inverted shader which would result in a split second delay in the image loading the first time you click a button. There are ways around this of course but this tutorial is aimed to focus on how Sass can make your life easier so we’re darkening the background colour instead.

With our basic styles we can now turn any anchor into a button by adding a .button class to it.

Buttons with icons

We’re now going to extend these button styles by adding the facility to give them icons and change their colour. Here’s some examples:

Firstly we create a sprite containing the icons. The sprite is split into 40px segments as we declared earlier in our variables. This sprite only has eight icons but we can easily add more by appending them to the bottom:

Here’s an example of the markup for a button with an icon:

• View source
• Copy code

1. <a class="button twitter" href="http://twitter.com/ryanhavoc">Follow on Twitter</a>

And the specific style for this button will be:

1. .twitter { @include button(2, #82BFC5); }

The sprite function

We can create a function in Sass to calculate the position of the sprite and return the necessary background layer for our multiple background. We work out the coordinates by multiplying the sprite division of 40px by the position parameter passed which we then offset by one.

• View source
• Copy code

1. @function sprite($position) {
2.         $coordinates: $sprite-division * ($position - 1);
3.         @return url(../images/site/button-sprite.png) 6px (0 - $coordinates) no-repeat;

The mixin

The mixin we’re about to add simply overrides some of the styles we’ve previously set:

1. @mixin button($position: false, $color: $background-default) {
2.  
3.         @if $position != false {
4.                
5.                 @include background(sprite($position),
6.                                           $background-divider,
7.                                           $background-stripe,
8.                                           $background-shader,
9.                                           $color);
10.                
11.                 padding-left: 60px;
12.  
13.  
14.                 //more styles to go here

The mixin accepts two parameters, the position of the icon in the sprite, eg two for the second icon and an overriding colour, eg #82BFC5. If no colour parameter is passed, the default colour is used (#D5D5D5). This allows us to have regular grey buttons with icons.

An overriding multiple background is applied to our button which includes the sprite and an additional image for the divider line you can see in the examples. We also add some additional left padding to the button.

As with the styles for the regular button we need to override the fallback styles for no CSS gradients and no multiple background support:

1.                 .no-cssgradients & {
2.                         @include background(sprite($position),
3.                                                   $background-divider,
4.                                                   $background-stripe,
5.                                                   $background-shader-f,
6.                                                   $color);
7.                 }
8.                 .no-multiplebgs & {
9.                         background: $color sprite($position);
10.                         padding-left: 45px;
11.                 }
12.                
13.                 &:active {
14.                         @include background(sprite($position),
15.                                                   $background-divider,
16.                                                   $background-stripe,
17.                                                   $background-shader-i,
18.                                                   $color);
19.                        
20.                         .no-cssgradients & {
21.                                 @include background(sprite($position),
22.                                                           $background-divider,
23.                                                           $background-stripe,
24.                                                           $background-shader-f,
25.                                                           darken($color, 5%));
26.                         }
27.                         .no-multiplebgs & {
28.                                 background: darken($color, 10%) sprite($position);
29.                                 padding-left: 45px;
30.                         }
31.                 }      
32.         }
33. }

Conclusion

And thats it. Lots of multiple background styles but with it all bundled into a mixin styling new buttons is easy:

1. .facebook    { @include button(1, #507291); }
2. .twitter     { @include button(2, #82BFC5); }
3. .flickr      { @include button(3, #4287DB); }
4. .dribbble    { @include button(4, #F16197); }
5. .favourite   { @include button(8, #EDE126); }
6. .add-user    { @include button(5); }
7. .upload-file { @include button(6); }
8. .delete      { @include button(7); }

Powerful New CSS Techniques and Tools

he hard work of front-end designers never ceases to amaze us. Over the last months, we’ve seen Web designers creating and presenting a plethora of truly remarkable CSS techniques and tools. We have collected, analyzed, curated and feature latest useful resources for your convenience, so you can use them right away or save them for future reference.
Please don’t hesitate to comment on this post and let us know how exactly you are using them in your workflow. However, please avoid link dropping, but share your insights and your experience instead. Also, notice that some techniques are not only CSS-based, but use HTML5, JavaScript, or JavaScript-libraries as well. Thanks to all featured designers and developers for inspiring, hard work.

CSS Techniques

Rotational Sliders
Eric Meyer shares six of his animated transforms that are capable of sliding around to a particular extent with non-centered transform origins.

Generating Organic Randomness with Prime Numbers and CSS
At first, you may be wondering why the heck is Alex Walker talking about cicada’s and Web design. Once taking a closer look, a sort of connection between the two evolves and a ‘cicada principle’ is born.

CSS3 3D Hologram
Being inspired by holographic effects that can be achieved with HTML/CSS, Hakim El Hattab has developed his own 3D box which alters perspective depending on device orientation. Note that this requires a webkit browser and has only been tested on iPhone. Also make sure to visit more of Hakim’s CSS/HTML5 experiments.

Checkerboard, striped & other background patterns with CSS3 gradients
You’re probably familiar with CSS3 gradients by now, including the closer to the standard Mozilla syntax and the verbose Webkit one. I assume you know how to add multiple color stops, make your gradients angled or create radial gradients. What you might not be aware of, is that CSS3 gradients can be used to create many kinds of commonly needed patterns, including checkered patterns, stripes and more. Also, check out Lea’s CSS3 Patterns Gallery

CSS3 Keyboard
Click in the box and start typing on your computer’s keyboard. Cleverly developed by Dustin Cartwright and Dustin Hoffman. You’ve got to respect the amount of time and effort which went into producing this demo.

CSS3 Progress Bars
A couple of nice progress bars created by Chris Coyier that use no images — just CSS3 fancies. In browsers that do not support CSS3, these progress bars will look more simplified.

Hover on “Everything But”
A tutorial by Chris Coyier which shows us how easy adding a hover state to an element can be. In this case, the hover state is applied to everything but the element actually being hovered over.

Creating a Sphere With 3D CSS
With CSS3’s 3D trans­forms it’s possible to cre­ate a sphere-like object, albeit with many elements. Paul Hayes shares his version of a 3D CSS sphere (works in the latest Safari and iOS) and provides us with the coding needed.

CSS3 Planetarium
This demo highlights leading edge CSS3 and HTML5 features that Mozilla Firefox and the open web community push into modern Web browsers.

Natural Object-Rotation with CSS3 3D
A tutorial by Dirk Weber that teaches us how to build a 3D packshot in HTML and CSS by applying some CSS 3D-transforms. By adding some Javascript, we can make the object freely rotatable in 3D space. And as we will enhance our Javascript with some touch-interactivity, the packshot will also work nicely in Safari for iOS-platforms like iPhone or iPad.

CSS Drop-Shadows Without Images
Nicolas Gallagher shares presents his CSS drop-shadows without any images.

Incrementable Length Values in Text Fields
Lea Verou explains how to implement a feature that allows you to increment or decrement a value by pressing the up and down keyboard arrows when the caret is over it.

Beveled Corners & Negative Border-Radius with CSS3 Gradients
Beveled corners and simulate negative border radius without images, by utilizing CSS3 gradients once again — Lea Verou is amazed by how many CSS problems can be solved with gradients alone. Works on Firefox 3.6+, latest Webkit Nightly builds, Chrome and Opera 11.10.

Flexible Height Vertical Centering With CSS, Beyond IE7
Roger Johansson shares his thoughts on how to improve centering an element both horizontally and vertically with the display:table alternative.

Coding up a semantic, lean timeline
This article tells you how to create a semantic lean timeline.

CSS Border Tricks with Collapsed Boxes
These border tricks tricks will help you to display content outside of the content box, over borders, without the use of images, CSS3 gradients or extraneous markup.

Quick Tip: Nonintrusive CSS Text Gradients
Jeffrey Way shows some ways for creating pure CSS text-gradients with a bit of trickery. The key is to use a mix of attribute selectors, webkit-specific properties, and custom HTML attributes.

Bokeh with CSS3 Gradients
Divya Manian uses the CSS gradients and shows the results of his work on a project which uses a bunch of circles as a decorative background.

Different Transitions for Hover On / Hover Off
Chris Coyier tries to acchieve “different transitions on mouseenter and mouseleave”, but he isn’t using JavaScript here; we’re talking about CSS :hover state and CSS3 transitions. Hover on, some CSS property animates itself to a new value; hover off, a different CSS property animates.

Styling children based on their number, with CSS3
Lea Verou shows how to style children of elements based on their total number (that is, their total count).

CSS Modal
Using CSS3 tech­niques a modal box can be cre­ated with­out JavaScript or images. With a bit of ani­ma­tion, tran­si­tion and trans­form, it can be made that lit­tle bit more special. The problem: when you hit the “Back”-button after the modal has popped up and was closed, you’ll see the modal again. But maybe you’ll come with a way to fix it?

Rotating Feature Boxes
The full effect of it (with transition animations) will work in newish WebKit and Opera browsers and Firefox 4 (in real beta as of today). Any other browser will rotate the blocks without transition animation.

When and How to Visually Hide Content
Visually hiding content on a web page, usually textual content, is at times a viable technique in web design and development. It can be done for several reasons, most importantly, to improve the experience of a screen reader user. Other reasons include improving readability when CSS cannot be rendered, and improving search engine optimization (SEO). Other exaples about using the Visually Hide Content are shown in this article.

How to avoid common CSS3 mistakes
The new features of CSS3 bring with them complexity and new things for us to screw up. This article will help keep us in check as we start using these new features.

Introduction to CSS Escape Sequences
Escape sequences are useful because they allow style sheet authors to represent characters that would normally be ignored or interpreted differently by traditional CSS parsing rules. In this article Mert Tol shows how to use these sequences.

Wrapping Long URLs and Text Content with CSS
To wrap long URLs, strings of text, and other content, you can just apply a carefully crafted chunk of CSS code to any block-level element .

CSS Generated Content
Trevor Davis shows on some examples what you can do with the CSS generated content.

Controlling width with CSS3 box-sizing
An incredibly useful CSS3 feature when you’re creating columns with floats is box-sizing. It lets you choose which box sizing model to use – whether or not an element’s width and height include padding and border or not. It makes it much easier to define flexible widths where you also need padding and/or borders. A typical example is laying out forms, which can be a real pain when you want flexible widths.

Revisit Hardboiled CSS3 Media Queries
Shi Chuan takes a close look at boilerplates and helps us understand the math we need to tweak the width required for a good resolution to any particular device.
iPad Orientation CSS
Keith Chu revises Cloud Four’s work and finds a way to alleviate extra HTTP requests, not iPad-specific as well as lack of reusability. In this post, he shares with us his proposed revision to the iPad orientation CSS.
CSS Value Lengths, Times, Frequencies and Angles
In this article the authors go over all the math type units that can be applied as property values in CSS.

CSS Tools

320 and up
‘320 and Up’ prevents mobile devices from downloading desktop assets by using a tiny screen’s stylesheet as its starting point. Try this page at different window sizes and on different devices to see it in action.

CSS3 Generator – By Eric Hoffman and Peter Funk
This generator was proudly designed by Eric Hoffman and coded by Peter Funk.

CSS Pattern Generator
Patternify is a simple pattern generator that enables you to not only build your patterns online, but export them with the base64 code, so you don’t even need an image file anymore. Just include the code in your CSS and you’re ready to go. Created by Sacha Greif.

Griddle.it – Web page alignment made easy
A clean and simple way to help align your layouts. No complex grid frameworks necessary.Just put your dimensions after our URL to get a background guide image to work with in your browser. Grids are created on the fly, so any combination should work.

The 1140px Grid: Fluid down to mobile
The 1140 grid fits perfectly into a 1280 monitor. On smaller monitors it becomes fluid and adapts to the width of the browser.

Fighting the @font-face FOUT
Paul Irish’s 2011 update for the @font-face FOUT issue. Good news: Firefox 4 has no FOUT, IE9 does, and FOUT-b-GONE will help you out with that.

CSS3 Github Buttons
CSS3 Buttons is a simple framework for creating good-looking GitHub style button links.

CSS3 Facebook Buttons
CSS3 Facebook Buttons

Minimee
On the Internets, speed is everything – which means that when it comes to CSS & Javascript files, size DOES matter. By automatically minimizing and combining your files for you, Minimee takes the heavy lifting out of keeping your files svelte.

Live.js
one script closer to designing in the browser.

Bootstrap.less
Bootstrap is a pack of mixins and variables to be used in conjunction with LESS, a CSS preprocessor for faster and easier web development.

Animatable: Create CSS3 animations and advertising for Webkit browsers
Animatable is the easy way to create CSS3 animations and advertising for Webkit browsers on any platform or device — including Android, BlackBerry, iOS and WebOS.

Ceaser: CSS Easing Animation Tool
Ceaser is an CSS Easing Animation Tool.

Shower
This is provided without warranty, guarantee, or much in the way of explanation.

CSS Pivot
This tool allows you to add CSS styles to any website, and share (and adjust) the result with a short link.

Roots WordPress Theme
Roots is a starting WordPress theme made for developers that’s based on HTML5 Boilerplate, Blueprint CSS (or 960.gs) and Starkers that will help you rapidly create brochure sites and blogs.

Free Online CSS3 Typeset Style Generator
An advanced generator of CSS buttons; the tools allows you to define font and color variations, shadows, borders, corners etc.

CSSPrefixer
You hate writing vendor prefixes for all browsers? The CSSPrefixer does it for you.

Type-a-file
This tool will give your Web typography a head start. Type-a-file is essentially a small collection of CSS stylesheets with heavy focus on rich and beautiful typography. The tool uses Typekit to preview the stylesheets, so if you have a Typekit-account, you could purchase the font license and have exact the same typography on your website.

A Best Practice Baseline for Your Mobile Web App
Mobile Boilerplate is your trusted template made custom for creating rich and performant mobile web apps. You get cross-browser consistency among A-grade smartphones, and fallback support for legacy Blackberry, Symbian, and IE Mobile.

Code Beautifier
This tool allows you to format, clean up and optimize your stylesheets.

Markup Generator
Markup Generator is a simple tool created for HTML/CSS coders that are tired of writing boring frame code at the very beginning of slicing work.

CSS Sprite Generator
This tool allows you to create and maintain your CSS sprites.

Respond
A fast & lightweight polyfill for min/max-width CSS3 Media Queries (for IE 6-8, and more)
Adapt.js – Adaptive CSS
Adapt.js simply checks the browser width, and serves only the CSS that is needed, when it is needed.
Firmin, a JavaScript animation library using CSS transforms and transitions
Firmin is a JavaScript animation library that uses CSS transforms and transitions to create smooth, hardware-accelerated animations.
Command-line CSS spriting
The author shows, how to create CSS sprites from the command line alone.

Last Click

Code Standards
This document contains normative guidelines for web applications built by the Interface Development practice of Isobar North America (previously Molecular). It is to be readily available to anyone who wishes to check the iterative progress of our best practices.

How to Manage CSS Explosion
A very useful thread on StackOverflow on how to keep CSS files organized and clean.