-
Notifications
You must be signed in to change notification settings - Fork 1
Expand file tree
/
Copy pathhelp-web-writing.html
More file actions
400 lines (296 loc) · 29.7 KB
/
help-web-writing.html
File metadata and controls
400 lines (296 loc) · 29.7 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
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Hesburgh Libraries · Guides Handbook</title>
<link rel="apple-touch-icon" sizes="57x57" href="favicons/apple-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="favicons/apple-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="favicons/apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="favicons/apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="favicons/apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="favicons/apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="favicons/apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="favicons/apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="favicons/apple-icon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192" href="favicons/android-icon-192x192.png">
<link rel="icon" type="image/png" sizes="32x32" href="favicons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="favicons/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="favicons/favicon-16x16.png">
<link rel="manifest" href="favicons/manifest.json">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="favicons/ms-icon-144x144.png">
<meta name="theme-color" content="#ffffff">
<!-- Bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.2/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<!-- <link href="http://fonts.googleapis.com/css?family=Roboto:300,400,500&subset=latin,cyrillic" rel="stylesheet" type="text/css"> --> <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,400i,600,700" rel="stylesheet">
<link rel="stylesheet" href="css/main.css">
<style media="screen">
#rightCol ul li {
margin-bottom: .75em;
}
</style>
</head>
<body data-spy="scroll" data-target="#myScrollspy" data-offset="15">
<!-- header ----------------------------->
<div class="brand-bar container-fluid">
<div class="container-fluid">
<div class="row">
<div class="hidden-xs col-sm-6 col-md-6 col-lg-6">
<a href="http://www.nd.edu">University <i>of</i> Notre Dame</a>
</div>
<div class="text-center col-xs-12 hidden-sm hidden-md hidden-lg hidden-xl">
<a href="http://www.nd.edu">University <i>of</i> Notre Dame</a>
</div>
<div class="hidden-xs col-sm-6 col-md-6 col-lg-6 text-right">
<a href="https://provost.nd.edu/">Office <i>of the</i> Provost</a>
</div>
<div class="text-center col-xs-12 hidden-sm hidden-md hidden-lg hidden-xl text-center">
<a class="brand-bar-bottom-padded" href="https://provost.nd.edu/">Office <i>of the</i> Provost</a>
</div>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row" id="nd-libguides-header-pattern">
<div class="hidden-xs col-sm-6 col-md-6 col-lg-6">
<h1 id="hesburgh-libraries"><a href="http://library.nd.edu" target="_blank">HESBURGH <span style="color:#F8E999;">LIBRARIES</span></a></h1>
</div>
<div class="hidden-xs col-sm-6 col-md-6 col-lg-6">
<h1 style="opacity:.6;text-align:right;">Guides Handbook</h1>
</div>
<div class="col-xs-12 text-center hidden-sm hidden-md hidden-lg">
<h1><a href="http://library.nd.edu" target="_blank">HESBURGH <span style="color:#F8E999;margin-bottom:10px;">LIBRARIES</span></a></h1>
</div>
<div class="col-xs-12 text-center hidden-sm hidden-md hidden-lg">
<h1 style="opacity:.6;text-align:center;">Guides Handbook</h1>
</div>
</div>
</div>
<!-- header closes ----------------------------->
<!-- Main Content ----------------------------->
<div class="container" id="main-container">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12 text-right">
<a class="btn btn-default help-button" href="https://nd.libapps.com/libapps/login.php" role="button" target="_blank"><i class="fa fa-lock fa-spacer-right" aria-hidden="true"></i> LibGuides Login</a>
<a class="btn btn-default help-button" href="http://libguides.library.nd.edu/reusable-assets" role="button" target="_blank"><i class="fa fa-list-alt fa-spacer-right" aria-hidden="true"></i>Reusable Assets</a>
</div>
</div>
<div class="page-header">
<div w3-include-html="navmenu.html"></div>
</div>
<!-- page header closes -->
<div id="masthead">
<div class="container">
<div class="row">
<div class="col-md-12">
<h1>Writing for the Web <small style="color: #CCC;">(A Primer)</small></h1>
<p class="lead">Centering design around users' needs is the foundation of successful library guides.</p>
</div>
</div>
</div>
<!--/container-->
</div>
<!--/masthead-->
<div class="container">
<div class="row">
<!--left column-->
<div class="col-md-3 hidden-xs hidden-sm" id="leftCol">
<ul class="nav nav-stacked" id="sidebar">
<li><a href="#sec0">Writing for the Web</a></li>
<li><a href="#sec1">Information Architecture</a></li>
<li><a href="#sec2">Textual Content</a></li>
<li><a href="#sec3">Visual Content</a></li>
<li><a href="#sec4">UX Resources</a></li>
<li><a href="#" class="back-to-top"><i class="fa fa-arrow-circle-o-up"></i> Back to top</a></li>
</ul>
</div>
<!--right column-->
<div class="col-md-9" id="rightCol">
<p class="lead"></p>
<h2 id="sec0">Writing for the Web</h2>
<blockquote cite="http://">
<p>Web writing...is a whole lot more than smart copywriting. An effective web writer must understand the basics of user experience design, be able to translate information architecture documentation, write effective metadata,
and manage an ever-changing content inventory.</p>
<footer>Kristina Halvorson in <cite title="Source Title">Content Strategy for the Web</cite></footer>
</blockquote>
<p>Writing well for the Web involves understanding the difference between how users read print-based materials and <a href="http://www.nngroup.com/articles/how-users-read-on-the-web/" target="_blank">how they read on the multimedia, hypertextual Web</a>.</p>
<p>Strong technical/professional writing:</p>
<ul>
<li><strong>Must be interesting</strong>, <strong>useful, and</strong> <strong>practical</strong>. It should favor clarity and concision over clever wordplay and snazzy effects.</li>
<li><strong>Must help users to accomplish their goals</strong>, quickly, efficiently, pleasantly, and safely. This is the fundamental concept of “<a href="http://www.nngroup.com/articles/usability-101-introduction-to-usability/" target="_blank">usability</a>,” a bedrock principle of user-centered design.</li>
</ul>
<p>These are some differences between print and digital writing:</p>
<ul>
<li><strong>Users read more slowly from a screen</strong> than a printed page—approximately 25% more slowly, in fact.</li>
<li><strong><a href="http://uxdesign.smashingmagazine.com/2010/10/05/what-is-user-experience-design-overview-tools-and-resources/" target="_blank">Users are goal-oriented.</a></strong> Unlike print, they often scan webpages in short
bursts, reading approximately 20% of the content and relying more on visual/spatial wayfinding devices. (except: see “Low Literacy Users” below.)</li>
<li><strong>Users tend to read in an <a href="http://www.nngroup.com/articles/f-shaped-pattern-reading-web-content/" target="_blank">F-shaped pattern</a></strong>, strongly focusing on the top and left margin. While contemporary users
are more comfortable with scrolling than in the past, you should generally aim to place the most important text at the top of the page.</li>
<li><strong>Users are <a href="http://www.nngroup.com/articles/scrolling-and-attention/" target="_blank">more comfortable with scrolling</a></strong> than they were in the past, thanks to a proliferation of smart phones and other mobile
devices. Nevertheless, keeping content only as long as necessary is a good rule of thumb.</li>
<li><strong>Users often navigate by <a href="http://www.economist.com/node/13350892" target="_blank">“satisficing.”</a></strong> Since there is no penalty for leaving and returning to webpages, users will click on the first link they
find that might lead them closer to their goal. This also makes it more likely for users to quickly abandon a website which does not seem to offer the services or content they require.</li>
</ul>
<h2 id="sec1">Information Architecture</h2>
<p>Users can more easily find information and perform tasks quickly and efficiently if a website has a well-ordered information architecture. A library web presence is a tool and should improve, optimize and/or enhance the user’s knowledge, experience,
and workflow rather than complicate or confuse it. The following are <a href="http://uxmag.com/articles/guiding-principles-for-ux-designers" target="_blank">general rules of thumb</a> for <a href="http://www.smashingmagazine.com/2010/03/17/starting-out-organized-website-content-planning-the-right-way/"
target="_blank">improving site organization</a>:</p>
<ul>
<li><strong>Appropriately Sized</strong>—As regards content, MORE is not always better and may hinder your organization’s goals. As Halvorson explains, if your content does not fulfill your user’s needs or directly support your organization’s goals, it’s worthless.</li>
<li><strong>Clear Wayfinding</strong>—Create clear wayfinding, using breadcrumbs and other components for deep or complex navigation structures. It should be clear where the user is on a site, and easy to understand
how to move to any other page. The home page should be accessible from any page.</li>
<li><strong>Useful Search</strong>—For complex sites such as libraries, search is crucial. For many users, search is their primary way of navigating a website. Aim to assist users with search auto-completion and accelerators (e.g., “one-click” buttons) where appropriate.</li>
<li><strong>Clear Process</strong>—For multi-step processes, summarize the process and outline the number of steps beforehand. Then, keep users informed of their progress during the process.</li>
<li><strong>Clear Chunking</strong>—Since <a href="http://theelearningcoach.com/elearning_design/chunking-information/" target="_blank">users more frequently scan than read deeply</a>, aim to organize the Website’s information architecture and page
structures into <a href="http://www.psych.utoronto.ca/users/peterson/psy430s2001/Miller%20GA%20Magical%20Seven%20Psych%20Review%201955.pdf" target="_blank">meaningful chunks of sense</a> that are easily discernible and scannable. Where extensive information is provided, users should be able to sort or filter it.</li>
<li><strong>Clear Site Organization</strong>—Don’t try to please everyone. Create a balanced <a href="http://webstyleguide.com/wsg3/3-information-architecture/3-site-structure.html" target="_blank">information architecture</a> that is meaningful for the largest number of people from your primary, secondary, and perhaps tertiary audiences. Build in additional wayfinding and redundancy for assisting the outliers, if possible.</li>
<li><strong>Stable Navigation</strong>—<a href="http://sixrevisions.com/user-interface/navigation-design-patterns/" target="_blank">Primary navigation should be stable</a>, offering an easy affordance by remaining in the same
position throughout the site. Unexpected and inappropriate changes to navigational elements are jarring to users.</li>
<li><strong>User-centered Design</strong>—Organize the Web presence according the needs of the users, not the structure of your organization. This will <a href="http://ct-social.com/how-to-lower-your-website-bounce-rate/" target="_blank">reduce your bounce rate</a>, discouraging users from leaving your Web presence for greener, and less confusing, pastures).</li>
<li><strong>Simplified Design</strong>—Remember Steve Krug's famous dictum: <a href="http://www.amazon.com/Dont-Make-Me-Think-Usability/dp/0321344758/ref=sr_1_1?ie=UTF8&qid=1365453300&sr=7.9&keywords=steve+krug" target="_blank"><em>Don’t make your users think!</em></a>
Where possible, decrease the cognitive load on users by offering images and text that are easy to process. Favor intuitive, conventional language over clever phrasing or jargon that users will have to decipher.</li>
<li><strong>Limited Choices</strong>—Where possible, limit the number of choices you offer users at one time. <a href="https://www.orbitmedia.com/blog/website-navigation/" target="_blank">A good rule of thumb in a pinch</a> is
to limit options to approximately six. A much better rule of thumb is to discover through usability testing exactly how many links you’ll be able to use without cognitively overloading your users. Bottom line: The navigation
scheme of the website or application should not <em>trouble</em> the user.</li>
<li><strong>Clear Critical Path</strong>—Include <a href="http://www.smashingmagazine.com/2009/10/13/call-to-action-buttons-examples-and-best-practices/" target="_blank">clear calls to action</a> which indicate what your users
can and should accomplish on your website. For a banking website, a primary service such as “Open an Account!” should be a large, recognizable button, not a simple hyperlink buried inside a paragraph.</li>
<li><strong>Clear Affordances</strong>—Clearly call your users to perform an action by offering <a href="http://www.smashingmagazine.com/smashing-book-1/user-interface-design-in-modern-web-applications/" target="_blank">clear affordances</a>.
Make clear to users which images are buttons, which images/text can be clicked on, filled in. Then make it very clear what will happen when they take that action.</li>
<li><strong>Information Scent</strong>—Create a <a href="http://www.nngroup.com/articles/information-scent/" target="_blank">strong information scent</a>. Make sure that links and actions correspond closely to users’ expectations.</li>
<li><strong>Ubiquitous Help</strong>—Links to help should should be available on every page. The user should be able to access their preferred method of receiving help (chat, email, phone, etc.).</li>
<li><strong>Meaningful Help</strong>—The website should provide context-sensitive help, such as tooltips, which should provide meaningful information about the object they annotate. Regarding form use, the website should also
indicate clearly where users have made an error and exactly how to resolve it. The website should indicate when tasks have been completed and direct users to the next logical action. Policies and instructions should be easily
found with or near the tools they describe, where possible.</li>
</ul>
<h2 id="sec2">Textual Content</h2>
<p>The following are rules of thumb for developing and editing textual content in library guides.</p>
<ul>
<li><strong>Brevity (“the soul of wit”)</strong>—Avoid needless and meandering introductions, e.g., language which “welcomes the user to your webpage”, etc. Be sure to <a href="http://www.ragan.com/Main/Articles/12_tips_for_eliminating_unnecessary_words_42747.aspx" target="_blank">Eliminate unnecessary words</a>. (Like the words "be sure to" in the previous sentence.) A popular rule of thumb: <em>First, reduce your first
draft by half. Second, do it again.</em> Because Library pages are tools and not entertainments, get your reader to the information they need without further ado.
</li>
<li><strong>Meaningful, Human-readable Links</strong>—<a href="http://agsci.psu.edu/communications/web/best-practices/appropriate-link-text" target="_blank">Provide meaningful hyperlinks</a>, which improve readability and scannability, accessibility for the visually impaired,
and produce stronger results from search engines. For example:
<p class="alert alert-danger"><strong>Bad</strong><br>For more information about our Policy on Cheating, click here: <a>http://www.library.mtu.edu/user-resources/policies/cheating.html/#cheating</a>.</p>
<p style="margin-top: 1em;" class="alert alert-warning"><strong>Better But Still Bad</strong><br>For more information about our Policy on Cheating, <a>click here</a>.</p>
<p class="alert alert-success"><strong>Good</strong><br>For more information, view our <a>Policy on Student Cheating</a>.</p>
</li>
<li><strong>Meaningful Lists</strong>—Avoid duplicating strings of opening words in lists and headings. When a sentence looks too similar to those which surround it, it increases the user's scanning time. Favor bulleted lists
over narrative text. When an opening element must be repeated, make it a heading, where possible. For example:
<p style="margin-top: 1em;" class="alert alert-danger"><strong>Bad</strong><br>
<span>
List of handbooks on architecture <br>
List of chapbooks on architecture <br>
List of photo collages on architecture
</span>
</p>
<p class="alert alert-success"><strong>Good</strong><br>
<span>
Architecture<br>
· Handbooks<br>
· Chapbooks<br>
· Photo collages
</span>
</p>
</li>
<li><strong>Action Verbs</strong>—<a href="http://owl.english.purdue.edu/owl/owlprint/539/" target="_blank">Use action-oriented verbs</a> for hyperlinks where appropriate (e.g., choose “Close my account” over “Account closure”).
Using action-oriented verbs hails the reader directly, asking him or her to take direct action, and implying the result of that action. Clicking ‘Account closure’ might take the user to a page which describes policies surrounding account closure. The function of a button labeled “Close my account!” is unambiguous.
<p style="margin-top: 1em;" class="alert alert-danger"><strong>Bad</strong><br>The deadline for the submission of your request will be promptly by noon, tomorrow.</p>
<p class="alert alert-success"><strong>Good</strong><br>Submit your request by noon, tomorrow.</p>
</li>
<li><strong>Active Voice</strong>—<a href="http://www.nngroup.com/articles/passive-voice-is-redeemed-for-web/" target="_blank">Use the active voice</a>, especially with instructions. The <a href="http://www.nngroup.com/articles/worlds-best-headlines-bbc-news/"
target="_blank">passive voice</a> is most often appropriate for page and section headings. Replace long noun phrases (“the submission of the information”) with accurate, descriptive verbs.
</li>
<p></p>
<p class="alert alert-danger"><strong>Bad</strong><br>Now Imagine you were to happen upon a page dense with myriad links, all of which read ‘click here’. Such a dense page would not lend itself to efficient scanning.</p>
<p class="alert alert-warning"><strong>Better</strong><br>A page dense with links, all of which read ‘click here,’ would not lend itself to efficient scanning.</p>
<p class="alert alert-success"><strong>Good</strong><br>A page full of ‘click here’ links does not help users scan efficiently.</p>
</li>
<li><strong>Numbers</strong>—In print, we often write out numerals for ten and under, reserving numerals for greater than ten. Wherever possible on the web, <a href="http://www.nngroup.com/articles/web-writing-show-numbers-as-numerals/"
target="_blank">use numerals rather than words</a>. Numerals are far easier to process cognitively. The “better” version below also <a href="http://owl.english.purdue.edu/owl/resource/623/1/" target="_blank">establishes parallelism</a>,
where the “bad” example violates it. Where a sentence starts with a number, use the word form (“One important area of research...”). Where possible, however, don’t start sentences with numbers.
<p></p>
<p class="alert alert-danger"><strong>Bad</strong><br>The library reserves 12 group study rooms (up to six occupants) and ten large group study rooms (up to 12 occupants) for student use.</p>
<p class="alert alert-success"><strong>Good</strong><br>The library reserves 12 group study rooms (2-6 occupants) and 10 large group study rooms (2-12 occupants) for student use.</p>
</li>
</ul>
<h2 id="sec3">Visual Content</h2>
<p>As multimedia platform, Library Guides should use carefully selected images to meaningful effect. Attention should also be paid to the visual dimensions of the structure of the page itself.</p>
<ul>
<li><strong>Hierarchy</strong>—Make the organization of the content/page obvious by creating a visual and <a href="http://webdesign.tutsplus.com/articles/typography-articles/understanding-typographic-hierarchy/" target="_blank">typographic hierarchy</a>,
including: white and negative space (e.g., indentation), color, size, font-face, bold, italics, and anything else that can increase contrast. A well organized page hierarchy guides users toward what is most important, and what
to pay attention to first.</li>
<li><strong>White Space</strong>—Use <a href="http://alistapart.com/article/whitespace" target="_blank">plenty of white space</a>. White space helps organizes a page visually and has a calming effect on the reader by helping
to guide their eye on the page, indicating to pay attention to.</li>
<li><strong>Fonts</strong>—Some general <a href="http://www.nngroup.com/articles/serif-vs-sans-serif-fonts-hd-screens/" target="_blank">rules of thumb for font usage</a>, according to usability experts at the Nielsen/Norman Group:
Using more than ~2 fonts per page can produce a ransom-note effect.<br>
<div style="margin-top: 1em;" class="alert alert-danger">
<p><i class="fa fa-times-circle fa-spacer-right" aria-hidden="true"></i>
Except perhaps in the case of foreign languages, you should not alter the font for your library guides.</p>
</div>
</li>
<li><strong>Images</strong>—When using an image as a banner, or in any other supportive role on the page, select an iconic image which tells the story of the contents of the page. The blog <a href="http://alistapart.com/article/improving-ux-through-front-end-performance"
target="_blank">A List Apart</a> uses illustration brilliantly to summarize the message of their featured articles. Clip art-type graphics set an unprofessional tone and should be avoided.</li>
<li><strong>Resolution</strong>—Stretched, too-small, pixelated or generally poorly-sized images reflect poorly on the ethos of the site and the content author.</li>
</ul>
<h2 id="sec4">UX Resources</h2>
<p>The following resources are useful works on various aspects of writing for the web:</p>
<ul>
<li><strong><a href="http://onesearch.library.nd.edu/NDU:malc_blended:ndu_aleph003114069" target="_blank">The Non-Designer’s Design Book (Robin Williams)</a></strong>—A simplified and very accessible explanation of Gestalt Psychology
principles as applied to design. She explains clearly four of the most important design principles to master—contrast, repetition, alignment, and proximity.</li>
<li><strong><a href="http://onesearch.library.nd.edu/NDU:malc_blended:ndu_aleph002635651" target="_blank">Don’t Make me Think: A Common Sense Approach to Web Usability (Steve Krug)</a></strong>—Brief and very accessible text
outlining the core principles of usability for the web. This book is an excellent primer on usability and writing for the web.</li>
<li><strong><a href="http://onesearch.library.nd.edu/NDU:malc_blended:ndu_aleph004439358" target="_blank">Content Strategy for the Web (Kristina Halvorson)</a></strong>—Seminal introductory text on content management from an
industry leader. Witty and accessible tone, while chock-full of useful information.</li>
</ul>
</div>
<!--/right-->
</div>
<!--/row-->
</div>
<!--/container-->
</div>
<!-- .container -->
<!-- Main Content closes ----------------------------->
<!-- Footer ----------------------------->
<div id="handbook-footer">
<div class="container-fluid">
<div class="row">
<div class="col-xs-12 col-sm-6">
<i class="fa fa-copyright" aria-hidden="true"></i><span id="thisYear"></span> University of Notre Dame
</div><div class="col-xs-12 col-sm-6">
<p class="text-right"><a href="https://github.com/randal-sean-harrison/handbook" target="_blank"><i class="fa fa-github fa-spacer-right" aria-hidden="true"></i>randal-sean-harrison/handbook</a></p>
</div></div>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="js/jquery-3.2.1.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- Include for the Back to top button -->
<script src="js/back-to-top.js"></script>
<!-- Scrollspy / affix js -->
<script src="js/scripts.js"></script>
<!-- html include script -->
<script src="https://www.w3schools.com/lib/w3data.js"></script>
<script> w3IncludeHTML(); </script>
<!-- clipboard.js include -->
<script src="js/clipboard.min.js"></script>
<!-- add the active class to the correct tab and submenu element -->
<script type="text/javascript">
$( document ).ready(function() {
// Add the active classes to the nav menu
$(".navhelp").addClass("active");
$(".navwriting").addClass("active");
});
</script>
</body>
</html>