A Website Design Checklist You Should Not Ignore

A Website Design Checklist You Should Not Ignore

Designing a website is not easy rather it is arduous and complicated. 

You will have to communicate with clients, design prototype, convert the template into code and test the entire website before making it live.

There is also no guarantee that the website will not face any issue later. You will have to keep a close eye on it 

The essence of the web design checklist is based on certain factors like:

  • Performance that will include including Google Page Speed Insights and Yahoo’s YSlow; besides tips to optimize the Headers and Images of your sites.
  • Best Practices that will ensure that your markup is in good condition and features like spell-checking
  • Mobile Analysis to check that your site works well on Mobile devices
  • Analytics checking tools so as to ensure up-time monitoring and traffic analysis
  • Accessibility to ensure that your site can be accessed using screen readers and has appropriate contrast levels
  • Usability tools to check HTML5 compliance, search-friendly URLs and more
  • SEO tools so as to analyze how accessible and readable your site is for Search Engine crawlers, etc.
  • Semantics that help check additional data within your site.
  • Code Quality for CSS, Javascript and HTML validation tools
  • Social Media to check if your website is properly connected with social media sites like Twitter and Facebook
  • Security to check best practices for securing your site and preventing offensive things like XSS

What should be on your website design checklist?

Below is a set checklist to help you make the design process easier and more organized so as to ensure that your work gets done seamlessly. a web design checklist is comprised of:

  1. A good JavaScript library 
  2. Basic SEO
  3. Regular expression
  4. Image optimization
  5. Cross-browser debugging
  6. Valid HTML/CSS
  7. Debugging software
  8. Copyright

1. A good JavaScript library 

It can make a significant difference to ensure creating a great web design if you have a good knowledge of the JavaScript language (even if it means that you do not write much in JavaScript).

So, make an attempt to learn jQuery, Mootools or so; because learning a JavaScript library will cut your JavaScript dev time in half. But, if you are thinking how it is going to help you?

Well, firstly, these libraries take the cross-browser guess-work out of JavaScript programming. This will enable you to stop feature checking and start animating.

Moreover, they offer loads of easy animation options and make selecting nodes in the DOM a piece of cake. And in case, you turn up to be one of those adventurous Javascripters, you might even want to challenge a Javascript UI language.

2. Basic SEO

It is essential for any good web developer to have a basic knowledge of SEO. Even though you can afford to leave keyword research to your clients, a developer should have the aptitude to develop sound strategies for targeting those keywords on the page.

That means clean markup and good use of title, meta, h1 and h2 tags on the front-end, as well as solid link and directory structure organization on the back-end.

3. Regular expression

Check for regular expressions not only to analyze strings, but to basically find and replace bits of text. While this may initially seem to be insignificant, the flexibility of regex makes it all the more powerful.

In fact, there are a comprehensive range of techniques for optimizing a regex string, and if taken seriously, this can mean huge differences in performance for your app. Also, it requires special mention that regular expressions can be used with just about any language.

4. Image optimization

Even though most developers rely on professional designers for designs, it is also important for them to be knowledgeable about Photoshop.

Because it is mostly found that a robust knowledge of image processing besides allowing you to make quick changes to comps without bouncing them back to the designer.

It also helps you to understand what designs are feasible when asking for certain changes.

One Photoshop skill that is particularly important for web developers to learn is image optimization. This is because image file sizes are probably the largest threat to bandwidth and optimizing images can make or break a site’s load time.

5. Cross-browser debugging

Your website will require working in all the major browsers (IE6, IE7, IE8, FF2, FF3, Safari 4, Opera 9) in order to reach as many viewers as possible.

It is true that everyone hates cross-browser debugging; because the better you get, the less you’ll have to do it. However, the best cross-browser debugging is preventative, starting with valid HTML and a good reset stylesheet. Moreover, cross-browser debugging helps you understand the various quirks specific to certain browsers.

6. Valid HTML/CSS

In recent times, it is important even for back-end developers to know how to write good front-end code, i.e. valid HTML and CSS – not a bunch of tables.

The significant part is that markup should be clean and authenticate according to its doctype, while the CSS should be separated from the HTML.

That ushers no inline styles and especially no tags. However, for starters, it is important to learn the various CSS tags and the CSS box model. That will help you learn W3C specifications on how to write valid code.

7. Debugging software

A good debugger should be on the priority checklist, considering the fact that he/she can make your web programming go so much faster. For example; let us take debugging software like Firebug when it comes to the front-end.

It not only allows you to click elements on the page and analyze which styles are being applied and from which stylesheet, it also allows you to additionally add or remove styles on the fly, as well as edit the page markup.

8. Copyright

It is indispensable for all web developers doing business, to have a fundamental knowledge of copyright and cyber law. Websites and web blogs being essentially publications, copyright issues tend to be the most common legal issue.

Starting from using user-generated content to using copyrighted Flickr images to quoting paragraphs from The Times, it is important as a developer to be aware when to expect being sued.

Michael Evans

Manager at

Michael Evans is a blogger, a part time real estate agent and did I tell you that he is an online marketing expert and yeah, he is a Google Adwords certified professional. He is currently associated with 3Leaps [https://www.3leaps.org/]

Comments (1)
Jef Lippiatt

Jef Lippiatt, Owner at Startup Chucktown

There definitely is some great information to keep in mind with your article, however, I find some of it to be a bit out of date (e.g. Mootools and supporting IE6). Also there are great frameworks to allow you to prototype in code instead of creating static designs and then translating it to code, Twitter Bootstrap and Zurb Foundation are two of the most popular. Having Photoshop skills are great, but if you are looking for a much lower barrier to entry, consider using free and open-source software like GIMP (basically Photoshop) and Inkscape (similar to Adobe Illustrator) for your needs. In fact Inkscape's native file output is ".SVG" which is great since HTML5 picked up native support for SVG.