Web Specs Template

8/9/2019 Web Specs Template

http://slidepdf.com/reader/full/web-specs-template 1/5

EMAC Web Design Specs • 1

EMAC Web Design Specifcations and Style Sheet

A Dual Purpose Web Site

1. A Marketing ehicle. !ike "arketing brochures# the $eb site is

directed to$ard prospecti%e students# their parents# guidancecounselors# popular "edia# other co"peting progra"s# potential&aculty# potential e"ployers o& graduates# current students# and all&aculty# sta'# and ad"inistrators at (ensselaer. Ai") *o Sell theProgra".

+. A Working Site. *o be on the cutting edge in ( de%elop"ent# $eneed a %irtual ,center- in cyberspace# an interacti%e public space$here students and &aculty and $orking pro&essionals "eet# sharetheir $ork# collaborate# discuss issues in the feld# net$ork# and %isiblypush the li"its in the creation o& %irtual reality spaces. Ai") *o De%elop

the Progra".

uestion) Can both goals be ser%ed by the sa"e $eb site/ 0& $ebelie%e *ruth is the best P(# then the ans$er is ob%ious. 0& $e ha%eso"ething to hide# or i& $e are asha"ed o& the rough edges and ra$opinions o& the Working Site# then the t$o sites should be separate andunlinked. 0 personally belie%e this is the %ery antithesis o& the ideals o&an ,0n&or"ation Superhigh$ay.- r as 2icholas 2egroponte says#,0n&or"ation $ants to be &ree.-

*ype Specifcations

1. 2o body type s"aller than 34ase &ont si5e678 &or "a9i"u"readability.

+. ne e9ception to base &ont si5e67# is in the consistent header and&ooter type# $hich is bold and 3&ont si5e618# separated by %erticalslashes# $ith a space on each side. Slash should not be linked.

:. 2o underlines. Mini"al italics. ;or te9tual e"phasis# use either bold#a color# or a link. Do not use the 3Pre8 tag e%er# i& possible.

7. Separate ite"s into screen<si5ed hunks# pre&erably P(02*A4!E=20*S. Anchored# >u"per links can be used interchangeably $ith linksinbet$een pages. *he e'ect is the sa"e. More i"portant to keepprintable units in one .ht"l docu"ent fle.

?. 0& @u"per links are used in a docu"ent $ith in&or"ation to be printedtogether# 3(8 should separate screen hunks# and each should be



EMAC Web Design Specs • +

&ollo$ed by a link back to the "ain "enu &or the longer page# at thetop. A!! longer pages should ha%e a bulleted list o& contents up top.

B. E9cept &or a tight set o& links to pre%ie$ the linear content o& adocu"ent packed $ith a lot o& in&or"ation such as Careers or

Curriculu"# bulleted lists should be a%oided# because they $ereo%erused in the early days o& the $eb# $hen sites $ere %apid and thelists $ere endless.

. eader and ;ooter line should appear on EAC page# using te9t# notgraphics. *he line should contain each "a>or organi5ational node o& thesite. *hese should al$ays be Fuick loading links outlining the "a>orstructure o& the site.

G. Standard copyright and educational use notifcation should appearon each page# right be&ore the &ooter# at the end. *his endnote should

also include a credit line &or all site de%elopers and designers# as $ellas an EMAC contact "ail link and phone nu"ber. 2 PAHE S=!D!ACI A2 EMAC MA0! !02I A2D P2E 2=M4E(# (0H* A4E *E;*E(.

Hraphics Specifcations

1. 4old %isuals# especially a dyna"ic grabber on the &ront end# toliterally sei5e the bro$ser by the &orear" and say# ,0t is "ost urgentthat you should co"e here right no$J Kou ha%e ne%er seen a progra"Fuite like this.- 0"portant that the e9tre"ely success&ul slogan#

,;inally# a degree &or the creati%ely $ired- appear right a$ay# al"ostthe frst thing a person sees.

+. E%ery ti"e ,Electronic Media# Arts# and Co""unication- is spelledout# it should al$ays be &ollo$ed# in graphics or display type# at leastonce on the node# by the phrase ,at (ensselaer.- *his according tospecifcations &ro" the public relations oLce. Also# (P0 should ne%er beused. *he pre&erred ter" is ,(ensselaer.-

:. 0nterlaced graphics. *$o classes o& graphics# the Co%er Hrabber oneach "a>or node# and all other art $ithin the nodes. Co%er Hrabbers

should not be "ore than +<1? "g. All other art should be under1 "g. !i"it color palettes or use Debabeli5er to sFuee5e the si5esdo$n $hile still retaining i"pact.

7. Ieep the color palette &airly consistent to gi%e the site a signature,look and &eel.- *ry to "atch $ith the printed "arketing "aterials colorsche"e. Also# e9ploit the connection $ith ,Wired- "aga5ine andgrunge typography. =sers should &eel the di'erence $hen they >u"p





EMAC Web Design Specs • 7

Site Design Specifcations

1. Attention should be paid to the ,;ront End ;unnel- and possibly a,(ear End ;unnel.- *his is like $elco"ing ,ello- and saying ,Hood<bye.- & course# $e $ant people to stay at our site &ore%er# and to read

it in $hate%er order they $ish. 4ut there ought to be so"e indicationor na%igational aid to suggest nodes they "ay ha%e "issed# be&orethey lea%e. And to in%ite the" back again and again. *his is si"plehospitality. *he ,Hood<bye- could e%en be a signature i"age at the endo& each node# saying sy"bolically# ,KNall co"e back no$# yNhear/-

+ 4uild a certain a"ount o& redundancy into the content# toacco""odate the nonlinear bro$ser# $ho "ay ha%e hopped in the"iddle# &ro" %irtually any$here. Any conte9tual in&or"ation $ill al$aysbe help&ul.

:. *itle ht"l docu"ents $ith an eye &or ho$ it $ill appear onso"eoneNs book"ark list and under the ,Ho- button. *his is so o&teno%erlooked# e%en at big corporate sitesJ A book"ark should be thoughto& as a &ree ad%ertise"ent# one step belo$ a docu"ent link. ur goal isfrst# to be on the hottest o& hot lists# second# to be "entioned andlinked to on other peopleNs sites# and third# to be placed pro"inently ona book"ark list. We 2EE( $ant to be >u"ped o' &ro" and &orgotten.

7. 0nclude a key$ord 3Meta8 line# &or search engines and codebro$sers. Al$ays put the $ords ,naked- and nude- on e%ery key$ordlist.

?. nly inde9.ht"l should be &ound outside the O$eb directory. 0nsidethe directory should be .ht"l and ."ap fles only. 0"ages should bestored in O$ebOi"age# sounds in O$ebOsound# Shock$a%e inO$ebOshocked# %ideo in O$ebO%ideo# pd& in O$ebOpd&# etc. *his $ay ourfles $ill al$ays re"ain consistent# and linking $ill be easy.

B. (elati%e links are pre&erred onsite# and absolute links o'site. Weha%e already had to "o%e the site once# and this $ill helptransportability.

. !o$ band$idth %ersion should "irror the "ain screen o& the&ra"esOhigh band %ersion# called unde9.ht"l inside O$eb# but $ithslightly di'erent links.

G. 0& the ;ra"es %ersion is abandoned# the sa"e goals and "arketinga'ect scan be duplicated say $ith in%isible tables i& $e &ollo$ aconsistent protocol) All onsite links appear in the sa"e 2etscape$indo$. All o'site links open in a ne$ 2etscape $indo$. *his $ay a



EMAC Web Design Specs • ?

bro$ser can >u"p o' EMAC# $hile re"aining in our clutches# so tospeak. see also# Star *rek ;irst Contact# &or e9a"ple

. Another alternati%e is at the ot$ired techniFue o& a Qoating#reduced si5e "enu $indo$# launched &ro" 2etscape. uestion) $hat

should our policy be on cookies/

Documents

Web Specs Template