Download - Better Content by Design
![Page 1: Better Content by Design](https://reader035.vdocuments.us/reader035/viewer/2022062702/55493cefb4c905054d8b4d25/html5/thumbnails/1.jpg)
1 of 50
Better Content by Design
Lisa Herrod: Scenario SevenOpen Publish: August 2007
![Page 2: Better Content by Design](https://reader035.vdocuments.us/reader035/viewer/2022062702/55493cefb4c905054d8b4d25/html5/thumbnails/2.jpg)
2 of 50
ContentDesign
2 approaches5 stages
![Page 3: Better Content by Design](https://reader035.vdocuments.us/reader035/viewer/2022062702/55493cefb4c905054d8b4d25/html5/thumbnails/3.jpg)
3 of 50
what is web content?
![Page 4: Better Content by Design](https://reader035.vdocuments.us/reader035/viewer/2022062702/55493cefb4c905054d8b4d25/html5/thumbnails/4.jpg)
4 of 50
videoeducational socialpromotional
![Page 5: Better Content by Design](https://reader035.vdocuments.us/reader035/viewer/2022062702/55493cefb4c905054d8b4d25/html5/thumbnails/5.jpg)
5 of 50
audiosound tracks interviews news music pod castsradio streaming
![Page 6: Better Content by Design](https://reader035.vdocuments.us/reader035/viewer/2022062702/55493cefb4c905054d8b4d25/html5/thumbnails/6.jpg)
6 of 50
imagesSupport contentAre contentGenerate discussion
![Page 7: Better Content by Design](https://reader035.vdocuments.us/reader035/viewer/2022062702/55493cefb4c905054d8b4d25/html5/thumbnails/7.jpg)
7 of 50
Text as Content
![Page 8: Better Content by Design](https://reader035.vdocuments.us/reader035/viewer/2022062702/55493cefb4c905054d8b4d25/html5/thumbnails/8.jpg)
8 of 50
textpage titlespage headingsnavigation labelssite content
![Page 9: Better Content by Design](https://reader035.vdocuments.us/reader035/viewer/2022062702/55493cefb4c905054d8b4d25/html5/thumbnails/9.jpg)
9 of 50
textpage titlespage headingsnavigation labelssite content
![Page 10: Better Content by Design](https://reader035.vdocuments.us/reader035/viewer/2022062702/55493cefb4c905054d8b4d25/html5/thumbnails/10.jpg)
10 of 50
textpage titlespage headingsnavigation labelssite content
![Page 11: Better Content by Design](https://reader035.vdocuments.us/reader035/viewer/2022062702/55493cefb4c905054d8b4d25/html5/thumbnails/11.jpg)
11 of 50
textpage titlespage headingsnavigation labelssite content
![Page 12: Better Content by Design](https://reader035.vdocuments.us/reader035/viewer/2022062702/55493cefb4c905054d8b4d25/html5/thumbnails/12.jpg)
12 of 50
Content Design
![Page 13: Better Content by Design](https://reader035.vdocuments.us/reader035/viewer/2022062702/55493cefb4c905054d8b4d25/html5/thumbnails/13.jpg)
13 of 50
what is design?
A deliberate decision To enhance the value of an object
![Page 14: Better Content by Design](https://reader035.vdocuments.us/reader035/viewer/2022062702/55493cefb4c905054d8b4d25/html5/thumbnails/14.jpg)
14 of 50
raw text
![Page 15: Better Content by Design](https://reader035.vdocuments.us/reader035/viewer/2022062702/55493cefb4c905054d8b4d25/html5/thumbnails/15.jpg)
15 of 50
Best Practice Content Design
![Page 16: Better Content by Design](https://reader035.vdocuments.us/reader035/viewer/2022062702/55493cefb4c905054d8b4d25/html5/thumbnails/16.jpg)
16 of 50
two approaches
technicalhuman
![Page 17: Better Content by Design](https://reader035.vdocuments.us/reader035/viewer/2022062702/55493cefb4c905054d8b4d25/html5/thumbnails/17.jpg)
17 of 50
User Focused Development
User Centred Design
technical
human
![Page 18: Better Content by Design](https://reader035.vdocuments.us/reader035/viewer/2022062702/55493cefb4c905054d8b4d25/html5/thumbnails/18.jpg)
18 of 50
User Focused Development
Standards compliant
Accessible
Semantic
![Page 19: Better Content by Design](https://reader035.vdocuments.us/reader035/viewer/2022062702/55493cefb4c905054d8b4d25/html5/thumbnails/19.jpg)
19 of 50
User Centred Design
User research
User focus
User testing
![Page 20: Better Content by Design](https://reader035.vdocuments.us/reader035/viewer/2022062702/55493cefb4c905054d8b4d25/html5/thumbnails/20.jpg)
20 of 50
Content Design
should take an integrated approach
![Page 21: Better Content by Design](https://reader035.vdocuments.us/reader035/viewer/2022062702/55493cefb4c905054d8b4d25/html5/thumbnails/21.jpg)
21 of 50
a ground-up approach
![Page 22: Better Content by Design](https://reader035.vdocuments.us/reader035/viewer/2022062702/55493cefb4c905054d8b4d25/html5/thumbnails/22.jpg)
22 of 50
five stages
ContentInteractivityVisual designStructureContent
![Page 23: Better Content by Design](https://reader035.vdocuments.us/reader035/viewer/2022062702/55493cefb4c905054d8b4d25/html5/thumbnails/23.jpg)
23 of 50
Design stage Design approach
content
structure
visual design
interactivity
User research, Writing for the web
Semantics, Standards
CSS, Separate presentation
Standards, Progressive enhancement
content User research
![Page 24: Better Content by Design](https://reader035.vdocuments.us/reader035/viewer/2022062702/55493cefb4c905054d8b4d25/html5/thumbnails/24.jpg)
24 of 50
contentWritten for the webUser focusPlain EnglishShorter sentencesJournalistic
![Page 25: Better Content by Design](https://reader035.vdocuments.us/reader035/viewer/2022062702/55493cefb4c905054d8b4d25/html5/thumbnails/25.jpg)
25 of 50
![Page 26: Better Content by Design](https://reader035.vdocuments.us/reader035/viewer/2022062702/55493cefb4c905054d8b4d25/html5/thumbnails/26.jpg)
26 of 50
![Page 27: Better Content by Design](https://reader035.vdocuments.us/reader035/viewer/2022062702/55493cefb4c905054d8b4d25/html5/thumbnails/27.jpg)
27 of 50
structureSeparate contentSource orderSemantic Accessible
![Page 28: Better Content by Design](https://reader035.vdocuments.us/reader035/viewer/2022062702/55493cefb4c905054d8b4d25/html5/thumbnails/28.jpg)
28 of 50
Headings, lists, paragraphs, images, emphasis, block quotes, tables, forms
![Page 29: Better Content by Design](https://reader035.vdocuments.us/reader035/viewer/2022062702/55493cefb4c905054d8b4d25/html5/thumbnails/29.jpg)
29 of 50
visual designSeparate design CSSColour contrastVisual hierarchyPage layoutWhite spaceTypography Sans-serif
![Page 30: Better Content by Design](https://reader035.vdocuments.us/reader035/viewer/2022062702/55493cefb4c905054d8b4d25/html5/thumbnails/30.jpg)
30 of 50
visual designSeparate design CSSColour contrastVisual hierarchyPage layoutWhite spaceTypography Sans-serif
![Page 31: Better Content by Design](https://reader035.vdocuments.us/reader035/viewer/2022062702/55493cefb4c905054d8b4d25/html5/thumbnails/31.jpg)
31 of 50
![Page 32: Better Content by Design](https://reader035.vdocuments.us/reader035/viewer/2022062702/55493cefb4c905054d8b4d25/html5/thumbnails/32.jpg)
32 of 50
![Page 33: Better Content by Design](https://reader035.vdocuments.us/reader035/viewer/2022062702/55493cefb4c905054d8b4d25/html5/thumbnails/33.jpg)
33 of 50
interactivityShould enhance
usabilityaccessibilitycontent
Unobtrusive methodsW3C supported format
![Page 34: Better Content by Design](https://reader035.vdocuments.us/reader035/viewer/2022062702/55493cefb4c905054d8b4d25/html5/thumbnails/34.jpg)
34 of 50
Interactive Content
![Page 35: Better Content by Design](https://reader035.vdocuments.us/reader035/viewer/2022062702/55493cefb4c905054d8b4d25/html5/thumbnails/35.jpg)
35 of 50
![Page 36: Better Content by Design](https://reader035.vdocuments.us/reader035/viewer/2022062702/55493cefb4c905054d8b4d25/html5/thumbnails/36.jpg)
36 of 50
Static Content
![Page 37: Better Content by Design](https://reader035.vdocuments.us/reader035/viewer/2022062702/55493cefb4c905054d8b4d25/html5/thumbnails/37.jpg)
37 of 50
![Page 38: Better Content by Design](https://reader035.vdocuments.us/reader035/viewer/2022062702/55493cefb4c905054d8b4d25/html5/thumbnails/38.jpg)
38 of 50
Progressive Content Design
![Page 39: Better Content by Design](https://reader035.vdocuments.us/reader035/viewer/2022062702/55493cefb4c905054d8b4d25/html5/thumbnails/39.jpg)
39 of 50
an integrated approach
human and technical
![Page 40: Better Content by Design](https://reader035.vdocuments.us/reader035/viewer/2022062702/55493cefb4c905054d8b4d25/html5/thumbnails/40.jpg)
40 of 50
Begin and End
with content
![Page 41: Better Content by Design](https://reader035.vdocuments.us/reader035/viewer/2022062702/55493cefb4c905054d8b4d25/html5/thumbnails/41.jpg)
41 of 50
questions...?