Examination moment 5 Webbdesign

Publicering p Internet Jimi Wikman 2009

Contents
Page grid structure .................................................................................................................................. 3 Navigation ............................................................................................................................................... 6 Mastheads ............................................................................................................................................... 7 Color palette ............................................................................................................................................ 8 Fonts ........................................................................................................................................................ 9 Graphical Elements................................................................................................................................ 10 Content organization and formatting ................................................................................................... 12

Page grid structure

Master Grid Structure

Global header and global footer must appear on all pages and for that reason they are hardcoded into the CMS template system so they will appear automatically. Masthead (Title) is used only on the item sections (pages and posts) where it will span the full width of the main region. The reason it will not be used on dynamic pages is that because of the block design this will not work well due to the fact that the masthead would be delivered without contents, making it look strange. For this reason the H1 tag will not be used on dynamic areas where it instead will use the H2 tag for multiple headlines. In the revised version a new H1 design will be added in the same fashion as the sidebar header design which will then be added as Masthead on all pages. The main region houses the primary content and its where the majority of the actual content will reside. The contents of posts and pages all end up in the main region unless otherwise specified. In

the post and page areas this section may also include a comments section. In the dynamic areas this area houses the results or filtering and searching content. Sidebar region is made up of several sidebar templates depending on where on the website the user is currently watching. This area houses complementary information boxes such as top rated posts, Facebook Comments forms /FanBoxes, advertising, popular posts and more. These entries are either hardcoded(rare) or use the CMS systems built in widget system for easy drag and drop management.

Master grid structure is based on a 2 column template. No area consist of 2 or more pages, which means that secondary or extended navigation such as dropdown menu is not required.

Available variations

Navigation
Terminology and placement

1 Header area consist of two

navigation areas with the top navigation (1) and the main navigation (2). The top navigation is made up of 4 links that lead to the about page, the articles section, the blog and the discussion forum. It is in text only.

2 Main links is made up of the

categories that the posts are added into which is complemented by the Home link. These are also in text only in a styled unordered list.

3 Sidebar area can sometimes hold

redirect links to related areas or areas of interest related to the current page.

4 Footer area hold links to contact,

user terms, privacy policy and a home link to Mortfiles.se, the owner of this website.

Additional information
The look and feel of the navigation nodes are controlled by the Master Style Sheet. Each is coded as a unordered list or posted inline where an unordered list would only add to the size of the website (1 and 4) with additional CSS coding. In the revised version all areas will use unordered list as that is the semantically correct way to present that kind of information.

Mastheads

The term masthead refers to the title region of a page, which should use the H1 tag if possible. Each masthead contain the title of the page or post along with information related to the post, which include who wrote the post or page, when was it written, how many have visited and viewed it, how many comments has it received and the votes that have been made. The masthead is controlled through CSS and the CMS will automatically handle all the information.

Color palette
Primary, supporting and Accent colors

The colors are chosen with contrast in mind and because of that it focuses on black, white and gray as core colors and then an orange base that is used in the graphic elements as well. The colors found in the logo are used in navigation, graphical elements and advertising areas with the purpose to put emphasize and visibility to those areas.

Fonts
All areas of the website that contain text, as raw text or as part of graphic elements must use text for usability and Search Engine Optimization purposes. This means that no text should be imbedded in the graphics, but rather a compliment to the graphical elements using CSS. When creating images the text should always be considered as it will be placed on top of the graphics on the website using CSS. The stylesheet controls the font and its various colors, sizes and value attributes when it comes to HTML text. The stylesheet define the font-family as: Arial, Verdana, Helvetica, sans-serif, Lucinda grande (for mac). For the purpose of this document Arial is recognized as the preferred font.

Graphical Elements
Graphical elements can be divided into two groups: design elements and unique elements. Design elements are the graphics that are part of the basic design and that is included into the website through the Master CSS or a secondary CSS file. Design elements are crucial to maintain the design. Unique elements are graphics that are uploaded for temporary or specific needs. This include banners and logos for the different companies, but also items added to articles and blog posts with the purpose to illustrate or enhance a particular post or article. Unique elements also consist of uploads in the form of avatars and graphic elements in the forum area and in the comments. Unique elements are not crucial to maintain the design.

Accessibility
All graphical elements must use the alt attribute that describe the image. For the purpose of SEO (search engine optimization) it is also important to try to include important keywords as long as it does not degrade the descriptive tag with unrelated information. For design elements or images that are used as decoration an empty alt attribute can be used. If an image is linking to something the destination information should always be included in the alt attribute. Unique elements should always include both the alt attribute and a title attribute.

Speed and optimizing

In order to reduce page loads all design elements are merged into a single entity known as a sprite. This sprite is then optimized to make it as small as possible while maintaining high quality (preferable PNG 8 or PNG24 format). By doing this the number of calls to the server are reduced which reduce loading times. CSS and Javascript files are called in one single statement each by bundling the call using PHP. This further reduces the number of file calls to the server. Javascript should always be placed in the footer if possible. All design elements must be defined in the Master CSS file and should never be added directly into the design. Unique elements should not exceed 3 graphical elements on any given page or post and 10 graphical elements on any dynamic sorting or search area. If possible the graphical elements should be divided over multiple domains to increase the number of files that can be downloaded simultaneously as each domain are locked at 2 files at any given time. By adding

additional domains as origin of the graphical elements this can be increased by 2 for each additional domain.

Content organization and formatting

Content headings

Content headings are used to mark up content in a semantic fashion with a logic falling structure. Headers should never be used without content beneath them or be used to link to content other than the actual post or page they represent when present in content filtering or search areas. Headers are used in a hierarchy starting with the H1 tag that is also the title of the page and then down the header tags with H2 for sections of the page, H3 as subsections of one of the H2 sections and H4 as subsection of a H3 section. H1 H2 H3 o o H2 H3 H3 o o o H2 H4 H4 H4 H3 H3 H4 H4

The headers are designed based on the area they are located in. Main region headers use the same design for H1 and H2 that are used to box in content and H3 and H4 headers can be used inside those content blocks.

Headers inside the Sidebar are all H2 headers that use the arrowhead design. This is because all content in this area use the same style set by the widgets they are encapsulated within. Headers are controlled through the Master CSS style Sheet.

Tables

Tables are used only for tabular data with one exception: the post sidebar area for Twitter/Facebook/Digg Javascript widgets. This area take advantage of a table to position the elements since CSS are not available to reposition properly for these outside sources. CSS tables are not yet fully supported, so a standard table is used for this purpose. Tables are not specifically styled by default since no table is currently present. Future tables will be styled individually based on their uses.