In my previous post I wrote about 3 differences between web and print media and to continue with the topic let’s look at what makes the actual designing for web different.
For us creatives design is a very natural thing, all it usually takes is to let creative juices flow and a great artwork is on the way. It is no different with web although I can see many designers having a problem with accepting certain limitations of a design material they can use.
When it comes to print there are no borders with techniques and design devices we can use, starting with fonts, colors to paper sizes and print techniques, overprints and many more. And in spite of how helpful those things are in our work they are also the ones that are limited when it comes to designing for web.
A knowledge of them and reasons why those limitations exist may help you with your work so here is a list of those limitations with short explanation to each.
1. Fonts
As already mentioned, while designing for print you can use as many fonts as you like, you can match them to fit perfectly the design, to bring the artwork up, to make the text stand out or even look like another graphical element or even create your own custom ones. The sky is the limit.
Web on the other hand limits the number of fonts to use to a handful of them and in most cases they are the ones you wouldn’t like to use.
The reason for limiting fonts that you can safely use comes from technology, those are the fonts that are most common on your visitors computers and will render similarly between different machines and operating systems. If a non web-safe font is used, it will be replaced by one of those web standard fonts anyway.
2. Image size, quality and shape
You probably know very well how frustrating is to receive a low-res image and being almost forced to use it on a brochure or any other print material. It is the moment when most designers dread and then happily discuss on various web forums as a client/job nightmare.
This all changes significantly with design for web. The rule is that the bigger size the image the longer it’s load time and hence it is imperative to use small size images on your websites. That in itself creates another problem. Reducing a size means reducing a quality. In order for images to be good to be used on websites they have to be optimizes for web and their quality reduced.
The good news here is that average users screens can display images at 72dpi which means that your large images when they would load finally would still look not far from their 72dpi equivalent.
There is one other aspect of working with images for your web projects. When images are prepared for the web, they are either squares or rectangles. Even if the graphic is of an obscure shape it will still be outputted as a square with a background color filling rest of an image.
Therefore if you think of a website as outputted of blocks it will make working on your projects much easier.
3. Canvas size.
Unlike print where you can choose any canvas size and shape, when it comes to web there are some limitations regarding the width of the page. The standard is to use canvas somewhere between 800 and 1024 pixels wide.
There is no limit to a height of a page although of course making it too long may not go well with many users.
5. Hierarchy of material
In your print materials even an important element can be placed at the bottom of the page and simply be made prominent by applying various design devices to it.
With web the general rule is that anything that’s important should be placed above the fold, that’s the position on a Web page where the majority of browsers viewing the page will begin to scroll therefore considering a hierarchy of your material is even more important than with print.
6. The final output – browsers compatibility
This is a probably most commonly known difference although it is worth mentioning here.
When sending files for print a designer has a relatively good idea on how it will look printed out, how colors will be printed and how other print effects will be outputted. With large print jobs a proofs are very often required to ensure that the printed piece matches the artwork.
Web on the other hand gives a very limited control over how the user sees a website. The design you created can differ significantly between different browsers, operating systems and user computers. Quite a lot of cross browser testing has to be done in order to ensure that design looks consistently on all major browsers yet still there may be elements that will not work as planned, especially on older browsers if the technology used is newer that them.
And while this all may seem putting off there is one aspect to those limitations that is almost like a blessing for most designers. They force web conventions into your designs making your projects easier to use for the visitor.
And believe me, there is no worse website than the one breaking web conventions making it almost impossible for the visitor to use.