As we all may know – Web 101 includes a plethora of venues for better performing sites: SEO being one of them. Speed is another. As a matter of fact – speed may one day affect your page rankings in search engines. Now before we scour our HTML for bloated code, check out these quick and easy tips on how to make your web pages faster:

Smush.It

Smush.It is Yahoo’s proprietary image compression tool. If you haven’t yet noticed, web sites nowadays are getting fancier. Plenty of images – large backgrounds, slideshows, thumbnails – they’re all accomplished by embedding images into the pages. The problem is – images are huge in kilobytes. Smush.It takes care of that by compressing your images, hence “Smush” – but without loss of quality.

Simply go to Smush.it and upload your images. No code to download, no plugin to install – Yahoo has provided this service for anyone to use online.

For WordPress Users:

A beautiful plugin known as WP Smush.it developed by the folks from Dialect.ca. The plugin automatically compresses images uploaded to your posts behind the scenes – using the Smush.it API. What’s great about this plugin is – you can go back to your image library and Smush your older images – how neat is that!

Use Lazy Load

You ever notice those mega websites with tons of images in an article – but each image only load when you scroll to that part? This effect is achieved through Javascript (jQuery) and a little plugin called Lazy Load. Lazy Load is developed by Mika Tuupola with the main purpose of delaying the loading of images below the viewable screen area. Thus making pages load faster – especially helpful for long pages with plenty of images.

Installing Lazy Load is very easy. There are two scripts you need included in your page – the jquery.js file and the plugin script itself (which can be downloaded from this link)

1
2

<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.lazyload.js" type="text/javascript"></script>

You can assign all images to automatically load lazy:

$("img").lazyload();

Or only specify specific images:

$("#main-container img").lazyload();

CSS Sprites

No, not another flavor of that clear soda pop – CSS Sprites is the process of using a single image for a web component such as navigation or rollover buttons. The idea is one image source greatly reduces the amount of HTTP requests compared to using multiple images; thus, decreasing page load times. Web designers may have started using sprites for buttons, but I’ve seen many websites using it on any static image such as maps, rating scales and logos. My main navigation bar is using CSS Sprites:

While many think CSS Sprites are daunting to make – it certainly becomes much easier once you get the hang of it. Check out my tutorial on How to make a Subscribe Bar using CSS sprites.

Combine those Stylesheets

As mentioned previously – Reducing the number of HTTP requests is key to a speedier page. Different calls for external stylesheets is no different. Having just a single external stylesheet will definitely improve your page performance. This may not apply to smaller single page portfolios, but if you run a blog or a CMS with countless dynamic pages – having multiple stylesheets is very common. Combine those styles into one giant stylesheet. Better yet – include an @imports statement inside your main css file:

Update! – It turns out that using @imports may have a negative impact on the overall performance of your websites. Thanks to Max Zero – who led me to this article which outlines performance lags including IE issues by using @imports.

1
2
3
4

@import url('/css/another.css') screen; 
@import url('/css/another1.css') screen; 
@import url('/css/another2.css') screen; 
@import url('/css/print.css') print;

Import statements include other stylesheets into your main css. So you can still use multiple sheets – but in your HTML – you just call the main file:

<link rel="stylesheet" type="text/css" href="/css/styles.css" />

For WordPress Users:

Many of you may not know that most plugins come with their own css file. The more plugins you have – the more HTTP request for those stylesheets get appended in your HTML – slowing your pages down multi-fold. Read this article by WPRecipes on how to deregister plugin css files. Once you have the css deregistered, simply copy those stylesheets it into your main styles.css file. This eliminates the need for those additional stylesheets.

Use Speed Testers

The final tip for web swiftness –use online speed testers. These are special websites that determine your page load times. Of course this alone won’t make your website fast – you have to go through the analysis and recommendations on HOW to speed up your website. What’s good about these websites are not only that they’re designed specifically for this purpose – but also, they’re free! So take advantage of speed testers and see their suggestions on how to fix and fine tune your site. I think of them as pit stops for web pages – sound corny? I think so too.

Personally, I use a firefox add-on known as YSlow. YSlow analyzes your pages based on the strict Yahoo rules for high website performance.

Other online web page speed testing services include: http://tools.pingdom.com/ and http://www.websiteoptimization.com/services/analyze/.

Conclusion:

Now apply these techniques to you web pages and I guarantee a significant increase in performance. What about you? Do you have tips on how to make web pages faster? Feel free to leave a comment below:

As I was searching the net for good restaurant websites, I stumbled upon these 16 sites which had all the elements that my client needed. In addition, some of these websites look so good – that it would inspire many of you designers out there. Note that I included my work in the list (its my blog – I can do whatever I want).

http://thenoodlebox.net/

http://www.rubytuesday.com

http://www.twelve-restaurant.co.uk/

http://www.pizzaza.ca/

http://www.nuevo-aurich.de/

http://www.pomonavalleyminingco.com/

http://www.lapizarraproject.com/

http://www.villagerkent.com/

http://www.bertoldis.ca/

http://www.caferouge.co.uk/

http://jakesrh.net/

http://www.belgo-restaurants.co.uk/

http://www.giraffe.net/

http://www.sandiegobrewing.com/

http://www.hoddows-gastwerk.de/

http://www.strada.co.uk/

To preview what we are going to build – see the demo page. Just in case you missed the first tutorial, click here. So are you ready to get started? Let’s begin:

The Wrap, Header and Feature Divs

First of all, you will notice that our layout doesn’t really have anything in the header. This is because I’m sure you will use your own logo for your design – so I left that out. Second, is there really is no need for a navigation bar because we’re only building a single page. Although we may include some anchors in this area so we can quickly jump from one section of the page to another. Also important to recognize that most modern websites now have a large “feature” section which packs the main message of the website. This effect is proven to be pretty effective – that’s why we’re applying the same concept to our portfolio site.

In Dreamweaver, create a new HTML page, name it “index.html” and save it.

Create a CSS document – name it “styles.css” and save it in the same location as “index.html”. Link to the stylesheet from index.html by using a link tag:

<link type="text/css"  href="styles.css" rel="stylesheet" />

Now, we create the main DIV – we’ll call this the “wrap”. In this DIV we’ll house almost all of our elements (all but one: the footer – which I’ll explain later). In index.html, enter the code:

<div id="wrap">  </div><!--wrap-->

Next, we grab the body style of our page. Go to Photoshop and open our mockup. Flatten the image (“Layer” > “Flatten Image”) and grab a piece of background:

Still in Photoshop, press Ctrl + C to copy the selected area, create a new document – and paste (this will be our HTML body background that will span horizontally). Save this file as “body-bg.gif” inside a folder called “images” in our root directory.

Next is we apply some fixin’s to our CSS:

* {padding:0; margin:0}
  body{background: url(images/body-bg.gif) repeat-x #f3f2ed;}

The above code tells everything to reset to 0 padding and 0 margin. It also applies the body background to the image we just created, repeat it horizontally and apply the color #f3f2ed everywhere else. View your file in the browser, you should have something like below:

Now remember we created the main div? That is just sitting in somewhere in the page. Let’s apply some standard measurements to it and align it so it settles perfectly in the middle of our browser.

Note that in the beginning of this tutorial – I was going to use the 960.gs framework, but feel as though I’m cheating because the tutorial calls for “from scratch”. So I decided, I’m not using the framework and code everything by hand, hence – “from scratch”.

Add this code to your style.css:

#wrap {margin:0 auto; width:960px; background:#CCCCCC;  min-height:500px;}

This centers our wrap in the middle of the page, as well as set the default 960 pixels width. The background color and the minimum height properties are added temporarily so we can tell from the browser what we’re working with. Refresh your page and you should have something like below:

Go back to index.html and add the header div inside the wrap div:

<div  id="header"></div><!--header-->

Back to our style.css – add this piece of code:

#header {height:32px; background:#333333;}

Refresh your browser – and you can see where our header sits nicely on top. The background color again is temporary.

Next is our feature div. Create a new div tag in your index.html with the id of “feature”, place in between the “feature” divs. Add two paragraph tags inside with your own text. In my case – I’m using the default Lorem latin filler text:

1
2
3
4

<div id="feature">
<p id="slogan"><!--your fantastic slogan goes here--></p>
<p><!--followed by a smaller, but also fantastic slogan here--></p>
</div><!--feature-->

Notice the first paragraph tag has an id of “slogan”. This is because this is the primary text that we are going to style with an image. We are treating it as regular text for SEO purposes.

Go back to your mock up in Photoshop and press “Step Backward” (ctrl + z + alt) several times until you get the fully layered version once again. Make sure the guides are showing – select the feature section like below:

In your layers panel, make sure you hide all the layers that shouldn’t be shown. This includes all the background layers and text elements. The only layer that should remain is the large feature image and the borders and glow to the left. Select the feature area and hit crop (“image” > “crop”). Save this as “feature.png” inside our images folder. This will be our feature div background image:

Now in our styles.css – add the following code:

#feature {background:url(images/feature.png)  no-repeat; height:394px;}

Go back to your mockup and click “Step Backward” (“Edit” > “Step Backward”) to uncrop. Unhide the slogan layer and select it according to the guides. Crop once again and save this as “slogan.png”.

Now add this code to your styles.css:

1
2

#feature p#slogan {background:url(images/slogan.png)  no-repeat; width:390px; height:192px; text-indent:-9999px; position:relative;  top:30px; margin:0;}
#feature p {font-family:verdana; font-size:12px;  color:#FFFFFF; width:320px; line-height:20px; margin:48px 0 0 28px;}

The above code styles the two paragraph tags inside the feature div. The first one with a background image, and the next one as plain text. Now when search engines crawl our page – it still thinks both are plain text – which is a good thing.

I’ve also taken out the color property in our wrap div to see how our feature looks like. Another thing to remember is that since our feature sits in its own div – it will be easy to add a slideshow or something to that effect as replacement.

Now that our wrap, header and feature is in place, we’re ready to move to the next sections: Testimonials and Previous Work:

Testimonials and Previous Work Sections

If the feature section is our hard hitter – a testimonials area is our “counter punch”. Testimonials are a sure fire way of telling our viewers: “we’re good – read what others are saying about me!”. Also another proven way of increasing business, it is also the reason why we’re putting testimonials right below our feature section. Ready to continue coding? Let’s keep going.

In our index.html, add the code for our testimonials. Place this directly below our feature div:

1
2
3
4
5
6
7
8
9
10

<div class="column first">
<p><!--your content here--></p><strong><!--author here--></strong>
</div><!--column-->
<div class="column">
<p><!--your content here--></p><strong><!--author here--></strong>
</div><!--column-->
<div class="column last">
<p><!--your content here--></p><strong><!--author here--></strong>
</div><!--column-->
</div><!--testimonials-->

Of course, you substitute real testimonials and authors in its place. Notice the “first” and “last” additional classes to the columns – we need this to fix our margins in our css. Next, go back to Photoshop and go backwards again so you get back to the original uncropped file. Select the Testimonials title all the way to the rightmost guide. Crop and save as “testimonials-title.jpg” inside our images folder.

Inside styles.css, append the below code:

1
2
3
4

#testimonials {clear:both;  background:url(images/testimonials-title.jpg) no-repeat top left;  overflow:hidden; padding:65px 0 0 0; margin:0 10px 0 10px;}
#testimonials .column {width:260px; float:left;  background:#ccc; padding:20px; margin:10px; font-family:georgia, helvetica,  arial, serif; font-size:13px; line-height:19px;}
#testimonials .column.first{margin-left:0px;}
#testimonials .column.last{margin-right:0px;}

This code adds the background image that we just created to the main testimonials div. It also adds proper styling to the columns inside the div, and fixes to the margins so it remains inside our imaginary grid.

The optional “more” tab

The more tab is only necessary if you have more than 3 columns of testimonials that you would like to show. The point is just show 3 columns at first, and by clicking the “more” tab – more testimonial columns will slide below – most likely to be achieved by jQuery (I haven’t gotten there yet – remember – I’m writing this tutorial as I go!).

To add a more tab – add this code to your HMTL, right underneath the last column div:

1
2
3

<div class="more">
<a id="more-testimonials">More  Testimonials</a>
</div><span id="more-1035"></span>

Note that we used a class for our div instead of an id. This is because this div can actually be reused in another section of our page.

Go back to your Photoshop file – click “Step Backwards” to the uncropped version – select the section that shows the “more testimonials” border and button according to your guides. Remember to hide the text layer over the button.

Crop and save this as “more-bg.jpg” inside the images folder. Add the code below to your .css file:

1
2
3
4

.more {clear:both; background:url(images/more-bg.jpg)  no-repeat; height:31px;}
.more a{float:right; font-family:verdana; font-size:10px;}
.more a:hover {color:#999999;}
a#more-testimonials {padding:10px 16px 0 0;}

For the “Previous Work” section – it’s pretty much the same process as testimonials. The difference is – we are actually using an unordered list instead of div columns. Add the following code inside your HTML:

1
2
3
4
5
6
7
8
9
10
11

<div id="previous-work">
<ul>
<li><a  href="images/thumbnail.jpg"><img  src="images/thumbnail.jpg" /></a></li>
<li><a href="images/thumbnail.jpg"><img  src="images/thumbnail.jpg" /></a></li>
<li><a  href="images/thumbnail.jpg"><img  src="images/thumbnail.jpg" /></a></li>
<li class="last"><a  href="images/thumbnail.jpg"><img  src="images/thumbnail.jpg" /></a></li>
</ul>
<div class="more">
<a id="more-previous-work">More Previous  Work</a>
</div><!--more-->
</div><!--previous-work-->

The thumbnail sizes are going to be 200 pixels width by152 pixels height. My sample code contains dummy thumbnails along with temporary images for the bigger image. We are incorporating a light box effect in the final product so users do not actually leave the page when viewing your gallery. Notice the addition of the “more” tab – which is again, purely optional.

For the “Previous Work” title – you do the same exact process in Photoshop as you did previously in the Testimonials title. Save this image in the images folder – name it: “previous-work-title.jpg”.

Now we add some styling to the list items, thumbnails and the entire div section:

1
2
3
4
5
6
7
8

#previous-work {clear:both; background:url(images/previous-work-title.jpg)  no-repeat top left; overflow:hidden; padding:65px 0 0 0; margin:0 10px 0 10px;  text-shadow:0 1px 0 #fff;}
#previous-work ul {padding-left:7px;}
#previous-work ul li{float:left; list-style:none;  margin:20px 15px 20px 0;}
#previous-work ul li.last{margin:20px 0 20px 0;}
#previous-work ul li a{background:url(images/thumb-bg.jpg);  width:209px; height:165px; display:block; padding:11px 0 0 10px;}
#previous-work ul li a:hover  {background:url(images/thumb-bg-hover.jpg);}
#previous-work ul li a img {border:none; outline:none;}
a#more-previous-work {padding:10px 10px 0 0;}

I also created a couple of thumbnail image backgrounds for the active and hover states. Again this is purely optional and I won’t go over in this tutorial.

Now refresh your page in your browser. You should have something like the image below. It is also good practice to start viewing your page in different browsers. This way – you can start fixing bugs this early in the development process. Next stop is the footer.

The Footer

Let’s go back to our Photoshop file – you may have to go back in history a couple of times to get you to the uncropped, fully layered version. Another thing to remember is NOT to save your original mock up file. This file is to stay in its original form – we are just cropping, hiding layers as we go to get the parts we want. But in the whole, this mockup .psd file remains in its original state. Select the footer area – starting from the guide a few pixels above the dark brown area.

Once selected – crop the selection – but don’t save as of yet; we’re going to save a couple of images from this selection – one is the footer wrap, the other is the actual footer background.

Once cropped, select the first 20 pixels from the left and crop once again. Save this file as “footer-wrap.gif” inside our images folder. Now go back to the Photoshop file and step backwards a couple of times to bring us to entire cropped footer image. Hide the layer group named “form”, as well as all the text layers in the footer area.

Save this file as “footer.jpg” in the images folder. Unhide the text layer that says “Hire Me for Professional Work”, and hide all the background layers so you get full transparency. Select the text area using the rectangular marquee tool and crop. Save this file as “slogan2.png” in our images folder.

Now hit “Step Backward” (ctrl + alt + z) a couple of times to get to the uncropped footer image and unhide the “form” group of layers. Make sure you hide all the layers inside the form – all we need is the rounded container that embodies the form. Select this area, crop and save this file as “form-bg.png” in our images folder.

Finally, unhide the button text, shape and glow. Create guides that surround the button image and select accordingly. Crop and save as “submit.png” in our images folder.

Now go back to our index.html, add the following code right underneath the entire wrap div.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

<div id="footer-wrap">
<div id="footer">
<div id="left-container">
<p id="slogan2">Hire Me for Professional  Work</p>
<p><!--your footer slogan in this section</p>
</div><!--left-container-->
 
<form id="contact-form">
 
<div id="split-left">
  <label  for="name">Name:</label><br/>
  <input name="name" id="name"  type="text" class="formbox"/><br />
  <label  for="email">Email:</label><br />
  <input name="email" id="email"  type="text" class="formbox" /><br />
</div><!--split-left-->
  <label  for="comments">Comments:</label><br />
  <textarea name="comments"  id="comments" type="textarea" class="formbox"  /></textarea>
  <input name="send" id="send"  type="submit" value="" class="send"  />
</form>
 
</div><!--footer-->
</div><!--footer-wrap-->

The above code sets up all the content in the footer. This includes the two paragraphs on the left side and the contact form. Note that the form is still static. We will be converting this into a working form once we convert this to PHP.

Next up, is to style the contact form. Add the following code to your styles.css:

1
2
3
4
5
6
7
8
9

#footer-wrap {clear:both;  background:url(images/footer-wrap.gif) repeat-x; height:377px;  margin-top:20px;}
#footer {width:940px; margin:0 auto;  background:url(images/footer.jpg); height:377px;}
#footer #left-container {width:400px; float:left;}
#contact-form {background:url(images/form-bg.png) no-repeat;  width:427px; height:169px; float:right; padding:40px 0 0 0; margin:78px 0 0 0;}
#split-left {width:170px; float:left; margin:0 0 0 30px;}
#contact-form label{color:#9e876b; font-family:verdana;  font-size:10px;}
#contact-form .formbox {padding:2px; margin:4px 0 7px 0;}
input.send {background:url(images/submit.png); width:101px;  height:37px; border:none; display:block; margin-top:10px;}
input:hover.send {background:url(images/submit2.png);}

The above code sets up our footer wrap to span the entire width of the page with its own background image repeating horizontally. Now you understand why we excluded this from the main wrap div? The rest of the code applies the styling to the footer and contact form – tied to the images we created in the previous steps.

Finally, we add the final touches to the two paragraph tags on the left side. Add this code to your styles.css:

1
2

#footer p#slogan2 {background:url(images/slogan2.png);  width:400px; height:123px; text-indent:-9999px; }
#footer p {width:400px; float:left; font-family:verdana;  color:#FFFFFF;  text-shadow:0 1px 0 #000;  font-size:12px; line-height:20px; }

That concludes are HTML and CSS tutorial on our single page portfolio. Remember, we still have the scripting side to do – which is handled by PHP and jQuery, which we’ll cover in the next series. Click Here to see the DEMO Version of what we just created. The source code is also available to download – which includes all the files covered in this tutorial.

I inspect element in Firebug – then I see span class “cufon” everywhere.

So What in the world is Cufon?

Cufon is defined as “fast text replacement with canvas and VML”. It also claims to be a worthy alternative to sIFR – which is, to those who are not familiar – stands for Scalable Inman Flash Replacement. sIFR is the technology used by web designers to replace dynamic text with non-web safe fonts. Although sIFR has done an okay job with text replacement – it has proven to be quite tricky to set up. I’ve used sIFR in a few projects in the past and do admit that it is not the easiest thing to get going. On top of that – sIFR seems a bit buggy, as well as slows down page loads. These are serious consequences to consider for the price of using a unique font for your pages.

So I went ahead and tried Cufon. To my amazement, the following steps is all that it takes to fully “Cufonize” your web pages. *Forgive the use of the term “cufonize” – it may sound funny, but after you try these steps, you too will “cufonize” your pages.

Step 1: Get Cufon

The first thing you need is to download the core javascript file which is responsible for the rendering of your custom font inside your HTML. Head on to http://cufon.shoqolate.com/generate/ and right click the “Download” tab – choose “Save Link As…” Save cufon-yui.js into a local directory in your machine.

Step 2: Generate your Font

On the same page at http://cufon.shoqolate.com/generate/ – click on the “Regular typeface” field – and browse to your desired font in your local machine.

The rest of the upload fields are optional. I left all of them default for the sake of making this tutorial short. Just make sure – you are using a font that is legit to use, check off the EULAs and the Terms of Agreement. Click on the “Let’s Do This” Button at the very end of that page.

This should generate a custom font javascript code for you – depending on your font choice. In my case, I picked something very un-extraordinary: Gigi.TTF – which produced a file named Gigi_400.font.js.

Go ahead and save this file in the same directory where you saved the core Cufon-yui.js file and we’re ready to build your page:

Step 3: Cufonize your Page

All you really need to do from this point is to link to these javascript files in the head section of your HTML. Also make sure that cufon-yui.js is called before the font.js file:

<script type="text/javascript" src="cufon-yui.js"></script>
<script type="text/javascript"  src="Gigi_400.font.js"></script>

To begin the replacement process – create a custom script like below:

<script type="text/javascript">  
    Cufon.replace('h3, p');
</script>

The above script is telling the cufon to replace all H3 and P tags to our custom font.

Note that if you want to target specific elements in your page the same way you assign CSS classes and Ids, you have to use a framework such as jQuery that’ll let you do such a thing. To download jQuery, go to http://docs.jquery.com/Downloading_jQuery. Make sure you link to this file BEFORE the core cufon-yui.js in your header.

With the jQuery library in place, now you can select more specific elements in your page (hashtags for IDs and periods for classes). See example code below:

<script type="text/javascript">  
    Cufon.replace('h3#convert-me, p#convert-me-too');
</script>

The above code will Cufonize only the h3 tags with the id of “convert-me”, and p tags with the id of “convert-me-too”.

Conclusion:

That’s basically it! That’s all it takes for you to use any font you like in your web pages. What I like best about Cufon is that it’s quick and it works. You will also find that general CSS properties such as color, size and positioning still applies on the transformed font. To find out more about the specifics of Cufon styling – see http://wiki.github.com/sorccu/cufon/styling.

Much respect to the people who created Cufon. I’m sure this marks a new trend in web typography. To the folks at Woothemes: keep pushing the boundaries – your work is pure inspiration to web artists everywhere.

Who’s Using Cufon?

The following list of websites are already using Cufon text replacement in their pages:

Healthy Valdosta

Press75

International Rugby Academy

Zen Desk

Rock Beats Paper

Shopify

The design uses a base of burgundy and splashes of tan for the color scheme. The icons used are from the coquette collection in smashingmagazine, while fonts are Georgia and Helvetica Nueu. The file is of high quality, fully layered and grouped. All I ask in return is for you to leave a comment below or follow me in Twitter.

To download – simply click here. Have fun designing!

The Traffic Logo is done by another designer which was required to stay intact. You can download the .psd files from this link. Please feel free to comment below or follow me in Twitter.