Fixed Headers and Web Fonts Explored

Colour co-ordination: Getting the right colour palette is critical to creating a website that conveys the right message, works with its surroundings and is easy to view. Two tools to help you with this are Adobe Kuler (http://kuler.adobe.com) and Color Scheme Designer (http://colorschemedesigner.com).

• Inspiration: www.kitchensinkstudios.com

Retro design, contemporary code: “The Kitchen Sink Studios site’s retro-inspired design uses HTML5, CSS3 and jQuery coding to allow for strong SEO and the ability to view it on all kinds of devices while preserving the design. Highly optimised CSS, streamlined navigation and heavy use of web fonts were just a few of the many approaches that went into the website.”

The right mix of web typography and HTML5 backgrounds can produce an imaginative and standards-friendly web presence, as seen in the Kitchen Sink Studios site. Typography is the key component and great use is made of a simple combo of typefaces, which are given extended mileage with clever use of colour, style size and positioning. The two font families forming a formidable partnership here are Bodoni and Brandon Grotesque. While they are the focal point, the background textures, images and colour palette all shout retro yet reined. On a more functional level, the single-page design uses a fixed header element, combined with a smooth scrolling script for the navigation.

#1 - Resource: Smooth Scrolling With Easing

Activating a link in the navigation menu sees the site deploy a smooth scrolling action down to the chosen section. This effect is all thanks to jQuery.

To use this the jQuery library needs to be referenced and either linked to or placed on the server. The obvious place to get this is http://jquery.com or you can use a web-based library as per Google – take a look here: http://code.google.com/apis/libraries/devguide.html#jquery for more info. To create the scrolling effect the Easing plug-in is used. A great example and guide can be found at http://bit.ly/bD57s4.

#2 - Technique: Fixed Navigation

STEP 1: Introducing The Nav Tag

Typically, the navigation menu of a site is kept inside its own specific div tag or, if it’s HTML5-friendly, it will reside inside the nav tag, as seen here. Whichever tag is being used, it needs to be placed in a fixed position in order to remain a constant element.

CODE:

<nav>

<ul>

<li>HOME</li>

<li>COMPANY</li>

<li>WORK</li>

</ul>

</nav>

STEP 2: Fix The div Tag Position

Fixing the position of a div tag is an incredibly straightforward task – in fact, the only thing that it requires is the application of the position tag. Add the following code – position: fixed; – to the nav, or relevant tag, as shown below (line 4) and save. The tag will now be locked into its position, which will enable the page content to scroll under the menu.

CODE:

nav{

height: 35px;

width: 1000px;

position: fixed;}

STEP 3: Add Some Padding…

Fixing the navigational tag will mean that the next div tag – say, for example, #maincontent (line 1) – will be effectively placed behind the nav tag; this means it will hide any content at the top of the tag. To accommodate this side-effect, you can apply a little padding (line 4) – approximately the same size as the nav height – to the top of the #maincontent tag.

CODE:

#maincontent {

height: 500px;

width: 980px;

padding-top: 50px;}

STEP 4: …or Float The Margins

An alternative solution to the padding option considered in step 3 is to add a margin (line 4) instead, but this on its own can cause the fixed header to adopt the margin and move the header down the page. To compensate for this, the tag can be floated to the left (line 5), which will move the header back to the top of the page where it belongs.

CODE:

#maincontent {

height: 500px;

width: 980px;

margin-top: 50px;

float: left;}

#3 - Inspiration: Borrow From The Past

There is no doubt that the design inspiration for the Kitchen Sink Studios website has gone back in time and borrowed a number of elements and ideas from the past. This gives it a fascinating old-fashioned feel, from the imagery to the graphical elements to the aged paper texture seen throughout.

But the element that probably most stands out in terms of its retro roots is the typography. The site makes extensive use of the Bodoni font which is cleverly partnered with Brandon Grotesque. To generate the sheer variety of type seen on the Kitchen Sink site a selection of weights, styles and colours have been used. The fonts are well complemented by the aged backgrounds and textures that surround them.

#3 - Inspiration: Borrow From The Past

#4 - Technique: The @font-Face Generator

The web font revolution has seen an influx of new typefaces. Font Squirrel provides its own examples and code to get you started.

STEP 1: Find Favourite Fonts

There are a number of ways to use @font-face, but this is one of the best. First, obtain fonts from sources like MyFonts (www.myfonts.com) or FontSquirrel (www.fontsquirrel.com). Now head to www.fontsquirrel.com/fontface/generator.

STEP 1: Find Favourite Fonts

STEP 2: Generate Code

Click Add Fonts and select the ones you want from your system. If using for web alone be aware of the different formats. Click the Agreement checkbox to activate the Download Your Kit button; this will provide a ZIP file with the necessary code and fonts.

STEP 2: Generate Code

STEP 3: On To The Web

Add the font to the same location as the HTML file being used; add all variations for greater compatibility. Now use the CSS file or add the @font-face code to a style sheet already being used. Finally, you need to add the appropriate code to a tag, ie: h1 {font: bold 50px ChunkFiveRoman;}.

STEP 3: On To The Web