Some things can be extremely time consuming when it comes to the development process. It helps, especially when you are paid by the hour, to streamline as many processes as you can without sacrificing quality. That is where these CSS3 generators come in handy. 

Below you will find a list of very useful generators that can speed up your development process! Each one of the generators that I have included in this list are tools that I’ve actually used in some of my projects so they are tried and true, not just ones I found on the Internet somewhere. The criteria I used to choose the best tools to include in this list were the ones that are the easiest to use, and the fastest to implement into your design.

Gradient Generator

This is an awesome generator for gradients, extremely easy to use and lots of different options.

CSS3.me

CSS3.me is a great tool to generate code for border-radius, box shadow and opacity for an element. A live preview gives you a good idea of what your finished product will look like!

CSS3 Layout Generator

This is a good tool to help you generate a layout. This has many useful options, including automatically using the Eric Meyer Reset, keeping the footer at the bottom of the browser window and much more. Give it a try!

CSS3 Button Generator

This is a great tool to generate awesome looking buttons. With this tool you can set any option that you could think of. From custom gradients to multiple text shadows, you’ll have some great looking buttons!

Subtle Patterns

This isn’t exactly a generator, but Subtle Patterns is the best place to get perfectly patterned backgrounds for your next project. Subtle Patterns has tons of designs that work perfectly together and are the perfect touch to give your page life. There’s over 250 patterns to choose from, both light and dark colors.

Pattern Cooler

This is a great generator to make totally unique backgrounds. You can make them as bold or as subtle as you’d like. Pattern Cooler can give your project the perfect unique look.

These tools can speed up your design process and give you amazing looking results. If you have additional suggestions, post the link in the comment and I’ll take a look! Enjoy!

...

This is a cool CSS effect to use with links. We can create a link that will change to two different colors when you hover over it.

In order to achieve this effect, we use span tags in the links and our CSS will look like this:

a.twocolors span.red { color: #000; text-decoration: none; } a.twocolors:hover span.red { color: #FF0000; text-decoration: none; } a.twocolors span.blue { color: #000; text-decoration: none; } a.twocolors:hover span.blue { color: #0000FF; text-decoration: none; }

and then our HTML will look like this:

<a class="twocolors" href="#"> <span class="red">Hover</span><span class="blue">Here!</span> </a>

Our final effect can look like this:

DEMO

With this effect you can create links with all different colors on hover and you can use CSS3 transitions to build upon this effect even further! Ask any questions below!

...

Do you work on multiple sites at a time? Then no doubt you would love to improve your speed and your overall development workflow. Think of what it takes to set up WordPress the old school way:

Downloading the latest version. Extracting the downloaded zip file. Creating a new database. Creating wp-config.php file.

Developing WordPress sites has never been easier with WAMP and Simple WordPress Auto Installer.  The Auto Installer script is now available that allows you to add a WordPress install within the WampServer together with a database, all in one shot, thereby speeding up your local WordPress development.

To make this happen, you will need to download WampServer and the Simple WordPress Auto Installer, both of which are open source and available as free downloads. You will need to install the WampServer first and ensure that it is working. This is usually straight-forward and quick.

Upon downloading the Simple WordPress Auto Installer, you will notice 3 files: installer.php, license and readme.md. To install, simply drop a copy of the “installer.php” file into the root directory of WampServer designated as “www”.

When you open the “installer.php” file, you will see these lines of code:

array( 'label' => 'Latest version', 'url' => 'http://wordpress.org/latest.zip', 'description' => 'Download the latest stable English version' ), array( 'label' => 'Last nightly', 'url' => 'http://wordpress.org/nightly-builds/wordpress-latest.zip', 'description' => 'Download the latest beta version'

You can configure these settings to change the WordPress version as well as the build to your own preferences.

You can also add more languages by including an array like the one below:

array( 'label' => 'French', 'url' => 'http://fr.wordpress.org/wordpress-'.$last_v_doted.'-fr_FR.zip', 'description' => 'Download the latest stable French version' ),

Other global settings you can configure include the default username, database, password and CSS parameters.

Fire up your WampServer and navigate to the installer file we just uploaded using the link below:

http://localhost/installer.php

The Auto Installer will then allow you to configure your local site settings that include; the folder where you want WordPress to go, the database server (which by default should be localhost), the DB name, DB username and DB user password.  From here click `GO` and

the script will then download the latest copy of WordPress, extract the files to the directory you named and will create a new database.

Set your site’s name, username and password and you are ready to roll.

Whenever you need to start a new development project, you will simply fire up the installer using the above link and configure the settings for the new site as we have done. You will no longer need to download WordPress again, set up a database in phpMyAdmin or make any other configuration settings. Everything has been done for you.

...

Whether it is a list of products you are promoting, published ads or other elements on the sidebar, you will likely want to have these elements in view at all times even when scrolling. By using JQuery, you can make this possible.

To do this, use the code snippet below:

//keep element in view (function($) { $(document).ready( function() { var elementPosTop = $('#sidebar-ads').position().top; $(window).scroll(function() { var wintop = $(window).scrollTop(), docheight = $(document).height(), winheight = $(window).height(); //if top of element is in view if (wintop > elementPosTop) { //always in view $('#sidebar-ads').css({ "position":"fixed", "top":"10px" }); } else { //reset back to normal viewing $('#sidebar-ads').css({ "position":"inherit" }); } }); }); })(jQuery);

The above code can also be made into a JQuery plug-in and used on WordPress sites.

Here is the plug-in version of the above code:

/** * jQuery keep element in view plugin. * * @author David Gitonga * @copyright Copyright (c) 2012 DeveloperDrive * @license Licensed * @link http://developerdrive.com * @since Version 1.0 * */ (function($) { $.fn.keepElementInView = function() { var elemPosTop = this.position().top; $(window).scroll(function()...

In part one of Baking a New Site With a Sprinkle of SEO, we covered some of the more important things a developer can do to help their sites find their way into the top positions of the search engines. This week, we look at more advanced steps you can take to really help catapult them up to the top.

Advanced: canonical tags

You may have heard about Google’s recent algorithm updates such as Panda and Penguin. Well, one of things Panda concerned its self about was not how much sugar cane it was getting, but rather duplicated content. When I say ‘duplicated content’ I mean content that gets copied across internal pages. A typical example can commonly be found on e-commerce sites. Let’s say you have a product which we’ll call aeroplane model (I am an aviation obsessive) which sits on the URL www.i-really-like-planes.com/aeroplane-model. Now like all good e-commerce sites, I can choose to filter, pick colour, size and all those good things. But each time I do, a very small amount of content changes on the page, but I get completely different URLs:

Original: www.i-really-like-planes.com/aeroplane-model Colour: www.i-really-like-planes.com/aeroplane-model&colour=red Colour and size: www.i-really-like-planes.com/aeroplane-model&colour=red&size=large

Essentially, all three pages (but in a typical case there will be many more, I’ve seen up to 200 in some instances!) are all duplicated. Well this confuses dear Google and they’d prefer you to specify a single URL to display to users in their results pages.

We solve this problem by specifying the canonical tag. This is a <link> element which sits in the <head> tag on that particular page. For the example above, the following code would sit on each of the above pages:

<link rel=”canonical” href=”http:// www.i-really-like-planes.com/aeroplane-model” />

If you can provide the ability to add canonical tags across a website in this way, you will greatly improve the effectiveness of the site as a whole by dramatically reducing issues with duplicate content. However, care must be taken to implement these carefully. Each canonical must be specific to each group of pages, so don’t go putting the same one on every page of the site – that will cause more problems than it will solve them!

Advanced: Next and Prev

Following nicely on from the canonical point above, we go onto another canonical element that deals with another source of SEO issues – pagination. This tag enables you to consolidate paginated sections across a site whether they are a series of posts or a category of products. This indicates to search engines that the pages are interconnected via a contextual relationship. Let’s check out an example:

An article series on your site may have a story divided into three parts, all linked via ‘next’ and ‘previous’ buttons. The URLs could be:

www.example.com/headline&page=1 www.example.com/headline&page=2 www.example.com/headline&page=3

On the first page you would include the following code in the <head> section:

<link rel="next" href="http:// www.example.com/headline&page=2" />

On the second page, you would implement this code onto the <head> section:

<link rel="prev" href=" www.example.com/headline&page=2" /> <link rel="next" href=" www.example.com/headline&page=3" />

And finally, on page 3 you would implement this:

<link rel="prev" href="http:// www.example.com/headline&page=2" />

Looking at the code above, you can see how this indicates the inter-page relationship to search engines. However, if you have a ‘view all’ option then there’s no need to implement the above solution. Google will endeavour to show the ‘view all’ page as the preferred page instead.

Advanced: Redirects

Ah yes, redirects, the bread and butter of any SEO’s day to day. You’re probably well aware of the types of redirects (301, 302 etc) so I won’t delve into that (ask in the comments if you’re not sure), but making sure you have the ability to implement 301 redirects and 302 redirects will be very useful for your website. You may need to implement a 301 redirect when:

You move to a new website You change the URLs of your site You delete pages on your site

301 redirects are excellent for maintaining the integrity of a site. Imagine if you will a website with lots of links, but the owner of the site hasn’t put in place any redirects or changed the navigational destinations. Lots of links across the site will result in a 404 error leaving a dead end for both users and search engines alike. To solve the issue, you would implement a 301 redirect to the correct URL (and in the case of navigation, fix it!). From an SEO perspective, this is also good for fixing incorrect links coming into the site from other websites, redirecting deleted pages that still carry weight which you can then direct to another relevant page. David Gitonga did a great post on redirects using Htaccess which I recommend. On a final note, I’ve always found it a challenge finding a suitable solution implementing redirects on a Windows server, so it’s worth bearing that in mind. Additionally, you want to check anything that should be a permanent redirect (via 301) isn’t actually redirecting via 302 (temporary redirect) instead as this may impact how search engines view the page. A great tool for checking these redirects can be found here.

Advanced: Sitemaps

The XML sitemap on your site (and if you don’t have one, I recommend you get one) is the road map to your content. Having one of these in place will help Google find and index your pages to enable them to show up in their search results. It’s not essential, no, but recommended. Google may well find all your pages just through the navigation and external links, but why rely on that when you can physically tell them what you want them to look at and where they can find it.

Besides having a sitemap.xml I recommend you also try to do the following:

Make sure the sitemap.xml can be easily edited If you have an automatically generated one, ensure you can make exceptions to avoid getting stuff listed that you don’t want in the sitemap.xml (like development pages, duplicate pages and pages with unfriendly URLs if you’ve implemented friendly ones) Check that your sitemap.xml removes the pages as well as adds them if it is automated Check with your robots.txt that no URLs in the sitemap.xml clash with them. In other words, you’re not telling search engines not to index certain pages in the robots.txt and then telling them to in the sitemap.xml!

As with web development, there are many many facets, tactics and techniques that can be implemented to improve rankings and general site visibility. I hope to be back soon with more, but I’d love to hear your feedback and what else you may specifically be interested in learning more about in the comments below!

...

It doesn’t matter whether you’re an SEO, a developer, designer, information architect or any other myriad of digital based roles, we all want the same outcome; to do the best we possibly can for our websites.

As an SEO myself, I’m interested in growing the performance of my client’s website in organic search. This is not something that I (or any other SEO for that matter!) can do single handed. We also rely on the skill of the web developer to implement and carry out our recommendations and technical requests.

With this in mind I wanted to introduce some comprehensive tips that you can inject into your projects that will improve the performance of your websites allowing them, their SEO and you as their developer maximum control and ultimately search engine performance.

On page: title tags

Fundamentally the single most important part of a page with regards to SEO is the title tag. You want to make sure you have the following covered off for maximum impact:

Each page’s title tag is editable There are no dependencies between the title, the H1 or the URL of the page Every title is unique and relevant to the page Try and keep the titles under about 65 characters which will ensure the whole thing is clearly picked up in the search result pages and seen by users

On page: meta descriptions

Although these little chaps don’t carry massive weight in terms of achieving rankings, they are still relevant:

Make sure each page has an editable meta description Each one is unique For extra punch, encourage the addition of USPs and a powerful, persuasive description. For example “Brand new range of aeroplane models from small to large now with FREE delivery and up to 20% off retail price! The best price, highest quality plane kits online!” Keep it within the 170 characters to get the whole thing showing in the results pages

On page: dependencies

Depending on the CMS being used or general technical specifications of the site in question, sometimes there are dependencies that creep in. Most commonly, these are between the page title tag and the page H1 but I’ve also seen them between the title, the H1 and the page URL too. Although you might think it would be logical to have all three elements interconnected because the context of the page content is only about one thing, it doesn’t allow full control. Try to allow each of these elements to be independently changeable to really help maximise the search engine friendliness of your site.

On page: URLs

I’m sure you’ve heard about friendly URLs in the past, in fact Jeff mentioned them back in January. In their ‘raw’ format, many CMS’ will render page addresses as a series of variables and characters logical to the platform. Unfortunately a page called www.example.com/?id=1234?ads_9c.php doesn’t have quite the same user friendly ring to it as www.example.com/our-services/! So adding in those friendly URL rewrites is not only great for SEO benefit, but users will much prefer them to.

Speed: Google Analytics

No, I’m not going to tell you that implementing Google Analytics will speed the site up, well, kind of, there are two variations of GA; the old urchin style and the new a-synchronous. Double check the site has the new version of the code on the site. It’s much more load time friendly than the old urchin code and will help keep page load times down.

Speed: Sprites and Goblins

Just sprites actually. Where possible, combining CSS imagery into a single file and using CSS positioning can really help speed things up on a page. Google uses page loading time as a factor in deciding how to rank a page (a bit like you going to a restaurant, ordering and waiting 2 hours for it to arrive on the table, you probably wouldn’t recommend it to your friends) so we need to think about this. CSS sprites can really help reduce the number of HTTP requests a browser makes when requesting files from the server. This will help keep load times down and hopefully aid those rankings!

Speed: Image optimisation

Ever been in the situation where you or another person creates a new page, puts an awesome photo up on the site, you visit it and it takes over 5 seconds to load as you watch the image render line by line? Yep. Me too. Not only should you optimise your images (Photoshop has an awesome built capability for this but there are tools I like to use on the web that effectively do the same thing) before uploading but think about having a tool within the site that automatically reduces images that are too big (I like this image optimiser for WordPress). This is great if you have users on the site that aren’t immediately aware of the problems that can be caused from uploading a 2,500 pixel width image into a 400 pixel space!

Check back next week for part 2 where we tackle some more advanced techniques.

...

Many of the emerging techniques in CSS3 are particularly well suited to interactive Web page elements such as buttons. In this tutorial we will explore using CSS3 properties including transforms, transitions, box shadows, backgrounds and rounded corners. We will be working with an anchor element, animating the button when it is in hover state. Most modern browsers support the bulk of the properties we will be using, but users with non-supporting browsers will still be able to see and interact with the button.

This is how the button will look in its initial and hover states, with a moment during the transition captured in-between:

Create Your Page and Link

Let’s start by creating an HTML5 page as follows:

<!DOCTYPE html> <html> <head> <style type="text/css"> </style> </head> <body> </body> </html>

In the body section, insert your anchor element inside a container element as follows:

<div id="container"> <a class="anim" href="index.html"> <img src="note.png" alt="link"/> <span>Music</span> </a> </div>

The anchor contains an image and some text in a span. We include a class name for the anchor, which we will use to identify it and its contained elements. The container element is really just there for the purposes of demonstration.

We will be using four images for the link button, so download them now, or use your own if you prefer. This image appears within the button and will be rotating on hover:

This is the main background image for the button:

These are alpha transparent gradient images we will display on top of the main background image:

Insert General CSS Properties

Before we get to work with animated properties, let’s get the basic CSS properties for the button sorted. In the style section of your page head, add the following to style the container element:

/*basic properties*/ #container { padding:20px; background:#FFCC00; width:300px; }

The color and width have been chosen to suit the images we are using, but feel free to alter them. Next style the link with basic properties:

/*link*/ a.anim { margin:auto; display: block; background:#FF0000; width: 200px; height:60px; text-align:center; text-decoration:none; color:#000000; font-weight:bold; font-family:sans-serif; font-size:large; border:2px solid #FFFFFF; }

These properties are all pretty straightforward – the dimensions are again chosen to suit the background image we are working with so you will need to alter them if you are using a different image. Let’s add another couple of lines in this section before we move on. With CSS3 we can use rounded corners, so before the closing bracket for the “a.anim” section:

/*rounded corners*/ border-radius:15px; -moz-border-radius:15px;

The border radius specifies the extent to which the corners should be rounded. The vendor prefix version is for older versions of Firefox. After this section, position the image within the link as follows:

/*position img*/ a.anim img { margin-top:5px; }

Now set the basic styling for the text inside the link:

/*link text*/ a.anim...