Website Codes and Conventions
Introduction
When we click a hyperlink and visit a webpage for the first time, there are some well-established codes and conventions we expect to see on the screen. Of course, the content and style will depend on the purpose of the site and its target audience, but the layout and interface will contain some generic elements that will help orientate the user around the page. This guide will take you through some of the most common aspects of web design.
You might find it useful to download our worksheet and annotate the mock-up with the key terms from this glossary.
Address Bar
The address bar is the white bar towards the top of your computer screen. It will normally have something typed in it that starts with “http://” This is where you type in the address of a website that you want to visit. Ensure that your pages are appropriately labelled with index.html as your homepage.
Alt Tags
Alt tags are alternate text associated with a web page graphic that gets displayed when the Internet user hovers the mouse over the graphic. Alt tags should convey what the graphic is for or about and contain good relevant keywords.
Banner Ad
Banner add is a graphic image, usually a GIF or JPEG, that can be placed anywhere on a web page, most frequently centered across the top. The tile ad is a smaller counterpart, typically grouped with other tile ads along a side margin. The standard banner ad is 468 x 60 pixels; the most common size for tile ads is 125 x 125 pixels.
Below the Fold
Below the Fold is a term that carries over from newspaper publishing days. In newspaper terms, “below the fold” means content was on the bottom half of the page (below the physical fold in the paper). In web design terms, “below the fold” refers to the content that is generally going to be below the point first viewable to the average website visitor in their browser (in other words, viewers would have to scroll down to see the content).
Blog
A blog is an online journal or diary and a very popular method of sharing your thoughts with the world. It is also very popular as a marketing tool.
Button
A button is a clickable graphic that takes the user to another page or executes a program, such as a software demo or a video player. Use them to allow users to navigate between your three pages.
Breadcrumb
Breadcrumbs are the bit of navigation elements that generally appear near the top of a give web page that show you the pages and subpages the appear before the page you’re on. For examples, on a blog, the breadcrumbs might look something like: Home > Category > Year > Month > Post (or they might be a lot simpler that that). The breadcrumbs term comes from the fairy tale “Hansel and Gretel.”
Browser
Browser refers to the program a website visitor is using to view the web site. Examples include Safari, Firefox, Google Chrome, Opera, and Internet Explorer.
External Links
External links direct the user “off-site” to another website. Make sure you parent the link to a new window.
Favicons
Favicons are tiny (generally 16×16 pixels, though some are 32×32 pixels), customisable icons displayed in the web address bar in most browsers next to the web address.
GIF Images
GIF is a type of file used for images, especially animated graphics and line-drawn images (as opposed to photographs). A .gif image can be saved with a transparent background, making it ideal for graphic overlays.
HTML Forms
HTML forms are used to pass data to a server. A form can contain input elements like text fields, checkboxes, radio-buttons, submit buttons and more. A form can also contain select lists, text area, fieldset, legend, and label elements.
Hypermedia Links
Hypermedia is an extension to hypertext to include graphics and audio.
Hypertext Links
Hypertext links any text that contains links to other documents, words or phrases on the page. The link can be clicked on by a reader and will lead to another document being retrieved and displayed.
Internal Links
Internal links are hypertext and hypermedia links that point to another page within the same website. Internal links can be used as a form of navigation for people, directing them to pages within the website. Links assist with creating good information architecture within the site.
Landing Page
A landing page is a home page that is, for the most part, devoid of content and usually say something to the effect of “Enter Here”. Splash pages are an annoyance to Internet users as they introduce an extra hoop that the user has to jump through before they get to any meaningful content. Splash pages are also damaging to search engine rankings. Consider that your home page is typically considered by search engines as the most important page of your site. If your home page is a content-less splash page, then it’s a wasted opportunity. Also called a splash page.
Links
Links are text or graphics that, when clicked on, take the Internet user to another web page location. Links are expressed as URLs.
Mouseover
Mouseover occurs when the user hovers the mouse over a text or graphic link and, without clicking, displays something new on the page. For example, a button might be highlighted.
Navigation Bar
Navigation bar includes the web site’s navigation icons, usually arranged in a row down the left hand side or along the top. It plays a crucial role in directing spiders to the site’s most important content and in getting site visitors to go deeper in the site.
Plug-in
A plug-in is a bit of third party code that extends the capabilities of a website. Plug-ins are a way to extend the functionality of a website.
Pull-down List
A Pull-down list on a web form is where the user chooses from a list of items. For example, if you are asked to identify which country you are from, this will typically be done using a pull-down list. A pull-down list is usually displayed with the first item within a box and a down arrow immediately to the right. Clicking on the down arrow will display the full list to choose from. FrontPage has some default examples.
Skyscraper Ads
A skyscraper is a tall, thin ad unit that runs down the side of a web page. A skyscraper can be 120 x 600 pixels or160 x 600 pixels.
Usability
Usability refers to how easy it is for a visitor to your site to use your site in its intended manner. In other words, are navigation, content, images, and any interactive elements easy to use, functioning the way they were intended, and that your intended target visitor will not need any special training in order to use your site.
User Generated Content
User generated content is content created and published by the end-users online. It is comprised of videos, podcasts and posts on discussion groups, blogs, wiki’s and social media sites. It allows for a wider content provider base and the chance for all users to share their opinions online.
