Best Practices: Webpage Creation & Design
Training Handout
When designing your webpages, work toward having them first be (a) legible and functional, (b) attractive, then (c) interactive.
1. Legible and functional
- “Above the fold” rule: The most common computer screen resolution in 2012 is 1024 x 768 pixels. Individuals rarely click down unless led there, so try to make sure that the most important information or directions to the other information (i.e. anchors, links, images) is on the first screen you see.
http://www.udmercy.edu/fitnesscenter/program/index.htm
http://arch.udmercy.edu/prospective/overview/index.htm
http://eng-sci.udmercy.edu/programs/pre_med/index.htm - Avoid long paragraphs on landing/advertising pages. Large paragraphs should be used for specific detailed pages
(ex: http://www.arch.udmercy.edu/programs/arch/index.htm). Instead, use:
- Short bursts of text
- Bulleted lists
- Links to other pieces of information
http://healthprofessions.udmercy.edu/programs/nursing/why_mson/
- Sidebars: If you have information you want to view on all site pages, please ask us MPA to put it a sidebar into your page template. Please do not place paragraphs in sidebars ever.
http://www.udmercy.edu/fitnesscenter/program/index.htm - Tables do not need to be decorated. Tables should be used only when your information is in a matrix (i.e. rows and columns of information). Avoid using tables if information can be put into bulleted list.
http://www.udmercy.edu/fitnesscenter/program/index.htm - Please refer to the MPA Style Guide and Logo Standards for best practices and UDM citation standards.
http://www.udmercy.edu/mpa/id-style/style-guide/index.htm
http://www.udmercy.edu/mpa/id-style/id_standards/index.htm
2. Attractiveness
- Headers and styles should be used from the options given in the “Edit” screen in Cascade Server. Styles can be used within a block of text. Headers can only be applied to a body of text (i.e. paragraphs).
- Styles:
- Float Left/ Float Right: Images are shown on either side of page.
- Caption: turns text blue and italicizes.
- Red Header: Turns text red and bold.
- Shadow style: puts text/image in raised box.
- Headers (Styles 1-4 is suggested for use):
- Header 1: Dark blue and large
- Header 2: Light blue and slighter smaller.
- Header 3: Bold and Black, not much bigger than paragraph text
- Header 4: italicized and not much bigger than paragraph text.
*Please do not hand code text styles or headers. Contact MPA for addition of new text formatting.
- Styles:
- Bold and “redheader” style: These should be used sparingly, to highlight information in a paragraph or block of text. Please do not use for whole paragraphs.
http://www.arch.udmercy.edu/programs/dms/index.htm - Images should enhance the page, not hinder it. All images should be set to the “float-left” or “float-right” style, with the exception of a large illustration, image or video more than 400 pixels width. These images should be centered.
http://www.udmercy.edu/live/community-outreach/neighborhood/index.htm - Links to .PDF files can be made more attractive with creation of thumbnail images.
http://www.arch.udmercy.edu/news_events/lecture/index.htm
3. Interactive
- Whenever possible, add links to social media, custom header images, outside articles, videos and/or podcasts to your pages. Contact MPA if you need instructions to do so.
http://www.udmercy.edu/apply/financial_aid/index.htm
http://www.udmercy.edu/about/discover-detroit/livernois/index.htm
http://www.udmercy.edu/slo/ride/index.htm
http://www.udmercy.edu/fitnesscenter/ - Please reference the UDM Social Media Policy for best practices.
http://www.udmercy.edu/mpa/ecug/social_media/index.htm
