Checklist to design & develop a website that not only looks good, but also is clean & compliant to W3C standards

1. StrApp | Thought Gallery
@strappbs
Checklist to design & develop a website that not only looks
good, but also is clean & compliant to W3C standards
Posted on October 02,2013 by Vivek
Websites may not be the in-thing but the importance of having a website that's visually appealing and also provides a rich user
experience is more important than ever Below is a checklist that's practical & developed based on years of being involved with
designing & developing websites, categorized into the project development phases
Conceptualization & design phase
Questions & more questions: As web designers & developers, our primary objective is to be
able to deliver a site that meets the clients’ objectives. Get answers to what client wants,
likes, dislikes, what the target audience would look for on the website, etc. This is a very
important first step (probably the second, the first being signing of the contract) in the
project
Look at websites from the client's industry & benchmark against the best in that category
With all the available information, references, understanding of the client's likes & your own
creativity, coming up with a couple of design options for the client to choose from - the
possibility of the client not liking is reduced significantly. Eventually, it’s the client who needs
to approve the design. Remember, clients are like wives bosses, they are never wrong

2. Assume that you would be submitting your work to sites that recognizes good designs, like
awwwards.com does
Sketch on paper, with how the elements would be placed on the site and also would help
with being able to provide a good user experience
On completing the designs, get specific comments on the elements the customer likes &
dislikes. The next set of iterations should be close to what the client expects
Development phase
Once the designs are approved (that's 70% of the
work done), time to open up the bonnet and get the engines working • Have your project folder
well organized for your html's, images, css, javascripts
• Good to go with frameworks like Bootstrap (twitter.github.io/bootstrap) - a front end framework
for faster development
• Meaningful file names, meta tags, alt tags, h1 tags
• Keep in mind scalability & future maintenance of the site. Usage of include files for common
elements, adding comments
• Add Google analytics code, google.com/analytics
• Agree with customers on the browsers that the websites would be optimized for. If your
customer expects it to work on IE6, then the simplest thing to do is - double your time estimate
and cost (not really sure even if that would completely help)

3. • Keep the codes simple and clean. The project would be part of your portfolio, and a lot of
potential clients not only look at visual aspects, but also how the coding is done
• If the site is to be optimized for mobile devices - a few things that can be really simple but useful
UI - if you have a contact form and if there's a phone number field, ensure the numbers keypad
shows up, when user click on that field to enter the number. HTML5 makes it a breeze to do this
• Have a 404 page
• If the customer already has a website that's live, but the new version would have different file
names & a few of the old files may not be required, etc - ensure you have 301 redirects added for
these pages - so that search engines know that the address has changed and visitors would be
redirected to the new page
• If using jQuery on the website, ensure that you have tested or tried the demo version on the
browsers that you have committed to have the website working on, before you start using them
on the website. If it works fine, then go ahead and use them - save a lot of time
• Using a component like Firebug that Firefox browser has - is very useful to make quick changes
right there to see how the change reflects on the site, without having to go back to the code,
making changes & refreshing the browser. But don’t forget to copy the changes that you are
making using the firebug
• Create a sitemap for the website - try Google sitemap generator
• Have your colleagues or friends go through the website and observe their behavior. That would
give a lot if inputs on the difficulties that a visitor may have accessing the website and that's
phenomenal feedback to improve the usability considerably on the site
• Upload the site on a test server and check for the compliance with W3C - http://validator.w3.org.
Based on the recommendations that you get - have them fixed on the website and run it again to
ensure its all complied with Tip: Good practice to do this early in the development, wherein you
have created the html's for one or 2 inner pages and run a test to make the fixes - so that rest of
the pages you can avoid these mistakes - saving a lot of time later
• Google webmaster tools suggests improvements to be made on the website
• Add the legal aspects, in terms of the copyright of content. E.g. for newsletter sign up, have the

4. privacy policy clearly mentioned. This also gives confidence to users & the website would get
much higher sign ups
• Robots.txt file to be uploaded to the root of the website. If you would like search engines to not
index some folders or files, you can mention in the robots.txt file
• Fav icon
Performance
• Performance of a website is a key component from
a usability stand point. A website that visually looks good, but takes forever to load, visitors would
just close the site and move away
• Ensure the website loads fast; Chrome has developer tools that show what is causing the site to
slow down. Identify those and optimize them
• With the contact forms - a lot of times, spammers take control over the forms and keep sending
spam messages through the contact form. Sanitize content
Testing

5. links - i.e. there are links to pages on the website that do not exist
• Check for spellings - can’t go wrong here. I have seen a lot of good writers make mistakes, all it
takes to read the content a couple of times to identify them. One of the ways is also to copy the
content and paste it in Microsoft Word - it highlights the typos
• Ensure there's no "Lorem Ipsum" or any dummy content before going live
• Test the website - can’t emphasize enough. This would ensure reduced back & forth between
the customer & you, eventually saving you a lot of time
• Ensure your website works if typing it with a www or not
• Make sure you have the permissions to the use the images on the website
You have got to be inspired to deliver awesome websites and the outcome would clearly be
visible. Be awesome!!