Anatomy of a Website Header Source: www.womensrefugeecommission.org/ Header: top area of a website; typically iden;ﬁes the site/organiza;on name. OCen includes logo or iden;fying factor. This stays the same throughout every page in the site.
Anatomy of a Website Body Source: www.womensrefugeecommission.org/ Body: Area of main text and images on a webpage. Can also include images and links.
Anatomy of a Website Links Source: www.womensrefugeecommission.org/ Links: Code connec;ng one page to another on the Internet, or to download programs or ﬁles. Links should be visually separate from the rest of the body text, such as underlining, italicizing or making a diﬀerent color.
Anatomy of a Website Links Source: www.womensrefugeecommission.org/ Internal Link: Link to another page within the same website External Link: that points to another website on the Internet (highlighted above in yellow)
Anatomy of a Website Naviga;on Source: www.womensrefugeecommission.org/ Naviga=on: Links to all the pages and content contained within a website
Anatomy of a Website Breadcrumbs Source: www.womensrefugeecommission.org/ Breadcrumbs: Part of the naviga;on that indicates the page a viewer is currently on, and its loca;on within the site.
Anatomy of a Website Sidebar Source: www.womensrefugeecommission.org/ Sidebar: Area on leC or right side of webpage template oCen containing items of interest such as links, RSS feeds and social media updates, etc.
Anatomy of a Website Footer Source: www.womensrefugeecommission.org/ Footer: Area at the boUom of the page that typically contains copyright info, contact e-‐mail address, terms and condi;ons, etc.
Anatomy of a Website Other Important Terms HTML (Hypertext Markup Language) The basic language of the Internet, HTML uses a series of tags to format and place content on a website, link pages, etc.
Anatomy of a Website Other Important Terms CSS/Style Sheets: External document that controls the appearance of a website.
Anatomy of a Website Other Important Terms Source: www.marque4e.edu/comm/MUJournalism100 Domain Name/URL: leUers, numbers, hyphens and underscores used to deﬁne where a website is located on the Internet. URLs are case insensi;ve and typically begin with “www” (some;mes just hUp://)
Anatomy of a Website Other Important Terms Source: www.marque4e.edu Index Page: Home page or main landing site that visitors reach when typing in the website URL.
Anatomy of a Website Other Important Terms Meta Data: Invisible bits of code added to a site’s header that communicates informa;on about the site to search engines.
Anatomy of a Website Other Important Terms Sitemap: Index of all informa;on and content on a site. Typically found on home page of the site (oCen near footer). Helps people ﬁnd what they are looking for on the site and to help search engines ﬁnd pages and links on the site.
Anatomy of a Website Other Important Terms Source: www.marque4e.edu/comm/MUJournalism100 Form: Area with informa;on ﬁelds that allows user input, which is collected and sent back to the server.
Anatomy of a Website Other Important Terms Source: www.marque4e.edu Resolu=on: Design for the most common viewing resolu;ons: 800 x 600, 1024 x 768 are commonly used and are easily viewable by most people. The way that a site displays on a screen is dependent on the browser used and whether it’s set for op;mized viewing; size of monitor and device on which the site is being viewed. 800 x 600 size makes the site most accessible for the largest number of people.
Anatomy of a Website Other Important Terms Source: www.marque4e.edu/comm/MUJournalism100 Resolu=on: Design for the most common viewing resolu;ons: 800 x 600, 1024 x 768 are commonly used and are easily viewable by most people. Larger size of 1280x1024 are easily viewable by people with large monitors and op;mized browsers. Viewers visi;ng the website on smaller devices (phones, laptops and tablets) will need to scroll horizontally across the screen.
Anatomy of a Website Other Important Terms Source: www.weebly.com WYSIWYG Editor: Visual editor that allows the site designer to primarily work with the layout and design of the page rather than the code. Stands for “what you see is what you get.”
Website Design Basics Before You Begin Designing Source: h4p://www.aarp.org Target Your Audience. What type of visitor is most likely to visit your site? Consider age, gender, geographic loca;on. What are their values and goals? What types of colors and imagery might they ﬁnd appealing? What common vernacular do they use? As the designer, consider any unique challenges posed by working with this audience. Are there any technological limita;ons? Are there any physical challenges, such as disabili;es or visual impairment that must be taken into considera;on?
Website Design Basics Before You Begin Designing Source: h4p://www.aarp.org The goal is to make sure that the message reaches the audience and emphasizes the overall mission statement. Consider running your design by someone in the target demographic to make sure that the site is easily used and understood.
Website Design Basics White Space Source: www.leica.com White Space: Leave visual “breathing room” on the page to avoid over cluUering informa;on on the page. Keep pages simple and cluUer-‐free. Avoid cramming too much informa;on in one area of the site– this helps emphasize the informa;on present on each page.
Website Design Basics Type Source: www.alistapart.com Type: Type should be legible. Site uses clean, readable fonts and color combina;on with enough contrast. Tip: Avoid large areas of “reversed out” type (light text on a dark background), as this leads to eyestrain for viewers. Make sure that text and background have enough contrast to stand apart as separate elements on a page. Dark text on light background oCen works best. S;ck to common system fonts (Arial, Helve;ca, Times New Roman, etc)
Website Design Basics Type Source: www.alistapart.com Type: Break up large blocks of text into smaller paragraphs. This also helps with the visual ﬂow of informa;on.
Website Design Basics Type Avoid large areas of light type on a dark background; this leads to eye strain for site visitors.
Website Design Basics Type Source: www.pallian.com Type: Header can use more decora;ve fonts; in this case, design the header as a graphic element in a design program such as Adobe Photoshop so that it reads as an image instead of text, yet s;ll preserves the appearance of the font.
Website Design Basics Unity and Consistency Source:www.memphiszoo.org Create a consistent system of page templates and use these throughout the site design. Keep the header, footer, sidebars and any naviga;on in the same spot throughout the design. This helps ;e the individual pages together into one unit and avoids crea;ng too many varia;ons that lead to confusion on the part of the visitor.
Website Design Basics Unity and Consistency Source:www.one.org/us Layout: Keep the most important content toward the top of the page. Hierarchy: Separate the informa;on on the page according to its importance and the order in which you want the reader to read it.
Website Design Basics Unity and Consistency Source:www.one.org/us Proximity: Similar and related content should be grouped close together on a page to indicate connec;ons.
Website Design Basics Unity and Consistency Source:www.deliveringafrica.org Create diﬀerent type treatments for text headings, subheadings, pull quotes and body text to diﬀeren;ate these areas of a website; keep this design consistent throughout the en;re site.
Website Design Basics Color Source:www.aidsresearch.org Design should use appropriate color and font choices to convey the site’s intended message. Keep a consistent use of a company’s brand color paleUe. Keep color paleUe consistent throughout the en;re site design in order to create unity between pages.
Website Design Basics Color Source:h4p://mannafoodbank.org/ Consider color theory basics and how diﬀerent colors work together. Colors should work well together, not clash or compete.
Website Design Basics Color Source:h4p://wisergirls.org Colors also have diﬀerent psychological meanings across world cultures. Consider the geography of your primary audience and how the viewers may perceive individual colors.
Website Design Basics Color Source: www.december.com/html/spec/color.html Op=onal: When choosing colors, refer to a hexadecimal chart to create a consistent paleUe of colors. This will help to ensure consistency every ;me you use the same color throughout the site.
Website Design Basics Op;mizing Images When including photos or graphics, make sure to op;mize for best quality and fastest loading ;me. Adobe Photoshop has a useful “Save for Web & Devices” feature that helps compress images for online viewing keeping them looking their best.
Website Design Basics Op;mizing Images The “Save for Web & Devices” feature allows the designer to compare up to 4 images side by side at diﬀerent quality and compression se/ngs. The boUom leC-‐hand corner of this window also displays ﬁle size and load ;me for each op;on.
Website Design Basics Forma/ng Images: Image Types JPEG (Joint Photographic Expert Group) Another commonly used and compressed online image format. Suitable for: photographic images and anything with complex gradients and areas of blended color.
Website Design Basics Forma/ng Images: Image Types GIF (Graphics Interchange Format) A compressed format used to save and display online images with ﬂat areas of color rather than gradients. Images are reduced to 256 colors or less; this allows the ﬁle to remain small in size and load quickly. Loss of quality if images are too compressed. Suitable for: logos, computer/vector drawn graphics
Website Design Basics Forma/ng Images: Image Types PNG (Portable Network Graphics) A format for encoding a picture pixel by pixel and sending it over the web. Small ﬁle sizes with no loss in quality when saved. Recommended by the W3 (World Wide Web) ConsorLum as a replacement for GIF images.
Website Design Basics Forma/ng Images Watch image size and resolu=on. Pay aUen;on to the rela;onship between image size/document size (pixel dimensions with actual width and height), document size, resolu;on and ﬁle size. Images should be set at a resolu;on of 72 ppi for online viewing. Note: Using the “Save for Web & Devices” feature in Photoshop will do this automaLcally, also allowing user to opLmize ﬁle quality.
Website Design Basics Forma/ng Images Avoid resizing small images to make them bigger. The result is oCen blurry or pixelated images, which makes the quality look poor.
Website Design Basics Quality Control Check for spelling errors and/or any inconsistent or inaccurate informa;on. Make sure that the company’s name and the names of its employees and management are spelled correctly and that all contact informa;on is up to date. Naviga=on should be easy to use and consistent throughout the site. Forms should func=on properly. Always test any forms that will appear on the website. Links: Make sure all links are working, and that they point to the right target page. When using links to third party sites, make sure that the link opens the page in a new tab on the viewer’s Internet browser; this helps avoid steering traﬃc away from your site. Use ALT tags when placing images. Using “ALT” tags helps text reading soCware iden;fy images on your site, which in turn makes the site accessible for visitors with visual disabili;es. Cap=ons are provided for audio, video and photo ﬁles
Website Design Basics Quality Control Use search-‐friendly page =tles that are self-‐explanatory to visitors. Be sure to use short, descrip=ve and relevant keywords in all page ;tles Test your site for compa=bility in a variety of browsers, especially the most commonly used ones (Internet Explorer, Firefox, Safari, Chrome, etc). Content should be kept updated frequently, and should sound conversa;onal to the reader. Naviga=on should be simple and all pages should be within 3 pages of every other page on the site. Avoid burying pages several levels deep on a website where it can’t be easily located. Loading =me: 2-‐5 seconds; no more than 10 seconds
Website Design Basics Quality Control Avoid using Flash script. Flash content is not compa;ble with the majority of mobile devices such as smart phones and iPads; avoiding this ensures that your site can be viewed by the maximum number of people. Alterna;vely, you can also use style sheets to link to diﬀerent versions of a website, providing a mobile-‐friendly HTML version for viewers using cell phones and tablets to view. Avoid adding automa;c music, anima;ons on the site, cluUered content, pixelated images.