headjs is a small script which can help speed up your site and comes bundled with a number of other very useful features.

WTF do you mean?

Headjs allows your javascript files to be loaded like images – completely separate from the page rendering process. Normally JavaScript is placed within the HEAD tag of a page (ideally, below CSS and metadata) which means your JavaScript files will load before the page rendering process, this in turn adds time for your page to display. The most simply fix for this is to move any JavaScript calls to the bottom of the page directly before the closing tag of the BODY. In addition to this, by adding Headjs you can also take advantage of some of it’s handy features.

CSS Modenizer

Headjs adds checks for browser support for various CSS properties and adds CSS classes to the HTML root so you can provide CSS styling appropriate to the capabilities of the browser. e.g.
target CSS for browsers without box-shadow support:

.no-boxshadow .box {
   border: 2px solid #ddd;
}

HTML5 Enabler

Headjs provides cross browser support for html5 tags – <header/>,<article />,<footer /> etc.

Browser Detector

Headjs detects which browser is being used and applies a CSS class to the root element of the page. e.g – .lt-ie9 stands for less than IE9. It’s recommend to use feature detection instead of targeting specific browsers.

And lots of other features

Headjs also has a api and comes with lots of other features on top of the points mentioned above. Visit headjs for more info. Finally, it’s worth keeping in mind this is a JavaScript dependent solution and you should make sure your site functionality isn’t reliant on this script.

Here’s a quick rundown of a few of the tools I’ve found useful while building responsive websites…

Responsive design tools

Protofluid

Protofluid is a tool designed for rapid prototyping responsive design. This desktop based app, provides an environment to test your site on a variety of device sizes and orientations. Device sizes available include Phones; BlackBerry Torch, Google Nexus One, iPhone, Motorola Droid, Tablets; BlackBerry Playbook, iPad, Samsung Galaxy Tab, Dell Streak. The only thing that lets this app down though is that you cannot scroll down the page you are testing.

Resize My Browser

Resize My Browser provides a quick and easy way to display content a different window sizes. It comes with a range of pre set sizes and you can also add your own custom sizes. Many browser add-ons such as firefox’s developer toolbar also provide this functionality.

Electric Plum iOS Web Browser Simulator

This is a iPad and iPhone browser emulator for windows. A great time saver for testing your web apps. Features include JavaScript error detection, ability to save out screenshots and a full screen mode – handy for client presentations.

Shazia Saleem London is a high-end fashion label specialising in luxurious hand woven textiles of the finest quality. This site was built using the eCommerce platform Shopify.

Over the next series of posts I’m going to detail some best practice techniques which result in good code consistency and easier to maintain projects.

Define default Typography styling

Headings h1 – h6

Define default styling for headings h1 – h6. The default styling should be defined at the top of the CSS file and modified as necessary for variations in styling i.e Styling specific to a page component.

Headings should always show a hierarchy indicating levels of importance, so your h1 should be in the largest font-size and h6 being the smallest.

Links and other common content elements

The same approach mentioned above should also be applied to common content elements such links, paragraphs, numbered lists, unordered list etc. Default styling for each common element should be defined at the top for the CSS file and overridden as necessary.

For links, make sure to define styling for each of the states – link, visited, hover, active, focus.

The selectors for each state is explained below…

• :link – this state can be used to define styling for when the link is not in use.
• :visited – this state indicates the link has been used before, the link has already been clicked on.
• :hover – this state indicates the link currently has the cursor/pointer hovering over it.
• :active – indicates the link is in the process of being clicked.
• :focus – same idea as :active but is used for when a user has tabbed to the link using the keyboard.

When writing CSS, you can also bundle your selectors together by shared styling.

a:link,a:visited {
color:#ec008c;
}
a:hover,a:active,a:focus {
color:#ff8cd1;
}