This isn’t your typical website development how-to guide. In fact, I wasn’t quite sure who the audience for this guide would be. Development, design, user-experience – those are all considered separate roles. But if you happen to find yourself in a project management role, or if you’re choosing to wear all these hats at once, you’ll find this guide useful. What I am sure of is if you’re looking for how to create a website the easy way, this isn’t for you.
The following checklist is the same we use at So Good Digital to create websites. You will find this checklist has a fine mix of technical web development, general best practices, and even some marketing essentials. Be prepared to jump from beginner to intermediate, in no particular order.
What we know for sure is, when building a website, quality is in the details. Thus, it would be a disservice for us to skip them.
Because owning a successful website should be more than having a glorified brochure on the internet. It’s about a page that ranks well by Google and is organically found by your customers, is secure from any threats, and performs at an adequate speed to engage users with even the shortest attention spans.
So, let’s build a site that has all those qualities. Just remember – there are no shortcuts here. Don’t even think about skipping a single step.
How Is Your Website Being Built?
Our two choices for website development are either WordPress or to build a custom bootstrap solution. WordPress has been accepted as the universal all-in-one web management platform and is simple to install and even simpler to update. However, it does help to know the limitations of the platform. If you’re choosing to use Wix or Squarespace (or any other what-you-see-is-what-you-get alternative) to create a website, just know you won’t be able to do much of what’s outlined below. The lack of customization will have negative effects.
- If you’re going the WordPress route, check the WordPress installation guide and download the latest version of the platform.
- If you’re creating an eCommerce store – check to see how Shopify or WooCommerce will integrate with your choice of platform.
- Finally, whichever platform you choose to go with, is your platform easy to upload to your hosting server?
Your Website Hosting
This guide assumes you’re not hosting on your own server; although that’s certainly an option if you have the know-how. Most individuals, however, will choose to pay for a hosting plan.
Your host is responsible for housing, serving, and maintaining files on your websites. They have a data centre and you’re paying them to rent space on a computer to hold your website. Straightforward. When choosing a host, a couple of questions:
- How reliable are their servers? Downtime and speed issues should be rare.
- Do they have a plan that fits my needs and can I upgrade/downgrade with ease?
- Can I purchase a domain, and will multiple domains be supported by the same host plan?
- Have you purchased a domain elsewhere? If so, get ready to pay to transfer the domain or to update the DNS to point to your new host.
- What’s the cost difference between the sign-up offer and the subsequent renewal costs?
- Will your host provide email addresses for your domain or are you choosing to purchase G-suite through Google?
- Will you or your developer have easy SFTP access?
- Can you easily navigate and use the control panel?
- Are SSL certificates included or, if not, at what additional charge?
While So Good Digital offers affordable web hosting packages with the help of GoDaddy, we are more than happy to recommend a competitive host that meets your needs.
One of the most important things we look for is site speed. While most hosts will provide a service that is “good enough”, a slow load rate has been known to negatively affect search engine ranking and can be a death knell if your site fails to load fully before the visitor chooses to leave.
How to Create a Website: Pre-Launch Checklist
If you’re building a website, you probably have something you want to communicate to the world. Start by collecting everything you will use to get your message across. Graphics, slogans, blurbs, GIFs, and photos; bring it all together and take inventory ahead of time. If you want to stay efficient and minimize revisions with your designer (or save yourself the future grief) it’s best to have everything prepared.
- Depending on the platform you choose to use, you’ll either want to find a downloadable theme or create your website wireframe. More than just a mood board; a wireframe is the perfect way to arrange all the pieces of the puzzle before starting the development process.
- Bring together digital assets – or begin creating photos, videos, designs. Make sure they are sized appropriately and compressed for web. No, your vertical photo will not make for a good hero image.
- Using stock photos? Make sure you purchase the appropriate license.
- Allocate time and effort for content creation/copy. Your web copy should be unique and ready to make an impression. Once your have a wireframe, you’re better positioned to write copy that identifies with the page.
How to Design a Website
In addition to having an eye-for-design, designers are often formally trained and have years of practice creating appealing web designs.
Here’s a short list attempting to summarize their work:
- Do your visitors have clear next steps with how to interact with the site?
- Have a hero visual that, perhaps most importantly, invokes the user’s focus.
- Does this design invoke emotion? Leaving an impression is the first step to converting a user into an evangelist and having them return.
- Is your design communicating your message clearly? Images speak louder than words, so find the appropriate balance.
- The navigation menu should be simple. Rule of thumb being no more than 4-6 top level categories.
- Breadcrumbs are a simple way to make sure users know where they are on the site and is a good practice for search engine optimization.
- Understand the F-layout in web design, and know your users are likely to skim your web content in a Z-shaped pattern.
- Be consistent with your header, footer, and logo placement.
- Based on step 25, your logo will, most often, be aligned in the top left.
- Add an integrated search box for easy navigation.
- Have multiple calls-to-action throughout the page to get users engaged.
- Include forms for visitors to leave their personal information.
- Repeat your primary action multiple times – are you hoping your visitors download an asset or share your content? Remind them of your intent.
- Forget Flash animations. The year 2003 has come and gone. We’ve moved on to better things.
- Enter the new age with responsive design – have graphics move on scroll or during mouse-overs to impress.
- Make sure your videos are click-to-play (not automatic) and are optimized for web.
- Keep it to three header levers: h1, h2, and h3. Rarely are more levels needed.
- Keep it at two font levels, consistent with your brand, throughout the site.
- Choose a font size that’s at least 14pt.
- Make sure links are obviously links – underline or color them!
- Long texts should have a show-hide feature.
- Include pop-ups where necessary but keep them unobtrusive and make sure they have a clear intent.
- Adapt your design to a variety of devices – mobile, table and desktop.
- Make the design beautiful, but not bloated; it needs to load fast on all devices.
How to Perform a Website Design Review
You’ve mocked up a design and you’re almost ready to start coding. Just a quick review to make sure you’re ready for the next stage:
- Compare the approved design with your templates or child theme for any discrepancies in the formatting, fonts, layout, design, content and style.
- Go back to your design and check your spacing, colors, navigation, line height and font styles for consistency.
- And once again, check the image sizes and image quality to ensure they are compressed for the web.
Your Website HTML Header
The following is what we consider to be HTML essentials. It’s everything you need to call in your header. If you’re using WordPress, some of this will hidden in the “Customization” tab. If it’s not easily accessible, you may have to customize the theme to be able to add code to the header (remember when we mentioned platform limitation?).
Some WordPress themes and front-end frameworks will include these, but it’s highly encouraged to double-check and customize everything to your particular site.
- Declare the Doctype, typically HTML5, at the top of all your HTML pages.
- The charset declared (UTF-8) is declared correctly.
- Declare the viewport correctly.
- Use a descriptive, keyword-rich, title on all website pages.
- Your meta description is provided, it is unique, and doesn’t possess more than 150 characters.
- Check that your website favicon has been created and displays correctly.
- Apple Web App Meta: Apple meta-tags are present.
- Windows Tiles: Windows tiles are present and linked.
- Use your canonical tag, rel=”canonical”, to tell Google this is the master copy of a page and to avoid duplicate content.
- Language attribute: The <code>lang</code> attribute of your website is specified and related to the language of the current page.
- Alternate language: The language tag of your website is specified and related to the language of the current page.
- If your web site has a blog or articles, it’s good practice to provide the RSS link.
- Inline critical CSS is correctly injected.
- Facebook Open Graph is injected, and images are created for an easy social media sharing experience.
- Similar to Facebook Open Graph, create a website Twitter Card to make sure that anyone who shares your link on Twitter can do so without issues.
How to Review Website HTML
Some things to note after you have coded your site and are ready to review.
- Make sure all HTML5 semantics are used properly – header, footer, etc.
- Create your website error pages: a 404 page and 5xx.
- Write code that’s W3C compliant.
- Use tools like HTML Lint to find any issues.
- Make sure there are no broken links in the page.
- Ensure your website shows your content correctly with adblockers enabled.
- Check the Webfont size. Make sure the font families you are calling don’t exceed 2MBs.
- Consider controling loading behavior with a webfont loader.
How to Review Website CSS
Keeping your stylesheet stylish, but also efficient.
- Ensure the website is using responsive web design, meaning it responds to the user’s behaviors and screen size.
- Create a website CSS print stylesheet so that if your page is printed, it comes out in a user-friendly format.
- Avoid embedding CSS in <style> tags or using inline code.
- Ensure all CSS files are minified.
- Double check stylelint so that all CSS or SCSS files are without error.
- Did you test all CSS elements with the correct breakpoints?
- Are the CSS elements working on every current desktop browser (Safari, Firefox, Chrome, and Internet Explorer?)
- Did you test all CSS elements on every mobile browser (Android native browser, Chrome, Safari?)
- Are all pages working on all current operating systems (Windows, Android, iOS, Mac?)
- Use a <noscript> tag in the HTML body if a script type on the page is unsupported.
- Avoid errors by making sure nothing is flagged by ESLint.
Review Your Website Images
A quick review to make sure all images are seen as you had planned in your wireframe.
- Ensure all images are optimized to be rendered in the browser.
- Set width and height attributes on the image if the final rendered image size is known, or better yet, solidify CSS sizing.
- Ensure all images have an alternative text which describe the image visually.
- Ensure images are lazyloaded. Provide a no script fallback, just in case.
How to Create an Accessible Website
It’s important that all users, regardless of disability type or severity of impairment, are able to interact with your website.
- Create a website that meets the Web Content Accessibility Guidelines 2.0 AA (WCAG 2.0 AA) standard.
- All pages have an H1 and all headings are used in the appropriate order.
- Use the WAVE tool to test if your page respects the accessibility standards.
- Test your website using only your keyboard. All interactive elements should be reachable and usable.
- All pages were tested in two or more screen readers (such as JAWS, VoiceOver, and NVDA).
- Test and evaluate your website using the W3C Web Accessibility Initiative.
Measuring Your Website Performance
An important step of creating a website should be remove the bloat to improve website performance. A site that loads well is also beneficial to your site’s search engine optimization (SEO) health.
- Ensure the weight of each page is between 0 and 500 KB.
- HTML should be minified.
- Images, scripts and CSS need to be lazy loaded to improve the response time of the current page.
- Be sure each cookie doesn’t exceed 4096 bytes and your site doesn’t have more than 20 cookies.
- Resources prefetching should be requested in advance.
- Enable preloading for site assets.
- Test your site speed using Google PageSpeed and ensure your pages have a score of at least 90/100.
Technical SEO Basics For Creating a Website
The first things you need to make sure Google indexes your site properly.
- Install Google Analytics correctly configure it to your site.
- Create a website sitemap.xml and submit it to Google Search Console.
- Ensure your robots.txt is up-to-date and not blocking current webpages.
- Ensure pages using structured data are tested and are without errors. Structured data helps crawlers understand the content in the current page.
- Provide your HTML sitemap and make it accessible via a link in the footer of your website.
Testing and Debugging Your Website
Everyone has a preferred method of testing and debugging. If you had followed this guide, you probably tested the majority of your code. But even if there are no technical concerns, at the end of the day user experience is key. Our favorite testing method is this:
- Run over to a trusted friend (or professional beta tester) and ask them to try and break your site. Get their honest opinion. If something confuses them, it will probably do the same to your visitors.
After all of this, some good news: you have yourself a website. Not only that, but now you know how to create a website to a professional standard. If you followed our instructions it’s beautiful, user friendly, and accessible. We’re all so proud.
However, your journey to optimize conversions and rank on Google has just begun. Keyword research, blog topic generation, and competition analysis is now on your to-do.
But that’s a checklist for another day.