Straight Forward Tips to Designing Better Petpages!
It is your first time creating a petpage (or second, third, fourth, or fiftieth) and you want it to be stunning. But you do not know what makes for a good petpage design? It isn't all about flashy graphics and good knowledge of graphic programs. The truth is that there are a lot of minor things you can do to enhance the visual impact of your petpage and make the visitor's experience more enjoyable! I have compiled a list of tips to help you avoid common mistakes of many first time designers.
This article consists of three categories including the building blocks, the content, and final editing.
Before you start creating your petpage, you should consider the screen minimum resolution you will be designing for. Resolution is determined by the number of pixels on the horizontal and vertical axis of your monitor. For example, if your resolution is 1024x768, there are 1024 pixels running horizontally across your screen and 768 pixels running vertically. You should be most concerned about the amount of pixels wide you want your layout to be. If you choose a width that is too large, you may end up forcing your visitors to scroll horizontally across the page in order to read all of your text. This makes for a very obnoxious experience for your visitor. However, if you select a width that is too small, you may not be able to fit all of the content on your page in an aesthetically pleasing way.
When Neopets revamped the site in 2007, they went from a layout that fit nicely on 800x600 screen resolutions to a design that required at least a 1024x768 resolution. When Neopets was first created, 800x600 was the common resolution for monitors at the time. As technology became more accessible to consumers, 1024x768 became the new resolution designers began creating for. Today, monitors are coming out in all shapes, sizes, and resolutions - most of which have a larger resolution than 1024x768. However, a large number of Internet users still use monitors with this smaller resolution, so you should not be designing a layout meant to be viewed in a higher resolution.
If you are at a total loss on how wide your layout should be, using a fixed width of 960px is usually a good idea. This number can easily be divided up equally so you can organize your content effectively. If centered, it also allows for a bit of breathing space on either side of the layout and takes into consideration space for the scrollbar.
If you prefer not to use a fixed width, a good alternative to pleasing multiple screen resolutions is to use percentages instead of pixel values. This will allow your layout to take up the same amount of space in every resolution but it does limit the amount of control you have over some of the elements discussed later in this article.
Table vs DIV, Class vs ID
I don't wish to get into the topic of HTML and CSS too much in this article; however, it is very important that any designer have a good understanding of tables, the div and span tags, IDs and classes.
Tables are good for tabular content - meaning that they are good for displaying things like statistics and other information that is read easily in this format. Tables are not intended to be made into the structure of a layout. They're really not as diverse and are a lot messier than what you should be using, which are...
Divs. The div tag makes creating the basic structure of your layout a lot easier and is a lot cleaner than using tables to create a layout. This tag is a lot like the span tag, except it is a block element while the span tag is an inline element. This simply means that the div tag takes up its own line on the page while the span tag will sit next to something else. This makes the span tag good to use for text when you want to change the style of certain words within a paragraph but don't want those words to be sitting on their own line. That is not all that the div and span tags are good for, but that is beyond the scope of this article.
Like the div and span tags, IDs and classes are very similar to one another. However, it is very important to understand their proper use before trying to design a petpage. Luckily, it is very simple! An ID should only be used once on a page. It is for the uniquely styled elements on your page. These will likely be used for the divs that structure your page. On the other hand, classes can be used more than once. A class is good for styling elements that will be opened and closed multiple times on a page, such as the span tag styling certain words in a paragraph mentioned above.
Selecting and sticking to a single color scheme will improve your design tenfold. Color theory is a complex topic and requires more explanation than can be written here. Luckily, I've created a petpage about the color wheel, properties of color, color schemes, and color psychology that can be found here: http://www.neopets.com/~Vesall.
JPEG, GIF, OR PNG?
GIF: Supporting only 256 colors, this format is usually the best for basic graphics, compressing images with large ares of the same color, and for images that contain text. It supports transparency and animation too! This format isn't great for photographs or graphics that contain a large number of colors and gradients. However, it tends to have the smallest file size so it is good to use it if you can!
JPG: Supporting 16.7 million colors, JPG is good for photographic images and complex graphics that contain a lot of colors and smooth gradients. This format does not support animation or transparency. It can be compressed but it is a lossy format, meaning data is thrown out of the file to make the file size smaller. Depending on how you compress these images, they can end up looking very bad.
PNG: PNG is the one of the newest formats for saving on the web and is becoming fully supported by more and more browsers. It was designed to become the new GIF but supports 16.7 million colors. This format also supports transparency and animation but these features are not supported in all browsers. They can also have an acceptable file size in many cases!
Size of Images
Nothing gives away a first time designer more quickly than a poorly compressed GIF that takes up 90% of the page. Don't make an image any larger than it needs to be to get the point across. Header images for your petpage are very nice and can act to draw the visitor’s attention, but you don't need to show an entire Neopets background to create the visual impact you are looking for. Header images should be proportional to their importance and since the actual content of your page is the most important, your header image shouldn't take up too much space. Take a look at the Neopets homepage. The header effectively lets you know where you are and how to navigate around the site and adds visual impact to the site, and it does it all with just 77px of vertical space.
Note: If you are designing a user lookup, you can use a larger header here as it is a more personal space about yourself rather than a place to provide valuable information on a topic.
Those tiled animated GIFs filling up the background of your page aren't going to cut it, my friend! The background doesn't contain any valuable information to your visitor so don't make it so they can't focus on the real content of your page. A good background is only a simple pattern or solid color that is selected from your color palette and is highly desaturated. It should not distract your reader from what they came to your petpage for.
Having background music on your page is also a huge nono for any serious designer. On Neopets, the only code you can use to put music on your pages is only supported by Internet Explorer. This means that the majority of Internet users (much to their relief) can't even hear the music you've selected. Not only does the music file take a good amount of time to fully load and begin to play on your page, it can also interfere with a visitor's work flow or the music they already have playing. Remember, just because so and so is your favorite band, that doesn't mean everyone enjoys it!
Readability is the most important thing you should be concerned about when creating a petpage. That is why your visitors actually come and the purpose behind all of the tips included in this article. However, it is often the most overlooked subject of designing for the web.
When writing your text, you may want certain words of your text to stick out more than others. Remember, an Internet reader tends to skim a page more than read it, so be sure to direct their attention only to the parts you actually want to stress. There are a lot of good tricks you can use to direct the visitor's eye here or there, but using these tricks effectively does take a bit of skill!
Bold and italics are a good way to emphasize certain words and direct your visitor's eye to the most important part of a sentence. Over using them, however, renders them useless. Although they stand out to the visitor, they are also harder to read and they throw off the flow of the paragraph. Use them sparingly.
Underlining words should be reserved mostly for links and grammatical uses. Underlining links is the default behavior of most web browsers, so you wouldn't want to confuse a visitor into thinking something is a link when it isn't, no matter how amusing that ‘click three times’ NeoBoard joke is!
Font Size - You should select a font size that is easy to read. 11-12px is a good place to start and I discourage you to use anything smaller. Simply because it looks nice to you does not mean your visitors are going to enjoy reading something so tiny it strains their eyes.
Line height - Another way to make sure your visitors can read your text easily is to define a line height within your CSS for your elements. Adding a bit of extra space between your lines of text makes it much easier for a visitor to track from one line to the next. Think of it as double spacing the essays you have done in school.
Web Safe Fonts - This is probably the most important piece of information contained in this section so there is no way I can stress this enough. In order for someone to view a font properly, they have to have the font installed on their computer. If you install a super decorative script font on your computer that you want to use on your petpage, you need to be aware that if a visitor does not have that exact font on their machine, a font will be substituted for the one you intended for them to see. This can result in a very messy and hard to read petpage! If you want to use these types of fonts, keep them limited to your images only. Luckily, there are certain fonts that all machines come with called 'web safe fonts' and more information on those can be easily found on the Internet.
Speaking of fonts, use appropriate ones! For large bodies of text, it has been suggested that a serif font makes for easier reading. Serif fonts are those with little tails coming off the letters, while Sans Serif fonts are those without the little tails coming off the letters. While this isn't horribly important information, it is something to consider when formatting the text for your petpages. However, it is very important that you select a 'plain' font for large areas of text. Using decorative fonts makes it very difficult to read what you have written and many people will simply click away if they have to strain their eyes.
The width of the column your text appears in is also very important. If it is too wide, it can make it very difficult for a reader to be able to follow the text from the left side to the right side of the page. This is the reason why newspapers are written in multiple columns and books are only a few inches wide. The exact width of your column will depend upon the width of your layout as well as the font size you have selected, but 15-20 words per line is a good number to aim for.
Finally, DON'T CENTER LARGE AREAS OF TEXT! This makes reading very difficult as well! Centered text should be reserved to single lines of text on a layout that is centered on the page. You should not use centered text for paragraphs or on layouts that are aligned to the left or right of the page.
Icons, blinkies, marquees and blinking text, OH MY.
None of these things are a good idea. They may be fun, flashy and cool at first, but they are a dead giveaway that you don't know much about design. None of these elements add anything positive to a design and simply make it difficult to look at your page. Reserve icons and blinkies for your own personal user lookup (and use them sparingly even then). Marquees and blinking text really should be reserved for... a spoof petpage on bad design?
So you've finished your petpage; it is shiny and fantastic! But not so fast! Take one more good look at everything on your page. Does it all have a purpose? Does it all belong and add to the finished piece or does it just clutter up some space? Remember, not every inch of your layout needs to be covered. As an art director, I believe everything should be beautiful, functional AND serve a purpose. If something I've added to my design does not fit each of these three categories, I take it out. It does not belong. Doing this step of final editing tends to make the overall design more cohesive, cleaner and easier to read.
Before you publish your page, make sure to use spell check! For extra measure, have someone else read over it to check for mistakes that a spell checker can't pick up. Everything on your petpage adds to the first impression people get, and since visitors tend to decide within a few seconds if they are going to read the content and visit your petpage again, you want to make the best impression that you can!
Before calling it a day on your newly designed petpage, go to the Neoboards and ask people to check your layout in their browser. Because browsers use different rendering engines, sometimes your layout will not appear consistent across all of them, even if you use standard HTML and CSS practices.
Finally, break all rules if you have a good reason to do it! Remember, you are creating a petpage to please others, but you are also creating it to please yourself! While the tips discussed above are all good things to consider when you are creating a petpage, they make not always be relevant and you should not stress too much about them. Good luck!