Webtext Design Guide

Webtext Design Tutorial & Guidelines

» Ap­ply dig­i­tal rhetoric under­stand­ing and skills, com­pos­ing for on­line au­di­ence:
web­text arrange­ment, with orga­ni­za­tion, links, mul­ti­ple me­dia used to en­hance dis­cus­sion.

    » Rec­om­mended plat­forms: Wee​bly​.com, Google Sites, or Word­Press (cre­ate new pages on your exist­ing site).

    *Note, fol­low­ing instruc­tions for Word­Press — with de­sign guide gen­er­ally applic­a­ble for any sites. 

De­sign Web­text us­ing

  • Mul­ti­ple Pages (5 rec­om­mended; must be more than 1, with links)
    → Word­Press sub-pages (un­der Project 1 “par­ent” page)
     
    • Dis­trib­ute ana­lytic dis­cus­sion across sev­eral pages—
      with purposeful/thoughtful lay­out, con­sid­er­ing audience/readers and plat­form fea­tures

    • Arrange into sec­tions (la­bel, ti­tle pages); plan/map prior 
        sug­ges­tion: the main top­ics of your ana­lytic dis­cus­sion (Infor­ma­tion, Exper­tise, Argu­ment, Re­search, Proof/Evidence, Dis­course Com­mu­nity, etc)
        — con­sider audi­ence & pur­pose, per­haps label­ing pages in your terms (specific/specialized)? 

  • Hyper­links
      — for nav­i­ga­tion be­tween pages/sections and from within text (hyper­linked words? con­sider “inter­nal” vs. “exter­nal” point­ing links.…)
       
      *Cre­ate / mod­ify top Nav­i­ga­tion Bar: use sec­tion ti­tles in Cus­tom Menu (Word­Press)
       
      » re­minder from class: link­ing pur­pose­fully (delib­er­ate se­quence? or view­ers choose read­ing or­der?); of­fer mul­ti­ple types of nav­i­ga­tion, includ­ing links for read­ing “back and forth” (rec­i­p­ro­cally on pages)
       

    → Pro­tip Use Im­ages as Links (WP.com tuto­r­ial)

  • Mul­ti­ple me­dia
    » Word​Press​.com Sup­port Sec­tion
      • Em­bed pur­pose­fully / thought­fully

      • Use vi­sual me­dia like im­ages (pic­tures, graph­ics, screen-capture); charts/diagrams; animation/GIFs, videos
        — per­haps up­load your own to site (WP Me­dia Li­brary strongly rec­om­mended
          *Note, sug­gested strat­egy for im­ages: save from Web, edit, then up­load to site.


        → Pro­tip for screen­cap­ture images/video: SnagIt Chrome Exten­sion

      • Em­ploy me­dia in mul­ti­ple ways: sup­ple­ment dis­cus­sion; use for var­i­ous purposes/effects, such as to illus­trate, doc­u­ment, demon­strate, plus point out / call atten­tion to (via anno­ta­tions / mark-up)
        *re­minder: avoid redun­dancy — repeat­ing in text and im­age.
        In­stead, use vi­sual me­dia to en­hance dis­cus­sion as well as to im­prove effi­ciency — espe­cially of ex­am­ples. 

webtext screencap

“Screen­cap” with “mark-up” (made with SnagIt)

  • Effec­tive dig­i­tal rhetoric: de­sign for online/Web read­ers 
        — re­vise and edit/proofread care­fully, “pol­ish­ing” for “pub­li­ca­tion“
        — mod­ify dis­cus­sion con­tent (es­say draft) as needed, imag­in­ing au­di­ence
        (for exam­ple, creating/arranging sec­tions regard­ing lay­out and me­dia)

    * Pub­lish only re­vised, fi­nal project

    • in other words, en­sure all pages, links, and me­dia ele­ments ap­pear & func­tion;
      re­vise text (not first draft!) be­fore post­ing, reflect­ing for­mal aca­d­e­mic style.

    » Cheryl E. Ball fur­ther notes that web­texts take ad­van­tage of the af­for­dances of their medium: “Web­texts are not lin­ear ar­ti­cles with a few mul­ti­me­dia el­e­ments, such as video trail­ers, TED-like pre­sen­ta­tions or video sup­ple­ments; they are a spe­cific (and ever-changing) genre of peer-reviewed schol­ar­ship that uses the af­for­dances of the Web (browser-based pre­sen­ta­tion, mul­ti­me­dia, hy­per­links, etc.)” and “Web­texts of­ten need to be ex­per­i­men­tally mul­ti­modal, merg­ing modes and gen­res to­gether in ways that are of­ten new to read­ers.” — Dig­i­tal Rhetoric Col­lab­o­ra­tive Wiki

» Re­sources: 




» Google Doc — Guide
 



Example Webtexts

(past stu­dents’ projects — ex­am­ine for arrange­ment & dig­i­tal rhetoric only)

Word­Press

Wee­bly