Design Guidelines For Web Sites

1,336 views
1,285 views

Published on

Design Guidelines For Web Sites

Published in: Technology, Design
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,336
On SlideShare
0
From Embeds
0
Number of Embeds
14
Actions
Shares
0
Downloads
0
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Design Guidelines For Web Sites

  1. 1. Design Guidelines for Web Sites and/or Pages By K M Mahmud Hasan Consultant, Management Consultant Group
  2. 2. Before Any Web Pages Are Made... <ul><li>Identify audience to be serviced by the site or page. </li></ul><ul><li>Identify the purpose and/or need for the site or page. </li></ul><ul><li>Identify potential participants to contribute to the site or page. </li></ul><ul><li>Clarify the organization of information. </li></ul><ul><li>For Web sites, create a top level &quot;home page&quot; that is short, includes the purpose of the Web site and </li></ul><ul><li>links to the pages containing the actual information. Additional Web pages should provide detailed information. </li></ul>
  3. 3. Before Any Web Pages Are Made... <ul><li>For Web sites, sketch out the relationships of the &quot;home page&quot; and the other pages with one another. </li></ul><ul><li>Sketch out the visual design and evaluate its effectiveness. </li></ul><ul><li>Plan graphics with the audience in mind. </li></ul><ul><li>Only use graphics that serve a purpose and use appropriate graphics for that purpose. </li></ul><ul><li>Evaluate the &quot;overall look.&quot; </li></ul><ul><li>Strive for a consistent layout style. </li></ul>
  4. 4. When Making Web Pages... <ul><li>Use valid HTML as much as possible. This will help insure that the largest possible </li></ul><ul><li>audience will be able to use your Web pages. You can check your HTML's validity at: </li></ul><ul><ul><li>¡ Web Design Group's Validation Service </li></ul></ul><ul><ul><li>¡ The World Wide Web Consortium's HTML Validator </li></ul></ul><ul><li>Validation is especially helpful if you are using an &quot;HTML Editor,&quot; such as Microsoft </li></ul><ul><li>FrontPage or Claris HomePage, as these editors often create invalid HTML. </li></ul><ul><li>Create Web pages that are easy to read. </li></ul>
  5. 5. When Making Web Pages... <ul><li>Consider that some viewers who access MMSD Web pages will be using Web browsers other than </li></ul><ul><li>Netscape or Internet Explorer, and may be using any number of different devices to access the </li></ul><ul><li>pages. </li></ul><ul><li>Include only exemplary work for publishing. Other work can be displayed within individual buildings. </li></ul>
  6. 6. Technical Specifications for Web Pages <ul><li>File Name Specifications </li></ul><ul><li>These specifications take into consideration that Authors, Editors and Publishers may be </li></ul><ul><li>working on different platforms. The specifications help insure that there are no problems with </li></ul><ul><li>differing platforms during the publishing process. </li></ul><ul><li>· Should be 8 characters or less (before the '.htm'), no spaces or punctuation (except .), all lower </li></ul><ul><li>case, and unique and descriptive. Examples: africa.htm or elephant.gif or cbcalend.htm. </li></ul><ul><li>· Should end with 3 letter extensions, such as .htm, .gif or .jpg </li></ul>
  7. 7. Technical Specifications for Web Pages <ul><li>Web Sites and Pages </li></ul><ul><li>Web sites should be a collection of smaller pages accessed from a top level page (versus one long page). </li></ul><ul><li>Web pages should contain links to appropriate parent &quot;home pages&quot; (that is, pages &quot;above“ them). </li></ul><ul><li>Longer Web pages should contain a hypertext index and internal links throughout the document to facilitate navigation. </li></ul>
  8. 8. Technical Specifications for Web Pages <ul><li>Graphics </li></ul><ul><li>All image tags must have the alternate text attribute, even if it contains nothing (ALT=&quot;&quot;). </li></ul><ul><li>Images should have a resolution of approximately 72 dpi (dots per inch). </li></ul><ul><li>For quickness in loading, images should be a maximum size of about 35 kb. </li></ul><ul><li>If images larger than 35 kb are used, thumbnail sketches should be provided. </li></ul><ul><li>Images used for Web page backgrounds should be a maximum of 5 kb. </li></ul><ul><li>Use the GIF graphics format for clip art or line graphics. Use the JPEG format for photographs. </li></ul><ul><li>This will allow compression of graphics to be optimal </li></ul>
  9. 9. Content Specifications for Web Pages <ul><li>Each Web page must contain the following information: </li></ul><ul><li>· Last Updated date. </li></ul><ul><li>· Author information: </li></ul><ul><li>¡ Staff Member Authors: the Author's email address. </li></ul><ul><li>¡ Student Authors : the name and email address of a staff person sponsoring the student's </li></ul><ul><li>Web page(s). </li></ul><ul><li>¡ Volunteer Authors : the name and email address of a staff person sponsoring the volunteer's </li></ul><ul><li>Web page(s). </li></ul>
  10. 10. Content Specifications for Web Pages <ul><li>· The Editor's name and email address. </li></ul><ul><li>· The Publisher's name and email address. </li></ul><ul><li>· Webmaster's email address (webmaster@madison.k12.wi.us). </li></ul><ul><li>· A title that appropriately describes the content of the page. </li></ul><ul><li>· Well edited text including correct spelling and grammar </li></ul><ul><li>· Factually correct information. </li></ul><ul><li>· References if the Web page is a research document. </li></ul>
  11. 11. Content Specifications for Web Pages <ul><li>No Web page may contain: </li></ul><ul><li>Inappropriate material or links to inappropriate material. </li></ul><ul><li>Links to resources that do not exist. </li></ul><ul><li>Email addresses of students. </li></ul><ul><li>Identifiable pictures of students, unless written permission has been granted by the student's parent or guardian. </li></ul><ul><li>Full names of students, unless written permission has been granted by the student's parent or guardian. </li></ul><ul><li>Any graphics or information that is in violation of copyright laws. </li></ul><ul><li>Any commercial or advertising material. </li></ul>

×