STUDENT AFFAIRS TECHNOLOGY... WEBSTANDARDS

Transcription

1 STUDNT AFFAIRS TCHNOLOGY WBSTANDARDS

2 W BD V L OPM NTPROC SS F ORNW WBSI TSORMAJ ORADDI TI ONS/ UPDATS R S A R C H ga her ngcon ac s,goal s, pur pose,needs,con en &o her nf o P L A N NI NGreframes cr ea ngs emapandw f ordepar mencon ac ook andr epeaf oranynewmaj or add onsorupda es owebs e D S I GN cr ea ngpho oshopdes gns f ordepar men ook M A I N T N A N C wor kw hdepar mencon ac o keepcon enupda edandr el van con nual l yr ev ews ef orusage, usab l y,access b l y,r espons veness, des gn r endchangesando herneeds D V L OPM N T devel op ngoudes gns n oa f unc onalwebs e ns emanager T ST I NsG & D PL OYM NT esons uden,r ev ewr espons venessof con enl ayou,cr ossbr owser es ng,val da on andf unc onal y es ngbef or ego ngl ve

3

4 SAT Web Sandards The followng sandards wll gve all web desgners and developers a sandard process so we can all easly fnd and updae each oherʼs work These sandards wll also help ncrease usably, accessbly and search engne opmzaon of suden affars webses All WSU webses need o mee Secon 508 Accessbly requremens wwwsecon508gov >>> Savng Srucure <<< 1 Follow he Savng Srucure Oulne Savng fles n denfed folders allows for ease of manenance and beer organzaon 2 All asses wll be saved on WebDev Wheher he webse s n he CMS or developed on a dfferen server, all fles we have for every projec need o be saved on WebDev n a folder called he drecory name Ths wll serve as a backup for all lve fles n Se Manager (or on anoher server) and wll also house all workng fles Follow he savng srucure oulne when savng fles n he folder 3 Fle Names: No more han 4 words Use lower-case leers No spaces or random characers Use hyphens (no underscores) o separae words f necessary >>> Desgn <<< 1 Use Adobe Phooshop All desgns should be creaed n Phooshop wh well-organzed layers 2 Use Adobe Illusraor for any logo desgn and InDesgn for any prn Graphc Desgner may creae requesed graphcs machng larger campagns n InDesgn Suden Affars Technology

5 >>> Navgaon <<< 1 Navgaon should be ex Somemes mages may be an excepon o he rule, bu defnely no flash nav 2 No movng navgaon Navgaon ems should no move on acve or hover 3 No mysery navgaon User should always know where nav s and where wll ake hem whou havng o roll over or clck on anyhng o fnd ou 4 Obvous lnk home Users need a clear ex a all mes o ge back o where hey sared The logo needs o lnk o he deparmen home page and be sure o make he frs nav em a lnk back o he deparmen home page 5 Navgaon hghlgh on correspondng page If possble, keep correspondng navgaon em hghlghed when on he page so users know where hey are Se Manager does no allow hs so you wll no see on webses n Se Manager >>> Developmen <<< 1 If developng a webse ha wll no be n he CMS See Dan If you are buldng a webse from scrach ha wll no be par of he CMS, mee wh Dan frs Ths wll be very rare 2 If developng advanced ools for conen area of CMS emplae: Que ofen you wll have o work n HTML mode n he CMS o buld ou he conen area of a desgn Make sure you are no workng on a lve or orgnal CMS page ncase you run no any ssues You may use Dreamweaver o help you buld somehng and hen copy he code no he CMS, bu hand-codng va HTML mode s preferable 3 Commen your code Your HTML should have commens ha mark mporan areas n your code such as he sar and end of a dv secon Ths s helpful for ohers who have o updae your code laer (HTML commen: <! -- commen here -->) Suden Affars Technology

6 >>> Copy <<< 1 WSU webses use Trade Gohc and PMN Caecla See weberedu/brand/webfonshml for more fon resources 2 Tex color mus have good conras wh background color Good conras of foreground and background colors allows users o more easly read ex For large bodes of ex, he bes conras s black ex on a whe background Never use whe ex on a black background for large bodes of ex Keep n mnd ha color blndness s common Be careful abou usng common colorblnd colors ogeher such as red and green because here would be no conras o a user who only sees shades of grey when lookng a red and green Red more colourblndawarenessorg/colour-blndness/ypes-of-colour-blndness Also, never use color as a call o acon: clck on he red buon o connue obvously f someone canno see red or canno see a all, hs would no be a helpful drecon 3 Do no use he erm clck here for your lnk All lnks needs o make sense ou of conex Many web users skm he page conen o fnd wha hey are lookng for Vewng mpared users wh screen readers ofen pull all lnks ou of conex no a lnk box o search hrough lnks Search engnes spder hrough your webpages va page lnks and use he words n he lnks as reference Your lnks should nclude key words n he lnk ex ha ell boh users and search engnes where he lnk wll ake hem 4 Use already defned/branded buon and con classes nsead of creang your own Suden Affars Technology

7 Buon: weberedu/usylegude/buonshml Icons: weberedu/usylegude/conshml 5 Do no open lnks n a new browser wndow The majory of web users use he back buon o navgae on a se If a lnk opens n a new wndow, he user ofen does no noce or undersand ha a new wndow has opened and may ge frusraed when hey canno use he back buon ven f he lnk leaves your webse, do no open n a new wndow n an aemp o keep users on your webse! xcepons o he rule (when o open a lnk n a new wndow): Openng a page conanng conex-sensve nformaon, such as help nsrucons, or an alernae means of compleng a form, such as a calendar-based dae pcker, wll sgnfcanly dsrup a mul-sep workflow, such as fllng n and submng a form, f he page s opened n he same wndow or ab The user s logged no a secured se, and followng a lnk o a page ousde of he secured scope would ermnae he user's logon In hs case openng exernal lnks n an exernal wndow allows he user o access such references whle keepng her logn acve n he orgnal wndow If he lnk s openng a Word Documen or PDF, hen may open n a new wndow because research has shown ha users ofen close ou of a downloaded documen nsead of ryng o use a back buon Le he user know va a le ag n he HRF ag ha he documen wll be openng n a new wndow: PDF wll open n a new wndow 6 Do no underlne ex ha s no a lnk Web users expec ex ha s underlned o be a lnk If you wan o emphasze ex, use formang echnques such as bold or alcze 7 Do no double space beween senences I s a web sandard for all senences o have a sngle space separaon afer he perod 8 Keep conen smple and concse Web vewers are ofen mpaen Ge o he pon, remove unnecessary jargon and uncommon vocabulary ha may slow he reader down or urn hem away Suden Affars Technology

8 Onlne conen s movng more oward casual communcaon 9 User shor paragraphs and senences Keep paragraphs o 3 or 4 shor senences o allow for quck readng, he ably o scan conen, and beer dgeson of bs of nformaon 10 Use upsde-down pyramd syle Add he mos mporan nformaon oward he op of your conen, as many users wll no read all of he conen on he page 11 Keep ex lef-algned I s hard o read large amouns of cenered or jusfed ex, especally on a compuer screen Please keep blocks of ex lef-algned you may cener-algn a header f preferred (bu no recommended) 12 Correc spellng, grammar and syle All copy sen by clen mus be revewed for spellng and grammar ssues along wh correc formang for he web and make sure copy follows WSU Syle Gude rules weberedu/marcomm/sylegudehml 13 All pages mus have a clear pah o converson goal Copy mus pon users o complee he goal surroundng ha page or he webse as a whole Wheher s sgnng up for advsng, regserng for an even, or geng users o vew hours or scholarshp opporunes, users should have all he nformaon hey need and here should be a clear call o acon so hey know wha hey need o do nex 14 No duplcae conen Do no copy and pase ex from anoher webse or repea your own copy across your webse No only s bad pracce, bu search engnes may suspec he webse of black-ha SO accs and black ls he se 15 Dvde conen usng headers Separang conen wh clear headers s essenal for allowng quck scannng and proper herarchcal page srucure very page has a headng 1 (H1 ag) as a page le o ell he user wha he overall page conen wll be abou There can only be one H1 n a page and should be he very frs em on he page The CMS emplaes have H1 bul n as he edable le area so be careful no o repea he H1 f you add n a le n he CMS All conen afer he H1 s organzed no secons wh H2, H3, H4 headngs as demonsraed n he example below Suden Affars Technology

9 In he CMS, selec he ex you would lke o be a header and clck on he down arrow of he paragraph syle feld o selec he headng The headngs are auomacally syled for you Do no use a headng elemen jus for he formang f s no acually a desgnaed headng elemen If you wan o hghlgh ex ha s no a headng elemen, use he formang ools or creae a syle See pre-deermned fon syles: weberedu/usylegude/fon-szeshml >>> Tables In HTML <<< 1 Try o use ables jus for nformaon dsplay Tables were never mean for layou purposes, bu are ofen used for layou because hey are quck and easy o vsualze However, ables add unnecessary code and can cause ssues for vsually mpared users wh screen readers (f hey are no dsplayng nformaon mean for a able) Insead use dvs wh css creaed algnmen and formang when possble If unknowledgeable saff wll be mananng her own webses, you may have o go wh able forma for ease of updang check wh Dan Suden Affars Technology

10 2 Use TH elemens o represen able headers A screen reader reads ables lef o rgh, op o boom Ths may ge confusng o a user who canno see he able as hey canno reference he header ha he conen beng read o hem s referrng o By changng he header TD row o TH, he screen reader knows o repea he TH header before readng he correspondng able conen Search engnes also know o look for he TH ag o grab key words ha represen he able conen I s also helpful o add a capon and summary ha explan he purpose of he able o vsually mpared users who canno vew he able as a whole o ge a good undersandng of he conen beng dsplayed Table Code: hp://wwww3schoolscom/hml/hml_ablesasp 3 Make Sure Your Tables are Responsve Tables need o work n mulple screen szes/devces jus lke he res of he webse There are wo pre-deermned ways he able can decrease n sze Use he correc class dependng on he layou and specfc needs of your nformaonal able: weberedu/usylegude/responsve-ableshml >>> Images In HTML <<< 1 Use ex nsead of mages as ofen as possble Because we are lmed o web-safe fons on he web (unless you add n Google Fons), s empng o use a decorave fon graphc nsead of HTML ex Whle search engnes and screen readers can read he al ag (descrpon below) of an mage, hey prefer HTML ex Graphcs add o page sze The more graphcs you have, he larger n sze your page s whch makes download mes longer Users and search engnes prefer fas downloadng pages 2 All phoos/mages added o a webse need o be 72dp and szed You canno jus upload a phoo o he CMS rgh from your camera, has o be shrunk o a web dsplay sze or wll ake oo long o download Se Manager demands ha phoos be szed before loadng you canno upload an mage and shrnk n Se Manager o f a specfc sze 3 All mages need o have an Al Tag (alernave ex) Alernave ex explans wha he mage s Ths s helpful for blnd users who Suden Affars Technology

11 canno see he mage and also for search engnes The Al ex s added hrough he Properes n he CMS By defaul he CMS adds an empy Al o all mages The empy Al ells a screen reader ha hs mage s of no mporance so skps he mage Ths s preferred for any graphcal elemens ha are purely for desgn and serve no purpose However, f you add a pcure or a graphc buon wh ex, make sure o change he empy Al o benefcal ex 4 Lm roang banner mages o fve When we creae he roang banners (or anyhng ha roaes), we wll no exceed fve Recommend o saff ha hey no exceed fve phoos because hey add o he page sze, whch wll ake he page longer o load (Also, no one really scks around much longer han hree roaons!) >>> Flash/Vdeo/Audo <<< 1 Provde alernave conen for all audo/vdeo/flash Nohng should be provded purely by flash, audo or vdeo ha s no represened by ex elsewhere: Vdeo: capons need o be added or provde lnk o Word Doc of ex used n vdeo Audo: provde lnk o Word Doc of ex used n audo Flash: an mage should appear behnd flash presenaons ha lnks users o an alernave means of geng he same nformaon Do no use he defaul flash embed ha asks he user o download flash Use javascrp alernaves o flash whenever possble If you absoluely have o use flash, here s how o nser flash correcly: hp://wwwalsaparcom/arcles/flashsaay/ >>> PDFs <<< 1 All PDFs need o be creaed from Word Docs hey canno be scanned or creaed from mages 2 Jus lke HTML, Word allows for users o add many accessbly opons such as provdng Al ags for mages and usng headngs correcly 3 Do no creae he PDF by prnng o PDF The Word Doc has o be saved as a PDF Suden Affars Technology

12 >>> HTML Page Properes <<< 1 Page Name (see savng srucure sandard) 2 Page Tle Tle should explan wha he page conen s abou n under 60 characers (ncludes spaces) Search engnes look for keywords n page les for search resuls In he CMS, he page le s also used o creae he name of he page n he navgaon Therefore, has o be shor and o he pon 3 Page Descrpon Descrpon explans wha he conen on he page s abou n more deal han he le do no jus repea wha was enered for he le hs should be done n under 150 characers (ncludng spaces) Somemes browsers ake he page descrpon o dsplay n search resuls (more ofen hey ake conen on he page ha beer maches he search erms) Facebook dsplays he page descrpon when you add a lnk o a webse o your wall >>> Cross- Browser & Valdaon <<< 1 Ses need o work n all major browsers If you are buldng a se ousde of he CMS or have done major updaes o he HTML n he CMS, check ha your webpage works n he followng browsers: Mos recen verson of Frefox Mos recen verson of Chrome Mos recen verson of Safar Inerne xplorer 7 and up 2 Webses need o valdae W3C provdes valdaon ools for your CSS and HTML The valdaon ools check your code based on he dd you have assgned he documen o make sure ha he HTML (4, XHTML, 5) does no have any errors Somemes wh dynamc ses or ecommerce, s mpossble o compleely valdae, bu you can always see f here are any errors ha you can fx on your end Suden Affars Technology

13 >>> Forms <<< Mos forms for WSU webses wll be bul n Google Forms For hose projecs ha need a more robus form, please follow hese bes pracces: 1 Order labels logcally (name and conac nfo frs) 2 Group conen (headed by approprae headng probably h2) for ease of scannng 3 Be careful no o lead users o answer he way you may wan hem o answer (do no pre-check any boxes and wach language) 4 ach label should address one opc a a me 5 Remove unnecessary felds! If s no mandaory, maybe should no be on he form! We can use he * o hghlgh requred felds (as long as here s a clear key) 6 Use clean algnmen 7 Almos always lef-algned conen (excep for rgh-algned agans felds and somemes headngs can be cenered f you wan) Do NOT jusfy ex Suden Affars Technology

14 Suden Affars Technology

15 8 You wll lkely have o use ables for a clean layou of more complex forms Please only use ables f you have o 9 Felds mus be long enough for he user o ype n requred daa and be able o see all Generally a leas 20 characers for frs and las name felds 10 All felds should have a descrpve label and be very clear wha s waned from he user 11 Use colons afer label (old screen readers rely on colons o ndcae a label) 12 Users should be able o ab hrough felds n he same herarchcal manner as a user would manually clck n each feld o complee he form 13 Add a focus syle o he felds ha hghlghs whch feld he user s currenly n (I hnk mos modern browsers do hs auomacally) 14 If he form s long and goes hrough mulple pages, clearly denfy he userʼs progress hrough a form so hey know how much more hey have o complee 15 All formang examples for compleng a feld need o be ousde of he feld so hey do no dsappear when he user clcks n he feld ( s easy o forge) a Make formang examples smaller n fon sze and a darker grey so ha s properly separaed and does no complee wh oher ex on he page b Unless an emal needs o be a specfc doman (somemes we need o use jus Weber emals) you do NOT need o add an example of emal forma c If possble have he form auo complee he correc formang (so we do no even have o gve he user correc formang examples) 16 Forms should have valdaon ha shows he user mssng requred felds on submsson Ths valdaon should no ake users o anoher page bu hghlgh on he exsng page wha hey need o complee Suden Affars Technology

16 a All errors need o be nformave and clearly vsble 17 Use a CAPTCHA applcable 18 Be descrpve n subm buon wha does mean when he user clcks he subm buon? xample: Subm Nomnaon or Jon Purple Pals or Logn 19 Successful form submsson should ake he user o a page ha ells hem ha her form was successfully submed and any more nformaon hey need o know such as we wll ge back o you by such a dae or drvng drecons o he even >>> Do No Use <<< 1 Flckerng or blnkng objecs 2 Fon Tags 3 Frames (unless okayed wh Dan) 4 Color as a means o undersand or navgae a se (exp: clck on he red buon o connue ) 5 Un-necessary amouns of code only add f serves a purpose f you are no sure, check wh Dan 6 Jus because you can do somehng nea does no always mean you should! Dscuss any cool feaures you found and wan o use wh Dan before mplemenng hem on a webse Suden Affars Technology