The header area of your Smallfish shop is the best place to use beautiful graphics and typography to welcome your customers into your shop and introduce them to your brand. Your banner is a very important element in your website and will leave a lasting impression on your customers.
For a banner design to be truly appealing and effective there are a few rules we need to think about.
Banner Rule 1: Size matters
The first, and most important, banner rule is size. Not too big, not too small and always the right resolution. The vital statistics are as follows:
Width: 960 pixels exactly
Height: under 500 pixels
Resolution: 72 dpi (dots/ pixels per inch)
Careful consideration must be taken when setting the height of your banner. The most important and engaging information should always be visible above the fold and making your banner too deep can push this information below the fold* if you’re not careful. You can test where the fold will appear on your website using this site.
You may want to consider having two banners, one for your home page and another for every other page in your site. This means that your home page banner can be larger to provide a better first up brand experience and then become more subtle as you browse through the rest of the site, allowing your visitors to see your shop content more easily as they move through different pages.
*What is ‘The Fold’?
When you pick up a newspaper it is usually folded in half. You’ll notice that the designers have carefully placed all important headlines and images above this fold line to draw in readers without the need to unfold the paper first. This is where the term ‘above the fold’ comes from.
The fold, when looking at the web, is the bottom of your browser window and is a far trickier thing to measure because a web browser window has no fixed dimension. A window can take up the whole screen or just one corner. A good idea is to work to common screen resolutions, as most people will have a browser window that takes up a large portion of the screen.
We recommend a banner height between 250px and 320px.
Banner Rule 2: There is no spoon…
If you haven’t seen The Matrix then that title won’t mean anything. So, here’s what we really mean: think about your banner not just as a banner, but as a space. This space on your website is specifically reserved for your logo, shop name and strap-line, however, it can also serve other functions. You could add a special promotional box to advertise a sale or to inform people of your new free shipping. Your banner could even update every week to provide your repeat visitors with a nice surprise.
This option is for experts only! If you understand some important graphic/ web design principles then have a crack. If not then aim to get the basics right… which serves as a nice segue to our final rule…
Banner Rule 3: Know what you’re good at
Good design is a crucially important tool in your effort to sell online. It creates a stronger brand connection with your clients, it is appealing and informative and will instil a perception of detail and quality in your business. The opposite is true of poor design.
If you’re not a designer then let someone who is handle the job. This is not to say that you shouldn’t have ideas about what you want to say or how you want it to look but the final execution should be handled by someone with the right training and experience.