-
Notifications
You must be signed in to change notification settings - Fork 0
/
launch_checklist.html
342 lines (265 loc) · 20.8 KB
/
launch_checklist.html
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
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<style>
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote {
margin: 0;
padding: 0;
}
body {
font-family: "Helvetica Neue", Helvetica, "Hiragino Sans GB", Arial, sans-serif;
font-size: 13px;
line-height: 18px;
color: #737373;
margin: 10px 13px 10px 13px;
}
a {
color: #0069d6;
}
a:hover {
color: #0050a3;
text-decoration: none;
}
a img {
border: none;
}
p {
margin-bottom: 9px;
}
h1,
h2,
h3,
h4,
h5,
h6 {
color: #404040;
line-height: 36px;
}
h1 {
margin-bottom: 18px;
font-size: 30px;
}
h2 {
font-size: 24px;
}
h3 {
font-size: 18px;
}
h4 {
font-size: 16px;
}
h5 {
font-size: 14px;
}
h6 {
font-size: 13px;
}
hr {
margin: 0 0 19px;
border: 0;
border-bottom: 1px solid #ccc;
}
blockquote {
padding: 13px 13px 21px 15px;
margin-bottom: 18px;
font-family:georgia,serif;
font-style: italic;
}
blockquote:before {
content:"\201C";
font-size:40px;
margin-left:-10px;
font-family:georgia,serif;
color:#eee;
}
blockquote p {
font-size: 14px;
font-weight: 300;
line-height: 18px;
margin-bottom: 0;
font-style: italic;
}
code, pre {
font-family: Monaco, Andale Mono, Courier New, monospace;
}
code {
background-color: #fee9cc;
color: rgba(0, 0, 0, 0.75);
padding: 1px 3px;
font-size: 12px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
pre {
display: block;
padding: 14px;
margin: 0 0 18px;
line-height: 16px;
font-size: 11px;
border: 1px solid #d9d9d9;
white-space: pre-wrap;
word-wrap: break-word;
}
pre code {
background-color: #fff;
color:#737373;
font-size: 11px;
padding: 0;
}
@media screen and (min-width: 768px) {
body {
width: 748px;
margin:10px auto;
}
}
</style>
<title>Website Launch Checklist</title>
</head>
<body>
<p><img src="http://f.cl.ly/items/1F0y2N1W3V1M1v2m2k1C/wdtuts-logo.png" alt="image" /></p>
<h1>Website Launch Checklist</h1>
<p>At <a href="http://www.fhoke.com">FHOKE</a> we’ve been through it all, from perfect launches to ones that have turned into complete nightmares! Through our experiences we’ve compiled a list, in no particular order, of a process we go through before we launch our sites.</p>
<p>This won’t cover everything, but should give you a quick overview of what you could be doing or adding to your own checklist.</p>
<hr />
<h2>Successful Launch</h2>
<p>After having invested a lot of time in a project, launch day will be in sight. Before you get there you’ll still have important issues that need addressing to achieve a successful launch, get these right and both you and your client will be happy.</p>
<p>Remember, before you show anything to a client make sure the site matches the original spec, is pixel perfect to the designs you presented and fulfills their original brief.</p>
<hr />
<h2>Content</h2>
<p>Get a small team together and go over the content of the site with a fine tooth comb - <strong>make sure you get this right</strong>. Good content is the cornerstone of a great site.</p>
<ul>
<li><strong>Spelling</strong>: Check and check again. Run a spell check. Better still, get others involved. You can never have enough people making sure copy is correct. Look out for grammatical errors as well as checking for widows or orphaned words in important paragraphs.</li>
<li><strong>Copy</strong>: Make sure real copy is in place and all placeholder text is removed. There is nothing worse than seeing lorem ipsum in a mission statement.</li>
<li><strong>Contact Details</strong>: It seems obvious but make sure these are correct. Without them how do you expect people to get in touch? Check phone numbers, check email addresses and test that these are working, make a call or send an email and check they are received.</li>
<li><strong>Copyright</strong>: If you plan on using a date in the copyright info make sure it is set to automatically refresh from the time stamp on the server, and that the copyright owner is correct.</li>
<li><strong>Terms</strong>: If you are providing a service or are involved in promotions then you will need terms available for visitors to read. If you are unsure as to how these should be written then consult a lawyer for best advice. Remember: <em>make these as clear as possible</em>. There is nothing worse than being baffled by legal jargon.</li>
<li><strong>Privacy</strong>: If you use cookies, capture data, or distribute data, then you need a privacy policy. Keep these simple and be clear on what data you collect and provide details of how you can be contacted for further information.</li>
</ul>
<hr />
<h2>Functionality</h2>
<p>Does it work? This might seem an obvious question to ask, but above all else this is the most important part of a project. You might have everything else in place but if the site doesn't work correctly what’s the point in launching it?</p>
<p>Minor bugs may appear when visitors use the site for the first time but making sure it works at near 100% will ensure a successful launch.</p>
<ul>
<li><strong>Compatability</strong>: Check the site works across all browsers and platforms. Specify at the beginning of a project to the client what platforms you will build and test to and stick to these. Use platforms such as <a href="http://dfcb.github.com/Responsivator/">Responsivator</a> and <a href="http://www.browserstack.com/">BrowserStack</a> to test sites quickly as well as on physical browsers and devices.</li>
<li><strong>Favicon</strong>: Obvious, but this can be missed. Look at creating an iOS home screen icon too.</li>
<li><strong>Logo</strong>: Does the logo link to the index page?</li>
<li><strong>404 Pages</strong>: Check you have these in place, make sure they signpost ways for a user to get back into the site or direct them to pages of interest with relevant links.</li>
<li><strong>Redirects</strong>: If you are redirecting pages use suitable 301 re-directs over 302.</li>
<li><strong>Forms</strong>: Make sure they aren’t sending to spam mail boxes, or returning an error once submitted and include a thank you state once a form is submitted so a visitor knows it is sent. Above all else make sure the clients email address is specified when the site goes live.</li>
<li><strong>Links</strong>: Do internal page links work? Do all external links work and do they open in a new tab if so intended?</li>
<li><strong>RSS Feeds</strong>: Feeds can be useful. You don’t have to limit these to articles, you can have feeds for most pages for example new work or case studies added to a site.</li>
</ul>
<hr />
<h2>Standards & Validation</h2>
<p>These two things should be considered throughout the design and build to make every users experience on your site as good as it can be. Points to consider:</p>
<ul>
<li><strong>Accessibility</strong>: It's easy to forget how inaccessible a webpage is for some users. Have you considered how assistive technologies <a href="http://webdesign.tutsplus.com/articles/general/accessibility-whats-your-markup-saying-to-you/">such as screenreaders</a> will navigate your site? Have you implemented <a href="http://en.wikipedia.org/wiki/WAI-ARIA">WIA-ARIA</a> roles and states, or at least considered the tab order of form controls?</li>
<li><strong>Contrast</strong>: This follows on from our point about accessibility. Using the very latest monitors it’s easy to see subtle differences in color, be sure to test your site on multiple devices and laptops to make sure the design has clarity and text can be read with ease.</li>
<li><strong>Text Size</strong>: Make text clear and easy to read, adjust line spacing and allow plenty of white space. Bigger, can mean better, when it comes to text on the web.</li>
<li><strong>Alt Tags</strong>: Make sure all images have clear descriptive ALT tags for the visually impaired. Not only that but without them they can’t be found in search engines.</li>
<li><strong>Consistency</strong>: Make sure common elements across the site are consistent to avoid confusing your users. Make buttons look like buttons, links look like links, and titles and text should be the consistent in size and color.</li>
<li><strong>Device Compatibility</strong>: Consider how the website will be used across multiple devices, responsive or not your website should work for desktop and mobile web users.</li>
<li><strong>Validation</strong>: Always aim for 100% validity. If your site fails to validate fully don’t get too upset, but be sure to understand any errors in order to to eliminate any unwanted issues.</li>
<li><strong>JavaScript</strong>: Many people browsing the web have JavaScript turned off for security reasons. Make sure your site is fully functional and forms still perform server-side validation checks without it.</li>
<li><strong>Flash</strong>: Yeah, we know, nobody uses Flash anymore right? If Flash has to be used, be sure to include an alternative backup image should Flash Player not be installed.</li>
</ul>
<hr />
<h2>Sitemaps</h2>
<p>Make sure you include sitemaps. These help search engines correctly index your website during the crawling process.</p>
<ul>
<li><strong>HTML Sitemaps</strong>: Although not as common practice as they were, this form of sitemap can have its benefits in helping visitors see a complete overview of the sites pages. Links for these are normally found in the footer of a site.</li>
<li><strong>XML Sitemaps</strong>: These are only ever used by search engines such as Google, Bing and Yahoo. Create an <a href="http://webdesign.tutsplus.com/articles/general/all-you-need-to-know-about-xml-sitemaps/">XML Sitemap</a> easily and submit it via Webmaster Tools. These will then be used to inform search engines about the pages you have published.</li>
</ul>
<hr />
<h2>Performance</h2>
<p>A faster site is a better ranking site. You’ll also lower bounce rates on pages if you can reduce load times - who wants to wait for pages to load?</p>
<ul>
<li><strong>Check site speed</strong>: You can use services such as <a href="https://developers.google.com/speed/pagespeed/">Google Page Speed</a> or <a href="https://www.blamestella.com/">Blame Stella</a> to check the load times of your site's pages.</li>
<li><strong>Image sizes</strong>: Keep your images as small as possible. Although network speeds are better than ever, no one wants to wait for a 10Mb page to load. Compressing images will only improve page load times.</li>
</ul>
<hr />
<h2>SEO</h2>
<p>Great SEO will mean your site will work harder and achieve greater success than a site that uses little or bad techniques. Get your research right and the rest will fall into place.</p>
<p>This list is by no means extensive and if you want to learn more then we recommend reading more from these recent articles <a href="http://webdesign.tutsplus.com/articles/general/search-engine-optimization-faq/">Search Engine Optimization FAQ</a> and <a href="http://webdesign.tutsplus.com/articles/general/seo-checklist/?search_index=3">A Web Designer’s SEO Checklist</a>.</p>
<ul>
<li><strong>Keyword Research</strong>: Make sure you are targeting the right demographic and market. It’s important to get this right in order to attract relevant traffic to your site. Carry out some research with <a href="http://www.google.co.uk/AdWords">Google AdWords</a> and see which keyword (or search term) has the highest traffic potential and the least amount of competition and balance these two factors.</li>
<li><strong>Page Titles & Descriptions</strong>: Do all the templates have the necessary page titles and meta data based on your keyword research? When focusing on a particular keyword try and get these to the front of descriptions and look at using both singular and plural forms.</li>
<li><strong>Image Alt-tags</strong>: Do the main images of the site contain relevant and descriptive alt-tags? Using short descriptions will help. And remember try and choose a descriptive file name instead of random words and numbers for these images.</li>
<li><strong>Keywords</strong>: Embed these in titles, descriptions and copy.</li>
<li><strong>Content</strong>: If the content is good it will work to optimize and compliment the SEO. Good keyword density within the copy works well so use both singular and plural forms of keywords in your text. Don’t overload the content or over think this, make it natural and only add when and if it is relevant. Search engines also prefer longer pages of content so look at getting the content to +300 words but focus more on the quality than quantity.</li>
<li><strong>URLs</strong>: Make sure the site's URLs are clean. Using a descriptive URL instead of ones that are made up of random numbers or words will help with SEO and visitors finding a page they may want to return to, and look at getting a keyword into the URL if relevant.</li>
</ul>
<hr />
<h2>Analytics</h2>
<p>No matter how small a site is, having web analytics running will gather you valuable information on how to improve your website going forward..</p>
<ul>
<li><strong>Monitoring</strong>: With good SEO in place use tracking codes to measure this. Tools such as <a href="http://www.google.co.uk/analytics/">Google Analytics</a> (free) or services such as <a href="http://www.hubspot.com/">Hubspot</a>, <a href="https://www.gosquared.com/">GoSquared</a> or <a href="https://www.kissmetrics.com/">KISSmetrics</a> (paid) will give valuable feedback.</li>
</ul>
<hr />
<h2>Security</h2>
<p>You may have a lot of things you do not want the world to know about. For example; user-uploaded media, or shoppers' Credit Card details.</p>
<ul>
<li><strong>Protect Sensitive Pages</strong>: Protect any sensitive pages or folders from being indexed on search engines by putting in place robots.txt files and by excluding them from within Webmaster Tools. Also consider whether you need to use an .htaccess file to disable folder view within directories.</li>
<li><strong>Security Certificates</strong>: When developing an eCommerce website, or a site that handles sensitive visitor information, the level of security will be paramount. Make sure to use protocols such as <a href="http://www.thawte.com/">SSL encryption</a> to protect against unwanted information theft. It has also been proven that displaying seals such as <a href="http://www.truste.com/products-and-services/enterprise-privacy/TRUSTed-websites">TRUSTe</a>, can increase the credibility of a site.</li>
</ul>
<hr />
<h2>Hosting & Backups</h2>
<p>Finding a web hosting provider can be hard and knowing what you need can be even harder to understand. There are many options and pricing plans to choose from but make sure to choose a provider that meets your needs, not one that offers more than you need to pay for.</p>
<ul>
<li><strong>Types</strong>: Shared Hosting, Reseller Hosting, Cloud Hosting, VPS Hosting and Dedicated Servers. Not sure what these mean? Then read these <a href="http://webdesign.tutsplus.com/articles/general/quick-tip-choose-a-hosting-provider-based-on-your-needs/?search_index=1">quick tips</a>.</li>
<li><strong>Backups</strong>: Make sure you use a provider who can provide daily and weekly backups of your server and make sure to take local backups as well.</li>
<li><strong>Monitoring</strong>: Setup services such as <a href="https://www.pingdom.com/">Pingdom</a> or other server monitoring tools to monitor the health of your server.</li>
</ul>
<hr />
<h2>Legal</h2>
<p>Before you start any project a signed contract should be in place. The contract should clearly outline the project deliverables and processes so both parties are 100% clear on what will be achieved as an end result. As part of that contract make sure the following has been agreed to cover any unforeseen circumstances.</p>
<ul>
<li><strong>Image/Content Rights</strong>: Clearly state that any supplied content or imagery that is handled by you remains the clients responsibility. Make clear that you will not be held liable for publishing content and images that they do not have the rights to use. Also educate the client that they should be using images or content that are either paid for or they have the rights to use.</li>
<li><strong>Payment Terms</strong>: Set fair and staged payment terms at clearly defined milestones of a project (at the end of the design phase - before any development starts for example), never move on to the next phase of a project until the agreed payment is in.</li>
<li><strong>Timelines</strong>: Set reasonable timelines that are fair to your client as well as manageable for you and your team. Clearly state that you will not be held responsible for any loss or damages as a result of a delay in the schedule caused by the client. It is a good idea to use something like <a href="http://basecamp.com/">Basecamp</a> to manage your projects so all work and conversations are recorded should you need them to fall back on in the future.</li>
<li><strong>Intellectual Property Rights</strong>: This will be different depending on who you are, what you’re offering, or the project in question. Clearly state what is owned by you and the client once the project is complete and payment has been made in full. Consider the rights to any software or code written by you that you wouldn’t want sold on, or anything similar that you feel you need to retain the rights to.</li>
</ul>
<hr />
<h2>Deliverables</h2>
<p>In the project contract clearly explain what the client will physically receive once a project is complete. The following is what we’d recommend.</p>
<ul>
<li><strong>Live Website</strong>: This is the bare minimum. Make sure their website is up and live and fully functioning as intended.</li>
<li><p><strong>Style Guide</strong>: A simple style guide is extremely beneficial for any website owner, points to consider include:</p>
<ul>
<li>Font Styles</li>
<li>Image Sizes</li>
<li>Tone of Voice</li>
<li>Colours</li>
<li>Imagery Style</li>
<li>Colours</li>
</ul>
</li>
<li><p><strong>Assets & Icons</strong>: Any icons, illustrations, or infographics design and created for the website may be helpful to your client going forward. Supply them the files in different formats so they can use them in presentations or future design work.</p></li>
<li><strong>Offline Copy</strong>: If requested by the client provide a copy of the site. Remember websites are a living document that should be continually updated and improved, so unless the site is static you will have to be making regular offline backups for the client.</li>
</ul>
<hr />
<h2>When to Launch?</h2>
<p>Remember: never hand over a project or files without sign off and any outstanding payments settled. You will have no come back at this point if you do without either of these. Handing over a project without payment is the equivalent of a shop owner letting a customer walk out of a shop with a trolley full of goods on the promise that they will ‘pay you later’.</p>
<p>Now everything is in place you are ready to launch. But when should you? We try our very best to never launch a site within two days of a weekend. Sometimes this practice has to go out the window on occasions but we always try and aim for a Monday to Wednesday launch slot. This will give you the opportunity to iron out any live bugs that surface during a working week. Trying to fix these during a weekend when either you or your developers are not around will only cause you headaches when you have a client who needs their site to be fully functional. Trust us, you will only learn the hard way if you don’t adopt this approach.</p>
<hr />
<h2>Ongoing Maintenance</h2>
<p>So you’ve launched the site, it’s working great and the client is happy, now what? You need to make sure that it continues to run without a hitch. Things can go wrong or get missed, server security compromised, or it could fall over. Make sure you’re ready for every eventuality.</p>
<ul>
<li><strong>Backups</strong>: Always, always, make sure backups are in place. Run at least two backups daily - one in the morning and one 12 hours later, limiting the amount of data that can go missing.</li>
<li><strong>Version Control</strong>: Try running a project through <a href="http://git-scm.com/">Git</a>, it’s a great version control system for teams of developers working in collaboration. Source code history is saved meaning that you can refer or revert back to previous versions if and when needed. For an introduction to Git read this in-depth article <a href="http://net.tutsplus.com/tutorials/other/easy-version-control-with-git/">Easy Version Control with Git</a>.</li>
<li><strong>Analytics</strong>: In order to suggest improvements going forwards ask to be set up on the client's analytics, this way you can monitor traffic and site stats for the client and suggest improvements over the following month and year after launch.</li>
</ul>
<hr />
<p>Let us know your launch checklist recommendations <a href="http://enva.to/XpDQqR">on Webdesigntuts+</a></p>
</body>
</html>