Section Four. The Layout
Note: This section only applies to you if you're putting your application on a petpage of some sort.
Having a layout is an essential part of a petpage application because it's the first thing that viewers see when they view your app. It's important to leave a good first impression, especially if the viewer is your foster, because that will carry on with you for the rest of the adoption process. Even simple CSS can make a page more appealing to read than a default webpage.
Types of Layouts
Part of the reason why petpage applications are so unique is because users are given the opportunity to make an original layout for their application. Just like a blank canvas, this space can be used however you want. You can make a simple layout just to hold content, or you can design an beautiful work of art to put content on top of.
Simple CSS layouts are quick and easy to do. They're used when an applicant is writing a long neomail application or the foster requests for simple applications. If your foster prefers simple petpages, don't try to go over the top with your layout. Just put your application on a petpage and give it a simple layout. Background images are fine, but stay away from layout images and extensive coding.
Examples of Simple Layouts
Blog-type layouts have a large layout image and an area for content placed on top of it. These layouts are popular with users who like to anchor their petpages, which means that clicking on a navigation link will lead you to a different section, separated from all of the rest.
Example of a Blog Layout
Traditional body-scrolling layouts consist of one or two layout images with a content area that scrolls with the height of the page. These layouts are popular with users who don't want to restrict their content to a small blog area.
Examples of Body-Scrolling Layouts
Side-scrolling layouts seem to be a new fad with applicants. Unlike traditional layouts, these layouts scroll to the side of the page, and you have to use the horizontal scroll bar to navigate through the content.
Example of a Side-Scrolling Layout
Interactive layouts are the most advanced layouts that you can do on Neopets. These can range from simple anchored blogs to a whole adventure-type application. The coding behind the latter can get very complex, and it takes an expert to cleanly code these types of layouts without getting confused or lost in the process.
Examples of Interactive Layouts
Live examples of these interactive layouts can be found here and here.
All of these layouts were ones that I've used in the past, but the types of layouts are not strictly limited to what I showed above. Creating a complicated layout doesn't necessarily make your application better in any way. If you're trying to code something you don't fully understand, it'll give you more headache and stress than you need, so be creative with your layout and use what you like the most. Many users have come up with great ideas for their layouts in the past without fancy mumbo-jumbo coding. Layouts are important for first impressions but are, by no means, the deciding factor for applications.
Formatting Your Content
When designing your layout, you have to think about how you're going to present your application. While the layout design is important for aesthetic appeal, content legibility is just as important.
Using fonts that are clear and easy to read is very important for your content. Avoid using decorative fonts as content text. They're good for titles and section headers but not for your main content. Standard fonts, like Arial, Verdana, Tahoma, and Georgia, are good for body text because most computers have them installed and they're fairly easy to read.
Having a font size that is legible to all viewers can sometimes limit the style that is going around with very small text and large images. While these layouts might work for offsite blogs and profiles, tiny text isn't something you want to subject your viewer to when they have to read long paragraphs of writing. Small fonts might be appealing, but they also strain the viewer's eyes. Stick to font sizes that range from the smallest being 11px high and the largest being 14px. A font size of 12px is a common and good medium between small and large text.
Along with having a proper font size, it's important to have content that isn't too tightly spaced together. When content is spaced too closely together, it's easy to get lost in the writing and also causes strain to the reader to maintain their position. The default line height and letter spacing for fonts is usually good enough to prevent this problem. However, if you notice yourself getting lost in your text, try altering the line-height of your font in the CSS to make it easier to read. You can try splitting long paragraphs of text to help with this as well.
Lastly, the color contrast between your text and content area needs to be high enough for the user to read comfortably. Colors that are clashing or too similar to each other will cause eye strain to the reader and is not recommended. Make a mental note of this: If you have to highlight your content to read it, maybe you need to increase the contrast between your content area and your text.
Layouts with specific color schemes are generally more aesthetically appealing to viewers than ones that do not. When designing your layout, have a color scheme in mind that you want to incorporate because while some colors look nice on their own, they may not necessarily look good with other colors.
Examples of Color Palettes
Limit the color usage in your layout to four or five max. Great layouts can be designed using only three. Using too many colors will often be distracting to the viewer and won't look all that great.
If anyone knows an onsite guide on the color theory, please neomail me. As much as I want to go into the detail of color schemes and the color theory, it's just too much to put on an application guide, and I'd rather refer my viewers to a guide specific to explaining it.
Putting It All Together
The hardest part about designing a layout is actually putting it all together in a way that looks nice. Sometimes, you draw a very pretty picture but can't figure out how to make it into a layout. Other times, you know how you want to format the content but don't know where to start with your layout image. A good way to ease this process is to design a comprehensive layout which outlines what you plan to do for your layout and how.
Examples of Layout Comps
Layout comps are good for testing out color schemes, figuring out where to place content, and just about anything related to your layout. They can be rough sketches or very detailed to get an idea of what you want to do. While it's not necessary to make a layout comp for your application, I highly recommend it.
When designing your layout, think about what browsers and screen resolutions you have to cater towards. The most popular internet browsers on Neopets are Chrome, Firefox, and Safari. And while Neopets doesn't support the use of Internet Explorer, it's still a good idea to keep IE in mind as well.
The smallest screen resolution you should consider is 1024x768. Layouts made for larger resolutions won't look good on smaller screens. And sometimes, smaller layouts are improperly coded and don't look good on larger screens as well. It's important to have a layout that works on most resolutions, so when you're coding your layout, resize your browser to see if anything changes when the screen size changes.
Bonus Material: Premades vs. Custom Layouts
The debate about the use of premades versus custom layouts for applications has gone on for many years, and this is my opinion on it:
If a user is unable to code or draw their own layout, I don't think that they should be required to make a custom one for their application. Premades exist so that these users don't have code their own layouts, and the quality of premades these days isn't bad either.
A foster is not allowed to require petpage applications, as per Neopets rules, so an applicant who decides to make a petpage application shouldn't have to give it a custom layout either. Forcing the user to do something they're not comfortable doing is unfair.
I do, however, think that a user capable of making their own layout should do so if they're not on a time constraint. It could be personal preference, but since I'm able to make my own layouts, I like doing that over using a premade. That way, I can design my layout how I want it to be made, rather than work on something that isn't mine. But again, if a user prefers to use a premade over making a custom one, I don't think it should be a problem.