f t i +
Websites

A Web Design Process Checklist for Agencies

Michelle Chu

Launching a new website is an easy task - just drag and drop sections, add content, push a button, and voilà! Within minutes, your new website is live and in the number 1 spot of Google’s search results pages.

If only it were that easy...

Once designs are approved and development is completed, there are a few additional steps to take before wrapping up a project. While launching a site isn’t as easy as pushing a giant green “GO LIVE” button, it can be [relatively] painless and straightforward if you follow the list below.

Final Design Check

In our process, this step is a combined effort from the design, development, and account management teams. We make sure all aspects on the developed site visually align with the approved designs.

invision-logo-pink.png

  • InVision Mock-Ups: Check developed pages against InVision mock-ups, and double-check comments to make sure everything is covered.
  • Stock Images: Make sure all stock images have been purchased and there are no images with watermarks on the site.
  • Favicon: Add a favicon to the site before launching. This task is easily overlooked.
  • Responsiveness: Navigate to the site on various devices to check that the design flows naturally and views correctly on multiple devices.
  • Fonts: Does the site have all the correct fonts? An important note is that if you’re using Typekit, the final domain needs to be added to the kit, not just the staging URL. Otherwise when you push live, you’ll see unappealing default fonts, which may affect font-size and layouts, which may break the site (just kidding...but it’s a slippery slope).

Double-Check Content

A sure way to weasel your way into amateur hour is by having Lorem Ipsum text all over your site. Hopefully final copy is completed by the time you’re preparing to launch the site (otherwise….don’t launch it yet).

  • Final Copy: Check every page for final copy, grammar, and spelling. Sometimes things are copied and pasted, and the formatting becomes jumbled. Take the time to read through each page; ensure there are spaces after periods, and check that the client’s name isn’t misspelled on their About Us page.
  • Copyright: Set the copyright date dynamically so that it’s always pulling the current year.
  • Punctuation: For designs that have titles or buttons with all uppercase letters, it can be easy to miss a punctuation mark here or there. Check for consistent punctuation and letter-spacing because details are important people! I mean, details are important, people!
  • Downloadable Files: Make sure that CTAs or landing page forms link to the correct PDFs and that the PDFs are migrated over to the new site.

Don’t Forget About Functionality

People don’t just look at a site, they also interact with it. Check to make sure the site functions the way it is intended to.

  • Links: During a punch phase, or a final check of the site, all final links should be inserted so both you and the client can test that links are leading to the correct pages. Any buttons or CTAs on the pages should also be linking correctly.
  • Forms: Test the forms by filling them out. Do they submit correctly? Are the correct people being notified when forms submit? Is there a thank you message? Because we’re not just a digital agency - we’re a polite digital agency.
  • Compatibility: Sometimes different browsers or devices render a site differently. It is vital to check not only how a site looks on different browsers/devices but also how it functions. Check that popups are actually popping up, that sliders are actually sliding, that… you get the picture.

SEO For The Win

Part of a marketer’s ongoing battle is optimizing pages to reach (and maintain) that top spot on Google’s search results pages. Here are some things you can do when launching a new site that will help ease said marketer’s state of mind.

SEO.jpeg

  • 301 Redirects: When redesigning an existing site, make sure previous SEO isn’t lost - create 301 redirects from the old pages to the new ones.
  • 404 Page: Ensure that a 404 page exists for the site.
  • Sitemap: Create a sitemap and submit it to search engines so they know to crawl your site.
  • Metadata: Add meta description and title tags to pages, and make sure images have alt tags.
  • Site Speed: Check site speed, and implement any necessary fixes.
  • Optimize Images: There’s nothing worse than sitting in front of a screen waiting for gigantic images to load. Use JPGs where you can and run PNGs through an image optimization tool such as ImageOptim.
  • Analytics: Don’t forget to implement tracking codes on your site. You’ve gone through all the work redesigning and developing a site to achieve various goals, such as increasing traffic, directing visitors to specific product pages, and gaining rankings in SEO. Without analytics, there’s no way to measure the success of your launch.

How-To Session: Training A Client

This is an important step in a site launch for two reasons:

1) It educates the client on how their site was built.

It’s often not enough/not appropriate to tell a client that the site was built a certain way “because we said so.” Maybe the client wanted the ability to feature certain blog posts on the homepage, so we made the posts editable manually rather than using an automatic feed. Knowing how a site is built ties into the second reason below.

2) It empowers the client to make changes to the site on their own.
In a completely self-serving world, we would build sites that are so complicated in the back-end that the client takes one look, freaks out, and pays us for every single time they need to make a small copy change or switch out an image.

However, we prefer to build pages that are easy enough for non-technical marketing personnel to edit. We understand that the majority of people who will be working on the site in the future may not be HTML or CSS wizards, but they do want the flexibility and know-how to change copy, banner images, or even layouts. 

This is an overview of what you can do to make your site launch go as smoothly as possible. While it may seem like a lot to do after the actual development of the site, it will help make sure your bases are covered and you’re ready to launch. Now remember that giant green “GO LIVE” button? You can go ahead and press it now.

pressing-all-the-buttons-in-elevator_1159.gif

Follow us on Facebook, Twitter, Instagram, and LinkedIn to keep up with industry trends and to see a sneak peek of our lives in the office.


Definitely not spam

Sign up for our newsletter

Don't worry - we only average, like, two emojis per subject line.

Got a question for Michelle Chu?

Message the author of this post and they'll get back to you.

Fire Away