Web Design Roulette Checklist, “DIY” vs “Invest for Success”

Website Design Quote is not a gamble

I often get asked to give a quote “off the top of my head“, or an estimate based on very little information other than a flash view of a current website.

Trying to explain where all the time is spent over the seemingly large amount of money that is being considered can be very frustrating.  Yes you can have a fruitful DIY stab at it yourself using Wix, Squarespace, your hosting provider’s site designer package, Dreamweaver and/or many other software solutions but what about all the “codey” malarkey that makes your site bring in search visitors?  When you pay someone to design your site you are also paying for their expertise in building the right way from the beginning and able to build on further with a solid foundation.  It’s a bit like building a structure in that you either want a garden shed or a full blown holiday resort.

With the aid of a list from another site I admire, I have added to it, taken away from it and then stopped.  I realised I could never complete this list because requirements for the web change on a swift and thoroughly irregular basis, and also per client needs.

Take the new GDPR requirements and site security for example, they aren’t covered in this list.  There are millions of sites out there without SSL Certificates (we see more “This site is not secure” notifications in our browser).  Fear not, there is a shorter article (phew) that’s a bit more in-depth here (GDPR Essentials and Security Tips for WordPress).

When building a site, web designers take into account everything that Google, Bing, Yandex etc. love.  Digital bots fly through your site in milliseconds and pick through every last bit of code that stitches it together, not just the content.  Some things these bots will read on your site:

  • How secure is your site for visitors, subscribers and customers?
  • Do you have a submitted sitemap.xml. (this is not a viewable page on your site)
  • Are your page titles relevant to the content?
  • Is it also built with partially sighted visitors in mind? (this is called accessibility)
  • Is everything labelled correctly like image titles and alt text? (those strangely empty boxes for text you see in your media library)
  • Is the content full enough, without over bloating, to understand each page?
  • Are all your pages linked? (missing pages)
  • Are your keywords and phrases marked with relevant code tags?
  • Does your site have relevant inbound and outbound links?….and so much more you wouldn’t believe it!

You basically get an aggregate score using an algorithm which then places you on the results list.

Here is a long and “not exhaustive” list of things your web designer has to consider when building your site for success across the internet and on social networks.  You will most likely glaze over before getting halfway but the point will have been made i.e.  “There is a lot that happens under the hood to design a successful website“.

Project Start

  1. Define and collect briefing from client.
  2. Define and send project questionnaire to client and wait for the client’s response.
  3. Research client’s company to understand their brand, the way they communicate, their demographics, target audience.
  4. Research client’s industry to find ways of communicating specific to the industry, strengths and weaknesses, trends and other industry specifics .
  5. Get quotation(s) for development effort for project.
  6. Get quotations(s) for design or estimate design work with your own designers .
  7. Get quotation(s) for copy / content or estimate work with your copywriters.
  8. Get quotation(s) for photography / video production or estimate effort involved.
  9. Get quotation(s) for Hosting / Domain.
  10. Prepare and send proposal to client.
  11. Get approval from client of proposal and features to be implemented.
  12. Create the Project Acceptance Form , and propose timeline with milestones.
  13. Send Project Acceptance Form, with timelines to client and wait for client signoff.

Stage 1 – Project Kick off 

  1. Research and buy template used as a basis for design.
  2. Create wireframe of specific pages which require custom designs.
  3. Allocate time and effort to create the wireframes based on the estimates sent to client.
  4. Allocate time and effort for content creation / copy.
  5. Research, buy and tweak stock images or find free  images.
  6. Allocate time and effort for any photography.
  7. Allocate time and effort for video productions.
  8. Define privacy policy and other legal text required for website.
  9. Send design(s) to client for approval and wait for approval from client.
  10. Perform any required design changes.
  11. Send specifications and updates to client and wait for client sign-off.

Stage 2 – Website Development Checklist 

  1. Allocate development checklists to the various aspects.
  2. Ensure you’ve bought hosting or created a hosting space for the website.
  3. Install / configure WordPress to use the database you have created.
  4. If your WordPress site has been created already and you need to migrate it, export the database from the testing/staging server and import it to the production server.
  5. Change the nameservers of the domain you will be using to the nameservers of the hosting server you will be using.
  6. Create the website site map and structure you had defined with the client.
  7. Collect all content from the various content resources or that the client has prepared.
  8. Populate the website content with the various content items you have agreed with the client.
  9. Define a Contact Us page with correct client details and a map.
  10. Ensure GDPR checkboxes for contact forms.
  11. Populate links / icongraphy with links to relevant social media details.
  12. Create a link to your website in the footer.
  13. Add Ltd company details to the footer (lawful requirement).
  14. Send current layout to client and request feedback.
  15. Fix and change any requests by client.
  16. Send updates to client and wait for client sign-off.

Stage 3 – Quality Assurance

  1. Validate HTML using and HTML Validator.
  2. Validate CSS using a CSS Validator.
  3. Check whether your website is internationalisation ready.
  4. Make sure web copywriting has been proofread, and ran through a spelling and grammar checker to check for correctness.
  5. Check that generic content, such as lorem ipsum, has been properly removed and replaced.
  6. See that all images are in the correct places, smushed, formatted, width and height specified and working on all devices.
  7. Confirm that videos and audio files are in the correct places, formatted and working on all devices.
  8. Test all linked content, such as case studies, ebooks, and whitepapers, and verify that they are correctly linked.
  9. Test to see that all internal links across web pages are working properly.
  10. Ensure that Contact Us and other forms are submitting data properly.
  11. Verify the Thank-you message or page displayed after form is submitted.
  12. Check that Auto-responders are working properly and text in emails has been proofed.
  13. External links across web pages are working properly, and open in a new tab.
  14. Ensure that Social media share icons are working properly – that there is a good image for sharing and that the description for sharing is appropriate.
  15. Correct your metadata as necessary to ensure social media sharing is working ok.
  16. Use the Facebook linter to ensure your Facebook sharing will work well.
  17. Implement Twitter Cards and confirm it works well on the Preview tool.
  18. Ensure that company logo is linked to the homepage.
  19. Check that load time for site pages is optimized (confirm with multiple sources).
  20. Try a non-existing address on your page to check the 404 page and 404 redirect pages are in place.
  21. Integrations with third-party tools, such as your CRM, e-commerce software, and/or marketing platform should be tested to ensure they are running smoothly.
  22. Choose www vs no-www and make sure that ONLY one of them is working to ensure you don’t get penalized for duplicate content.
  23. Check website on multiple browsers.
  24. Make sure you are using the viewport meta tag:.
  25. Check that your website is mobile-friendly with at least a MobileOk score of 75 and Google sees your page as Mobile Friendly.
  26. Use correct input types for email, phone and URL input form fields to ensure these are rendered correctly on mobile phones.
  27. Check how the site looks on phone and device emulators.
  28. Test the site using real devices you have accessible to you.
  29. Send the finished site to your client and get feedback.
  30. Fix and change any requests by client.
  31. Send updates to client and wait for client sign-off.

Website Design Checklist Stage 4 – Launch 

  1. Register and verify site with Google.
  2. Create a new property and implement Google Analytics code.
  3. Make sure you link Google WebMasters and Google Analytics to be able to get better insights from within Google Analytics.
  4. Exclude relevant IP addresses (such as office IP) from analytics tracking to ensure your own company’s and the client’s company do not inflate their website hits.
  5. Implement visitor tracking software.
  6. Implement a website backup service as necessary.
  7. Sign-off the deliverables and invoice your client.

Search Engine Optimization

  1. Check that all pages have unique page titles (with a recommended length of fewer than 70 characters, including any keywords).
  2. Check that all pages have unique meta descriptions (with a recommended length of fewer than 156 characters, including keywords).
  3. Verify that pages have your chosen keywords included without any keyword stuffing (do not over emphasize particular keywords).
  4. See that all pages have metadata which is properly in place (with correct spelling and grammar) for any content which you want to be shared via Social.
  5. Ensure that relevant Alt tags have been added to every image.
  6. Make sure that a dynamic XML sitemap (which gets updated with every post you make) has been created and verify that the XML sitemap has been submitted to search engines via Google WebMasters.
  7. Ensure that Google is able to read it correctly.
  8. Submit to Bing and possibly Yandex WebMasters too.
  9. See that all page URLs consistently reflect site information architecture.
  10. If there is another older website, make sure you have 301 redirects in place for all old URLs (redirecting old pages to new ones).
  11. Where necessary ensure that rel=”nofollow” tags are in place on applicable links and pages.
  12. Check the semantics of your site.

Performance

  1. Try to get a PageSpeed score of 90+.
  2. Minify your javascript .
  3. Minify your CSS.
  4. Add Expires Header – Leverage browser caching to ensure that files which don’t change often are fetched from the browser cache rather than downloaded again.
  5. Optimize the size of images using Smush.It and replace the existing images with the optimized images.
  6. Specify image dimensions for each image.
  7. Enable gzip compression on your hosting server.
  8. Ensure there are no bad requests, such as missing images or files.
  9. Reduce the number of HTTP requests by combining the CSS and JS files into as few files as possible.

Social Media

  1. Add Facebook Domain Insights to your page to see how people are interacting with your website on Facebook.
  2. Link your website to your Google+ Brand page.
  3. Add humans.txt.
  4. Create new cover images for other Social Media you use such as Facebook, Twitter, LinkedIn company page, Pinterest, Instagram or others as necessary.
  5. Send the finished site to your client and get feedback.
  6. Fix and change any requests by client.
  7. Give access to client to all accounts created on their behalf.
  8. Send updates to client and wait for client sign-off.

For more information on WordPress, Woocommerce or training on either, please use the contact page and get in touch for a friendly and free consultation.

Linda Layhe Nugent

Pixel Vista