SlideShare a Scribd company logo

Static site best practices

•Download as DOCX, PDF•
•
Allanki Srinivas
Allanki Srinivas

This document provides coding standards for developing static sites. It outlines best practices for writing clean, readable code that is understandable to both internal and external developers. The standards cover proper use of semantics, indentation, comments, selectors, modularity, testing cross-browser compatibility, libraries, source control, validation, performance, accessibility, and more. Developers should follow these guidelines to produce code that is organized, reusable, validated and optimized for loading speed.

Related slideshows

Web development | Derin Dolen
Web development | Derin Dolen Web development | Derin Dolen
Web development | Derin Dolen
 
Server side scripting
Server side scriptingServer side scripting
Server side scripting
 
Client Side scripting and server side scripting
Client Side scripting and server side scriptingClient Side scripting and server side scripting
Client Side scripting and server side scripting
 
1 of 1
Static site Coding Standards. The purpose of the static sitecoding standards document istocreate abaseline for collaboration andreview within various aspects of the HTML project andthis document will helpdevelopers tounderstand how he/she canwrite better code, sothat other developers canbetter understand it. Do’s Use semantics elements: Code should bereadable andunderstandable by allmembers ofthe team. Thisincludes internal andexternal developers. Make code beautifier: Aspages might (andwill)grow, managing HTML canbe hard. Souse Indent nested. Use Web Components: Extend HTML with your own components byusing polymer. Place JavaScript at the bottom Whenloading ascript, the browser can’t continue until the entire file has beenloaded. Ifyou have JavaScript files inorder toadd functionality, place those filesat the bottom, this isagood performance practice andthe results are reallynoticeable. Organize your code with comments: Let’s keep our styles organized inlogical groups andprovide a comment noting what the following styles pertain to. Otherwise you’ll regret itlater. Build proficient selectors: CSS selectors cangetout ofcontrol ifthey are not carefully maintained. They caneasilybecome toolong andtoolocation specific. Modularize your code: Building reusable components tomaximize the reusability and minimize the code size. Test cross-browser & Device’s issues: Cross-browser/ Devices compatibility issues are amajor problem for front-end developers, especially due toIE.If you testyour documents onFirefox/IE/Chrome while writing it,cross-browser rendering problems will be mucheasier tofix. Third-Party Libraries: Third-party code andlibraries should never be modified andtheir original source andthe license must bedocumented and be appropriate for aproject. Use source control: The code should be committed tosource control inanunmodified state, or simplyreferenced independency management components that resolve the filesinabuild. The final products will be compressed with the rest ofthe source for delivery. DependencyManagement: Alldependencies are managedby npm. Validate code: Aconcerted effort should be madetoensure your HTML andCSS validate Use Cache /cookies: Cache the static contents, images,java scripts, CSS for better performance. Render images properly: Load imagesprogressively and user proper name andalttagfor each imageanduse vector imageswherever possible. Keeping Text Responsive: Tosimplifyyour site’s typography, ditch the pixel andstart using ems. Emsallowfor aneasier understanding of scaling between your site’s font sizes, andtheir smallerunits are more manageable than the double-digit numbers ofpixels. Reduce mark-up: whenever possible avoid superfluous parent elements when writing HTML. Accessibility: The developer ofthe frontend makessure that your website is responsive and works oneachplatform Video on the web: Be careful withthe autoplayattribute. Give controls tocontrol the videos. If youwant tobe truly cross browser compatible then you should export avideo asMP4 and WEBM. Make page responsive by default: Addresponsive behavior for eachpage bydefault Add page title and required Meta tags: Page titlesand Meta descriptions and Meta keywords areimportant because they tellthe searchengines, andyour users, the focus of each page. Optimize the loading speed ofyour web pages: Ifyour webpage takes more than 4seconds toloadbe sure that you have lost aconsiderable amount of potential clients. Don’ts  Don’t use $(document).ready()  Do not use all caps or all lowercase titles in markup  Don’t deepened much on third –party tool  Don’t use images names randomly  Don’t skip form labels  Don’t nest more than 3 levels inSASS.  Don’t use different font families ina single project.  Never use inline styl

More Related Content

Static site best practices

  • 1. Static site Coding Standards. The purpose of the static sitecoding standards document istocreate abaseline for collaboration andreview within various aspects of the HTML project andthis document will helpdevelopers tounderstand how he/she canwrite better code, sothat other developers canbetter understand it. Do’s Use semantics elements: Code should bereadable andunderstandable by allmembers ofthe team. Thisincludes internal andexternal developers. Make code beautifier: Aspages might (andwill)grow, managing HTML canbe hard. Souse Indent nested. Use Web Components: Extend HTML with your own components byusing polymer. Place JavaScript at the bottom Whenloading ascript, the browser can’t continue until the entire file has beenloaded. Ifyou have JavaScript files inorder toadd functionality, place those filesat the bottom, this isagood performance practice andthe results are reallynoticeable. Organize your code with comments: Let’s keep our styles organized inlogical groups andprovide a comment noting what the following styles pertain to. Otherwise you’ll regret itlater. Build proficient selectors: CSS selectors cangetout ofcontrol ifthey are not carefully maintained. They caneasilybecome toolong andtoolocation specific. Modularize your code: Building reusable components tomaximize the reusability and minimize the code size. Test cross-browser & Device’s issues: Cross-browser/ Devices compatibility issues are amajor problem for front-end developers, especially due toIE.If you testyour documents onFirefox/IE/Chrome while writing it,cross-browser rendering problems will be mucheasier tofix. Third-Party Libraries: Third-party code andlibraries should never be modified andtheir original source andthe license must bedocumented and be appropriate for aproject. Use source control: The code should be committed tosource control inanunmodified state, or simplyreferenced independency management components that resolve the filesinabuild. The final products will be compressed with the rest ofthe source for delivery. DependencyManagement: Alldependencies are managedby npm. Validate code: Aconcerted effort should be madetoensure your HTML andCSS validate Use Cache /cookies: Cache the static contents, images,java scripts, CSS for better performance. Render images properly: Load imagesprogressively and user proper name andalttagfor each imageanduse vector imageswherever possible. Keeping Text Responsive: Tosimplifyyour site’s typography, ditch the pixel andstart using ems. Emsallowfor aneasier understanding of scaling between your site’s font sizes, andtheir smallerunits are more manageable than the double-digit numbers ofpixels. Reduce mark-up: whenever possible avoid superfluous parent elements when writing HTML. Accessibility: The developer ofthe frontend makessure that your website is responsive and works oneachplatform Video on the web: Be careful withthe autoplayattribute. Give controls tocontrol the videos. If youwant tobe truly cross browser compatible then you should export avideo asMP4 and WEBM. Make page responsive by default: Addresponsive behavior for eachpage bydefault Add page title and required Meta tags: Page titlesand Meta descriptions and Meta keywords areimportant because they tellthe searchengines, andyour users, the focus of each page. Optimize the loading speed ofyour web pages: Ifyour webpage takes more than 4seconds toloadbe sure that you have lost aconsiderable amount of potential clients. Don’ts  Don’t use $(document).ready()  Do not use all caps or all lowercase titles in markup  Don’t deepened much on third –party tool  Don’t use images names randomly  Don’t skip form labels  Don’t nest more than 3 levels inSASS.  Don’t use different font families ina single project.  Never use inline styl