Everyone who is a regular Smashing Magazine reader will know that we have a traditional habit of regularly researching the latest resources, tools and services out there on the Web, as productivity is a crucial asset of professional Web designers and developers. We could, and should, all integrate workflow optimization into our working practices.

Perhaps we should warn you upfront for the long compilation, but what can we say — there are so many excellent tools out there which deserve attention of the community, yet unfortunately remain obscure way too often. We love all the designers and developers out there for releasing and producing useful, valuable resources for all of us to use! We, for one, surely sincerely appreciate it in the name of the Web design community. Whether you like it or not, here are some of the most useful coding and workflow tools released recently.

Feel free to comment to this post and let us know how exactly you use these tools in your workflow and also share other tools you’ve found with others who may also find them useful and still haven’t run across them. Please do avoid link dropping and share your insights and your experience instead.

Useful Coding and Workflow Tools
Stripe: Easy Credit-Card Processing For Online StoresA website owner has many options for accepting credit card payments. Most of those options have a verification process that is quite slow; some have APIs and interfaces that are more or less robust than others; and some solutions are much easier to use than others. With Stripe, you can forget the tedious experience of the PayPal API and other mysterious programming environments. Unfortunately, Stripe is currently available only in the US.

The Web Developer’s WonderlandWeb development comes with truly enjoyable, creative tasks and some mundane, boring ones. Probably the most frustrating task is having to reload the browser page during development or debugging every time you make a change to the page. Livereload is a desktop app that monitors changes in your file system. As soon as you save a file, the file is preprocessed as needed, and the browser is refreshed. Also, every time you change a CSS file or image, the browser is updated instantly without you having to reload the page. The tool supports CoffeeScript, SASS/SCSS, LESS, Stylus, HAML and Jade, and it ships with all of them included. Currently available only for Mac.

Ender: The End Of Monolithic JavaScript LibrariesEnder allows you to search, install, manage and compile front-end JavaScript packages and their dependencies. Essentially, it’s a command-line tool that allows you to combine and mix all of the popular and small JavaScript libraries out there to create your own personal development library. If one library you use goes bad or is abandoned, Ender will help you quickly replace it with another. And if you need a particular version of a package, the tool can help you out as well. The release page contains detailed documentation, a user guide and some video tutorials. No more wasted bandwidth!

Open-Source Exchange Rates and Currency ConversionSo, you’d like your customers to be able to purchase your products in various currencies, but how exactly do you build this functionality into your product? Finding a free and reliable API for developers to access the rates data is darn hard. Joss Crowcroft has created an Open Source Exchange Rates API, which provides up-to-date, flexible and portable currency-conversion data that can be used in any application, framework or language (not just JavaScript). It has no access fees, no rate limits, no nasty XML: just free, hourly updated exchange rates in JSON. Even better: Joss has also built money.js, a JavaScript currency conversion library that can be easily integrated in any website. A demo playground and detailed documentation are provided on the website, and the source code is available on GitHub.

Easier Number and Currency FormattingThis simple, tiny JavaScript library will solve your currency and numbers-related formatting hassles, and it even includes optional Excel-style column rendering to line up symbols and decimals. It will make all of your numbers and currencies look much more uniform and professional than they would if left to many content creators.

Tilt Firefox Extension: DOM Inspection In 3-DHow much time do you spend traversing the DOM in Firebug, exploring the relationships between nodes, analyzing the structure of code and trying to manipulate it with nasty (or not so nasty) JavaScript? Well, perhaps you’d like to try a different approach to DOM inspection for a change. Mozilla’s new tool, Tilt Firefox Extension lets you visualize the DOM tree of any Web page in 3-D. Because the DOM is essentially a tree-like representation of a document, the developers of the tool have decided to layer nodes based on the nesting in a tree, creating stacks of elements, each with a corresponding depth, and textured according to the Web page being rendered.

Mou – Markdown editor for web developers, on Mac OS XWhen current available Markdown editors are almost all for general writers, Mou is different: It’s for web developers. Syntax highlighting, live preview, fullscreen mode, auto save, powerful actions, auto pair, incremental search, custom themes, HTML export, enhanced CJK characters support. It’s exactly the app you want.

Creating Buzz With Launch EffectThe one-page theme lets visitors sign up using their email. Upon signing up, the page generates a special URL for them to share with their friends, so that you can track your most active promoters and reward them for spreading the word. What more do you need from a pre-launch page? This is a good tool to bookmark for your next creative breakthrough or start-up idea.

A Better Responsive GridThe Golden Grid System uses the concept of “folding” grid columns into one another, based on the browser’s size. So, a 16-column grid that works great in desktop browsers would fold down to an 8-column grid for tablets, and a 4-column grid for mobile devices. It can handle screen sizes ranging anywhere from 240 pixels wide all the way up to 2560 pixels. The columns themselves are not the only things that are elastic either; while the column’s widths are based on screen size, the gutter widths adjust based on the page’s font size (specified in ems). The Golden Grid System comes with other features that make it perfectly suited to modern responsive Web design.

The Semantic Grid SystemCSS grid frameworks can make your life easier, but they’re not without their faults. Fortunately for us, modern techniques offer a new approach to constructing page layouts. But before getting to the solution, we must first understand the three seemingly insurmountable flaws currently affecting CSS grids.

Bootstrap Kick-Start Development ToolkitBootstrap is a toolkit that includes the base CSS and HTML for typography, tables, grids, navigation, error messages, modal boxes, buttons and forms. It’s built with the LESS framework. It comes with a standard 940-pixel grid (i.e. 960.gs without the side margins), or you can create your own. Bootstrap allows you to create fixed or fluid layouts, and it comes with many elements that can be used as is or restyled to fit your website. Of course, the toolkit is free to use.

Colour BookmarkDrag the Colour Bookmark link to your toolbar to find out the colour palette of the website you’re currently on. Then simply: copy, paste and use the colours you choose.

Leaflet: Open-Source Interactive Maps with JavaScriptThe library offers a variety of map layers, including tiles, markers, pop-ups, image overlays and GeoJSON. It supports panning on both mobile and desktop browsers, double-tap zoom on mobile browsers (plus multi-touch zoom on iOS) and more. On iOS, hardware acceleration is enabled, and Leaflet has a modular structure that lets you reduce the size of the library to make it even faster. The project is open source and available for further development and forking on GitHub.

Weinreweinre is a Web Inspector Remote that is essentially a debugger for web pages, like FireBug (for FireFox) and Web Inspector (for WebKit-based browsers), except it’s designed to work remotely, and in particular, to allow you debug web pages on a mobile device such as a phone.

Aardwolf: Remote JavaScript DebuggerMobile browsers are becoming more powerful day-by-day and you can do almost everything you do on your desktop browser. One of the major concerns for the developers is the lack of developer tools. The reasons are quite obvious — real estate needed to show the debugger, non-developer friendly environment. The solution to this problem is remote debugging. You can use JSConsole for this purpose but when it comes to JavaScript debugging, Aardwolf is a better choice. Aardwolf is a JavaScript debugger for iPhone / Android / WindowsPhone 7 / BlackBerry OS 6+. (via Varun Kumar)

IE VmsMicrosoft provides virtual machine disk images to facilitate website testing in multiple versions of IE, regardless of the host operating system. But setting these virtual machines up without Microsoft’s VirtualPC can be extremely difficult. The ievms scripts aim to facilitate that process using VirtualBox on Linux or OS X. With a single command, you can have IE7, IE8 and IE9 running in separate virtual machines.

WhatFontThe tool allows you to easily get CSS typography details about the text you are hovering on.

WordPress TextMate BundleThe WordPress TextMate Bundle is a TextMate bundle built with the sole purpose of reducing the amount of time spent digging around the WordPress core to look up the little things that we work with every day. The plugin features auto-completion of WordPress functions, snippets for common sections of code, and templates for WordPress components. We even[…]

 



 





If you’re into WordPress development, you can’t ignore hooks for long before you have to delve into them head on. Modifying WordPress core files is a big no-no, so whenever you want to change existing functionality or create new functionality, you will have to turn to hooks.

In this article, I would like to dispel some of the confusion around hooks, because not only are they the way to code in WordPress, but they also teach us a great design pattern for development in general. Explaining this in depth will take a bit of time, but bear with me: by the end, you’ll be able to jumble hooks around like a pro.

Why Hooks Exist
I think the most important step in grasping hooks is to understand the need for them. Let’s create a version of a WordPress function that already exists, and then evolve it a bit using the “hooks mindset.”

function get_excerpt($text, $length = 150) {
$excerpt = substr($text,$length)
return $excerpt;
}

This function takes two parameters: a string and the length at which we want to cut it. What happens if the user wants a 200-character excerpt instead of a 150-character one? They just modify the parameter when they use the function. No problem there.

If you use this function a lot, you will notice that the parameter for the text is usually the post’s content, and that you usually use 200 characters instead of the default 150. Wouldn’t it be nice if you could set up new defaults, so that you didn’t have to add the same parameters over and over again? Also, what happens if you want to add some more custom text to the end of the excerpt?

These are the kinds of problems that hooks solve. Let’s take a quick look at how.

function get_excerpt($text, $length = 150) {

$length = apply_filters("excerpt_length", $length);

$excerpt = substr($text,$length)
return $excerpt;
}

As you can see, the default excerpt length is still 150, but we’ve also applied some filters to it. A filter allows you to write a function that modifies the value of something — in this case, the excerpt’s length. The name (or tag) of this filter is excerpt_length, and if no functions are attached to it, then its value will remain 150. Let’s see how we can now use this to modify the default value.

function get_excerpt($text, $length = 150) {

$length = apply_filters("excerpt_length");

$excerpt = substr($text,$length)
return $excerpt;
}

function modify_excerpt_length() {
return 200;
}

add_filter("excerpt_length", "modify_excerpt_length");

First, we have defined a function that does nothing but return a number. At this point, nothing is using the function, so let’s tell WordPress that we want to hook this into the excerpt_length filter.

We’ve successfully changed the default excerpt length in WordPress, without touching the original function and without even having to write a custom excerpt function. This will be extremely useful, because if you always want excerpts that are 200 characters long, just add this as a filter and then you won’t have to specify it every time.

Suppose you want to tack on some more text, like “Read on,” to the end of the excerpt. We could modify our original function to work with a hook and then tie a function to that hook, like so:

function get_excerpt($text, $length = 150) {

$length = apply_filters("excerpt_length");

$excerpt = substr($text,$length)
return apply_filters("excerpt_content", $excerpt);
}

function modify_excerpt_content($excerpt) {
return $excerpt . "Read on…";
}
add_filter("excerpt_content", "modify_excerpt_content");

This hook is placed at the end of the function and allows us to modify its end result. This time, we’ve also passed the output that the function would normally produce as a parameter to our hook. The function that we tie to this hook will receive this parameter.

All we are doing in our function is taking the original contents of $excerpt and appending our “Read on” text to the end. But if we choose, we could also return the text “Click the title to read this article,” which would replace the whole excerpt.

While our example is a bit redundant, since WordPress already has a better function, hopefully you’ve gotten to grips with the thinking behind hooks. Let’s look more in depth at what goes on with filters, actions, priorities, arguments and the other yummy options available.

Filters And Actions
Filters and actions are two types of hooks. As you saw in the previous section, a filter modifies the value of something. An action, rather than modifying something, calls another function to run beside it.

A commonly used action hook is wp_head. Let’s see how this works. You may have noticed a function at the bottom of your website’s head section named wp_head(). Diving into the code of this function, you can see that it contains a call to do_action(). This is similar to apply_filters(); it means to run all of the functions that are tied to the wp_head tag.

Let’s put a copyright meta tag on top of each post’s page to test how this works.

add_action("wp_head", "my_copyright_meta");

function my_copyright_meta() {
if(is_singular()){
echo "";
}
}

The Workflow Of Using Hooks
While hooks are better documented nowadays, they have been neglected a bit until recently, understandably so. You can find some good pointers in the Codex, but the best thing to use is Adam Brown’s hook reference, and/or look at the source code.

Say you want to add functionality to your blog that notifies authors when their work is published. To do this, you would need to do something when a post is published. So, let’s try to find a hook related to publishing.

Can we tell whether we need an action or a filter? Sure we can! When a post is published, do we want to modify its data or do a completely separate action? The answer is the latter, so we’ll need an action. Let’s go to the action reference on Adam Brown’s website, and search for “Publish.”

The first thing you’ll find is app_publish_post. Sounds good; let’s click on it. The details page doesn’t give us a lot of info (sometimes it does), so click on the “View hook in source” link next to your version of WordPress (preferably the most recent version) in the table. This website shows only a snippet of the file, and unfortunately the beginning of the documentation is cut off, so it’s difficult to tell if this is what we need. Click on “View complete file in SVN” to go to the complete file so that we can search for our hook.

In the file I am viewing, the hook can be found in the _publish_post_hook() function, which — according to the documentation above it — is a “hook to schedule pings and enclosures when a post is published,” so this is not really what we need.

With some more research in the action list, you’ll find the publish_post hook, and this is what we need. The first thing to do is write the function that sends your email. This function will receive the post’s ID as an argument, so you can use that to pull some information into the email. The second task is to hook this function into the action. Look at the finished code below for the details.

function authorNotification($post_id) {
global $wpdb;
$post = get_post($post_id);
$author = get_userdata($post->post_author);

$message = "
Hi ".$author->display_name.",
Your post, ".$post->post_title." has just been published. Well done!
";
wp_mail($author->user_email, "Your article is online", $message);
}
add_action('publish_post', 'authorNotification');

Notice that the function we wrote is usable in its own right. It has a very specific function, but it isn’t only usable together with hooks; you could use it in your code any time. In case you’re wondering, wp_mail() is an awesome mailer function — have a look at the WordPress Codex for more information.

This process might seem a bit complicated at first, and, to be totally honest, it does require browsing a bit of documentation and source code at first, but as you become more comfortable with this system, your time spent researching what to use and when to use it will be reduced to nearly nothing.

Priorities
The third parameter when adding your actions and filters is the priority. This basically designates the order in which attached hooks should run. We haven’t covered this so far, but attaching multiple functions to a hook is, of course, possible. If you want an email to be sent to an author when their post is published and to also automatically tweet the post, these would be written in two separate functions, each tied to the same tag (publish_post).

Priorities designate which hooked function should run first. The default value is 10, but this can be changed as needed. Priorities usually don’t make a huge difference, though. Whether the email is sent to the author before the article is tweeted or vice versa won’t make a huge difference.

In rarer cases, assigning a priority could be important. You might want to overwrite the actions of other plugins (be careful, in this case), or you might want to enforce a specific order. I recently had to overwrite functionality when I was asked to optimize a website. The website had three to four plugins, with about nine JavaScript files in total. Instead of disabling these plugins, I made my own plugin that overwrote some of the JavaScript-outputting functionality of those plugins. My plugin then added the minified JavaScript code in one file. This way, if my plugin was deactivated, all of the other plugins would work as expected.

Specifying Arguments
The fourth argument when adding filters and actions specifies how many arguments the hooked function takes. This is u[…]

Responsive Web Design Techniques, Tools and Design Strategies

  


WordPress is amazing. With its growing popularity and continual development, it is becoming the tool of choice for many designers and developers. WordPress projects, though, are pushing well beyond the confines of mere “posts” and “pages”. How do you go about adding and organizing media and all its complexities? With the introduction of WordPress 3.1, several new features were added that make using WordPress to manage media even more practical and in this tutorial, we’re going to dive in and show you how.

In part one, we’re going to setup custom post types and custom taxonomies, without plugins. After that, we’ll build a template to check for and display media attached to custom posts. Then, in part two, we’ll use custom taxonomy templates to organize and relate media (and other types of content).

As we focus on building a media centric site, I also want you to see that the principles taught in this series offer you a set of tools and experience to build interfaces for and organize many different types of content. Examples include:

A “Media” center, of any type, added to an existing WordPress site
A repository of videos, third party hosted (e.g. Vimeo, YouTube, etc), organized by topics and presenters
A music site, with streaming and song downloads, organized by bands and associated by albums
An author-driven Q&A site, with user submitted questions organized by topics and geographical location
A recipe site with videos and visitor ratings, organized by category and shared ingredients

In a future tutorial, we will focus on customizing the WordPress backend (with clients especially in mind) to manage a media site and in another tutorial we will use the foundation laid to build a dynamic filtering interface that allows visitors to quickly sort their way through hundreds or even thousands of custom posts.

Requirements

WordPress 3.1 – With the release of 3.1, several new features related to the use of custom post types and taxonomies were introduced that are essential to the techniques taught in this series.
Basic Familiarity with PHP (or “No Fear”) – To move beyond copying and pasting the examples I’ve given will require a basic familiarity with PHP or, at least, a willingness to experiment. If the code samples below are intimidating to you and you have the desire to learn, then I encourage you to tackle it and give it your best. If you have questions, ask in the comments.

Working Example
In April, 2011 we (Sabramedia, of which I am a co-founder) worked with an organization in Southern California to develop a resource center on WordPress to showcase their paid and free media products. On the front-end, we built a jQuery powered filtering interface to allow visitors to filter through media on-page. We’ll cover the ins and outs of building a similar interface in part three.

The “Resource Center” on ARISE, with a custom taxonomy filter (“David Asscherick”) pre-selected.

Working With Custom Post Types
By default, WordPress offers two different types of posts for content. First, you have the traditional “post”, used most often for what WordPress is known best for – blogging. Second, you have “pages”. Each of these, as far as WordPress is concerned, is a type of “post”. A custom post type is a type of post that you define.

Note: You can learn more about post types on the WordPress Codex.

In this series, we are going to use custom post types to build a media based resource center. I will be defining and customizing a post type of “resource”.

Setting Up Your Custom Post Type
You can setup your custom post types by code or by plugin. In these examples, I will be setting up the post type by code, storing and applying the code directly in the functions file on the default WordPress theme, Twenty Ten. You can follow along by using a plugin to setup the post types for you or by copying the code samples into the bottom of your theme’s custom functions file (functions.php).

Note: As a best practice, unless you use an existing plugin to create the post types, you may want to consider creating your own WordPress plugin. Setting up custom post types and taxonomies separate from your theme becomes important if and when you want to make major changes to your theme or try a new theme out. Want to save some typing? Use the custom post code generator.

Alright, let’s setup our custom post type. Paste the following code into your theme’s functions.php:

add_action('init', 'register_rc', 1); // Set priority to avoid plugin conflicts

function register_rc() { // A unique name for our function
$labels = array( // Used in the WordPress admin
'name' => _x('Resources', 'post type general name'),
'singular_name' => _x('Resource', 'post type singular name'),
'add_new' => _x('Add New', 'Resource'),
'add_new_item' => __('Add New Resource'),
'edit_item' => __('Edit Resource'),
'new_item' => __('New Resource'),
'view_item' => __('View Resource '),
'search_items' => __('Search Resources'),
'not_found' => __('Nothing found'),
'not_found_in_trash' => __('Nothing found in Trash')
);
$args = array(
'labels' => $labels, // Set above
'public' => true, // Make it publicly accessible
'hierarchical' => false, // No parents and children here
'menu_position' => 5, // Appear right below "Posts"
'has_archive' => 'resources', // Activate the archive
'supports' => array('title','editor','comments','thumbnail','custom-fields'),
);
register_post_type( 'resource', $args ); // Create the post type, use options above
}
The code above tells WordPress to “register” a post type called “resource”. Then, we pass in our options, letting WordPress know that we want to use our own labels, that we want our post type to be publicly accessible, non-hierarchal, and that we want it to show up right below “posts” in our admin menu. Then, we activate the “archive” feature, new in WordPress 3.1. Finally, we add in “supports”: the default title field, the WordPress editor, comments, featured thumbnail, and custom fields (I’ll explain that  later).

Note: For more information on setting up the post type and for details on all the options you have (there are quite a few available), refer to the register_post_type function reference on the WordPress Codex.

If the code above was successful, you will see a new custom post type, appearing below “Posts” in the WordPress admin menu. It will look something like this:

A view of the WordPress Admin, after adding a custom post type

We’re in good shape! Next, let’s setup our custom taxonomies.

Working With Custom Taxonomies
A “taxonomy” is a way of organizing and relating information. WordPress offers two default taxonomies, categories and tags. Categories are hierarchal (they can have sub-categories) and are often used to organize content on a more broad basis. Tags, are non-hierarchal (no sub-tags) and are often used to organize content across categories.

A “term” is an entry within a taxonomy. For a custom taxonomy of “Presenters”, “John Smith” would be a term within that taxonomy.

In this series, we will be creating two different custom taxonomies to organize the content within our resource center.

Presenters – Each media item in our resource center will have one or more presenters. For each presenter, we want to know their name and we want to include a short description. Presenters will be non-hierarchal.
Topics – Our resource center will offer media organized by topics. Topics will be hierarchal, allowing for multiple sub-topics and even sub-sub-topics.

Note: Interested in working with more than the title and short description? Take a look at How To Add Custom Fields To Custom Taxonomies on the Sabramedia blog.

Setting Up Presenters
Our goal with presenters is to create a presenter profile, referenced on the respective media pages, that will give more information about the presenter and cross-reference other resources that they are associated with.

Add the following code to your theme’s functions.php file:

$labels_presenter = array(
'name' => _x( 'Presenters', 'taxonomy general name' ),
'singular_name' => _x( 'Presenter', 'taxonomy singular name' ),
'search_items' => __( 'Search Presenters' ),
'popular_items' => __( 'Popular Presenters' ),
'all_items' => __( 'All Presenters' ),
'edit_item' => __( 'Edit Presenter' ),
'update_item' => __( 'Update Presenter' ),
'add_new_item' => __( 'Add New Presenter' ),
'new_item_name' => __( 'New Presenter Name' ),
'separate_items_with_commas' => __( 'Separate presenters with commas' ),
'add_or_remove_items' => __( 'Add or remove presenters' ),
'choose_from_most_used' => __( 'Choose from the most used presenters' )
);

register_taxonomy(
'presenters', // The name of the custom taxonomy
array( 'resource' ), // Associate it with our custom post type
array(
'rewrite' => array( // Use "presenter" instead of "presenters" in the permalink
'slug' => 'presenter'
),
'labels' => $labels_presenter
)
);
Let’s break that down. First, we setup the labels to be used when we “register” our taxonomy. Then, we give it a name, in this case “presenters”, and assign it to the post type of “resource”. If you had multiple post types, you would add them in with a comma, like this:

array( 'resource', 'other-type' ), // Associate it with our custom post types

After that,  we change the URL (or “permalink”) to satisfy our desire for grammatical excellence. Rather than being “/presenters/presenter-name” we update the “slug” (what is a slug?) to remove the “s” so that the permalink will read “/presenter/presenter-name”.

In our example, you should now notice a new menu option labeled “Presenters” under “Resources” in the admin sidebar. When you go to create a new resource you should also notice a meta box on the right side that looks like this:

My custom taxonomy of[…]

  


Despite contemporary browsers supporting a wealth of CSS3 properties, most designers and developers seem to focus on the quite harmless properties such as border-radius, box-shadow or transform. These are well documented, well tested and frequently used, and so it’s almost impossible to not stumble on them these days if you are designing websites.

But hidden deep within the treasure chests of browsers are advanced, heavily underrated properties that don’t get that much attention. Perhaps some of them rightly so, but others deserve more recognition. The greatest wealth lies under the hood of WebKit browsers, and in the age of iPhone, iPad and Android apps, getting acquainted with them can be quite useful. Even the Gecko engine, used by Firefox and the like, provides some distinct properties. In this article, we wisll look at some of the less known CSS 2.1 and CSS3 properties and their support in modern browsers.

Some explanation: For each property, I state the support: “WebKit” means that it is available only in browsers that use the WebKit engine (Safari, Chrome, iPhone, iPad, Android), and “Gecko” indicates the availability in Firefox and the like. Finally, certain properties are part of the official CSS 2.1. specification, which means that a broad range of browsers, even older ones, support them. Finally, a label of CSS3 indicates adherence to this specification, supported by the latest browser versions, such as Firefox 4, Chrome 10, Safari 5, Opera 11.10 and Internet Explorer 9.

WebKit-Only Properties
-webkit-mask
This property is quite extensive, so a detailed description is beyond the scope of this article and is certainly worth a more detailed examination, especially because it could turn out to be a time-saver in practical applications.

-webkit-mask makes it possible to apply a mask to an element, thereby enabling you to create a cut-out of any shape. The mask can either be a CSS3 gradient or a semi-transparent PNG image. An alpha value of 0 would cover the underlying element, and 1 would fully reveal the content behind. Related properties like -webkit-mask-clip, -webkit-mask-position and -webkit-mask-repeat rely heavily on the syntax of the ones from background. For more info, see the Surfin’ Safari blog and the link below.

Example

Image mask:

.element {
background: url(img/image.jpg) repeat;
-webkit-mask: url(img/mask.png);
}

Example

Gradient mask:

.element2 {
background: url(img/image.jpg) repeat;
-webkit-mask: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));
}

Further reading: Safari Developer Library

-webkit-text-stroke
One of the shortcomings of CSS borders is that only rectangular ones are possible. A ray of hope is -webkit-text-stroke, which gives text a border. Setting not only the width but the color of the border is possible. And in combination with color: transparent, you can create outlined text.

Examples

Assigns a blue border with a 2-pixel width to all <h1> headings:

h1 {-webkit-text-stroke: 2px blue}

Another feature is the ability to smooth text by setting a transparent border of 1 pixel:

h2 {-webkit-text-stroke: 1px transparent}

Creates text with a red outline:

h3 {
color: transparent;
-webkit-text-stroke: 4px red;
}

Further reading: Safari Developer Library

-webkit-nbsp-mode
Wrapping can be pretty tricky. Sometimes you want text to break (and not wrap) at certain points, and other times you don’t want this to happen. One property to control this is -webkit-nbsp-mode. It lets you change the behavior of the &nbsp; character, forcing text to break even where it is used. This behavior is enabled by the value space.

Further reading: Safari Developer Library

-webkit-tap-highlight-color
This one is just for iOS (iPhone and iPad). When you tap on a link or a JavaScript clickable element, it is highlighted by a semi-transparent gray background. To override this behavior, you can set -webkit-tap-highlight-color to any color. To disable this highlighting, a color with an alpha value of 0 must be used.

Example

Sets the highlight color to red, with a 50% opacity:

-webkit-tap-highlight-color: rgba(255,0,0,0.5);

Supported by: iOS only (iPhone and iPad).

Further reading: Safari Developer Library

zoom: reset
Normally, zoom is an Internet Explorer-only property. But in combination with the value reset, WebKit comes into play (which, funny enough, IE doesn’t support). It enables you to override the standard behavior of zooming on websites. If set with a CSS declaration, everything except the given element is enlarged when the user zooms on the page.

Further reading: Safari Developer Library

-webkit-margin-collapse
Here is a property with a quite limited practical use, but it is still worth mentioning. By default, the margins of two adjacent elements collapse, which means that the bottom distance of the first element and the top distance of the second element merge into a single gap.

The best example is two <p>s that share their margins when placed one after another. To control this behavior, we can use -webkit-margin-collapse, -webkit-margin-top-collapse or -webkit-margin-bottom-collapse. The standard value is collapse. The separate value stops the sharing of margins, which means that both the bottom margin of the first element and the top margin of the second are included.

Further reading: Safari Developer Library

-webkit-box-reflect
Do you remember the days when almost every website featured a reflection of either its logo or some text in the header? Thankfully, those days are gone, but if you’d like to make a subtle use of this technique for your buttons, navigation or other UI elements with CSS, then -webkit-box-reflect is the property for you.

It accepts the keywords above, below, left and right, which set where the reflection is drawn, as well as a numeric value that sets the distance between the element and its reflection. Beyond that, mask images are supported as well (see -webkit-mask for an explanation of masks). The reflection is created automatically and has no effect on the layout. Following elements are created using only CSS, and the second button is reflected using the -webkit-box-reflect-property.

Examples

This reflection would be shown under its parent element and have a spacing of 5 pixels:

-webkit-box-reflect: below 5px;

This reflection would be cast on the right side of the element, with no distance (0); additionally, a mask would be applied (url(mask.png)):

-webkit-box-reflect: right 0 url(mask.png);

Further reading: Safari Developer Library

-webkit-marquee
Here is another property that recalls the good ol’ days when marquees were quite common. Interesting that this widely dismissed property turns out to be be useful today, when we shift content on tiny mobile screens that would otherwise not be fully visible without wrapping.

The weather application by ozPDA makes great use of it. (If you don’t see shifting text, just select another city at the bottom of the app. WebKit browser required.)

Example

.marquee {
white-space: nowrap;
overflow:-webkit-marquee;
width: 70px;
-webkit-marquee-direction: forwards;
-webkit-marquee-speed: slow;
-webkit-marquee-style: alternate;
}

There are some prerequisites for the marquee to work. First, white-space must be set to nowrap if you want the text to be on one line. Also, overflow must be set to -webkit-marquee, and width set to something narrower than the full length of the text.

The remaining properties ensure that the text scrolls from left to right (-webkit-marquee-direction), shifts back and forth (-webkit-marquee-style) and moves at a slow rate (-webkit-marquee-speed). Additional properties are -webkit-marquee-repetition, which sets how many iterations the marquee should pass through, and -webkit-marquee-increment, which defines the degree of speed in each increment.

Further reading: Safari Developer Library

Gecko-Only Properties
font-size-adjust
Unfortunately, this useful CSS3 property is supported only by Firefox at the moment. We can use it to specify that the font size for a given element should relate to the height of lowercase letters (x-height) rather than the height of uppercase letters (cap height). For example, Verdana is much more legible at the same size than Times, which has a much shorter x-height. To compensate for this behavior, we can adjust the latter with font-size-adjust.

This property is particularly useful in CSS font stacks whose fonts have different x-heights. Even if you’re careful to use only similar fonts, font-size-adjust can provide a solution when problems arise.

Example

If Verdana is not installed on the user’s machine for some reason, then Arial is adjusted so that it has the same aspect ratio as Verdana, which is 0.58 (at a font size of 12px, differs on other sizes).

p {
font-family:Verdana, Arial, sans-serif;
font-size: 12px;
font-size-adjust: 0.58;
}

Supported by: Gecko.

Further reading: Mozilla Developer Network

image-rendering
A few years ago, images that were not displayed at their original size and were scaled by designers, could appear unattractive or just plain wrong in the browser, depending on the size and context. Nowadays, browsers have a much better algorithm for displaying resized images, however, it’s great to have a full control over the ways your images will be displayed when scaled, especially with responsive images becoming a de facto standard in responsive Web designs.

This Gecko-specific property is particularly useful if you have an image with sharp lines and want to maintain them after resizing. The relevant value would be -moz-crisp-edges. The same algorithm is used at optimizeSpeed, whereas auto and optimizeQuality indicate the standard behavior (which is to resize elements with the best possible quality). The image-rendering property can also be applied to <video> and <canvas> elements, as well as background […]

  The 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 TechniquesRotational SlidersEric 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 CSSAt 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 HologramBeing 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 gradientsYou’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 KeyboardClick 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 BarsA 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 CSSWith 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 PlanetariumThis 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 3DA 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 ImagesNicolas Gallagher shares presents his CSS drop-shadows without any images.

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

Beveled Corners & Negative Border-Radius with CSS3 GradientsBeveled 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 IE7Roger 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 timelineThis article tells you how to create a semantic lean timeline.

CSS Border Tricks with Collapsed BoxesThese 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 GradientsJeffrey 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 GradientsDivya 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 OffChris 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 CSS3Lea Verou shows how to style children of elements based on their total number (that is, their total count).

CSS ModalUsing 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 BoxesThe 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 ContentVisually 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 mistakesThe 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 SequencesEscape 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 CSSTo 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 ContentTrevor Davis shows on some examples what you can do with the CSS generated content.

Controlling width with CSS3 box-sizingAn 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 QueriesShi 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 CSSKeith 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 AnglesIn this article the authors go over all the math type units that can be applied as property values in CSS.
CSS Tools320 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 FunkThis generator was proudly designed by Eric Hoffman and coded by Peter Funk.

CSS Pattern GeneratorPatternify 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 easyA 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 mobileThe 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 FOUTPaul 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 ButtonsCSS3 Buttons is a simple framework for creating good-looking GitHub style button links.

CSS3 Facebook ButtonsCSS3 Facebook Buttons

MinimeeOn the Internets, speed is everything – which means that when it comes t[…]

  CAPTCHAs, or Completely Automated Public Turing Tests to Tell Computers and Humans Apart, exist to ensure that user input has not been generated by a computer. These peculiar puzzles are commonly used on the Web to protect registration and comment forms from spam. To be honest, I have mixed feelings about CAPTCHAs. They have annoyed me on many occasions, but I’ve also implemented them as quick fixes on websites.
This article follows the search for the perfect solution to the problem of increasing amounts of human-generated spam. We’ll look at how and why CAPTCHAs are used and their effect on usability in order to answer key questions: what is the perfect CAPTCHA, and are they even desirable?
The Incentive To Act HumanTo understand the need for CAPTCHAs, we should understand spammers’ incentives for creating and using automated input systems. For the sake of this article, we’ll think of spam as of any unwarranted interaction or input on a website, whether malicious or for the benefit of the spammer (and that differ from the purpose of the website). Incentives to spam include:
Advertising on a massive scale;Manipulating online voting systems;Destabilizing a critical human equilibrium (i.e. creating an unfair advantage);Vandalizing or destroying the integrity of a website;Creating unnatural, unethical links to boost search engine rankings;Accessing private information;Spreading malicious code.All of these incentives lead to profitable or otherwise gainful situations for spammers. Automating the process obviously allows for superhuman speed and efficiency.
Those who run websites know that this is a big business and a big problem. Akismet, the popular spam killer (commonly seen as a WordPress plug-in), catches over 18 million spam comments per day and has caught more than 20 billion in its history. Mollom, which provides a similar service, catches over half a million spam comments per day and estimates that more than 90% of all messages are spam.
No amount of asking nicely will stop the spammers, but their greed can be used against them; using automated systems to increase profit does have a weakness.
Enter the CAPTCHAOn one side of the coin is the spammer; on the other is the humble website owner, a pleasant sort, who experiences common problems:
Blogs and forums that sink under the weight of spam posts,Accounts that are registered under false pretences for unlawful purposes,Bots that ruin the dynamics of a website,A dive in the quality of content and the user experience.Automated spam plagues website owners to no end, so CAPTCHAs are appealing and compelling… initially. The time needed to moderate and review user-generated content versus the time needed to implement a CAPTCHA is what pushes most developers to do it.
In fact, CAPTCHAs are used a lot. The reCAPTCHA project estimates that over 200 million reCAPTCHAs are completed daily, and it takes an average of 10 seconds to complete one. The Drupal CAPTCHA project logs close to 100 thousand uses per week, and this is just a fraction of websites (those that choose to report back).
CAPTCHAs tackle a problem head-on: they focus purely on stopping spammers. Genuine users are, for the most part, overlooked. That is to say, an assumption is made that the normal behavior of users is not affected.
It’s not true, though. The issue of genuine usability is not new. The W3C released a report back in 2005 on the inaccessibility of CAPTCHAs, which suggested that some systems can be defeated with up to 90% accuracy. More recently (in 2009), Casey Henry looked at the effectiveness of CAPTCHAs on conversion rates and suggested a possible conversion loss of around 3%:
“Given the fact that many clients count on conversions to make money, not receiving 3.2% of those conversions could put a dent in sales. Personally, I would rather sort through a few spam conversions instead of losing out on possible income.”
— Casey Henry, CAPTCHAs’ Effect on Conversion Rates
In 2010, a team from Stanford University released a report entitled “How Good Are Humans at Solving CAPTCHAs? A Large Scale Evaluation” (PDF), which evaluates CAPTCHAs on the Internet’s biggest websites. Unsurprisingly, the results weren’t favourable, the most astounding being an average of 28.4 seconds to complete audio CAPTCHAs. The study also highlighted worrisome issues for non-native English speakers.
Web developers like Tim Kadlec have called for death to CAPTCHAs, and he makes a strong argument against their use:
“Spam is not the user’s problem; it is the problem of the business that is providing the website. It is arrogant and lazy to try and push the problem onto a website’s visitors.”
— Tim Kadlec, Death To CAPTCHAs
Completing a CAPTCHA may seem like a trivial task, but studies (like that of the W3C) have shown that that’s far from the reality. And as Kadlec mentions later in his article, what about users with visual impairments, dyslexia and other special needs? Providing an inaccessible wall doesn’t seem fair. Users are the ones who invest in and give purpose to websites.
The question is, are CAPTCHAs so unusable that they shouldn’t be used at all? Perhaps more importantly, does a usable CAPTCHA that cannot be cracked exist? If the answer is no, what is the real solution to online spam?
The World Of CAPTCHAsThe human brain is an amazing piece of work. Its ability to conceptualize, to find order in chaos and to adapt under extraordinary circumstances makes it highly useful, to say the least. For some tasks, it outshines a computer with great ease. In other tasks — mathematics, for example — it is laughably inferior.
Logic would dictate, therefore, that the most successful CAPTCHA would be:
A task that users excel at naturally but that computers can’t begin to comprehend,A task that is incredibly quick for users to perform but arduous for computers,A task that minimizes the need for additional user input,A task that is relatively accessible to all users, even those with special needs (that is, the CAPTCHA should be no more difficult than general Web usage and the current task demand).One of the greatest advantages that humans have over machines is our ability to visually recognize patterns. The most popular CAPTCHA technique derives from this.
Web developers have explored many options: simple recognition tests, interactive tasks, games of Tic Tac Toe and equations that even mathematicians would have struggled with. We’ll explore the more sensible ideas being implemented online today.
Text RecognitionThe most popular type of CAPTCHA currently used is text recognition (as seen with the reCAPTCHA project).
The reCAPTCHA project aims to stop spam and help digitize books.
reCAPTCHA was created at Carnegie Mellon University, home to the CAPTCHA pioneers and (in 2000) coiners of the term. Now run by Google, the project uses scanned text that optical character recognition (OCR) technology has failed to interpret. This, in theory, provides unbreakable CAPTCHAs, with the secondary benefit of helping to digitize books.
reCAPTCHA’s example of failed OCR scanning.
Concerns of accessibility and usability are often voiced with regard to this type of CAPTCHA. Completely illegible CAPTCHAs are common on the Web, and asking users to perform impossible tasks can not be good for usability.
The reCAPTCHA project does make efforts to provide audio alternatives for visually impaired users, but many more text-recognition CAPTCHAs are being used without aids. As noted in the Stanford University study, audio CAPTCHAs take a long time to complete. The same study also highlighted an undesirable reliance on recognition of English-language words.
Another take on the basic text CAPTCHA was introduced in late 2010 by Solve Media, whose solution was to replace text with an advertisement and a related question, a move that many saw as too invasive.

Solve Media claims its CAPTCHAs can be solved more quickly than others. While we should be skeptical of marketing talk, there is clearly some potential, given that many global brands transcend a single language. There is potential here for marginal improvement.
While text-recognition CAPTCHAs have a few downsides (e.g. spammers could use a software that would be able to recognize text embedded in the image and try all possible combinations to “break” the anti-spam mechanism), they are undoubtedly recognizable. This fact alone can go a long way in usability decisions.
Logic QuestionsSome have suggested that answering simple logic questions would be better than performing visual tasks, the idea being that the complexity of written language would be enough to confuse computers.
The TextCAPTCHA service has over 180 million questions in its database, including:
The 6th letter in “unrolled” is?What is fifty-eight thousand, five hundred and seventy-four as digits?Which of 3, twenty-nine, 70, 46 or 65 is the lowest?These CAPTCHA questions are designed for the intelligence of a seven-year-old child. They are far more accessible than text and image recognition, and while this is a big advantage, it comes with a price. First, the time required to read and comprehend these questions will vary because they are unusual and unknown to users. Secondly, computers can still break these CAPTCHAs. Joel Vanhorn points to Wolfram Alpha as an intelligence source strong enough to crack them.
With the likes of IBM’s Watson recently showcasing an eerily human-like ability to process language, such technology might become mainstream quicker than we think. Instead of worrying about logic questions becoming solvable by computers, we should use this technology to analyze user-submitted content and then separate natural language from the computer-generated content that is common to spam. Services like SBlam! are implementing this idea.
Questions that are website-specific, such as “What is the name of this website?” and “What is the dominant color in the image a[…]

In this article you will learn how to convert Dezign Folio from PSD to HTML in a detailed step-by-step tutorial. You will learn how to create this layout by using a CSS framework, some CSS styles and Javascript. When you’ve completed this tutorial you’ll have a valid HTML/CSS, cross browser compatible and dynamic layout. I hope that you can go through this tutorial and learn a few techniques that will help you in future projects.

Now, let’s get started with this tutorial.

Links you will need to complete this tutorial:

Dezign Folio: Create A Detailed Portfolio Homepage Design In Photoshop
960 Grid System
jQuery Scrollable

Here’s what we’ll be creating (Click on image to view a full working demo).

You can also download this tutorial’s source files here.

Step 1 – Preparation
If you read the Photoshop tutorial for creating this layout you probably noticed that 960gs grid system was used for guidelines creation. Well, in this tutorial we will also need the 960gs CSS framework. Using CSS frameworks makes layout and style creation a lot easier and saves time in web development. Now you should download the 960 Grid system source files for usage in this tutorial.

You will also need a code editor; you can use a plain text editor such as the Notepad. I always recommend you use a free code editor and get used to it, this helps you get things done faster.

During this tutorial you should test your layout in different browsers, you don’t want to return to the beginning because of browser compatibility issues. In this tutorial I am using some CSS3 styles, but as you might know not all browsers support CSS3 features. The CSS3 styles used in this tutorial have been tested with Firefox version 3.6.

Step 2 – Getting Your Files Ready
First thing you should do is create a directory for your website. I usually create an /images/ directory for images and a /styles/ directory which will hold every style sheet (CSS) file. The HTML file goes in the root directory.

Now you need to grab the CSS files from the 960gs grid system we downloaded earlier, extract the ZIP file and then copy the CSS files from /code/css/ folder to your /styles/ directory, you should copy 960.css, reset.css and text.css files. You should notice a directory called /uncompressed/ which has the same files but in a bigger and more readable format, I recommend using the compressed CSS files. You also need to create a new file in your root directory called index.html and create another file called style.css in /styles/ directory.

In this tutorial we need to export images from Photoshop to use in our HTML layout. You can export these images yourself if you have the layered PSD file from the original Photoshop tutorial, or you can just grab the source files with this tutorial and you’ll find the images I created.

Step 3 – Simple Starter Layout
We need to start by creating a Simple HTML layout as the basis of our site to be. By looking at the Photoshop Layout you should notice a few things:

The layout has these sections: header, slide show, services, information and a footer.
You’ll also notice that we can use a single repeating image as the background for the body that covers header, slide show and services.
Both information and footer sections have the same horizontally repeating background image.
Finally, notice that header, slide show, information and footer sections have fixed heights.

Based on these points we create the following HTML layout.

<!--<span class="hiddenSpellError" pre=""-->DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>DezignFolio</title>
css" href="styles/reset.css" rel="stylesheet" media="all" />
css" href="styles/text.css" rel="stylesheet" media="all" />
<link type="text/css" href="styles/960.css" rel="stylesheet" media="all" />
<link type="text/css" href="styles/style.css" rel="stylesheet" media="all" />
</head>
<body>
<div class="header container_12">
header content goes here.
</div>

<div class="<span class=">slideshow"></div>
slide show content goes here.
</div>
<div class="services container_12">
services content goes here.
</div>
<div class="information">
<div class="container_12">
information content goes here.
</div>
</div>
<div class="footer">
<div class="container_12">
<div class="grid_12">
Copyright 2010 1stwebdesigner.com
</div>
</div>
</div>
</body>
</html>

As you can see in this layout we added links for the CSS files in the header, created five main <div> sections each with a unique class name for styling. I added an extra class “container_12″ to header and services. I also added a <div> with a class “container_12″ inside information and footer sections, this will allow us to style the information and footer sections to take full width of the browser area and to hold the repeating background. Finally, notice that “container_12″ in the footer has a “grid_12″ division, this division will take the whole width of “container_12″ and it is styled in 960.css file. Now let’s add the CSS as follows (all CSS should be added in style.css file):

body {
color: #696969;
background: #fff url(../images/bg.jpg) repeat-x top center;
font-size: 12px;
line-height: 17px;
font-family: Verdana;
padding: 0;
}

a {
text-decoration: none;
}

.header {
height: 101px;
overflow: hidden;
}

.slideshow {
padding: 30px 0 0 0;
height: 475px;
overflow: hidden;
background: url(../images/message_bg.png) no-repeat;
background-position: center 348px;
}

.information {
width: 100%;
height: 318px;
display: block;
overflow: hidden;
background: url(../images/information_footer_bg.jpg) repeat-x top center;
}

.footer {
width: 100%;
height: 59px;
display: block;
overflow: hidden;
background: url(../images/information_footer_bg.jpg) repeat-x bottom center;
text-align: center;
font-size: 12px;
line-height: 59px;
color: #fff;
}

Now notice that the body color is set to #696969 with white as the background color and a horizontally repeating background image bg.jpg font size is set to 12px, line height to 17px, font set to Verdana with zero padding. Then the links text decoration is set to none so that the links aren’t underlined in normal link state. Now the header height is set to 101px with overflow hidden to hide extra content. Now look at the header style and see that it has a top padding of 30px to maintain a space between header and slide show content, height is set to 475px, with overflow set to hidden and a background image message_bg.png aligned horizontally to center and vertically at 348px. You’ll notice that there’s no style for the services section and that’s because it doesn’t have any special styles to be that will be applied. Now let’s look at information style, notice that the width is set to 100% to fill browsers horizontal space, with a fixed height, overflow set to hidden and a horizontally repeating background image.

Finally, the footer section is going to be styled here entirely and that’s because it has only one copyright sentence. The width is set to 100% to fill browsers horizontal space, with 59px height, hidden overflow, a background image with the same settings as we used in the information section the only change is that its aligned to bottom, text is aligned to center, with 12px font size, white font color and 59px line height similar to footer height value so that the text is aligned vertically to center. The result should be the same as the image below.

Step 4 – Adding Logo and Menu Items to Header
Now we need to add the logo and menu items, here’s the HTML for the header section.

<div class="header container_12">
<div class="grid_4">
<h1>
<a href="#" title="DesignFolio">DezignFolio</a>
</h1>
</div>
<div class="grid_8">
<a href="#" title="Home" class="home active">Home</a>
<a href="#" title="About Us" class="about">About Us</a>
<a href="#" title="Services" class="services">Services</a>
<a href="#" title="Blog" class="blog">Blog</a>
<a href="#" title="Contact" class="contact">Contact</a>
</div>
</div>

Notice that we added two divisions with a “grid_4″ and “grid_8″ classes, inside the “grid_4″ division I added the logo content and an <h1> with a link inside it. Next I added links for the menu items each with a unique class name which will help us in styling each menu item inside the “grid_8″ division. Now lets add the CSS for the header content.

.header {
height: 101px;
overflow: hidden;
}

.header .grid_4 h1 a {
text-indent: -10000px;
display: block;
width: 234px;
height: 45px;
background: url(../images/logo_menu_bg.png) no-repeat;
background-position: 0 -38px;
margin: 36px 0 0 0;
}

.header .grid_8 a {
text-indent: -10000px;
display: block;
height: 36px;
background: url(../images/logo_menu_bg.png) no-repeat;
margin: 33px 30px 0 0;
float: left;
}

.header .grid_8 a.home {
background-position: -264px -11px;
width: 35px;
margin-left: 250px;
}

.header .grid_8 a.home:hover, .header .grid_8 a.home.active {
background-position: -264px -5[…]

  Although CSS isn’t that difficult, useful CSS techniques are not easy to find. Sometimes finding a cross-browser solution might take time, but you don’t have to reinvent the wheel every single time. Other designers may have had the same problem in the past and thus the main goal of this round-up is to share with you a goldmine of new techniques which you will hopefully find very useful and valuable. We also hope that these tutorials and articles will help you solve common design problems and find new ways of approaching tricky CSS issues.
The main goal of the article is to present powerful new CSS techniques, encourage experimentation in the design community and push CSS forward. Please notice that we feature both experimental demos and practical techniques in this article. Next week we will present even more useful new tools and resources for front-end developers. We sincerely appreciate the efforts of the design community — thank you, guys!
Interesting and Original TechniquesWonder-Webkit: 3D TransformsThis is a remarkable example of what can be done using CSS3 3D transformations. The interesting stuff is the possibility of manipulate the transformation matrix of any element of the DOM, In this case we get the matrix given only the four end points of the element. Don’t forget to click on the items, too. Who thought a couple of years ago that something like that would be possible with only CSS?

CSS Box Shadow & Text Shadow ExperimentsThe CSS box-shadow and text-shadow allow us to create some pretty cool design elements that don’t even look like shadows. The key is to think about how CSS shadows work and use them to get the desired effect. The article features three remarkable examples of using box-shadow property creatively to achieve effects that don’t have much to do with shadows.

CSS3 Depth of FieldSawyer Hollenshead’s experiment is an attempt to create the “Depth of Field” effect with CSS. The blurry text is accomplished using text-shadow, with the text color set to transparent. Take a look at the demo and don’t forget to press ‘n’ to toggle animation.

Art Deco Selectable TextThis is a quick proof-of-concept of split typography, based on Pierre Fix-Masseau’s Art Deco style. The challenge was to have this kind of ‘split letters’ as part of a web page layout, while retaining the ability to select text.

CSS3 :toggle-button without JavaScriptThis demo presents a CSS3 toggle-button that works without JavaScript. If you ever need it: You stack two <a>s on top of each other and then disable pointer-events for the top <a> on :target.

About War and BananasThis student project explores new ways of styling and designing websites in an artistic way. The students from Merz Akademie in Germany used Picasso’s “Guernica” as the footage, seperated the picture into different layers and animated them using CSS.

WebKit ClockThis demo is driven by HTML5 canvas, CSS3, JavaScript, Web Fonts, SVG and no image files. The CSS file is huge, yet the result is quite remarkable.

Pure CSS SlideshowThis technique uses CSS transforms and positioning to create the pure CSS-based slideshow. Unfortunately, no documentation is available (yet).

CSS DockThis is a quick CSS3 experiment trying to replicate the Dock of OS X, complete with labels, animations, reflections and indicators. It uses CSS transitions for the magnification effect and the :target pseudo-class and CSS animations for the bouncing effect.

Andrew HoyerAn interesting experiment by Andrew Hoyer. The walking man is implemented using only CSS3 animations and simple HTML. The key idea behind all of this is the fact that a CSS transformation applied to an element also applies to all of its children. Works in Webkit-browsers only.

Type study: An all CSS buttonDan Cederholm explains how through the use of box-shadow, text-shadow, border-radius, and CSS gradients, we can create a highly polished three-dimensional, responsive button that doesn’t require images.

3D TextThis technique uses multiple text-shadows to create a 3D appearance of the text on any HTML element. No extra mark-up is used. Works in the latest builds of Safari, Chrome, Firefox, and Opera.

Spin those Icons with CSS3Tom Kenny features a neat effect which spins the social icons with the help of a CSS transforms and transition when you hover over them. A very nice enhancement.

The Shapes of CSSThe article presents various geometrical forms, all created using CSS and a single HTML element. The following forms are presented: square, rectangle, circle, oval, triangle, parallelogram, trapezoid, star, pentagon, hexagon, octagon, heart and infinity — all using CSS only.

CSS background image hacksEmulating background image crop, background image opacity, background transforms, and improved background positioning. The article explains a few hacks relying on CSS pseudo-elements to emulate features unavailable or not yet widely supported by modern browsers.

Making Better Select Elements with CSS3 and jQueryThis tutorial explains how to take an ordinary select element, and replace it with a better looking version, while keeping all the functionality intact. It uses CSS3 multiple background and a transparent PNG image as a sprite. Currently, multiple backgrounds are supported by Firefox, Safari, Chrome and Opera. For Internet Explorer and older versions of the first browsers, a fallback is defined, which is basically just a regular version of the background. When parsing the CSS document, browsers that do not understand multiple background will just ignore the rule and use the plain one.

CSS-Only 3D SlideshowThis tutorial shows how to create a 3D slideshow using only HTML and CSS. No JavaScript required. You’ll be able to mimic a click event with CSS using the :focus pseudo-class and the HTML5 element <figcaption>, but the idea is the same. As the author admits, this method isn’t necessarily “better” than using JavaScript, but simply a neat alternative that takes advantages of the newest HTML5 elements.

Have Fun with BordersThis tutorial shows three simple technique to add a light shadow, “pressed” and “beveled” states to text blocks and images. By Soh Tanaka.

Animated CSS3 Owl “What about having an owl that moved his eyes every so often and when hovered over would raise his wings while a few light rays would spin in the background. A little excessive? Probably. Necessary? Not at all. However, that’s exactly what I was looking to do with CSS3 transforms, transitions, and animations.” An interesting experiment, best viewed in Safari or Chrome.

CSS Social Sign-in ButtonsThis blog post describes a fairly simple technique for creating nice responsive CSS-buttons using a CSS sprite, border-radius, shadows and CSS gradients.

Rotating color cube box with CSS3 animation, transforms and gradientsA yet another remarkable experiment that presents a rotating color cube using CSS3 animations and transforms. Be aware that the browser may slow down a bit when loading the demo.

CSS3 Demo: 3D Interactive GalaxyA CSS3 demo where you can interact with a procedurally generated 3D galaxy. In order to create the effect, the designer used 3D CSS properties available in Safari 5 and on the iPhone and iPad.

Getting Hardboiled with CSS3 2D TransformsAndy Clarke explains how to use CSS3 two-dimensional transforms to add realism to a row of hardboiled private detectives’ business cards. The working demo is available as well.

How to create Microsoft Office Minibar with jQuery and CSS3Janko Jovanovic explains how to create a Microsoft Office Minibar that exposes context-related functionality. In case of MS Word, context is a text selection. Since Minibar always pops up near the mouse pointer it enables users to quickly perform actions related to a selection.

Angled Content Mask with CSSThis article explains how to create angled CSS content “masks”. The idea is pretty simple and uses CSS transform property (rotation, to be more precise).

Rotating Feature BoxesAll the animation here are CSS3 transitions. JavaScript only watches for the clicks and applies and removes classes as needed. So when you click on a block, that block’s class’ is adjusted. The new classes have different size and position values. Because the block has transition CSS applied, those new sizes and postion values are animated as well.

Pure CSS3 box-shadow page curl effectOkay, the CSS3 code here is quirky and might seem a bit bloated first, but it’s a nice example of using various CSS3 features together to create an effect that would usually require images.

Pure CSS Folded-Corner EffectLearn how to create a simple CSS folded-corner effect without images or extra markup. It works well in all modern browsers and is best suited to designs with simple colour backgrounds; supported by Firefox 3.5+, Chrome 4+, Safari 4+, Opera 10+, IE 8+.

Useful Practical TechniquesSmooth Fading Image Captions with Pure CSS3Learn how to use CSS3 transitions to create nice, animated, semitransparent image captions. Full example and code download included.

Fade Image Into AnotherLearn how to create an image rollover by giving the element a background image. There are three ways to fade in the opacity. Click here to find out more:

New @Font-Face Syntax: Simpler, EasierWith IE9 and FF4 nearing release, Ethan Dunham from Font Squirrel has revisited the problem of a cross-browser CSS @font-face syntax and found a new and simpler solution. In this article, Richard Fink explains the new syntax and its variations and suggests the most reasonable syntax to use. Also, check FontSpring’s The New Bulletproof @font-face Syntax. Please notice that this technique no longer works in Internet Explorer 9.

The New Clearfix MethodThe clearfix hack, or “easy-clearing” hack, is a useful method of clearing floats. The original clearfix hack works great, but the browsers that it targets are either obsolete or well on their way. T[…]

  This article is an excerpt from Eric Meyer’s recent book Smashing CSS, published by Wiley in cooperation with Smashing Magazine.
In this article, the focus is on what’s coming: styling techniques you’ll use in the immediate and near-term future. From styling HTML 5 elements to rearranging layout based on display parameters to crazy selection patterns to transforming element layout, these are all techniques that you may use tomorrow, next month, or next year. With partial browser support, they’re all on the cutting edge of Web design.
Accordingly, be careful not to get cut! A number of useful sites can help you figure out the exact syntaxes and patterns you need to use these techniques.
Furthermore, a number of JavaScript libraries can extend support for advanced CSS back into older browsers, in some cases as far back as IE/Win 5.5. Some are very narrowly focused on certain browser families, whereas others are more broadly meant to allow support in all known browsers. These can be useful in cases where your visitors haven’t quite caught up with the times but you don’t want them to miss out on all the fun. (Some of these libraries are CSS3 PIE, cssSandpaper, :select[ivizr], ie7-js, eCSStender).
There are also a good many CSS enhancements available as plug-ins for popular JavaScript libraries such as jQuery. If you’re a user of such a library, definitely do some digging to see what’s been created. Again: Be careful! While these techniques are powerful and can deliver a lot of power to your pages, you need to test them thoroughly in the browsers of the day to make sure you didn’t just accidentally make the page completely unreadable in older browsers.
Styling HTML 5Styling HTML 5 is really no different than styling HTML 4. There are a bunch of new elements, but styling them is basically the same as styling any other element. They generate the same boxes as any other div, span, h2, a, or what have you.
The HTML 5 specification is still being worked on as of this writing, so this may change a bit over time, but the following declarations may be of use to older browsers that don’t know quite what to do with the new elements.

article, aside, canvas, details, embed, figcaption, figure, footer, header, hgroup, menu, nav, section, summary {
display: block;
}
command, datalist, keygen, mark, meter, progress, rp, rt, ruby, time, wbr {
display: inline;
}
You may have noticed that I left out two fairly important new elements: audio and video. That’s because it’s hard to know exactly how to treat them. Block? Inline? All depends on how you plan to use them. Anyway, you can place them in the declaration that makes the most sense to you.
But what about really old browsers, like IE6? (Note I said “old,” not “unused.” In an interesting subversion of popular culture, browser popularity has very little to do with age.) For those, you need to use a bit of JavaScript in order to get the browser to recognize them and therefore be able to style them. There’s a nice little script that auto-forces old versions of IE to play nicely with HTML 5 elements. If you’re going to use and style them, you should definitely grab that script and put it to use.
Once you’ve gotten your browser ducks in a row and quacking “The Threepenny Opera,” you can get down to styling. Remember: There’s really nothing new about styling with these new elements. For example:

figure {
float: left;
border: 1px solid gray;
padding: 0.25em;
margin: 0 0 1.5em 1em;
}
figcaption {
text-align: center;
font: italic 0.9em Georgia, "Times New Roman", Times, serif;
}

<img src="splash.jpg" alt="A toddler’s face is obscured by a rippled and dimpled wall of water thrown up by her hands slapping into the surface of the swimming pool in whose waters she sits.">
SPLASH SPLASH SPLASH!!!

Figure 7-1: A styled HTML 5 figure and figure caption.
Classing like HTML 5Perhaps you like the new semantics of HTML 5, but you’re just not ready to take your sites to full-on HTML 5. Maybe your site’s user base is mostly older browsers and you’d rather stick to known quantities like HTML 4 or XHTML. Not to worry: You can have the best of both worlds with the venerable class attribute.
This approach was documented by Jon Tan in his article. The basic idea is to use old-school elements like div and span, and add to them classes that exactly mirror the element names in HTML 5. Here’s a code example.

.figure {
float: left;
border: 1px solid gray;
padding: 0.25em;
margin: 0 0 1.5em 1em;
}
.figcaption {
text-align: center;
font: italic 0.9em Georgia, "Times New Roman", Times, serif;
}

<img src="spring.jpg" alt="A small child with twin pigtail braids, her back to the camera, swings away from the camera on a playground swingset while the late afternoon sun peeks over the crossbar of the swingset.">
<div class="figcaption">Swinging into spring.</div>

Figure 7-2: A styled HTML 4-classed figure and figure caption.
If you compare the styles there to those found in the preceding section, you’ll see that the only difference is that the names figure and figcaption are preceded by periods — thus marking them as class names. The markup is a little different, of course, though it’s the same basic structure.
The advantage of this approach is that if you have these styles in place at the point when you decide you can convert to HTML 5, then all you need to do is change your markup to use HTML 5 elements instead of classed divs and then strip off the periods to turn the class selectors into element selectors. That’s it. Easy as cake!
Media QueriesThis could honestly be its own article, or possibly even its own book. Thus, what follows will necessarily be just a brief taste of the possibilities. You should definitely follow up with more research, because in a lot of ways this is the future of Web styling.
The point of media queries is to set up conditional blocks of styles that will apply in different media environments. For example, you could write one set of styles for portrait displays and another for landscape displays. You might change the colors based on the bit depth of the display. You could change the font based on the pixel density of display. You might even rearrange the page’s layout depending on the width or number of pixels available in the display.
Figure 7-3: A basic three-column layout.
How? Consider some basic layout styles for a three-column layout:

body {
background: #FFF;
color: #000;
font: small Arial, sans-serif;
}
.col {
position: relative;
margin: 3em 1%;
padding: 0.5em 1.5%;
border: 1px solid #aaa;
border-width: 1px 1px 0 1px;
float: right;
width: 20%;
}
#two {
width: 40%;
}
#footer {
clear: both;
}
As nice as this might be (in a minimalist sort of way), it is likely to run into trouble on smaller—which is to say, narrower—displays. What if you could magically change to a two-column layout on such displays?
Well, you can. First, restrict the three-column layout to environments that are more than 800 pixels across. This is done by splitting the layout bits into their own declarations:

body {
background: #fff;
color: #000;
font: small Arial, sans-serif;
}
.col {
position: relative;
margin: 3em 1%;
padding: 0.5em 1.5%;
border: 1px solid #aaa;
border-width: 1px 1px 0 1px;
}
#footer {
clear: both;
}
.col {
float: right;
width: 20%;
}
#two {
width: 40%;
}
Then wrap those last two declarations in a media query:

@media all and (min-width: 800px) {
.col {
float: right;
width: 20%;
}
#two {
width: 40%;
}
}
What that says is “the rules inside this curly-brace block apply in all media that have a minimum display width of 800 pixels.” Anything below that, no matter the medium, and the rules inside the block will be ignored. Note the parentheses around the min-width term and its value. These are necessary any time you have a term and value (which are referred to as an expression).
At this point, nothing will really change unless you shrink the browser window until it offers fewer than 800 pixels across to the document. At that point, the columns stop floating altogether.
Figure 7-4: What happens below 800 pixels.
What you can do at this point is write another media-query block of layout rules that apply in narrower conditions. Say you want a two-column layout between 500 and 800 pixels):

@media all and (min-width: 500px) and (max-width: 799px) {
.col {
float: left;
width: 20%;
}
#two {
float: right;
width: 69%;
}
#three {
clear: left;
margin-top: 0;
}
}
Figure 7-5: The reworked layout, which shows between 500 and 800 pixels.
And finally, you can apply some single-column styles for any medium with fewer than 500 pixels of display width:

@media all and (max-width: 499px) {
#one {
text-align: center;
}
#one li {
display: inline;
list-style: none;
padding: 0 0.5em;
border-right: 1px solid gray;
line-height: 1.66;
}
#one li:last-child {
border-right: 0;
}
#three {
display: none;
}
}
Figure 7-6: Single-column layout, which shows below 500 pixels.
Note that in all these queries, layout styles are defined in relation to the display area of the browser window. More generically, they are defined in relation to the display area available to the document in any medium in which it is rendered. That means that if a printer, for example, is used to print the document and it has an available display area 784 pixels wide, then the two-column layout will be for printing.
To restrict the column shifting to screen media only, alter the queries, like so:

@media screen and (min-width: 800px) {...}
@media screen and (min-width: 500px) and (max-width: 799px) {...}
@media screen and (max-width: 499px) {...}
But what if you want the three-column layout used in some non-screen media, like print and TV displays? Then add in th[…]

  We know how hard it is to find good useful tools that all of your developers and designers out there spend hours searching for. And for that reason, we’re regularly collecting useful online web services, tools and resources — little time-savers that can boost every designer’s workflow and save time that would otherwise be required for mundane tasks.
You might have seen some of these tools in our Twitter stream or on our Facebook page, but certainly not all of them. We’ve prepared the most useful ones (yet not necessarily the most beautiful ones) in this handy overview for your convenience. Please share any further tools with us and our readers in the comments to this post. As usual, we express sincere gratitude to all designers and developers out there who create, maintain and improve these tools as their little side projects. You really make the difference, guys. Thank you.
You may want to check out our previous round-up, Time-Saving and Educational Resources for Web Designers, as well.
Useful Web Services, Tools and ResourcesFontFuse: Gallery of Font PairingsFontFuse is a font pairing design resource that displays font pairings and hence helps you compare and choose fonts. You can browse through fonts as well as font families, and explore the most recent, most popular and contest-leading font pairings.

Little Big UI DetailsThis site features tiny details that improve the user experience of websites and mobile apps. You’ll find some useful design techniques found by your colleagues across the Web. Also, share your favorite little things on the website as well. The collection is already very useful, with more design examples submitted every single day.

A Sampler PageWhile physical books are traditionally well defined and structured objects, digital books live on screens that vary greatly in their dimensions. In this A List Apart article, Craig Mod dives into the similarities and differences of these media and presents the baseline for designers who want to produce beautiful and readable text on a tablet.

Readability: Enjoy Reading, Support WritingAnother handy little helper that gets rid of the unwanted clutter. Readability allows you to choose your preferred settings (font size, margin and style) and applies them to any website. Drag the bookmarklet with your saved settings into your bookmars bar or folder, visit the website of your choice, click on the bookmarklet and you get a good, comfortable read. Besides, readability offers a way to compensate writers and publishers without punishing readers. 70% of all membership fees go directly to the people who make the content.

Prey: Rest SafeThis tool is small but efficient open-source application that lets you track your laptop or phone in case it gets stolen or lost. Once the Prey agent is installed, it waits to be activated over the Web or via SMS, sending back information on its exact position.

Ge.ttWith Ge.tt you can turn any type of file into web content and share it instantly. You just click on and select files and share the files with your friends or publish the data online. You may want to check an alternative, Crate, as well.

Lanyrd: Get More Out of ConferencesLanyrd is the social conference directory that lets you keep track of what is going on around you, both as a conference speaker and visitor. You can browse conferences by topic, see who the keynote speakers are and who might like to attend it with you. Follow intereresting conferences by checking out attendees tweets or browse slide, videos and podcasts of past events you might have missed. And you can check SmashingMag’s account on Lanyrd, too.

Dashkards: Dashboard Cheat Sheets For Your Favorite Mac AppsThe site presents keyboard shortcut cheatsheets for you favorite Mac apps to help you memorize them. Simply add the dashkards to your dashboard and save time.

Bundler: Manage Your Application’s DependenciesBundler manages application’s dependencies through many machines systematically and repeatedly. You can use the tool with frameworks (it works out of the box with Rails 3) and check out an application with a gemfile for development. A detailed instruction is available on the app’s main web page.

BuildorProBuildorPro runs through your browser, and so the browser becomes your development environment — meaning that every time you change your code by hand or through the visual tools, the changes are instantly reflected in the design window. Currently in beta.

Zerply: Present Yourself ProfessionallyWith Zerply you can present yourself, discover and connect as well as converse and collaborate. By setting up a professional profile, you can tell people who you are and what sites you use.

Prevue: Sharing Tool for DesignersPrevue is a free concept sharing tool that helps you upload in a simple and elegant way by organizing and sharing your work with others. Either share individual projects with clients, or turn all your projects and designs into a beautiful and clean portfolio to share with the world.

Git Immersion Git is a fast version control system which can be downloaded on this site. Git Immersion is a very detailed guide to Git, with examples and practical tips for developers.

Wirify: The Web as WireframesThis tool is a bookmarklet that lets you turn any Web page into a wireframe with a single click. The bookmarklet helps you get rid of all distractions by blocking out copy, images and ads, letting you take a closer look at the website’s building blocks. Wirify is a useful tool that shows the balance of a website that the eye perceives only unconsciously.

Open with Photoshop Firefox ExtensionIf you are looking for nifty time-savers, this little Firefox add-on is the perfect companion for any Web or graphic designer. Instead of saving images first, you can just open them directly in Photoshop via a single click. If Photoshop is already running, it opens the image in a new window; otherwise, it launches the program.

Scr.im: Email Address ShortenerScr.im lets you use a shortened URL to give out your email address safely and securely in forums. Just enter your email address on Scr.im, and it gives you a link to a page with your email address, with security to prevent bots from viewing it.

Compfight: Flickr Search EngineCompfight is a Flickr search engine for images licensed under Creative Commons (or other) licenses. They pull their results directly from Flickr and gives you multiple options to restrict your search.

Browserling: Interactive Cross-browser Testing in Your BrowserBrowserling offers you a graphical web console to do cross-browser testing without leaving your own browser. A helpful way to try out your creations. The virtual browsers run live enabling you to type and click away just as if you were running the actual browser. Paid and free options are available.

User Feedback and Concept Testing with VerifyVerify is the fastest way to collect and analyze user feedback on screens or mockups. See where people click, what they remember, or how they feel about a Web design.

foxGuide: Photoshop Guides Inside FirefoxfoxGuide is a Firefox extension that displays horizontal and vertical guides. These guides appear as thin lines that float over the webpage. You can move or remove them just the way you do it in Photoshop.

GridBookmarkletThe tool allows you to interact with a grid directly inside the Web browser. (Most alternatives involve overlaying a static grid image onto the page.) Just drag it to your bookmarks toolbar, and then any time you want to check that everything is properly aligned, click on the bookmarklet, and a grid will be overlaid on the current page.

URLi.st: Share and Sync Your LinksURList not only enables you to create and save link lists easily and share them via Twitter or email with coworkers and friends, but also lets you access those links from anywhere. And creating lists is dead easy. Just drag URList’s bookmarklet to your browser’s bookmark bar and click it whenever you want to add a link to the group of links.

Spritebox: Create CSS from Sprite ImagesSpritebox is a WYSIWYG tool to help Web designers create CSS classes and IDs from a single sprite image. It is easy and free to use and is based on the principle of using the background-position property to align areas of a sprite image into block elements of a Web page. You may want to check out CSS Sprite Generator, too.

JoliprintThis is an online tool that generates PDFs from Web pages. Granted, it is not the only tool that does this, but it is easy to use and versatile. People can use it as a bookmarklet, pulling it into the Favorites toolbar of their browser and clicking as needed. Joliprint generates a clear, reader-friendly two-column layout, free of ads and navigation elements, and it does it pretty well. Sometimes it removes too much content, though, such as readers’ comments. If you’d like an alternative, give Web2PDF or Notforest a try.

EntitifierCleaning up text for the Web can be time-consuming and prone to error. But if a client delivers content in Microsoft Word or a similar format, then cleaning it up is a necessary evil if you don’t want to end up with characters that don’t display properly online. Entitifier does the hard work for you. All you have to do is enter HTML or text, and it escapes nasty characters that should be entities. Just don’t enter text with inline PHP or HTML5 tags, because the tool doesn’t work well with them yet.
The Email Address Obfuscation DebateSuperuser has an interesting discussion about email obfuscation, with opinions from a number of users. Included also are different techniques for accomplishing obfuscation, empirical data about its effectiveness and links to other discussions and articles. One interesting technique is to use the obscure unicode-bidi and direction CSS properties and write the email address backwards: for example, moc.elpmaxe@zyx. Plenty of interesting ideas worth learning and discussing. (cc)

Quic[…]

  Adding interactivity and animations to a design doesn’t have to be complicated or make the website inaccessible when you use modern Web standards. In this article, we’ll explore several examples and theories that employ CSS, HTML, SVG, the canvas element and JavaScript. Some of these techniques you’ll know, others you may not have considered. Let’s start with the basics.
1. HTML and JavaScriptManipulating HTML with JavaScript is the most common method of adding interactivity to a website. But before you start using JavaScript, having a strong understanding of the CSS visual formatting model and box model is important. They are vital to making sense of how HTML elements can be manipulated visually. When you dynamically change the style of an HTML element, it will flow with and react to the rest of the document. Learning to anticipate and control what is affected can be difficult.
Using a JavaScript library such as jQuery can take the pain out of cross-browser support. jQuery also provides common functionality that makes interacting with HTML a quicker process. It’s necessary to learn the basics of JavaScript before looking at a library like jQuery, to ensure that you understand the fundamentals and therefore know how jQuery does something, not just what it does. The distinction here is key to being able to write your own JavaScript.
A Slideshow ExampleThe website for the Momento App has a horizontal-scrolling slideshow that presents new content when the user clicks left and right.
Momento App has its own jQuery plug-in for the slideshow effect.
How It WorksThe five slides are img elements wrapped in divs and positioned sequentially inside their containers:
<div id="tour_pages">
<div id="tour_page_capture" class="tour_page">
<img src="images/tour/capture.png" />
</div>

<div id="tour_page_import" class="tour_page loading">
<img src="images/tour/import.png" />
</div>

<div id="tour_page_browse" class="tour_page loading">
<img src="images/tour/browse.png" />
</div>

<div id="tour_page_read" class="tour_page loading">
<img src="images/tour/read.png" />
</div>

<div id="tour_page_protect" class="tour_page loading">
<img src="images/tour/protect.png" />
</div>

</div>

<a id="tour_nav_previous" href="#">Previous</a>
<a id="tour_nav_next" href="#">Next</a>The container tour_pages has a fixed height and width in the CSS. It also has the overflow property set to hidden.
#tour_pages {
position: absolute;
left: 0px;
top: 116px;
height: 420px;
width: 940px;
overflow: hidden;
}You can see in the image below how the five slides are positioned to move inside their containers. A container will clip everything outside of its boundaries because of overflow: hidden. This creates what we can call a window or viewport effect.
Showing the clipping frame and hidden elements.
This set-up can all be done with CSS and HTML alone. To create the interaction, we need to use JavaScript to move the slides when “Next” or “Previous” are clicked. The JavaScript used by Momento is quite involved, so I’ll leave it as an exercise for the reader to inspect, but I hope this example provides a good illustration of how HTML elements are controlled while remaining part of the document structure.
When to Use JavaScriptIn the Momento example, we can see how JavaScript is useful for controlling access to content. The hide and reveal technique in all its forms is useful for keeping visible content clean and enhancing the user experience.
The website is intended to sell a product, and this slideshow effect imparts a sense of quality, something that is more exciting than the norm. Interactive content like this works best for promotional content.
When Not to Use JavaScriptInteractivity can be a lot more engaging than static content, but it’s not always the most usable solution. Consider the following:
Will the user understand and expect the relevant action that occurs?If content is hidden, will the user know how to access it?Does the additional user input actually improve the overall experience?Will the website be usable on all devices?If you cannot justify the JavaScript against these questions, then you’d be wise to stay away. Be vigilant: ask yourself whether the extra eye-candy is really necessary.
Usable and accessible don’t just mean that a device is technically supported by the website. The website should be as easy to use as possible for all audiences—from young to old—and in all environments.
Further ReadingThe CSS Box Model A friendly introduction to the box model by Chris Coyier.jQuery Tutorials An extensive list of jQuery tutorials.Real Animation Using JavaScript, CSS3 and HTML5 Video An advanced look into animation by Dan Mall.Interactivity and JavaScript are almost synonymous in Web design, but as we’ll see in the next example, JavaScript is not always necessary.
2. CSS3 TransitionsThe CSS :hover pseudo-class allows for a style change when the user hovers over an element. Typically used on the <a> element for links, the change can provide visual feedback for the user. While not exactly revolutionary on its own, :hover can be used to great effect.
Designer Christoph Zillgens uses CSS3 transitions to enhance the hover effect. You can see the transition phases below:
Three phases of the hover transition: default, transition and then hover.
How It’s DoneInspecting the HTML doesn’t offer many clues. At a glance, we can see a normal link. This is perfect for semantic markup, but how do we create the transition?
<p class="category_link">
    <a href="http://christophzillgens.com/en/category/posts/">
        <span>View all Posts</span>
    </a>
</p>The only unusual addition here is the extra span tag wrapping the text. The CSS reveals the secret. Let’s take a look (some styles have been omitted below for readability):
.category_link a {
    display:block;
    background:rgba(0,0,0,.05) url(img/big_icons.png) 10px 10px no-repeat;
}
.category_link a:hover {
    background-color:rgba(180,70,30,.7);
    -webkit-transition:background-color .4s ease;
}
.category_link a span {
    position:relative;
    top:150px;
    opacity:0;
    -webkit-transition:all .3s ease-in-out;
}
.category_link a:hover span {
    top:130px;
    opacity:1;
}We can see in the HTML and CSS that both the a and span are converted to block-level elements to allow for positioning and sizing. They are styled in two states, default and hover (A and C in the image above).
By default, the span starts of with an opacity of 0 and at 150 pixels from the top. On hover, the span is fully visible and 130 pixels from the top. The anchor has a simple background color change between A and C.
At this stage, the hover effect jumps from default to the hover state instantly. This works fine for older browsers, but with CSS3 transitions we can create a silky-smooth animation between the two points.
Adding the TransitionWe now have a start point and end point for our hover effect. To create the intermediate transition, we can use the transition property (defined here) with a format like this:

transition: [transition-property] [transition-duration] [transition-timing-function]
In the default span style, the transition property was added like so:

-webkit-transition:all .3s ease-in-out;
This means that whenever the default style is applied, the span will transition between its current style and the default style. In this case, all CSS properties are affected, and the transition is triggered by the mouse hover. If we want to transition a single property, like the background-color of the anchor, we can do this, too:

-webkit-transition:background-color .4s ease;
Creating hover transitions is as simple as specifying the default and hover states with CSS and then letting the transition property animate any changes between the two.
When CSS Transitions WorkUsing the transition property with :hover is a very handy technique that bypasses JavaScript entirely. Removing this extra dependancy can save time and space.
That said, transitions are also triggered by dynamic HTML changes using JavaScript. If you’re used to toggling classes with JavaScript to change styles, then why not see what difference a transition or two can have?
You’ll notice that this example uses the -webkit- vendor-specific property for Safari and Chrome, but transitions are also supported in Opera using the -o- prefix and the new Firefox 4 beta with -moz-.
The good news for graceful degradation fans is that older browsers (i.e. Internet Explorer) ignore the transition and apply the style change immediately. This means you’ll rarely find a situation in which using transitions degrades functionality.
Other ExamplesHere are a few more websites whose use of CSS transitions is noteworthy:
When using hover, the affected elements don’t always need to sit inside the same container. Love Nonsense makes use of the adjacent sibling selectors to trigger transitions.Simurai demonstrates a combination of transitions and transforms to create a complex experimental toggle button using nothing but CSS and HTML.The :hover is not the only trigger for transitions. Neal Grosskopf’s CSS-only lightbox demonstrates the use of the :target pseudo-class.Further ReadingHere is a selection of in-depth articles that cover the nuances of CSS transitions:
“A Comprehensive Guide to CSS 3 Transitions,” by Ashton Blue,“Understanding CSS3 Transitions,” by Dan Cederholm,“CSS Fundamentals: CSS 3 Transitions,” by Dave Sparks.3. Animations With SVGHover effects work well for links but can be confusing when triggered unexpectedly on other elements. They’re also less accessible on touchscreen devices. Adding interactivity when the user clicks is usually very useful because it provides feedback to the user, and sometimes it just feels more intuitive.
Get Satisfaction uses a clever tech[…]

  Almost every new client these days wants a mobile version of their website. It’s practically essential after all: one design for the BlackBerry, another for the iPhone, the iPad, netbook, Kindle — and all screen resolutions must be compatible, too. In the next five years, we’ll likely need to design for a number of additional inventions. When will the madness stop? It won’t, of course.
In the field of Web design and development, we’re quickly getting to the point of being unable to keep up with the endless new resolutions and devices. For many websites, creating a website version for each resolution and new device would be impossible, or at least impractical. Should we just suffer the consequences of losing visitors from one device, for the benefit of gaining visitors from another? Or is there another option?
Responsive Web design is the approach that suggests that design and development should respond to the user’s behavior and environment based on screen size, platform and orientation. The practice consists of a mix of flexible grids and layouts, images and an intelligent use of CSS media queries. As the user switches from their laptop to iPad, the website should automatically switch to accommodate for resolution, image size and scripting abilities. In other words, the website should have the technology to automatically respond to the user’s preferences. This would eliminate the need for a different design and development phase for each new gadget on the market.
The Concept Of Responsive Web DesignEthan Marcotte wrote an introductory article about the approach, “Responsive Web Design,” for A List Apart. It stems from the notion of responsive architectural design, whereby a room or space automatically adjusts to the number and flow of people within it:
“Recently, an emergent discipline called “responsive architecture” has begun asking how physical spaces can respond to the presence of people passing through them. Through a combination of embedded robotics and tensile materials, architects are experimenting with art installations and wall structures that bend, flex, and expand as crowds approach them. Motion sensors can be paired with climate control systems to adjust a room’s temperature and ambient lighting as it fills with people. Companies have already produced “smart glass technology” that can automatically become opaque when a room’s occupants reach a certain density threshold, giving them an additional layer of privacy.”
Transplant this discipline onto Web design, and we have a similar yet whole new idea. Why should we create a custom Web design for each group of users; after all, architects don’t design a building for each group size and type that passes through it? Like responsive architecture, Web design should automatically adjust. It shouldn’t require countless custom-made solutions for each new category of users.
Obviously, we can’t use motion sensors and robotics to accomplish this the way a building would. Responsive Web design requires a more abstract way of thinking. However, some ideas are already being practiced: fluid layouts, media queries and scripts that can reformat Web pages and mark-up effortlessly (or automatically).
But responsive Web design is not only about adjustable screen resolutions and automatically resizable images, but rather about a whole new way of thinking about design. Let’s talk about all of these features, plus additional ideas in the making.Adjusting Screen ResolutionWith more devices come varying screen resolutions, definitions and orientations. New devices with new screen sizes are being developed every day, and each of these devices may be able to handle variations in size, functionality and even color. Some are in landscape, others in portrait, still others even completely square. As we know from the rising popularity of the iPhone, iPad and advanced smartphones, many new devices are able to switch from portrait to landscape at the user’s whim. How is one to design for these situations?

In addition to designing for both landscape and portrait (and enabling those orientations to possibly switch in an instant upon page load), we must consider the hundreds of different screen sizes. Yes, it is possible to group them into major categories, design for each of them, and make each design as flexible as necessary. But that can be overwhelming, and who knows what the usage figures will be in five years? Besides, many users do not maximize their browsers, which itself leaves far too much room for variety among screen sizes.
Morten Hjerde and a few of his colleagues identified statistics on about 400 devices sold between 2005 and 2008. Below are some of the most common:

Since then even more devices have come out. It’s obvious that we can’t keep creating custom solutions for each one. So, how do we deal with the situation?
Part of the Solution: Flexible EverythingA few years ago, when flexible layouts were almost a “luxury” for websites, the only things that were flexible in a design were the layout columns (structural elements) and the text. Images could easily break layouts, and even flexible structural elements broke a layout’s form when pushed enough. Flexible designs weren’t really that flexible; they could give or take a few hundred pixels, but they often couldn’t adjust from a large computer screen to a netbook.
Now we can make things more flexible. Images can be automatically adjusted, and we have workarounds so that layouts never break (although they may become squished and illegible in the process). While it’s not a complete fix, the solution gives us far more options. It’s perfect for devices that switch from portrait orientation to landscape in an instant or for when users switch from a large computer screen to an iPad.
In Ethan Marcotte’s article, he created a sample Web design that features this better flexible layout:

The entire design is a lovely mix of fluid grids, fluid images and smart mark-up where needed. Creating fluid grids is fairly common practice, and there are a number of techniques for creating fluid images:
Hiding and Revealing Portions of ImagesCreating Sliding Composite ImagesForeground Images That Scale With the LayoutFor more information on creating fluid websites, be sure to look at the book “Flexible Web Design: Creating Liquid and Elastic Layouts with CSS” by Zoe Mickley Gillenwater, and download the sample chapter “Creating Flexible Images.” In addition, Zoe provides the following extensive list of tutorials, resources, inspiration and best practices on creating flexible grids and layouts: “Essential Resources for Creating Liquid and Elastic Layouts.”
While from a technical perspective this is all easily possible, it’s not just about plugging these features in and being done. Look at the logo in this design, for example:

If resized too small, the image would appear to be of low quality, but keeping the name of the website visible and not cropping it off was important. So, the image is divided into two: one (of the illustration) set as a background, to be cropped and to maintain its size, and the other (of the name) resized proportionally.

<h1 id="logo"><a href="#"><img src="site/logo.png" alt="The Baker Street Inquirer" /></a></h1>
Above, the h1 element holds the illustration as a background, and the image is aligned according to the container’s background (the heading).
This is just one example of the kind of thinking that makes responsive Web design truly effective. But even with smart fixes like this, a layout can become too narrow or short to look right. In the logo example above (although it works), the ideal situation would be to not crop half of the illustration or to keep the logo from being so small that it becomes illegible and “floats” up.Flexible ImagesOne major problem that needs to be solved with responsive Web design is working with images. There are a number of techniques to resize images proportionately, and many are easily done. The most popular option, noted in Ethan Marcotte’s article on fluid images but first experimented with by Richard Rutter, is to use CSS’s max-width for an easy fix.

img { max-width: 100%; }
As long as no other width-based image styles override this rule, every image will load in its original size, unless the viewing area becomes narrower than the image’s original width. The maximum width of the image is set to 100% of the screen or browser width, so when that 100% becomes narrower, so does the image. Essentially, as Jason Grigsby noted, “The idea behind fluid images is that you deliver images at the maximum size they will be used at. You don’t declare the height and width in your code, but instead let the browser resize the images as needed while using CSS to guide their relative size”. It’s a great and simple technique to resize images beautifully.
Note that max-width is not supported in IE, but a good use of width: 100% would solve the problem neatly in an IE-specific style sheet. One more issue is that when an image is resized too small in some older browsers in Windows, the rendering isn’t as clear as it ought to be. There is a JavaScript to fix this issue, though, found in Ethan Marcotte’s article.
While the above is a great quick fix and good start to responsive images, image resolution and download times should be the primary considerations. While resizing an image for mobile devices can be very simple, if the original image size is meant for large devices, it could significantly slow download times and take up space unnecessarily.
Filament Group’s Responsive ImagesThis technique, presented by the Filament Group, takes this issue into consideration and not only resizes images proportionately, but shrinks image resolution on smaller devices, so very large images don’t waste space unnecessarily on small screens. Check out the demo page here.

This technique requires a few fil[…]