Maintaining Unity Through Effective Website Design: What's ...

nostrilshumorousInternet and Web Development

Nov 18, 2013 (3 years and 6 months ago)

66 views

Encouraging Community

through Your Website:

What’s HOT and What’s NOT


COE 27
th

Annual Conference | Friday, September 19, 2008

Dr. Cynthia
D. Park & Manny
Uribe

San Diego State University,
Pre
-
College Institute


Why create

a
hot

web
site?


Informs
the community of program goals and objectives


Creates
a professional
image of TRiO
programs within the
University and beyond


Ensures
responses for
recruitment
of staff and students


Maintains
alumni
affiliation


Provides access to
program
documents
effectively

What makes a web site
hot
?


Credibility/Authority


Readability


Usability


Accessibility

What makes a web site credible?


Purpose immediately apparent (use a tag line)


Domain affiliated with institution


(
virtual host:
pci.sdsu.edu
)


Clear way to contact organization


Timely information (updated regularly
)

What makes a web site credible
? (continued)


High
-
quality graphics/layout/color


Clear writing
(8th
grade level)


Eliminate bugs, typos, bad grammar,


misspelled words


Corrupted data, error pages, broken links


Cite sources for your information (outbound links)

What makes a web site credible
? (continued)


What makes a web site credible
? (continued)


How is this web site credible or not?

What makes a web site
readable
?


Typography


Use sans serif fonts for large bodies of text


Serif fonts
ok for titles and
headlines


Shorter line lengths easier to read


Use appropriate size fonts, allowing resizing


Limit web site to two font styles


Choose contrasting colors (black on white best)

Serif

Sans serif

What makes a web site
readable
? (continued)


Typography


Avoid all caps




Can you read these sentences?


1.




2.

Can you read this?

Can you read this?

What makes a web site readable?


Writing



Text should
be
scannable


One idea per paragraph


Half word count compared to normal print


Meaningful sub
-
headings


Bulleted lists


Everyday language


What makes a web site readable?

What makes a web site readable?

What makes a web site readable?


Example of what’s more scannable


What makes a web site readable?


Example of what’s more scannable


Usability: What makes a web site
navigable?


Location
: Stick
to left side or top of web
page

(what people are used to)


Menus
: Avoid
drop down menus or constrain to one level


Flash
: Avoid
using Flash for navigation


(
unpredictable and distracting)


Labels
: Use
explicit link labels


(
don’t use “click here”
)

Usability: What makes a web site
navigable?


Grouping
: Group
links when there are many options


Links
: Avoid
having a link on a page that points to
the current page


Make links clearly identifiable


Differentiate visited and unvisited links


Use bread crumbs


Distinct window titles

Usability: What makes a web site
navigable?


Example of a navigable web site

Usability: What makes a web site user
friendly?


Use liquid layouts
*


Search feature (stick to format)


Avoid looking like an advertisement


Ensure browser compatibility (Internet Explorer)



Usability: What makes a web site user
friendly?




Usability: What makes a web site user
friendly?




Usability: What makes a web site user
friendly?


Avoid splash pages (Flash animation)


Delays arriving at home page


Turns many readers off, annoying


Breaks search engine optimization


Avoid large file sizes for images (compression)


Example


Minimize loading time (optimization)


Provide alternate style sheets (print and mobile)







Usability: What makes a web site user
friendly?

Usability: What makes a web site user
friendly?

Accessibility: Why make a web site
accessible?


Section
508
(Rehabilitation Act of 1973 as amended, 1998)


Federal
agencies must develop and maintain
information technology so that all users with
disabilities have access comparable with that of
those without disabilities.


California
Government Code 11135 requires all state
agencies to comply with Section 508 and also to
apply the US Access Board
standards.

Accessibility: What features need to be
addressed?


Graphics and multimedia


Links
and buttons


Page organization


Forms and fields


Text size and color




Accessibility: What features need to be
addressed?


SDSU College of Education


Hartnell College





Accessibility: What features need to be
addressed?


Hartnell College





Web Site Checking Tools


HTML
Validator

http://validator.w3.org/


CSS
Validator

http://jigsaw.w3.org/css
-
validator/


Color contrast checker

http://www.accesskeys.org/tools/color
-
contrast.html


Accessibility
Validator

http://
www.cynthiasays.com
/


Check web page loading speed

http://
www.websiteoptimization.com
/services/analyze/





Discussion Groups


Group 1


Credibility & Readability


Group 2


Usability & Navigability


Group 3


Accessibility & Credibility


Group 4


Readability & Usability


Group 5


Navigability & Accessibility


Selected Bibliography


Typography


The Mac is not a typewriter

(2
nd

Ed.) by Robin Williams.
Peachpit

Press, 2003.


Usability and Readability


Alertbox
: Current Issues in Web Usability
by
Jakob

Nielsen. Retrieved March 18, 2008,
http://www.useit.com/alertbox/


Prioritizing Web Usability
by
Jakob

Nielsen and
Hoa

Loranger
. Berkeley: New Riders, 2006.


Accessibility


Beyond ALT Text: Making the Web Easy to Use for Users with Disabilities
, Nielsen Norman Group. Retrieved March 18, 2008.

http://www.nngroup.com/reports/accessibility/beyond_ALT_text.pdf


Section 508
. Retrieved March 10, 2008,
http://section508.gov/


Navigability


Where's the Search? Re
-
examining User Expectations of Web Objects
. Retrieved March 20, 2008,

http://psychology.wichita.edu/surl/usabilitynews/81/webobjects.htm


Other sources


A List Apart: For People Who Make Websites
. Retrieved April 2, 2008,
http://alistapart.com/


Web Pages That Suck
. Retrieved March 10, 2008,
http://www.webpagesthatsuck.com/



Five criteria for evaluation Web pages
, Olin & Uris Libraries. Retrieved March 20, 2008,

http://www.library.cornell.edu/olinuris/ref/research/webcrit.html


Evaluating Web Pages: Techniques to Apply & Questions to Ask
, UC Berkeley Library. Retrieved March 21, 2008,

http://www.lib.berkeley.edu/TeachingLib/Guides/Internet/Evaluate.html