-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
368 lines (357 loc) · 15.1 KB
/
index.html
File metadata and controls
368 lines (357 loc) · 15.1 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="style/web-process-style.css">
</head>
<body>
<header>
<h1>A simple process for making websites<sup><a href="#asterisk">*</a></sup></h1>
</header>
<div class="stage intro">
<p>I created this to help explain the important steps on both sides of “build,” and I tried to keep it brief and jargon-free to avoid scaring off partners, stakeholders, and colleagues who were unfamiliar with all that goes into building even the simplest of websites.</p>
<p>I also created this as a reminder to myself of the things you cannot skip, no matter how small or ostensibly simple the request.</p>
<p>The <strong>phases</strong> are useful-to-me ways of breaking down the web design process to get a sense of sequencing. Also, it helps to note spots where it's important to get buy-in or consensus from partners, users, or other stakeholders.</p>
<p>For each phase, I've summarized goals, a few questions, important activities, and deliverables. Below the line, I've listed templates, resources, other tools that can help dive deeper or document what you learned, and what you need to keep in mind in order to stay on track to build an accessible website.</p>
<p><a class="template">Orange</a> is for templates, <a class="resource">yellow</a> is for resources and articles I've found useful.</p>
</div>
<div class="stage">
<h2>Discovery</h2>
<div class="stage-summary">
<p>Discovery should define the problem and set the project up for success.</p>
<p>Make sure you document assumptions, define the project team, and get to know the content you're working with.</p>
<p><em>What is success? Who are our audiences? Who will do the work?</em></p>
</div>
<div class="steps">
<ul class="includes">
<li><strong>Start</strong>
<ul>
<li>Initial team</li>
<li>Discovery timeline</li>
</ul>
</li>
<li><strong>Listen</strong>
<ul>
<li>Stakeholder interviews</li>
<li>Initial user research</li>
</ul>
</li>
<li><strong>Explore</strong>
<ul>
<li>Content inventory</li>
</ul>
</li>
<li><strong>Define and document</strong>
<ul>
<li>Web project brief</li>
<li>Project roles</li>
</ul>
</li>
</ul>
</div>
<div class="templates">
<h3>Templates</h3>
<ul>
<li><a class="template" href="Project_Brief.pdf">Project brief (pdf)</a></li>
<li><a class="template" href="roles-worksheet.docx">Project roles worksheet (docx)</a></li>
<li><a class="template" href="content-inventory-blank.xlsx">Content inventory (xlsx)</a></li>
</ul>
<h3>Resources</h3>
<ul>
<li><a class="resource" href="http://thingsthatarebrown.com/blog/2010/06/making-things-hard/">Making Things Hard</a></li>
<li><a class="resource" href="http://alistapart.com/articles/audiences-outcomes-and-determining-user-needs/">Audiences, Outcomes, and Determining User Needs</a></li>
<li><a class="resource" href="http://blog.braintraffic.com/2009/03/the-content-inventory-is-your-friend/">The Content Inventory is Your Friend</a></li>
<li><a class="resource" href="http://meetcontent.com/blog/what-to-cut-a-content-cropping-checklist/">What To Cut: A Content Cropping Checklist</a></li>
<li><a class="resource" href="http://mmcwatters.com/2010/09/27/content-strategy/">Diagram: Content Strategy</a></li>
<li><a class="resource" href="http://whitneyhess.com/blog/2010/07/07/my-best-advice-for-conducting-user-interviews/">My Best Advice for Conducting User Interviews</a></li>
<li><a class="resource" href="http://www.alistapart.com/articles/kick-ass-kickoff-meetings/">Kick Ass Kickoff Meetings</a></li>
</ul>
</div>
<div class="more-steps">
<h3>Other steps & deliverables</h3>
<ul>
<li>Kickoff meeting(s)</li>
<li>User personas</li>
<li>Creative brief</li>
<li>Strategy brief</li>
</ul>
<h3>Accessibility</h3>
<ul>
<li>How interactive is the project?</li>
<li>Any red flags in client expectations?</li>
<li>What kinds of accessibility may be especially important, given intended audiences?</li>
<li>Introduce the concept of accessibility</li>
</ul>
</div>
</div>
<div class="post-stage">
<h3>Reviews & approvals</h3>
<p>Before you wrap up the discovery process, make sure the project team has discussed:</p>
<ul>
<li>Project roles</li>
<li>Content analysis</li>
</ul>
<p>And the client and project sponsor have approved:</p>
<ul>
<li>Web project brief</li>
</ul>
</div>
<div class="stage">
<h2>Planning</h2>
<div class="stage-summary">
<p>Strategy and planning gives shape to the site.</p>
<p>Aim for a clear map of how the information should be organized and what types of content it should support. This will help define a realistic timeline.</p>
<p><em>Where will the site live? When and how will the project get done?</em></p>
</div>
<div class="steps">
<ul class="includes">
<li><strong>Strategize</strong>
<ul>
<li>Message hierarchy</li>
<li>User scenarios</li>
<li>Gap analysis</li>
</ul>
</li>
<li><strong>Organize</strong>
<ul>
<li>Content types</li>
<li>Sitemap(s)</li>
<li>Wireframes</li>
</ul>
</li>
<li><strong>Plan</strong>
<ul>
<li>Full timeline/project plan</li>
<li>Build estimate</li>
</ul>
</li>
</ul>
</div>
<div class="templates">
<h3>Templates</h3>
<ul>
<li><a class="template" href="key-messages.docx">Key messages (docx)</a></li>
<li><a class="external-template" href="http://media.24ways.org/2011/annett-baker/page-table.rtf">Sample page table (rtf)</a></li>
</ul>
<h3>Resources</h3>
<ul>
<li><a class="resource" href="http://www.alistapart.com/articles/a-checklist-for-content-work/">A Checklist for Content Work</a></li>
<li><a class="resource" href="http://www.markboulton.co.uk/journal/structure-first-content-always">Structure First, Content Always</a></li>
<li><a class="resource" href="http://24ways.org/2011/extracting-the-content/">Extracting the Content</a></li>
<li><a class="resource" href="http://24ways.org/2012/content-planning-demystified/">Content Planning Demystified</a></li>
<li><a class="resource" href="http://ideas.semanticfoundry.com/shades-of-grey-wireframes-as-thinking-device/">Shades of Grey: Wireframes as Thinking Device</a></li>
<li><a class="resource" href="http://webstandardssherpa.com/reviews/designing-for-content-creating-a-message-hierarchy/">Designing for Content: Creating a Message Hierarchy</a></li>
<li><a class="resource" href="http://www.slideshare.net/cwodtke/designing-structure-part-ii-information-archtecture">Designing Structure: Information Architecture</a></li>
<li><a class="resource" href="http://www.strangesystems.net/archives/2005/03/using_wireframe.php">Using Wireframes</a></li>
<li><a class="resource" href="http://credibility.stanford.edu/guidelines/">Stanford Web Credibility Research</a></li>
<li><a class="resource" href="http://hobbsontech.com/content/content-handling-process-asking-right-content-migration-questions">Asking the Right Content Migration Questions</a></li>
</ul>
</div>
<div class="more-steps">
<h3>Other steps & deliverables</h3>
<ul>
<li>Information architecture</li>
<li>CMS decision(s)</li>
<li>Competitive analysis</li>
<li>Sample content</li>
<li>Property/identity choices</li>
<li>Migration plan</li>
<li>SEO plan</li>
</ul>
<h3>Accessibility</h3>
<ul>
<li>Do user scenarios conflict with accessibility best-practices?</li>
<li>Make sure the vendor (if relevant) is aware of accessibility requirements</li>
<li>Build time for accessibility review into the project plan</li>
</ul>
</div>
</div>
<div class="post-stage">
<h3>Reviews & approvals</h3>
<p>Before you move on, make sure the project team (especially the designer and developer) have reviewed:</p>
<ul>
<li>Content types</li>
<li>Sitemap</li>
</ul>
<p>And the client and project sponsor have approved:</p>
<ul>
<li>Wireframes</li>
<li>Timeline / project plan</li>
<li>Build estimate</li>
</ul>
</div>
<div class="stage">
<h2>Build</h2>
<div class="stage-summary">
<p>Design, content and development often overlap. The wireframes become designs, the page tables fill up with real content and the code provides the long-term framework.</p>
<p>Communication is crucial to make sure everyone has what they need to stay on-track.</p>
</div>
<div class="steps">
<ul class="includes">
<li><strong>Content</strong>
<ul>
<li>Content development</li>
<li>Content mapping/assembly</li>
<li>Editing</li>
<li>Content migration</li>
</ul>
</li>
<li><strong>Design</strong>
<ul>
<li>Concepting</li>
<li>Design reviews</li>
<li>Final design</li>
</ul>
</li>
<li><strong>Develop</strong>
<ul>
<li>Front-end development</li>
<li>CMS integration</li>
<li>Testing</li>
</ul>
</li>
</ul>
</div>
<div class="templates">
<h3>Templates</h3>
<ul>
<li><a class="template" href="migration-sitemap-blank.xlsx">Migration sitemap (xlsx)</a></li>
<li><a class="external-template" href="http://iainstitute.org/documents/tools/DesignReviewProcess.doc">Design review process (doc)</a></li>
</ul>
<h3>Resources</h3>
<ul>
<li><a class="resource" href="http://www.redish.net/images/stories/PDF/Redish_Maximus_7_10.pdf">Letting Go of the Words: Content as Conversation (pdf)</a></li>
<li><a class="resource" href="http://contentsmagazine.com/articles/a-content-methodology-primer/">A Content Methodology Primer</a></li>
<li><a class="resource" href="http://meetcontent.com/blog/web-writing-guidelines-for-content-contributors/">Web Writing Guidelines for Content Contributors</a></li>
<li><a class="resource" href="http://gadgetopia.com/post/8069">The Art and Practice of Content Assembly: Where IA and CMS Meet</a></li>
<li><a class="resource" href="http://uxmag.com/articles/tone-and-voice-showing-your-users-that-you-care">Tone and Voice: Showing Your Users That You Care</a></li>
<li><a class="resource" href="http://www.alistapart.com/articles/quick-and-dirty-remote-user-testing/">Quick and Dirty Remote User Testing</a></li>
</ul>
</div>
<div class="more-steps">
<h3>Other steps & deliverables</h3>
<ul>
<li>Usability testing</li>
<li>Content development</li>
<li>Design documentation</li>
<li>Integration with existing systems</li>
<li>Accessibility testing</li>
<li>Content testing</li>
<li>Beta site launch</li>
<li>Content workflow</li>
</ul>
<h3>Accessibility</h3>
<ul>
<li>Is the content readable for the intended audience?</li>
<li>Check: make sure you aren't relying on images to convey words; make sure links are descriptive and helpful</li>
</ul>
</div>
</div>
<div class="post-stage">
<h3>Reviews & approvals</h3>
<p>Before you move on, make sure the project team and client contact have reviewed:</p>
<ul>
<li>CMS functionality</li>
<li>All site content</li>
</ul>
<p>And the client and project sponsor have approved:</p>
<ul>
<li>Final visual design</li>
<li>Site functionality</li>
<li>Top-level content</li>
</ul>
</div>
<div class="stage">
<h2>Launch</h2>
<div class="stage-summary">
<p>Make sure everyone's on board, alert any stakeholders whose workflows may be disrupted and make sure your launch plan is in place.</p>
<p>Once you're ready, it's time to go live.</p>
</div>
<div class="steps">
<ul class="includes">
<li>Test and refine
<ul>
<li>Quality assurance</li>
<li>Accessibility review</li>
<li>Proofreading</li>
</ul>
</li>
<li>Get ready
<ul>
<li>Communications plan</li>
<li>Redirects</li>
</ul>
</li>
<li>Go live</li>
</ul>
</div>
<div class="templates">
<h3>Resources</h3>
<ul>
<li><a class="resource" href="http://content-science.com/expertise/content-quality-checklist">Content quality checklist</a></li>
<li><a class="resource" href="http://lite.launchlist.net">Launchlist: A Launch Checklist</a></li>
<li><a class="resource" href="http://www.boxuk.com/upload/website_launch_checklist_v1.pdf">The Ultimate Website Launch Checklist</a></li>
<li><a class="resource" href="http://www.uxbooth.com/articles/quick-usability-checklist/">Quick Usability Checklist</a></li>
</ul>
</div>
<div class="more-steps">
<h3>Other steps & deliverables</h3>
<ul>
<li>Title/metadata review</li>
<li>Favicon</li>
<li>Cross-browser testing</li>
<li>Link checks</li>
<li>Analytics installation</li>
<li>XML sitemap</li>
<li>Error handling</li>
<li>Optimization</li>
<li>Archiving</li>
<li>Print style sheet</li>
<li>Search testing</li>
</ul>
</div>
</div>
<div class="post-stage">
<h3>Reviews & approvals</h3>
<p>Before you go live, make sure everyone is aware of:</p>
<ul>
<li>Launch plan</li>
<li>Communications plan</li>
<li>Redirect plan</li>
</ul>
</div>
<div class="stage">
<h2>Maintain</h2>
<div class="stage-summary">
<p>Launch is just the beginning: now it's time to learn to take care of the site, update content and keep improving it.</p>
<p>This includes measuring success, keeping content up-to-date, repairing any lingering issues and responding to user feedback.</p>
</div>
<div class="steps">
<ul class="includes">
<li>Refine design and content</li>
<li>Respond to user feedback</li>
<li>Update content</li>
<li>Editorial calendar</li>
<li>CMS training</li>
<li>Governance plan</li>
<li>Style guide</li>
<li>CMS documentation</li>
<li>Benchmarks</li>
<li>Analytics</li>
<li>Continue improving accessibility</li>
</ul>
</div>
<div class="templates">
<h3>Resources</h3>
<ul>
<li><a class="resource" href="http://meetcontent.com/blog/tracking-content-goals-with-web-analytics/">Tracking Content Goals with Web Analytics</a></li>
<li><a class="resource" href="http://wcmshelp.ucsc.edu/index.html">UC Santa Cruz WCMS Help</a></li>
<li><a class="resource" href="http://www.hannonhill.com/news/blog/index.html">Hannon Hill Team Blog</a></li>
<li><a class="resource" href="http://www.alistapart.com/articles/redesignrealign/">Good Designers Redesign, Great Designers Realign</a></li>
<li><a class="resource">Web Content Style Guides tha Don't Suck</a></li>
</ul>
</div>
<div class="more-steps"></div>
</div>
<p id="asterisk" class="footnote"><sup>*</sup> <em>This is not an agile process. This is not an ideal process. This process probably only makes any sense at all for informational websites, and none at all for more complex web applications.</em></p>
</body>
</html>