A personal website checklist from experience.

Checklist.md

External website checklist

This checklist is a dump of random ideas from my past two website projects. It is a work-in-progress and not yet organized.

Step 1 - Sales and planning.md

Sales and planning

Reading an RFP

Responding to an RFP

Sales presentation

Project management

• Create a vacation calendar for the team.
• Create a risk log.
• Create an impediments log.

Project kick-off

• Introduce the team and client.

Step 2 - Design and planning.md

Design and planning

Internal collaboration

• Create a team.
• Create an extranet teamsite to allow file collaboration with the client.
• Get a list of names and email addresses from the client and create these external accounts.
• Give clients' access to extranet teamsite.

Company research

• Brand book
• Business orientation
• Competitive analysis
  • URLs, site structure
  • Keywords
  • Site ranking
• Existing marketing materials (non-web)
• Existing site and related sites
• Internal site search analytics
• Office or site tour.

Design and user research

• Archetypes
• Customer interviews
• Design principles
• Empathy mapping
• Jobs to be done
• Journey maps
• Listening labs
• Roadmap
• Site content inventory and audit
• Sitemap
• Stakeholder interviews
• Skateholder questionnaire
• Usability testing
• Website goals

Requirement gathering

• Create a list of non-functional requirements around the following topics:
  • Performance
  • Security
  • SEO and analytics
• Create a template for user stories
• Start writing user stories

Wireframes

• Create wireframes for key pages.

Mock ups

• Create and present a design scrapbook.
• Choose a design tool (e.g. Sketch) to build the mockups.
  • Verify that tool is available to front-end developers, potentially the client.
• Determine what brand colours have enough contrast for accessibility.

Style guide

Design reviews

• Promote design consistency.
• Social media images are 1200x630, so try using the same aspect ratio for other imagery across the site. This makes social media imagery easier to maintain.
• Remember to design common, unseen pages:
  • 4xx/5xx error pages
  • Form error messages
  • Offline page
  • Generic social media image

Analytics

• Create a measurement framework.
• Review existing analytics.

Web fonts

• Determine what fonts are going to be used on the project.
• Figure out licensing and purchase fonts.

Planning

• Start estimating development efforts for requirements.
• Prioritize user stories and roughly group them into managable sprints.

Prototype

Tools

• Storybook helps build and organize a UI library.

Content authoring

• Create a tone and voice guide.
• Create a editorial and style guide.
• Create a template schema for writing content.
• Create a content workflow (e.g. initial draft -> review -> proof -> translation -> migration -> live).
• Start research on search keywords.
• Decide on what languages the website should be in.
• Determine areas of content that require targeted content, personalization, A/B testing.
• Determine which areas that require legal content.
• Determine if content has specific structured data (schema.org) requirements.
• Remember to write content for unseen areas:
  • Error messages.
  • Text for accessibility (buttons, skip link).

Tools

• GatherContent allows content authors, stakeholders and SME's to work on content together, outside of the final CMS.

Usability testing

• Decide on a honorarium.
• Recruit participants to specific time slots.
• Make sure the prototype is available externally by the participants.
• Create a usability testing script.
• Spread out usability testing over a number of sessions, potentially over a number of days.
• Use time between sessions to tweak or make changes to the prototype.
• Have multiple versions of the prototype ready in case changes made cause bugs that prevent moving forward in the usability script.

Tools

• Lookback allows the design team to watch a remote user use the site and see their facial expressions at the same time.

Photography

• Create a photography guideline document.
  • Describe the artistic direction for specific areas of the site.
  • What aspect ratio specific shots will need to be in (some photos may be presented wider, or taller, than normal).
• Curate stock photography for backup, or as inspiration for photographer.
• Create a video guideline document.

Client environment

• Request user accounts to access the client's internal network.
  • Immediately ask for new accounts when new consultants come on board the project.
  • Do not share accounts.

Existing technologies

• Digital asset management
• Domain management
• Existing back-end systems
• Request existing website code

Infrastructure

• Determine where and who is going to maintain the website infrastructure.
• Determine if new infrastructure is necessary for the new website.
• Create a backup strategy.

Legal compliance

• Determine what legal compliances the site needs to meet (e.g. GDPR, PIPEDA, CASL, PCI).

Step 3 - Build.md

Build

Reoccuring meetings

Sprint planning

• Schedule a planning meeting at the beginning of each sprint.

Stand up

• Schedule a daily stand up meeting to last 10 minutes.
• Prevent stand up time from getting longer as the project moves into later stages.

Bug triage

• Periodically review bugs with the development team and product manager.

Walkthroughs

• Schedule a walkthrough at the end of each sprint.
• Practice the walkthrough at least once.
• Talk through steps slower than normal and repeat text that is shown on the screen.
• Potentially schedule the walkthrough and next sprint plan to be back-to-back.

Retrospectives

• Schedule a retrospective after each walkthrough.
• Review the notes from the previous walkthrough.
• End with action items for the team.

Solution setup

• Set up a source code repository.
• Set up a work and bug tracker.
• Create developer documentation for how to get the site running.

Continous integration

• Set up an environment for the source code to be built.
• Create a process for building the source code after each code check-in.
• Set up an environment for the bulid to be deployed to.
• Create a process for deploying the build after each successful build.
• Run automated tests on builds.

Environments

• Create the following environments:
  • Continous integration
  • Quality assurance
  • User acceptance testing
  • Authoring
  • Production

Code style

• Create an .editorconfig file.
• Create a .prettierrc configuration file.
• Set up SCSS and TypeScript linting on save.

HTML

• Create high resolution favicon.
• Ensure form controls have appropriate autocomplete attributes.

Practices

• Use FormFiller to quickly auto-fill forms.

CSS

• Add a utility CSS library, like Basscss.
• Consider using only postcss over SCSS.
• Create critical/non-critical CSS bundles, where critical CSS is inlined and non-critical CSS is async/defered.

JavaScript

Practices

• Keep using TypeScript.

Tools

• Use polyfill.io to polyfill older browsers.

Images

• Create an image spec sheet.

Video

• Determine a video hosting strategy.

Practices

• Make sure imagery is automatically optimized. Do not trust authors to optimize images.
• Download appropriately sized images for the current viewport using responsive image techniques, like srcset's width descriptors.
• Original images should be uploaded at 2x or 3x size and served at higher resolution to high DPI (i.e. retina) devices.
• Images should always be lazyloaded, unless we guarentee that the image is always above the fold (logo, hero image).

Tools

• ImageOptim is my favourite image optimization program for Mac.
• TinyPNG is a good web service for image optimization.
• Lazysizes is our library of choice for lazy loading.

Search

Analytics

• Get access to the current analytics tool.
• Create a list of components to take analytics on.
• Identify early where development is required.
• Create a Google Analytics property.
• Create a Google Tag Manager container.
• Set up the Google Tag Manager container with our new Google Analytics property.
• Get a list of IP addresses that should be excluded from Google Analytics (e.g. development team, internal company).
• Create a Google Analytics view
• Set up tracking events, goals and funnels.
• Set up Google Optimize.

Tools

• Google Analytics
• Google Tag Manager
• Hotjar

SEO

• Set up an XML sitemap that is dynamically updated with pages from the CMS.
• Create a robots.txt file that allows indexing on production and disallows indexing on non-production environments.
• Create a humans.txt file to include team credits for the site.

URLs

• Determine canonical URL.
• Decide on www or not.
• Decide on multi-lingual URL strategy.
• Create a list of all new URLs.

Redirects

• Create a redirect strategy early.
• Get a list of all the existing URLs.
  • Use a web scraper to scrape the existing site.
  • View top page analytics for redirects.
• Determine if there are any existing vanity URLs that need to be updated.
• Create a URL map, mapping the existing URLs to the new URLs.
• Create 301 redirects from old URLs to new URLs.

Social media

• Make sure every page can be configured separately for their social media title, descriptions and imagery.
• Determine if social media images need special treatments (i.e. watermarks, text overlays).

Tools

• Twitter's Card Validator
• Facebook's Debugger
• Google's Structured Data Testing Tool

Browser support

• Review existing analytics to determine browser support. If we have a lot of Internet Explorer users, then we may need to continue supporting it.
• Consider that certain areas of the site may not have the same audience than others, and potentially may not require the same type of support.
• Create tiers of browsers to help QA understand priority of bugs.
  • Choose a master browser, where all functionality and visuals should be perfect.
  • Create a secondary tier where some visuals may not be perfect.
  • Create a third tier where layout may be impacted, but still functional.
  • Create a list of non-tested browsers (i.e. IE9). This is useful to help explain rationale if issues do come up later.

Automated testing

Manual testing

Accessibility

• Review aria-* and role attributes across the site.
• Ensure alt attributes are on images that require it, and is blank on presentational images.
• Provide <noscript> messaging on components that require JS.
• Ensure all form controls have an associated label.
• Test colour contrast ratios across the site.
• Test the site using the keyboard only.
• Test the site using VoiceOver.
• Test the site using a screen reader.

Performance

Security

Sharing information between the development team

• Create a chat channel for the development team to work through.
• Create alerts from the build system to notify the team when builds or releases are broken.

Infrastructure

• Enable gzip compression.
• Create a CDN.
• Enable HTTP/2.

Sitecore development

• Instead of repeating specific options in a gulp configuration file, try to import other files (e.g. publishsettings.target) that may have the same configuration.

Authoring

• Favour Rich Text fields over Single-line text for easier HTML usage.
• Prevent sample content from being deployed to production environments.
• Multi-lingual sample content helps testing, but can be difficult to completely remove on production. Consider removing multi-lingual sample content from the authoring environment.

Team Development for Sitecore

• Use a global TDS file.
• Continue using automated code geneartion.

Step 4 - Release.md

Post-development

Permissions

• Run a permissions workshop to create the tiers of permissions for authors, administrators.
• Determine who is responsible for giving out permissions.

Content author training

• Determine content authors' current skill level.
• Provide out-of-the-box author training materials for authors to learn before specialized training.
• Create author training documentation.
• Book training session days.
• Consider using actual content migration tasks as part of training.
• Create authoring accounts for each trainee.
• Create a list of software prerequisites for authors.

Technical knowledge transfer

Content migration

• Migrate content from GatherContent or copydecks to authoring environment.
• Proofread content.
• Migrate content from authoring environment to user acceptance testing and production environments.

User acceptance testing

• Potentially create user acceptance test script.

Deployment

• Create a deployment schedule and script.
• Create a rollback strategy.
• Test the backup and rollback strategies.

SEO

• Test important redirects post-deployment.
• Re-index site using Google Search Console.
• Run a broken-link checker.
• Submit site to Bing, Yahoo, Yandex WebMasters.

Analytics

• Test site to make sure all analytics are coming through.
• Set up tracking to determine if page rank changes.

Performance

• Run site through Google PageSpeed.

Tools

• WebPageTest

Monitoring

• Set up site uptime monitoring.
• Set up social media monitoring of website, brand.
• Set up page performance monitoring.
• Set up server resource monitoring.

Tag management

Launch

Post-launch support

Project review

• Schedule a post-launch retrospective.
• Determine if any development falls under SR&ED (tax credits).

Marketing

• Send a gift to the client team.
• Photograph the gift and client team for Twitter, Instagram.
• Create a marketing case study.
• Apply for awards.

Happy team

• Party!