Web Resolution – Part 2
In Web Resolution – Part 1 we discussed the relation of website design resolution and how websites display on particular size monitors. One of the other factors considered when planning a design for a website is whether the design is a static design or a fluid design. Now that the screen sizes and resolutions have standardized (for now) in the 1024 to 1280 range, the majority of websites are designed as static designs at or around 1000 pixels in width. A static design simply means that the major design elements of the site stay in one position, even when the size of the browser window or the resolution of the screen changes. A fluid design is simply as it sounds, the website is fluid, changing with the size of the browser window. There of course can be many issues relating to this approach and as stated earlier it typically not necessary.
In regards to the resolution subject, in addition to the overall resolution of the website for viewing on the screen, there are several other areas that need to be considered when planning out a website design, specifically how are graphics, photos, and text going to be used in the site and are they going to be used at a later date for other applications.
One of the first questions to ask yourself when preparing to do a website is, are these elements I create for this website going to be used in other projects down the road? And even if there are no plans to do that at this point, you can usually count on your need to use the graphics you’ve created for a brochure to be printed down the road. The last thing you want to do is have to use graphics created at 72dpi for a brochure design. So, here are some hard and fast rules:
-
This graphic was scaled up from a 72 ppi document, on the left it was scaled up as a vector, on the right is was scaled up as a raster (image). See the difference?
All graphics you are creating for a website should be done in vector format utilizing a program such as Adobe Illustrator. This is absolutely paramount if you are doing a logo design which will be used in a variety of different ways over time. The files can be exported to a lower resolution and smaller file size for the web, yet accessed and manipulated easily if you need to put together a print piece which requires high resolution graphics.
- Any images you require for your design should be purchased at a minimum resolution of 300 ppi if there is any chance of the images being used for future print work. The images typically would be resaved to 72 ppi to be used in the web design.
- It is particularly important that text is kept in a text form and not converted to graphics whenever possible. Keeping text in a text form helps to strengthen the SEO value of your website so the site can be found by the search engines. Keep in mind that if you utilize various fonts in the graphic design of your logos, websites, or print materials and decide to convert those fonts to graphics so they can be edited, you should make note of the fonts that you used for future reference.
Finally, one of the things we do at inConcert Web Solutions, Inc. is make sure that our clients have access to all design materials, files, fonts, etc. that were used in the creation of their media. I can honestly tell you that over the years I have gained many customers due to the hard line attitude that some ad agencies, graphic designers, and photographers take towards the protection of the original work. Our attitude has been and always will be that you hired us to do the work, paid us for that work, so it’s your property, no matter how you want to use it. We have found in the long term this is the best approach if you want to keep good, long-lasting clients.