Best Practices: Webpage Creation & Design

When designing your webpages, work toward having them first be (a) legible and functional, (b) attractive, then (c) interactive.

Legible and functional

  • Content placement:
    “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://arch.udmercy.edu/prospective/overview/index.htm
  • Paragrahs/Lists:
    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:
  • 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.
  • Tables:
    Tables do not need to be decorated. They 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.
  • Citation Standards:
    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

Attractiveness

  • Styles:
    Styles should be used from the options given in the “Edit” screen in Cascade Server.Styles can be used within a block of text.
    • 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.
    • 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

  • Headers:
    Headers should be used from the options given in the “Edit” screen in Cascade Server. \ Headers can only be applied to a body of text (i.e. paragraphs).
    (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.
  • Images:
    Images should enhance the page, not hinder it.
    • All images should be set to the “float-left” or “float-right” style at 300 px wide, max.
    • Large illustrations, images or videos should be set at 750 pixels wide; these images/videos should be centered.
  • PDF Files:
    Links to .PDF files can be made more attractive with creation of thumbnail images.
    http://www.arch.udmercy.edu/news_events/lecture/index.htm

Interactive