thehive.beewits.com https://thehive.beewits.com/the-ultimate-web-design-checklist-things-to-do-when-launching-a-website/

Following our awesome list of 101 tools for web designers and developers, it was time for actually figuring outevery step needed to get a web design project done – from start to finish. So here it is – the ultimate checklist forthe web designer / freelancer / agency starting a web design project. In our website design checklist we’vecovered all the steps you need to do, from the technical and development focused, to that involving clientmeetings, designers, copy-writing, and everything else in between.

What have we missed? We’d love to hear your opinion!

Stage 0 – Project Start – Preparation

Stage 1 – Project Kick off

Stage 2 – Development

Stage 2.1 – Set up Hosting Account

Stage 2.2 – Set Up Website Content

Stage 3 – Quality Assurance

Stage 3.1 – Code Quality

Stage 3.2 – Page Content

Stage 3.3 – Optimized User Experience

Stage 3.4 – Responsive and Mobile Friendly

Stage 4 – Launch

Stage 4.1 – Analytics

Stage 4.2 – Search Engine Optimization

Stage 4.3 – Speed and Performance

Stage 4.4 – Usability

Stage 4.5 – Social Media

1/12

Hey web designer + creativehuman! Need a live web design checklist?

Have you heard about BeeWits?!

It’s a tool to help web designers and creatives manage their design projects by keeping track of all tasks whichyou’ll need to do to get a website launched or a design project completed.

Get in on the Early Access list and see whether we can help you out!

Not sure about BeeWits yet? – let’s just show you the list of tasks you’d expect to find within a BeeWits webdesign project and see whether you like it a bit more…

Stage 0 – Project Start – Preparation

Is web design only about design? Not really! Although most of us love the creative part of designing anddeveloping a website, there are quite a few things we need to do before we actually get to that. Before we getdown to the nitty gritty of our website design checklist – we’ll need to lay the groundwork and set a few rules.

1. Setup first meetings(s) with client

2. Define and collect briefing document from client

3. Define and send project questionnaire to client and wait for the client’s response. Iterate on doubts you haveuntil everybody is in agreement. Finalize project questionnaire from client

4. Research client’s company to understand their brand, the way they communicate, their demographics, targetaudience

5. Research client’s industry to find ways of communicating specific to the industry, strengths and weaknesses,trends and other industry specifics

6. Get quotation(s) for development effort for project

7. Get quotations(s) for design or estimate design work with your own designers2/12

8. Get quotation(s) for copy / content or estimate work with your copywriters

9. Get quotation(s) for photography / video production or estimate effort involved

10. Get quotation(s) for Hosting / Domain, particularly if specialized hosting is involved such as VPS hosting,cloud hosting, or special hosting or environment requirements

11. Prepare and send proposal to client – use the web design quotation tool to send an itemized quotation

12. Get approval from client of proposal and features to be implemented

13. Create the Project Acceptance Form , and propose timeline with milestones

14. Send Project Acceptance Form, with timelines to client and wait for client signoff

Once we’ve agreed with the client on the definition of the new website project, we start doing the dirty work.Developers, designers, copywriters, beautiful photography or stock imagery, privacy policies and legal texts,you’ve got lots of stuff to set in motion when you kick off the project.

Stage 1 – Project Kick off

15. Kick off email to developers, designers and other stakeholders

16. Create sitemap of website with proposed sections,pages

17. Research and buy template used as a basis for design

18. Create wireframe of specific pages which requirecustom designs

19. Allocate time and effort for designer to create thewireframes based on the estimates sent to client and briefdesigners on wireframe designs.

20. Allocate time and effort for content creation / copy

21. Research, buy and tweak stock images or find freeimages you can use

22. Allocate time and effort for photography (based onestimates sent to client)

23. Allocate time and effort for video productions (based on estimates sent to client)

24. Define privacy policy and other legal text required for website

25. Send design(s) to client for approval and wait for approval from client

26. Get designers to perform any required design changes

27. Send designs to web developers including template, together with designs, for start of research anddevelopment

28. Send specifications and updates to client and wait for client signoff

Once the designs have been completed and you’ve set the stage for what you want the final result to be like, it’stime to start developing. Besides the developers per se, you’ve also got to set the environment, ensure thedomain is in place and set up correctly, create databases and ensure the production environments are ready.

3/12

How are you managing with your web design projects?

If you’re like us – we’re always concerned we might miss that small but crucial step, or that we ‘re falling behindon our schedule.

BeeWits has helped organize our web design projects with simple tasks lists, and everything which needs to bedone in one place. It’s a website design checklist which you can update on the go – and watch your progress asit happens.

Want to get in on the Early Access program ? You can get up to 6 months free and a chance to win a $1000 tospend at Envato!

Stage 2 – Website Development Checklist

Our website design checklist continues with the actual development of the site. Once you’ve ironed out what youactually need to do, it’s time to get your hands dirty.

29. Send finalized designs to developers

30. Allocate development checklists to the various developers

31. Agree with all developers + client on a date for Alpha

32. Reach out to content creators and ensure they are on target

Stage 2.1 – Set up Hosting Account

33. Ensure you’ve bought hosting or created a hosting space for your website

4/12

34. Create new database(s), and database users as necessary if you are using a CMS, or a website whichrequires a database

35. Upload the website source files

36. Install / configure the CMS to use the database you have created

37. If your website has been created already and you need to migrate it, export the database from thetesting/staging server and import it to the production server

38. Change the nameservers of the domain you will be using to the nameservers of the hosting server you will beusing

Stage 2.2 – Set Up Website Content

39. Create the website site map and structure you had defined with the client via your favourite CMS or theframework / technology you have chosen to develop your website

40. Collect all content from the various content creators you have outsourced

41. Quality assure each piece of content you have outsourced or bought – and ask for changes wherenecessary

42. Populate the website content with the various content items you have agreed with the client

43. Define a Contact Us page with correct client details and a map

44. Populate links / icongraphy with links to relevant social media details

45. Create a link to your website in the footer (if agreed with client to do this)

46. Send current iteration to client and request feedback

47. Fix and change any requests by client

48. Send updates to client and wait for client sign-off

There is nothing more important than ensuring the developed product is fit for purpose through several types ofquality assurance. After all this is what will keep your clients coming back for more. An eye for detail here willensure you will keep getting recommendations and repeat business. Most of all, the things which might not beimmediately apparent, but make a significant difference, need to be given due importance.

Besides providing the required functionality, ensure the website you are designing is fast, maintainable, providesan optimal User Experience free from errors and glitches, and make sure it is fully responsive on various types ofdevices.

Are you able manage all project interactions in one place?

There’s typically a lot of people involved in a web design project. You. The client. The devs. The designers. Andanybody who has been commissioned to provide bits and pieces of project.

Keeping them all in sync is a bit of a hassle unless you’ve got the right tool to do so. That’s why we run eachproject with a website design checklist – to make sure we don’t forget any step. BeeWits does all of this – as aservice which can be accessed by all your team members.

With BeeWits – everybody logs in to the same project and keeps everybody else updated with what’s going onwith their part of the project.

Why wait when you can try BeeWits with your next project now? We’re giving Early Access, with anything from 35/12

to 12 months free. Plus you can win a $1000 to spend on web design stuff from Envato. How about that for avery fair deal?

Stage 3 – Quality Assurance

If you want your work to stand out, you need to make sure it’s properly tested and bug-free. That’s why we give aLOT of importance to Quality Assurance on our website design checklist. Follow our task list to ensure everythingis up to scratch!

Stage 3.1 – Code Quality

49. Validate HTML using W3C HTML Validator, or your preferred Browser extension such as Validty ChromeExtension, or Html Validator plugin for FireFox

50. Validate CSS using this CSS Validator, Validity for Chrome, or Html Validator

51. Lint your CSS to make it better

52. Use JSLint and JSHint to make your JavaScript better

53. Check whether your website is internationalization ready here

54. Ask for changes from developers based on the results of the above tests

Stage 3.2 – Page Content

55. Make sure web copywriting has been proofread, and ran through a spelling and grammar checker to checkfor correctness. Use online tools such as Reverso, or Spellcheckplus.com

56. Check that generic content, such as lorem ipsum, has been properly removed and replaced.

57. See that all images are in the correct places, smushed, formatted, width and height specified and working onall devices.

58. Confirm that videos and audio files are in the correct places, formatted and working on all devices.

59. Test all linked content, such as case studies, ebooks, and whitepapers, and verify that they are correctlylinked.

6/12

60. Test to see that all internal links across web pages are working properly

Stage 3.3 – Optimized User Experience

61. Ensure that Contact Us and other forms are submitting data properly. If form is sent to an email addressensure that email is received on a mailbox that is monitored, or ensure that content is correctly stored indatabase.

62. Verify the Thank-you message or page displayed after form is submitted

63. Check that Auto-responders are working properly and text in emails has been proofed

64. External links across web pages are working properly, and open in a new tab (Fix any broken links using thistool)

65. Ensure that Social media share icons are working properly – that there is a good image for sharing and thatthe description for sharing is appropriate.

66. Correct your metadata as necessary to ensure social media sharing is working ok.

67. Use the Facebook linter to ensure your Facebook sharing will work well

68. Implement Twitter Cards and confirm it works well on the Preview tool

69. Ensure that company logo is linked to the homepage.

70. Check that load time for site pages is optimized (confirm with multiple sources) such as GTMetrix andPingdom tools. If not – do the following steps to make your WordPress website load faster

71. Try a non-existing address on your page to check the 404 page and 404 redirect pages are in place

72. Integrations with third-party tools, such as your CRM, e-commerce software, and/or marketing platformshould be tested to ensure they are running smoothly

73. Choose www vs no-www and make sure that ONLY one of them is working to ensure you don’t get penalizedfor duplicate content. After choosing one, make sure one redirects to the other.

74. Check on multiple browsers using browsershots or browserling

Stage 3.4 – Responsive and Mobile Friendly

75. Make sure you are using the viewport meta tag: <meta name=”viewport” content=”initial-scale=1″>

76. Check that your website is mobile-friendly with at least a MobileOk score of 75 and Google sees your pageas Mobile Friendly . You should have fixed most of the Google Mobile Insights problems here

77. Use correct input types for email, phone and URL input form fields to ensure these are rendered correctly onmobile phones

7/12

78. Check how the site looks on emulators such as screenqueries, ipadpeek, iphonetester, screenfly,mobilephonesimulator.

79. Test the site using real devices you have accessible to you or use opendevicelab.com

80. Send the finished site to your client and get feedback

81. Fix and change any requests by client

82. Send updates to client and wait for client sign-off

Once you’re happy with the site you have developed you can start thinking about the Launch process and ofcourse how to get the maximum value out of the launched site. There are many tools out there to help you reapmaximum benefit for yourself and for your clients.

Besides actually monitoring your site, make sure you’ve thought well about Search Engine Optimization andSocial Media Marketing. Although this is an ongoing process, you need to ensure you’ve got the basic set upright.

Also remember – a fast website is a pleasant website. Make sure your site has been optimized for performance.

Social – if you do it right, Social traffic will be the best source of traffic for your website. Spend enough time on itto get it right the first time.

Are you sure you’ve ironed out all the kinks?

The few days of testing before a website launch is always a bit hectic (at least it used to be for us). So manysmall things to change and test and confirm and re-confirm. Sometimes we sort of lose track of what’s done andwhat isn’t.

We believe we’re not alone. However, we’ve now made a major step forward and fixed many of ourcommunication problems with a simple, easy to use tool which has given us lots of peace of mind.

8/12

You won’t magically improve your memory and starting remembering things you’ll need to do – but if you just listthem down together with our pre-defined list of tasks, we’ll take that load off you and keep them safe for you inBeeWits until you’ve sorted them all out.

Check BeeWits Early Access TODAY, setup your next web design project and see how it can help you too.

Website Design Checklist Stage 4 – Launch

Stage 4.1 – Analytics

83. Register and verify site with Google WebMasters

84. Create a new property and implement Google Analytics code.

85. Make sure you link Google WebMasters and Google Analytics to be able to get better insights from withinGoogle Analytics

86. Exclude relevant IP addresses (such as office IP) from analytics tracking to ensure your own company’s andthe client’s company do not inflate their website hits

87. Set up any funnels, goals or tracking events which have been properly created in your analytics software

88. Implement visitor tracking software such as HotJar, CrazyEgg, or Optimizely

89. Implement any site uptime monitor such as Pingdom

90. Implement a website backup service as necessary

91. Sign-off the deliverables and invoice your client

Stage 4.2 – Search Engine Optimization

92. Check that all pages have unique page titles (with a recommended length of fewer than 70 characters,including any keywords).

93. Check that all pages have unique meta descriptions (with a recommended length of fewer than 156characters, including keywords) – the meta description should be human friendly – not optimized for searchengines. Think about it this way: “If you wanted to use 156 characters to describe exactly what that articlecontains, what would you say?”

94. Verify that pages have your chosen keywords included without any keyword stuffing (do not over emphasizeparticular keywords)

95. See that all pages have metadata which is properly in place (with correct spelling and grammar) for anycontent which you want to be shared via Social

96. Ensure that relevant Alt tags have been added to every image.

97. Make sure that a dynamic XML sitemap (which gets updated with every post you make) has been createdand verify that the XML sitemap has been submitted to search engines via Google WebMasters.

9/12

98. Ensure that Google is able to read it correctly.

99. Submit to Bing and possibly Yandex WebMasters too.

100. See that all page URLs consistently reflect site information architecture.

101. If you have had another older website, make sure you have 301 redirects in place for all old URLs(redirecting old pages to new ones).

102. Where necessary ensure that rel=”nofollow” tags are in place on applicable links and pages.

103. Use schema creator to insert Microdata into your pages (or tag your content in google WebMasters DataHighlighter)

104. Check the semantics of your site using this

For more tips, check out our SEO post!

Stage 4.3 – Speed and Performance

105. Try to get a PageSpeed score of 90+

106. Minify your javascript

107. Minify your CSS

108. Add Expires Header – Leverage browser caching to ensure that files which don’t change often are fetchedfrom the browser cache rather than downloaded again

109. Ensure a Yslow score of 85+

110. Optimize the size of images using Y! Smush.It and replace the existing images with the optimized images

111. Specify image dimensions for each image

10/12

112. Enable gzip compression on your hosting server

113. Ensure there are no bad requests, such as missing images or files

114. Combine images using CSS Sprites (use SpriteMe.org to help you generate the sprite image)

115. Reduce the number of HTTP requests by combining the CSS and JS files into as few files as possible

Stage 4.4 – Usability

116. Check for HTML5 compatibility using modern.ie, modernizr, and Compat Inspector

117. Create a Favicon generator for each platform here

118. Enable user and search engine friendly URLs

119. Set up a print stylesheet

Stage 4.5 – Social Media

120. Add Facebook Domain Insights to your page to see how people are interacting with your website onFacebook using this

121. Link your website to your Google+ Brand page via instructions found here

122. Add humans.txt

123. Create new cover images for other Social Media you use such as Facebook, Twitter, LinkedIn companypage, Pinterest, Instagram or others as necessary

124. Send the finished site to your client and get feedback

125. Fix and change any requests by client

126. Give access to client to all accounts created on their behalf

127. Send updates to client and wait for client sign-off

11/12

128. Close project

If you always have that nagging feeling at the back of your mind that you’ve missed out on something – we’vegot a way for you to rest easy. BeeWits helps you keep track of all you need to do for your next web designproject – the good thing is that it takes minutes to set up your next project because we’ve added task templatesfor you already.

See how BeeWits can help you next project by signing up for our Early Access program. Besides months of freeaccess, a $1000 to spend at Envato is up for grabs so sign-up now for Early Access and help us help you.

Congratulations! Your project is now done, give yourself a pat on the back – you earned it! For more tipsand tricks check out our 101 Tools for Web Designers!

Our website design checklist has made it much simpler for you to see what you need to do for your web designproject but how many little bitty issues did you miss out? Did you manage to remember everything?

12/12