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


Published on

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

Published in: Design, Technology
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

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

  1. 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. 2. Assume that you would be submitting your work to sites that recognizes good designs, like 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 ( - 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, • 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. 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 - 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. 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. 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!!