Your Customers are Mobile, you will be too …

Website Optimisation

As designers I am sure we have encountered cases where we have begun cross browser testing of a new website only to find some elements not displaying consistently on all browsers. By beginning our projects with a CSS reset helps us to ensure our websites and mobile apps looks as close as possible to original design regardless of browser. All browsers have their own set of default CSS settings and if we not overwrite these during our project they will rear their ugly head in some unexpected way during browser testing.

There are many different CSS resets out there and simple goggle search will come up with many but I am just going to cover the basic here today. Continue reading

In this tutorial we will show you the basics of the @font-face CSS3 property and how to use it. Although this guide is geared more towards using in a Adobe Dreamweaver CS6 or CS5.5 development environment it can be used not matter what editor you are using. Even other levels of Dreamweaver can use this tutorial, even though major support has been added to Dreamweaver CS5.5 and CS6 for CSS3 @font-face is not amongst the properties it has been expanded to include. Continue reading

Photoshop CS6 batch processing multiple images ready for the web

In this tutorial we will be showing you how to use batch processing to re-size an entire folder full of images you want to prepare for deployment on your web page. Rather than editing each photo individually, with one simple action we will change them all to 72ppi and re-size them all to suit your website. We all know we don’t want great big picture consuming a few meg of bandwidth each being re-sized by the browser. This is very bandwidth heavy so normally we would use Photoshop or Fireworks to re-size them etc. but when you are processing dozens or even hundreds at a time this can be quite tedious. This is where batch processing comes in. For this exercise I will be using Photoshop CS6 but most versions have this capability and are all pretty simple if not exactly the same.

This process has been testing and works also on Adobe Photoshop CS4, CS5, CS5.5 as well as CS6. The process remains unchanged across all these versions of Photoshop.
Continue reading

Note: This tutorial has been checked and moved for CS6. For the CS6 tutorial view this tutorial.

In this tutorial we will show you the basic of the @font-face CSS3 property and how to use it. Although this guide is geared more towards using in a Adobe Dreamweaver CS5.5 development environment it can be used not matter what editor you are using. Even other levels of dreamweaver can use this tutorial, even though major support has been added to dreamweaver CS5.5 for CSS3 @font-face is not amongst the properties it has been expanded to include. Continue reading

We all know that the biggest killer of bandwidth on our websites is the use of images, but how do we go about reducing this. What tricks can we use to create the same effect but without the expensive bandwidth totaling up rapidly on us. In this tutorial we will look at a number of methods available to us to reduce our bandwidth whilst maintaining the look and feel of our site.

Continue reading

As a few of you may already know I tend to try to avoid images in my designs where ever possible. I do this to avoid unnecessary HTTP calls and bandwidth usage. It is not always possible as some browsers may not like it so where possible we should then have a fallback method to render the effect as close as possible. In this tutorial I will show one method for creating a menu that does not use images unless it encounters an old browser that does not support the CSS3 used to create our menu. This way no matter what browser views the page our menu will look at the same. Only difference is newer browser will load the page faster with minimal resource costs to your client. Continue reading

As designers we sometimes come across situations in which we want to put a background in that consist mainly of a texture or a gradient with another image element or two that doesn’t repeat. Too often I see websites where this is done using either a large image larger than the common screen resolutions OR they repeat the background texture gradient and then place a div to hold the other image.

With the large image method this is an unnecessary use of bandwidth. It can be done better by having the background texture repeating as in the second method and using a second image (which we can use as you will see below)

With the second method the draw back to it is it can throw out a layout on different size screens particularly if you not careful. Even if you are careful this is still the long way to go round it and more time consuming than it should be. Continue reading

In this tutorial we will be explaining the best way to add a gradient to the background of any webpage element using a method that improves page loading times over other method you may currently use simply by using CSS3 (with fall backs of course)

As designers we all use gradients in backgrounds all the time. To add texture to our designs or make our menu button look fancy for example.

Up until recently this has always been done with images and the most effect method involved just a small slice of a gradient image repeated up or across the image we are adding the background too. However this method involves loading the image (bandwidth) as well the server having to handle the request to get the image (HTTP requests). If we can remove these request particularly for popular website with large amounts of web traffic we should really be trying to do so. Continue reading

Please buy me a Coffee

Help a starving student to drink more coffee

Follow us on: