What do I need to consider in the graphic design?
Sometimes template designs that we’re supplied appear more geared to the printed page, where the page dimensions are known and fixed. The following items are some issues that we’d like considered by the graphic designer when they’re designing a template.
The page size is unknown
We don’t know what kind of device the user will use to view the site. It could be a pc, a tablet or a phone. And if it’s a pc we don’t know the size of the monitor, and even if we did we don’t know if the user has their browser maximised or resized to a portion of the screen.
Currently we think the best template width is 980px and centred horizontally. This size fits in a 1024x768 window without forcing a horizontal scrollbar even when the vertical scrollbar exists, plus it works well on an iPad.
Bits either side of the frame
If the template is 980px wide then consider what happens for users with browser windows that are wider. It may look a bit flat if it’s just left white.
This site has a big background image that we hope will cover the width of the vast majority of users browser windows. The central content floats in the middle.
Presenting to the client
Showing the designs to the client in a pdf can be misleading
- Sometimes the bits either side of the frame (above) aren’t included
- A pdf is stretchy. The client might have a big monitor and the pdf, when loaded, re-scales to fit the monitor. At this size everything looks great but when it comes to implementation, and everything is scaled down to 980px wide, some elements, particularly small fonts, might be unreadable.
You need to guarantee that the pdf viewed at 100% is the actual size or you need to build the previews as actual size jpegs.
Stretchy bits
A template is a template, not the finished page. This means that different elements of the template will get filled with content of unknown length, varying from page to page. Therefore a template can’t look great when it’s presented to the client with Latin text but subsequently disintegrate when populated with longer sentences or words.
Tiling
Web designers like tiling for two reasons. First, as mentioned above, the page size is unknown so it’s useful to be able to state ‘repeat this image to fill the page width’. Second we want to keep file sizes to a minimum. If a graphic designer wanted to fill the background with a gradient they’d probably draw a rectangle the full width of the page and specify the gradient parameters. But this would create a hefty download so the web designer would create the same image but only 5px or so wide and then tile (repeat) horizontally.
Tiling can be
- X, horizontally – just one row then stop
- Y, vertically – just one column then stop
- X and Y, one row after another, just like the bathroom (although professional tilers start from the bottom from a horizontal marker, whereas the web starts from the top and doesn’t care what happens when it gets to the bath)
Gradients and stretchy bits
Generally to match a designers gradient we re-create them on the web by using tiled images, repeated either on the X or the Y axis but not both. In a graphic design package, like Photoshop, if a box with a gradient background needs to be made bigger, say to accommodate extra text, then it’s a simple case of dragging the resize handle and the gradient reformats automatically. On the web page life isn’t this simple because the background image (tile) is of a pre-defined size that won’t stretch as the bounding rectangle stretches. Therefore gradients should be hung from one edge of a bounding rectangle and feather out to a solid colour.
Below is a sample bitmap with gradient at 5px x 120px
and here it's applied to a box
We know you can perform gradients in CSS but generally it's not easy to match the brief from Photoshop.
Rounded corners and drop shadows
It seems graphic designers love rounded corners. Up until recently these have been a real pain for web designers but modern browsers, Firefox 4+, Chrome, Safari, IE9, can handle them plus drop shadows automatically. Therefore these can be implemented into designs but the client must be advised that older browsers, like IE7 and IE8 will not shows these features. This approach is fine – if you want to watch in high definition buy a HD Ready TV.
See the rounded corners of this content section, then try in an older browser or see the screenshot below from Internet Explorer 8
Flash
We’ve gone off Flash a bit since we got our iPad. For those carousel banner images on the home page we’d rather use JavaScript. Flash still has its place but don’t incorporate it into the template or navigation.
Fonts
Web fonts are limited but there are options. Generally we want to keep important text as web text (not Photoshop bitmaps) so Google can read and index it. One option to spice up important text is to re-render it using a tool like TypeKit http://typekit.com/fonts/t26-carbon which we're using for the headings on this page and these four words. We’ve got a TypeKit account so feel free to browse and select these fonts. Use them in moderation though because they might affect performance and you can see the text switching font.
Transparency
You can use transparent backgrounds. The central section of this page is semi-transparent allowing the background image to show through.
Alternate devices
We’ll build alternate style sheets for small devices, like mobiles, and printers but you’ll need to supply some components targeted at these devices, like a logo on a white background for print.
SEO words
We’ve discussed SEO friendly elsewhere but it’s important to build the initial designs with SEO words to ensure the client is thinking SEO. As an example using ‘About us’ as a visible page heading in the <h1>About us</h1> tag is simply a lost opportunity. Have you ever typed the phrase “about us” into Google and got taken to the site you want? Therefore <h1>About OCTA website design and maintenance in London and South East England</h1> whilst irritating to the purity of the design at least has some hope of generating results.
Repeatable templates
Templates by definition are supposed to be re-used. Try and structure a site to use 2 or 3 templates rather than making each page a unique technological experience.
Supply of assets
When we’re not building websites we’re either sorting the cutlery drawer, mowing the lawn with precision stripes or categorising our browser bookmarks. It’s in our nature, sorry!
So when you supply the site assets as .png’s, .jpg’s etc. please make them pixel perect.