SlideShare a Scribd company logo
1 of 5
Web Construction – Where Do You Begin?
                              mcollins@rcs.k12.va.us


Hit your Target

Who do you want to attract to your site? Students? Teachers? Parents? Consumers?
Knowledge of who your visitors will be can help you determine the focus of your site.
Sites are generally designed for:
     Content (education, reference)
     Communication (list serv’s, chat rooms, bulletin boards)
     Commerce
 Decide what you want to say and what others need to know. A web’s purpose should be concise
and pre-determined. As a designer, the first task you should undertake is to write down your
site’s purpose in 20 words or less.

Structure, Structure, Structure

Building it isn’t enough – you need to make your site consistently easy to navigate. Poor
organization is one of the factors that keep “surfers” from re-visiting your site. While the type
and volume of information can influence the structure that you create, you will more than likely
choose one of four basic structures.

    Linear Narrative: A linear narrative is a very effective technique for presenting simple
     information. This method is generally used with smaller sites for the purpose of
     displaying basic content or providing training.




   Example: http://community-2.webtv.net/C8720277/ChandlersDaylilies/

    Hierarchy: One of the best ways to organize complex bodies of information. This
     format lends itself to web design because web sites are generally organized as offshoots
     of a single “home” page. As many people are familiar with this type of “flow-chart”
     structure in other applications, a well-designed hierarchy is easy for users to navigate. It
     should be noted, however, that hierarchies only work well when the designer has
     thoroughly organized his/her material.




    Web: This model poses very few restrictions and allows surfers to explore the site as it
     appeals to their own unique interests. These sites are generally dense with both relative
and absolute hyperlinks. These webs target highly educated or experienced surfers, and
       can be confusing to novice surfers.




   It is good practice for Web Designers to create a “model” of their site long before they ever
   open the first HTML editor. Flow charts, index cards and sticky notes are among a
   designer’s most useful tools!


   Tips for the New Designer:

     Prioritize information from general to specific.
     Divide your information into small, digestible chunks. Most users opt to print sites with
        pages of text rather than take the time to read the information online.
           o Small chunks of related information are easier to categorize and “funnel” into a
               consistent organizational scheme.
           o Link your “chunks” to one another if the related information is approximately one
               to three pages.
           o We HATE to scroll! Keep your information clean and concise. Long web pages
               tend to be disorienting.
http://web.archive.org/web/*/http://oasis.leidenuniv.nl/general/index-search/searchrs.htm


     A uniform format for presenting your information allows a surfer to apply his past
        experience with your site to predict how an unfamiliar section will be organized.
           o Familiarity breeds comfort!
           o Surfers who feel comfortable in a web environment are more likely to return to it
               – and bring their friends!
           o Disorganization = surfer frustration.
http://www.rcs.k12.va.us/

    Proper web site “balance” is the key to a successful design.
        o Hierarchy should feel natural to the visitor.
        o Main Menus that are too “deep” will lose visitors – having to navigate through
            many layers of nested menus before finding what you need is unnecessary.
        o Menus lose their value if they don’t carry at least four or five links.


   How well do you connect?

   Once you have determined the general structure of your site, it’s important to decide how
   your visitors will travel through it. Placement and type of hyperlinks can make or break your
   web site.
Links
    Text
        o Most sites use text for both relative and absolute hyperlinks.
        o Text should sharply contrast page background. http://www.geocities.com/Athens/
          Aegean/2221/index.html
        o Text and font should be consistent.
        o http://www.nicemice.net/amc/soapbox/html-abuse/fonts.var font abuse should be
          a crime…

    Graphics
        o Graphics are easy to hyperlink but must transcend language.

    “Next page” “Previous Page”
        o These links are useful in linear sites. They minimize viewer choice and offer the
           site designer some measure of navigation control.

     Navigation Bars
          o Offer consistency between pages
          o Allow for a clean, professional look
http://www.superkids.com/aweb/tools/math/index.shtml

    Link Placement
        o Links that are scattered throughout a page give the reader a sense of dis-
           organization. http://www.python.org/~guido/
        o Absolute links (those that link away from you site) should be placed strategically.
                Absolute links from the “home” page may take visitors from your site
                  before they ever view your information.


     Make sure they work!
           o Nothing discourages web site use like broken links.
           o Four out of ten pages on a site have a broken link.
http://web.archive.org/web/20040607183322/www.frickell.com/oldancient/links.htm
There’s No Place Like Home….

All web sites are organized around a “home” page. This page is the entry point of your site and
requires a great deal of consideration.

    First Impressions: Like it or not, your home page is the face you show the world. Take
     the time to make a good impression.

           o Eye appeal is critical. http://www.personal.psu.edu/staff/k/j/kjr106/index.html
           o Take the time to notice spelling and grammar.
           o Like it or not, 6 inches is all you can count on.
             http://web.archive.org/web/*/http://www.geocities.com/Heartland/Hills/2710/Gui
             neaPig.html
           o 10 second download or they’re gone.
           o Design to the lowest common denominator:
                  800 x 600
   View in different/older versions of a browser before publishing

    Your home page should be the first one you develop and the last one you finish.


Common Mistakes

    Stay Current
   In this day and age, information changes faster than a speeding bullet. Successful web sites
   are frequently updated and their designers make an effort to draw the surfer’s attention to
   new features.
           o Timestamps
           o “What’s New” Page
           o Use “new” graphics sparingly – too much of a good thing is a bad thing!

    Complete Construction Before Posting
   A site that has ‘under construction” postings on every link from the home page is a site that
   was posted in a rush.

    Guarantee They’ll leave without a trace
       o Long down-loads
       o Broken Links
       o Graphics that don’t work
       o Loud pages http://www3.ns.sympatico.ca/dstredulinsky/home.html
       o Spelling errors
       o An emphasis on ANYTHING but content. http://vervex.blix.com/ads.html

    Good web sites are like gardens; they are always a work in progress.




References

(1999) Building a Better Site. Web Site Journal [Internet] June 2, 1999, Vol. 2, No.22. Available
from: http://www.WebSiteJournal.com

(1999) Point Your Visitors In The Right Direction. Web Site Journal [Internet] June 2, 1999,
Vol. 2, No.22. Available from: http://www.WebSiteJournal.com

(1999) Are Your Links in Synch? Web Site Journal [Internet] June 2, 1999, Vol. 2, No.22.
Available from: http://www.WebSiteJournal.com

Lynch and Horton (1997) Yale Style Manual [Internet] January 31,2001.
Available from: < http://info.med.yale.edu/caim/manual/contents.html>
Web Construction – Where Do You Begin

More Related Content

What's hot

Introduction to Responsive Design v.2
Introduction to Responsive Design v.2Introduction to Responsive Design v.2
Introduction to Responsive Design v.2Clarissa Peterson
 
Web authoring design-basics
Web authoring design-basicsWeb authoring design-basics
Web authoring design-basicsMd Ali Hossain
 
Mobile First Responsive Web Design — BD Conf Oct 2013
Mobile First Responsive Web Design — BD Conf Oct 2013Mobile First Responsive Web Design — BD Conf Oct 2013
Mobile First Responsive Web Design — BD Conf Oct 2013Jason Grigsby
 
Using Online, Interactive And Web 2.0 Technologies In Careers Work
Using Online, Interactive And Web 2.0 Technologies In Careers WorkUsing Online, Interactive And Web 2.0 Technologies In Careers Work
Using Online, Interactive And Web 2.0 Technologies In Careers WorkHelen Buzdugan
 
Responsive Web Design Primer - NAGW 2014
Responsive Web Design Primer - NAGW 2014Responsive Web Design Primer - NAGW 2014
Responsive Web Design Primer - NAGW 2014Adrian Roselli
 
Navigation to the rescue!
Navigation to the rescue!Navigation to the rescue!
Navigation to the rescue!Ashley McQuaid
 
Using Web 2 Technologies For Communication And Fruitful Ministry
Using Web 2 Technologies For Communication And Fruitful MinistryUsing Web 2 Technologies For Communication And Fruitful Ministry
Using Web 2 Technologies For Communication And Fruitful MinistryRoy Yabuki
 
Responsive Web Design_2013
Responsive Web Design_2013Responsive Web Design_2013
Responsive Web Design_2013Achieve Internet
 
Pageflakes4 Educators
Pageflakes4 EducatorsPageflakes4 Educators
Pageflakes4 EducatorsGladys Baya
 
Responsive Design Tools & Resources
Responsive Design Tools & ResourcesResponsive Design Tools & Resources
Responsive Design Tools & ResourcesClarissa Peterson
 
Intro to Web Design
Intro to Web DesignIntro to Web Design
Intro to Web DesignKathy Gill
 
Martin Bazley - using simple technologies with different audiences (reduced f...
Martin Bazley - using simple technologies with different audiences (reduced f...Martin Bazley - using simple technologies with different audiences (reduced f...
Martin Bazley - using simple technologies with different audiences (reduced f...Martin Bazley
 
Responsive Design for Non-Techies
Responsive Design for Non-TechiesResponsive Design for Non-Techies
Responsive Design for Non-TechiesMalcolm Jones
 
Introduction to Responsive Web Design
Introduction to Responsive Web DesignIntroduction to Responsive Web Design
Introduction to Responsive Web DesignClarissa Peterson
 
Web as a Medium: Aesthetics & Design
Web as a Medium: Aesthetics & DesignWeb as a Medium: Aesthetics & Design
Web as a Medium: Aesthetics & Designguest2d5207
 
Responsive webdesign
Responsive webdesignResponsive webdesign
Responsive webdesignBart De Waele
 
Beyond Responsive Web Design
Beyond Responsive Web DesignBeyond Responsive Web Design
Beyond Responsive Web Designarborwebsolutions
 
Web designing(unit 1) Part 1
Web designing(unit 1) Part 1Web designing(unit 1) Part 1
Web designing(unit 1) Part 1SURBHI SAROHA
 

What's hot (20)

Introduction to Responsive Design v.2
Introduction to Responsive Design v.2Introduction to Responsive Design v.2
Introduction to Responsive Design v.2
 
Web authoring design-basics
Web authoring design-basicsWeb authoring design-basics
Web authoring design-basics
 
Mobile First Responsive Web Design — BD Conf Oct 2013
Mobile First Responsive Web Design — BD Conf Oct 2013Mobile First Responsive Web Design — BD Conf Oct 2013
Mobile First Responsive Web Design — BD Conf Oct 2013
 
Using Online, Interactive And Web 2.0 Technologies In Careers Work
Using Online, Interactive And Web 2.0 Technologies In Careers WorkUsing Online, Interactive And Web 2.0 Technologies In Careers Work
Using Online, Interactive And Web 2.0 Technologies In Careers Work
 
Responsive Web Design Primer - NAGW 2014
Responsive Web Design Primer - NAGW 2014Responsive Web Design Primer - NAGW 2014
Responsive Web Design Primer - NAGW 2014
 
Navigation to the rescue!
Navigation to the rescue!Navigation to the rescue!
Navigation to the rescue!
 
Using Web 2 Technologies For Communication And Fruitful Ministry
Using Web 2 Technologies For Communication And Fruitful MinistryUsing Web 2 Technologies For Communication And Fruitful Ministry
Using Web 2 Technologies For Communication And Fruitful Ministry
 
Learning 2.0
Learning 2.0Learning 2.0
Learning 2.0
 
Responsive Web Design_2013
Responsive Web Design_2013Responsive Web Design_2013
Responsive Web Design_2013
 
Pageflakes4 Educators
Pageflakes4 EducatorsPageflakes4 Educators
Pageflakes4 Educators
 
Responsive Design Tools & Resources
Responsive Design Tools & ResourcesResponsive Design Tools & Resources
Responsive Design Tools & Resources
 
Intro to Web Design
Intro to Web DesignIntro to Web Design
Intro to Web Design
 
Martin Bazley - using simple technologies with different audiences (reduced f...
Martin Bazley - using simple technologies with different audiences (reduced f...Martin Bazley - using simple technologies with different audiences (reduced f...
Martin Bazley - using simple technologies with different audiences (reduced f...
 
Responsive Design for Non-Techies
Responsive Design for Non-TechiesResponsive Design for Non-Techies
Responsive Design for Non-Techies
 
Introduction to Responsive Web Design
Introduction to Responsive Web DesignIntroduction to Responsive Web Design
Introduction to Responsive Web Design
 
Web as a Medium: Aesthetics & Design
Web as a Medium: Aesthetics & DesignWeb as a Medium: Aesthetics & Design
Web as a Medium: Aesthetics & Design
 
Responsive webdesign
Responsive webdesignResponsive webdesign
Responsive webdesign
 
Beyond Responsive Web Design
Beyond Responsive Web DesignBeyond Responsive Web Design
Beyond Responsive Web Design
 
Web designing(unit 1) Part 1
Web designing(unit 1) Part 1Web designing(unit 1) Part 1
Web designing(unit 1) Part 1
 
Jrw Wk2 Blogs
Jrw Wk2  BlogsJrw Wk2  Blogs
Jrw Wk2 Blogs
 

Viewers also liked

DagdelenSiriwardaneY..
DagdelenSiriwardaneY..DagdelenSiriwardaneY..
DagdelenSiriwardaneY..butest
 
Abstract
AbstractAbstract
Abstractbutest
 
amta-decision-trees.doc Word document
amta-decision-trees.doc Word documentamta-decision-trees.doc Word document
amta-decision-trees.doc Word documentbutest
 
CP2083 Introduction to Artificial Intelligence
CP2083 Introduction to Artificial IntelligenceCP2083 Introduction to Artificial Intelligence
CP2083 Introduction to Artificial Intelligencebutest
 
Tearn Up pitch deck.pdf
Tearn Up pitch deck.pdfTearn Up pitch deck.pdf
Tearn Up pitch deck.pdfasenju
 
1. MPEG I.B.P frame之不同
1. MPEG I.B.P frame之不同1. MPEG I.B.P frame之不同
1. MPEG I.B.P frame之不同butest
 
EL MODELO DE NEGOCIO DE YOUTUBE
EL MODELO DE NEGOCIO DE YOUTUBEEL MODELO DE NEGOCIO DE YOUTUBE
EL MODELO DE NEGOCIO DE YOUTUBEbutest
 

Viewers also liked (9)

ppt
pptppt
ppt
 
DagdelenSiriwardaneY..
DagdelenSiriwardaneY..DagdelenSiriwardaneY..
DagdelenSiriwardaneY..
 
Abstract
AbstractAbstract
Abstract
 
amta-decision-trees.doc Word document
amta-decision-trees.doc Word documentamta-decision-trees.doc Word document
amta-decision-trees.doc Word document
 
CP2083 Introduction to Artificial Intelligence
CP2083 Introduction to Artificial IntelligenceCP2083 Introduction to Artificial Intelligence
CP2083 Introduction to Artificial Intelligence
 
Prezentare Industrial
Prezentare IndustrialPrezentare Industrial
Prezentare Industrial
 
Tearn Up pitch deck.pdf
Tearn Up pitch deck.pdfTearn Up pitch deck.pdf
Tearn Up pitch deck.pdf
 
1. MPEG I.B.P frame之不同
1. MPEG I.B.P frame之不同1. MPEG I.B.P frame之不同
1. MPEG I.B.P frame之不同
 
EL MODELO DE NEGOCIO DE YOUTUBE
EL MODELO DE NEGOCIO DE YOUTUBEEL MODELO DE NEGOCIO DE YOUTUBE
EL MODELO DE NEGOCIO DE YOUTUBE
 

Similar to Web Construction – Where Do You Begin

Web Usability Page Design
Web Usability   Page DesignWeb Usability   Page Design
Web Usability Page DesignOvidiu Von M
 
Basic webpage layout and design
Basic webpage layout and designBasic webpage layout and design
Basic webpage layout and designAndz Bass
 
Website usability ideas for business growth
Website usability ideas for business growthWebsite usability ideas for business growth
Website usability ideas for business growthJames Smith
 
Web designing chapter 01
Web designing chapter 01Web designing chapter 01
Web designing chapter 01Farmanzaland
 
Web Usability Site Design
Web Usability   Site DesignWeb Usability   Site Design
Web Usability Site DesignOvidiu Von M
 
1 httpswww.eeoc.goveeocnewsroomrelease10-7-19.cfm2 ht.docx
1  httpswww.eeoc.goveeocnewsroomrelease10-7-19.cfm2  ht.docx1  httpswww.eeoc.goveeocnewsroomrelease10-7-19.cfm2  ht.docx
1 httpswww.eeoc.goveeocnewsroomrelease10-7-19.cfm2 ht.docxjeremylockett77
 
How to increase online traffic for your website
How to increase online traffic for your websiteHow to increase online traffic for your website
How to increase online traffic for your websitePRITHWISH SAHA
 
Website Navigation - Some Tips
Website Navigation - Some TipsWebsite Navigation - Some Tips
Website Navigation - Some Tipsffats1
 
Basics of Web Design
Basics of Web DesignBasics of Web Design
Basics of Web DesignStaci Trekles
 
Stuff what we're doing at Edge Hill University
Stuff what we're doing at Edge Hill UniversityStuff what we're doing at Edge Hill University
Stuff what we're doing at Edge Hill UniversityMichael Nolan
 
Empowerment Technology - Basic Web Design Principles and Elements
Empowerment Technology - Basic Web Design Principles and ElementsEmpowerment Technology - Basic Web Design Principles and Elements
Empowerment Technology - Basic Web Design Principles and ElementsLany Lyn Magdaraog
 

Similar to Web Construction – Where Do You Begin (20)

Web Usability Page Design
Web Usability   Page DesignWeb Usability   Page Design
Web Usability Page Design
 
Basic webpage layout and design
Basic webpage layout and designBasic webpage layout and design
Basic webpage layout and design
 
Website usability ideas for business growth
Website usability ideas for business growthWebsite usability ideas for business growth
Website usability ideas for business growth
 
Web designing chapter 01
Web designing chapter 01Web designing chapter 01
Web designing chapter 01
 
Web Usability Site Design
Web Usability   Site DesignWeb Usability   Site Design
Web Usability Site Design
 
1 httpswww.eeoc.goveeocnewsroomrelease10-7-19.cfm2 ht.docx
1  httpswww.eeoc.goveeocnewsroomrelease10-7-19.cfm2  ht.docx1  httpswww.eeoc.goveeocnewsroomrelease10-7-19.cfm2  ht.docx
1 httpswww.eeoc.goveeocnewsroomrelease10-7-19.cfm2 ht.docx
 
How to increase online traffic for your website
How to increase online traffic for your websiteHow to increase online traffic for your website
How to increase online traffic for your website
 
Website Navigation - Some Tips
Website Navigation - Some TipsWebsite Navigation - Some Tips
Website Navigation - Some Tips
 
Basics of Web Design
Basics of Web DesignBasics of Web Design
Basics of Web Design
 
Stuff what we're doing at Edge Hill University
Stuff what we're doing at Edge Hill UniversityStuff what we're doing at Edge Hill University
Stuff what we're doing at Edge Hill University
 
Webdesign
WebdesignWebdesign
Webdesign
 
Mobile web design
Mobile web designMobile web design
Mobile web design
 
Interface Design
Interface DesignInterface Design
Interface Design
 
Dealing with organisational focused ia difficulties
Dealing with organisational focused ia difficultiesDealing with organisational focused ia difficulties
Dealing with organisational focused ia difficulties
 
Empowerment Technology - Basic Web Design Principles and Elements
Empowerment Technology - Basic Web Design Principles and ElementsEmpowerment Technology - Basic Web Design Principles and Elements
Empowerment Technology - Basic Web Design Principles and Elements
 
Web Usability
Web UsabilityWeb Usability
Web Usability
 
Web Accessibility
Web AccessibilityWeb Accessibility
Web Accessibility
 
Jamal Qaiyyim Ch3
Jamal Qaiyyim Ch3Jamal Qaiyyim Ch3
Jamal Qaiyyim Ch3
 
Soodam
SoodamSoodam
Soodam
 
4 Interface Design
4 Interface Design4 Interface Design
4 Interface Design
 

More from butest

LESSONS FROM THE MICHAEL JACKSON TRIAL
LESSONS FROM THE MICHAEL JACKSON TRIALLESSONS FROM THE MICHAEL JACKSON TRIAL
LESSONS FROM THE MICHAEL JACKSON TRIALbutest
 
Timeline: The Life of Michael Jackson
Timeline: The Life of Michael JacksonTimeline: The Life of Michael Jackson
Timeline: The Life of Michael Jacksonbutest
 
Popular Reading Last Updated April 1, 2010 Adams, Lorraine The ...
Popular Reading Last Updated April 1, 2010 Adams, Lorraine The ...Popular Reading Last Updated April 1, 2010 Adams, Lorraine The ...
Popular Reading Last Updated April 1, 2010 Adams, Lorraine The ...butest
 
LESSONS FROM THE MICHAEL JACKSON TRIAL
LESSONS FROM THE MICHAEL JACKSON TRIALLESSONS FROM THE MICHAEL JACKSON TRIAL
LESSONS FROM THE MICHAEL JACKSON TRIALbutest
 
Com 380, Summer II
Com 380, Summer IICom 380, Summer II
Com 380, Summer IIbutest
 
The MYnstrel Free Press Volume 2: Economic Struggles, Meet Jazz
The MYnstrel Free Press Volume 2: Economic Struggles, Meet JazzThe MYnstrel Free Press Volume 2: Economic Struggles, Meet Jazz
The MYnstrel Free Press Volume 2: Economic Struggles, Meet Jazzbutest
 
MICHAEL JACKSON.doc
MICHAEL JACKSON.docMICHAEL JACKSON.doc
MICHAEL JACKSON.docbutest
 
Social Networks: Twitter Facebook SL - Slide 1
Social Networks: Twitter Facebook SL - Slide 1Social Networks: Twitter Facebook SL - Slide 1
Social Networks: Twitter Facebook SL - Slide 1butest
 
Facebook
Facebook Facebook
Facebook butest
 
Executive Summary Hare Chevrolet is a General Motors dealership ...
Executive Summary Hare Chevrolet is a General Motors dealership ...Executive Summary Hare Chevrolet is a General Motors dealership ...
Executive Summary Hare Chevrolet is a General Motors dealership ...butest
 
Welcome to the Dougherty County Public Library's Facebook and ...
Welcome to the Dougherty County Public Library's Facebook and ...Welcome to the Dougherty County Public Library's Facebook and ...
Welcome to the Dougherty County Public Library's Facebook and ...butest
 
NEWS ANNOUNCEMENT
NEWS ANNOUNCEMENTNEWS ANNOUNCEMENT
NEWS ANNOUNCEMENTbutest
 
C-2100 Ultra Zoom.doc
C-2100 Ultra Zoom.docC-2100 Ultra Zoom.doc
C-2100 Ultra Zoom.docbutest
 
MAC Printing on ITS Printers.doc.doc
MAC Printing on ITS Printers.doc.docMAC Printing on ITS Printers.doc.doc
MAC Printing on ITS Printers.doc.docbutest
 
Mac OS X Guide.doc
Mac OS X Guide.docMac OS X Guide.doc
Mac OS X Guide.docbutest
 
WEB DESIGN!
WEB DESIGN!WEB DESIGN!
WEB DESIGN!butest
 
Download
DownloadDownload
Downloadbutest
 
resume.doc
resume.docresume.doc
resume.docbutest
 

More from butest (20)

LESSONS FROM THE MICHAEL JACKSON TRIAL
LESSONS FROM THE MICHAEL JACKSON TRIALLESSONS FROM THE MICHAEL JACKSON TRIAL
LESSONS FROM THE MICHAEL JACKSON TRIAL
 
Timeline: The Life of Michael Jackson
Timeline: The Life of Michael JacksonTimeline: The Life of Michael Jackson
Timeline: The Life of Michael Jackson
 
Popular Reading Last Updated April 1, 2010 Adams, Lorraine The ...
Popular Reading Last Updated April 1, 2010 Adams, Lorraine The ...Popular Reading Last Updated April 1, 2010 Adams, Lorraine The ...
Popular Reading Last Updated April 1, 2010 Adams, Lorraine The ...
 
LESSONS FROM THE MICHAEL JACKSON TRIAL
LESSONS FROM THE MICHAEL JACKSON TRIALLESSONS FROM THE MICHAEL JACKSON TRIAL
LESSONS FROM THE MICHAEL JACKSON TRIAL
 
Com 380, Summer II
Com 380, Summer IICom 380, Summer II
Com 380, Summer II
 
PPT
PPTPPT
PPT
 
The MYnstrel Free Press Volume 2: Economic Struggles, Meet Jazz
The MYnstrel Free Press Volume 2: Economic Struggles, Meet JazzThe MYnstrel Free Press Volume 2: Economic Struggles, Meet Jazz
The MYnstrel Free Press Volume 2: Economic Struggles, Meet Jazz
 
MICHAEL JACKSON.doc
MICHAEL JACKSON.docMICHAEL JACKSON.doc
MICHAEL JACKSON.doc
 
Social Networks: Twitter Facebook SL - Slide 1
Social Networks: Twitter Facebook SL - Slide 1Social Networks: Twitter Facebook SL - Slide 1
Social Networks: Twitter Facebook SL - Slide 1
 
Facebook
Facebook Facebook
Facebook
 
Executive Summary Hare Chevrolet is a General Motors dealership ...
Executive Summary Hare Chevrolet is a General Motors dealership ...Executive Summary Hare Chevrolet is a General Motors dealership ...
Executive Summary Hare Chevrolet is a General Motors dealership ...
 
Welcome to the Dougherty County Public Library's Facebook and ...
Welcome to the Dougherty County Public Library's Facebook and ...Welcome to the Dougherty County Public Library's Facebook and ...
Welcome to the Dougherty County Public Library's Facebook and ...
 
NEWS ANNOUNCEMENT
NEWS ANNOUNCEMENTNEWS ANNOUNCEMENT
NEWS ANNOUNCEMENT
 
C-2100 Ultra Zoom.doc
C-2100 Ultra Zoom.docC-2100 Ultra Zoom.doc
C-2100 Ultra Zoom.doc
 
MAC Printing on ITS Printers.doc.doc
MAC Printing on ITS Printers.doc.docMAC Printing on ITS Printers.doc.doc
MAC Printing on ITS Printers.doc.doc
 
Mac OS X Guide.doc
Mac OS X Guide.docMac OS X Guide.doc
Mac OS X Guide.doc
 
hier
hierhier
hier
 
WEB DESIGN!
WEB DESIGN!WEB DESIGN!
WEB DESIGN!
 
Download
DownloadDownload
Download
 
resume.doc
resume.docresume.doc
resume.doc
 

Web Construction – Where Do You Begin

  • 1. Web Construction – Where Do You Begin? mcollins@rcs.k12.va.us Hit your Target Who do you want to attract to your site? Students? Teachers? Parents? Consumers? Knowledge of who your visitors will be can help you determine the focus of your site. Sites are generally designed for:  Content (education, reference)  Communication (list serv’s, chat rooms, bulletin boards)  Commerce Decide what you want to say and what others need to know. A web’s purpose should be concise and pre-determined. As a designer, the first task you should undertake is to write down your site’s purpose in 20 words or less. Structure, Structure, Structure Building it isn’t enough – you need to make your site consistently easy to navigate. Poor organization is one of the factors that keep “surfers” from re-visiting your site. While the type and volume of information can influence the structure that you create, you will more than likely choose one of four basic structures.  Linear Narrative: A linear narrative is a very effective technique for presenting simple information. This method is generally used with smaller sites for the purpose of displaying basic content or providing training. Example: http://community-2.webtv.net/C8720277/ChandlersDaylilies/  Hierarchy: One of the best ways to organize complex bodies of information. This format lends itself to web design because web sites are generally organized as offshoots of a single “home” page. As many people are familiar with this type of “flow-chart” structure in other applications, a well-designed hierarchy is easy for users to navigate. It should be noted, however, that hierarchies only work well when the designer has thoroughly organized his/her material.  Web: This model poses very few restrictions and allows surfers to explore the site as it appeals to their own unique interests. These sites are generally dense with both relative
  • 2. and absolute hyperlinks. These webs target highly educated or experienced surfers, and can be confusing to novice surfers. It is good practice for Web Designers to create a “model” of their site long before they ever open the first HTML editor. Flow charts, index cards and sticky notes are among a designer’s most useful tools! Tips for the New Designer:  Prioritize information from general to specific.  Divide your information into small, digestible chunks. Most users opt to print sites with pages of text rather than take the time to read the information online. o Small chunks of related information are easier to categorize and “funnel” into a consistent organizational scheme. o Link your “chunks” to one another if the related information is approximately one to three pages. o We HATE to scroll! Keep your information clean and concise. Long web pages tend to be disorienting. http://web.archive.org/web/*/http://oasis.leidenuniv.nl/general/index-search/searchrs.htm  A uniform format for presenting your information allows a surfer to apply his past experience with your site to predict how an unfamiliar section will be organized. o Familiarity breeds comfort! o Surfers who feel comfortable in a web environment are more likely to return to it – and bring their friends! o Disorganization = surfer frustration. http://www.rcs.k12.va.us/  Proper web site “balance” is the key to a successful design. o Hierarchy should feel natural to the visitor. o Main Menus that are too “deep” will lose visitors – having to navigate through many layers of nested menus before finding what you need is unnecessary. o Menus lose their value if they don’t carry at least four or five links. How well do you connect? Once you have determined the general structure of your site, it’s important to decide how your visitors will travel through it. Placement and type of hyperlinks can make or break your web site.
  • 3. Links  Text o Most sites use text for both relative and absolute hyperlinks. o Text should sharply contrast page background. http://www.geocities.com/Athens/ Aegean/2221/index.html o Text and font should be consistent. o http://www.nicemice.net/amc/soapbox/html-abuse/fonts.var font abuse should be a crime…  Graphics o Graphics are easy to hyperlink but must transcend language.  “Next page” “Previous Page” o These links are useful in linear sites. They minimize viewer choice and offer the site designer some measure of navigation control.  Navigation Bars o Offer consistency between pages o Allow for a clean, professional look http://www.superkids.com/aweb/tools/math/index.shtml  Link Placement o Links that are scattered throughout a page give the reader a sense of dis- organization. http://www.python.org/~guido/ o Absolute links (those that link away from you site) should be placed strategically.  Absolute links from the “home” page may take visitors from your site before they ever view your information.  Make sure they work! o Nothing discourages web site use like broken links. o Four out of ten pages on a site have a broken link. http://web.archive.org/web/20040607183322/www.frickell.com/oldancient/links.htm There’s No Place Like Home…. All web sites are organized around a “home” page. This page is the entry point of your site and requires a great deal of consideration.  First Impressions: Like it or not, your home page is the face you show the world. Take the time to make a good impression. o Eye appeal is critical. http://www.personal.psu.edu/staff/k/j/kjr106/index.html o Take the time to notice spelling and grammar. o Like it or not, 6 inches is all you can count on. http://web.archive.org/web/*/http://www.geocities.com/Heartland/Hills/2710/Gui neaPig.html o 10 second download or they’re gone. o Design to the lowest common denominator:  800 x 600
  • 4. View in different/older versions of a browser before publishing  Your home page should be the first one you develop and the last one you finish. Common Mistakes  Stay Current In this day and age, information changes faster than a speeding bullet. Successful web sites are frequently updated and their designers make an effort to draw the surfer’s attention to new features. o Timestamps o “What’s New” Page o Use “new” graphics sparingly – too much of a good thing is a bad thing!  Complete Construction Before Posting A site that has ‘under construction” postings on every link from the home page is a site that was posted in a rush.  Guarantee They’ll leave without a trace o Long down-loads o Broken Links o Graphics that don’t work o Loud pages http://www3.ns.sympatico.ca/dstredulinsky/home.html o Spelling errors o An emphasis on ANYTHING but content. http://vervex.blix.com/ads.html  Good web sites are like gardens; they are always a work in progress. References (1999) Building a Better Site. Web Site Journal [Internet] June 2, 1999, Vol. 2, No.22. Available from: http://www.WebSiteJournal.com (1999) Point Your Visitors In The Right Direction. Web Site Journal [Internet] June 2, 1999, Vol. 2, No.22. Available from: http://www.WebSiteJournal.com (1999) Are Your Links in Synch? Web Site Journal [Internet] June 2, 1999, Vol. 2, No.22. Available from: http://www.WebSiteJournal.com Lynch and Horton (1997) Yale Style Manual [Internet] January 31,2001. Available from: < http://info.med.yale.edu/caim/manual/contents.html>