Points to check before launching website

For anyone who is delivering websites with deadly deadline; there are many chances to miss a few points. To overcome the lag it is better to have a checklist to go through before the launch. When many developers are contributing to the project, it is better to brainstorm and prepare a list to go through at the end. The list may be drawn based on the scope of the project whether the site / application is repsonsive, accessible or print support.

File Structuring

1. Supporting files in proper folders (img, css, js, downloads)

Maintaining proper project folder structure helps to organize easily and stick to a proper workflow which will avoid conflicts in a team.

Header

2. Use a correct Doctype preferably latest version. ( !DOCTYPE html )

You can read here for more information

3. Include Favicons

Favicons is a quick identity to our websites. Read on how to implement favicons to our websites.

4. Viewport tag with user-scalable attribute for responsive websites.

Viewport tag is the first step towards responsive design approach

5. HTML page should have appropriate title text

Title content is getting listed in the search engine page results. Content in the title tag is what getting reflected on the browser’s toolbar. It is the content which is shown in the bookmarks when marked as favorites.

6. HTML page has keywords and description

Keywords and description in the HTML page are very important if our website aims at SEO.

7. Add HTTP-equiv tag

8. Add CDN links

9. Checking whether fonts are available

If Google fonts are used, need to check if links are added and if custom fonts are used making sure that fonts are downloaded correctly.

10. Add charset attribute




Images

11. Optimize images for minimum file size

12. To reduce the image size use this site (tinypng.com)

13. Use gif/jpg/png formats (whichever is small in file size without loss of quality).

14. Use “alt” attribute for all descriptive images

15. Use “title” attribute for all text links

16. Image and popup image (if it is present) link carries the corresponding image

17. Logo image in sub pages are linked to home page

18. Icons are either of the format svg or retina.

Coding conventions

19. Using HTML5 semantic tags.

20. Do not use inline styles and internal styles within html.

21. Link CSS files at the top and Js files at the bottom

22. Avoid deprecated tags.

23. Avoid extra markup or classes

24. Make sure that there is no error thrown by script across all browsers.

25. Check whether all console errors are cleared




Testing

26. Check mobile usability of websites

27. Check in devices for understanding how websites are rendered in devices


If you have something else to add/ share let us know.

Subscribe to Creative Technocrayts for free and be a part of growing community.

Comments

Post a Comment

Popular posts from this blog

What are some mistakes people make when they start learning HTML, CSS and JavaScript?

Image
Using id instead of class names Many beginners are tending to write CSS using id names instead of CSS class names. We should always aim to reuse the code as much as possible. By using id names we are applying styles only to that particular div rather than sharing the styles which are common to div s having the same class name. Do read this article which gives a practical approach to maintainable CSS . Not using CSS shorthand Using CSS shorthand will come as a second nature by practice. Until then we need to force ourselves to write CSS in the right way. While working on a large project, we will notice that by using shorthand properties the number of code lines in CSS file will be reduced reasonably. CSS Measurements 0px is just a 0. There is no need to mention if it is a px or em. Following a standard measurement throughout the project is important. Be it px or rem, it should be followed by all for the project. Using relative values are encouraged more than absolu
Read more >>

How to initialize Datatable plugin?

Image
How to initialize Datatable plugin? Datatables.net is a sophisticated plug in built on Jquery, JavaScript library which provides more functionality to normal HTML tables. The plug in offers search, pagination and sorting functionalities. The assets file can be downloaded From the website, CDN From website: https://datatables.net/download/index CDN Links: https://cdn.datatables.net/ Basic Implementation of Datatable Write the basic markup of the table with data Add a class name to the table Include all the assets As Datatables.net is built on Jquery, make sure that Jquery is downloaded before data tables Sites Followers Rank Country SitePoint 11456 5 Canada Learnable 123449 3 USA Flippa 143567 1 Brazil $(function(){ $("#example").dataTable(); }) You may continue th
Read more >>

Datatables.net - Plugin options

Image
Datatables jquery plugin options In PART i of this series we have discussed the basics of datatables.net plugin Datatables.net has a wide set of options which gives extensive interface support and browser compatibility. The following article clearly explains how to utilize the options provided by the plugin. The datatables.net CDN links for style sheet reference https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css https://cdn.datatables.net/responsive/2.2.1/css/responsive.dataTables.min.css The datatables.net CDN links for script reference https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js https://cdn.datatables.net/responsive/2.2.1/css/responsive.dataTables.min.css To disable all options $("#example").dataTable({ paging: false, searching: false, info: false }); To display “Show entries” at the bottom of the data table $('.promo-pricing-table').dataTable({ "dom": 'frtlip' }); }) To display “Show entries” at the
Read more >>