Published on

This document is about HTML and CSS code written for integration. How to avid silly mistakes while writing a HTML / CSS code for developer

Published in: Design
  • 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


  1. 1. INTEGRATION(HTML/CSS) The technology behind AESTHETICS Contents  Introduction  How to write HTML and CSS for integration  CSS override rules  Fixing bugs after integration  Review and Modification in code
  2. 2. Introduction Integration is the process where two technologies meet. To become an integrator you must know the technique and follow the process.Integrators AIMshould be a bug-free web site and a well-integrated web site.But it is web designer’sduty to deliver quality code for integration. How to write HTML and CSS for integration After finishing UI design; web designers create or convert this design into HTML/CSS. Usually they create all components as same as UI. It is just a front-end design. To make it live; programmers bind these pages with back-end codding. And here the story starts. While creating HTML pages first step is to understand the requirement. It helps to form a structure in proper shape with the help of using appropriate HTML tags and form elements (labels, anchor tag or input button, div, list view etc.) Do not mention ID to any HTML tag and avoid using IDs to apply style to that element.Ultimately IDs are a developer’s property. In worst cases use these IDs as a hierarchy for overriding classes to target particular location of the element(s). In some scenarios it is not possible for a developer to add an ID and use it for development purpose. In this case developers use a class which was created by web designer. And it gives a major impact when integrator modifies or removes that particular class from HTML page. To avoid this possibility integrator can create a specific class for a developer which can be easily identified with proper naming convention. For example it would be ‘dev-XXX’, dev defines a developer. This class name is dedicated for developer’s purpose and do not use it for applying any style. Usually programmers do not understand HTML/CSS, the way web-designers do. If the website/Application requires integration, web designer should follow few steps while creating pages in HTML/CSS. TO DO DO NOT Consolidate identical components throughout the website/application Allow to write inline CSS or add style(s) thru JS Apply all default attributes to the table Complicate with hierarchy while creating style(s) Create global CSS classes Include header and footer in each HTML page Calculate total width of component(s) and sharp eye on alignment Create separate CSS files for each page Consistency in form elements style Duplicate all which is not needed Smart and Simple Codding Repetitive properties for classes or group of classes Add comments while creating HTML page Use IDs to apply style Add font and font-size for each element I. Consolidate identical components throughout the website/application Creating identical components for integration is a good practice; it allows integrators and developers a clear view to bind data.For development purpose it is not necessary to include complete HTML page. While writing HTML for integration, sort out identical components throughout the website/application and create all possible combination(s) in single structure with appropriate styling. It helps the integrator to choose whichever is required and designer to manage consistency in the website/application. II. Apply all default attributes to the table In some scenarios we use table layout. Always apply table attributes (cellpadding, cellspacing, border, width)It helps to display it properly in all browser windows especially in Internet Explorer.For examplecreatinga table without adding width may not occupy complete space in browser.
  3. 3. <table cellpadding=”0” cellspacing=”0” border=”0”> It is always better to follow a good practice.Applying a ‘width’ to thetable,cut down the unnecessary declarationof width for table class in CSS file, it displays always perfectthough it generates only one TD or multiple TDsif each standard has been followed. The same rule is applicable for table elements (TR, TH, and TD) Adding specific width to TH or TD will maintain the structure and it won’t get disturb based on the data. Always add specific width only for first row elements, do not repeat it to each row elements. Avoid using inline style or class to specifically apply width. TABLE, TH and TD have their own Attribute width=”” where width can be mentionedin value in pixels or in %. Try to maintain consistency of row and column styles. Create a common style for table layout and apply it to all identical tables in website/application. Do not create different styles to each component. III. Create global CSS classes Class files are actually a key factor to maintain consistency. While writing CSS you are writing the future of thatwebsite/application to make it more beautiful. Before integrating HTML always check with reset CSS, add it if it is not added.Create global CSS classes and avoid using hierarchy based on page names if it is unavoidable it should start with the base parent component holder. Example: .customBuild.customModule.customModuleFooter.btnSaveModule{} In this case if you want to use.btnSaveModuleclass in any other page then it is additional work for integrator to customize available class or create different class. Other possibilities;if this class was created for that single save module button without hierarchy that would be very easy to use same class throughout the website/application. While creating a class always remember that this class can be used in any page so do not restrict it or bind with anything. Re calculate and think over if client requested a major change in page flow. It should be easy to change sequence of components. For better flexibility create a common button class which includes width, padding, margin, font-size, line-height etc.,this allows to control all buttons in single change.For specific button, classes can be created with additional declarations like background image and background color. Example: .saveform.cmnBtn{ min-width:90px; line-height:33px; height:33px; background:#DC6900; padding:0px5px;
  4. 4. text-decoration: none; text-align:center; margin:00010px; border:0; color:#fff; cursor:pointer; font-weight:bold;} .saveform.savebtn{ background:#dc6900url(../Content/images/save.png)no-repeat5px10px; text-indent:20px;} .saveform.cancelbtn{ background:#DEDEE0url(../Content/images/cancel.png)no-repeat5px8px; color:#333333!important; text-indent:20px;} All these type of buttons are added in saveform container. While adding these set of buttons or a single button, justfollow a structure that’s it. <divclass="saveform"> <inputtype="button"class="cmnBtn cancelbtn"id="btnCancel"value="Cancel"/> <inputtype="button"class="cmnBtn savebtn"id="btnSave"value="Save"/> <inputtype="button"class="cmnBtn previewbtn"id="btnPreview"value="Preview"/> <inputtype="button"class="cmnBtn releasebtn"id="btnRelease"value="Release"/> </div> The same method can be followed for the other elements too. IV. Calculate total width of component(s)and sharp eye on alignment While arranging components or containers, always calculate their width, it should not exceed than the main container width. And if it exceeds it should show scrollbar for better readability. Table should always 100% in width in common scenarios.For table elements like THs and TDs mention their width based on data they are carrying/displaying. Though wrapper (main container) width is fixed in pixels, specify inner container’s width always in %, it helps to switch to any resolution in minimum modification and creates a layout very flexible.Fixed width in pixels can be added to an element(s)only in some scenarios where it is mandatory. Do not force to align components with the help of margin and padding in negative values. Alignment& positioning is a most important part in layout,for better consistency and perfection do not complicate HTML code & CSS classes. Always use proper attributes. For aligning content use‘text-align’ property instead of‘float’. Floating could be used if structure builds for responsive design, but again for content alignment you should always use ‘text-align’ property. For vertical text alignment you can use line-height, vertical-align property may not supported to all web browsers. Adding unnecessary padding and margin may create out layout unbalanced. If you are using CSS3 and assuring for multiple browser support, then make sure you will write supportive attributes while creating classes. Avoid using hacks. When you think of using hack for positioning, that means code is not as per standards.If the code was written as per standards it doesn’trequireadding any hack(s).
  5. 5. V. Consistency in form elements style Form elements are normally same in behavior and in look throughout the website/application.So create common class for form elements,do not use any hierarchy while creating these classes. It should be global and can be use anywhere in website/application.Classes can be overridden, based on the difference in dimensions and beautification. VI. Smart and SimpleCodding Be specific and clear about what you want to write in HTML and CSS file. In approved UI if there is a data gridand for integration you are writing a HTML page. Then do not create all rows shown in UI. Just add one or maximum two. That’s enough for integration. If HTML page is already created then try to give only require code by removing additional rows, containers, attached style sheets etc. Visualize what exactly needed in a page, header, footer, style sheets, wrapper can be added thru master page. Create separate .js file and attaché this file to that specific page if needed. Try to avoid writing internal script, internal style sheet, inline style; it will slow down the performance. While creating classes, make sure you consolidate CSS Syntaxes or Nesting Selectors and write smart declarations to selectors. Do not create classes based on a page; consider all pages and a complete website/application. Example: Avoid writing set of declarations for each CSS selector: .edit{ background:url(../Content/images/edit.png)no-repeattopcenter; display:block; height:16px; width:16px; margin:0px; padding:0px; outline:none; cursor:pointer; text-align:center;} .delete{ background:url(../Content/images/delete_btn.png)no-repeattopcenter; display:block; height:16px; width:16px; margin:0px; padding:0px; outline:none; cursor:pointer; text-align:center;} If you want to create a class for icon(s) and the similar type of icons or set of icons has been used throughout the website/application. Set of icons are same in dimension and display property so creating a common class for all icons would be a better option and create classes with appropriate names and unique declarations to differentiate icons. This practice helps to maintain or modify website/application in easier way. .cmnIcon{ display:block; height:16px; width:16px; margin:0px; padding:0px; outline:none; cursor:pointer; text-align:center;} .edit{ background:url(../Content/images/edit.png)no-repeattopcenter} .delete{ background:url(../Content/images/delete_btn.png)no-repeattopcenter} VII. Add comments while creating HTML page
  6. 6. It is a good practice to add comments while creating any HTML or CSS page, basically it helps to identify why it is written. In commented code you can also write instructions. Example: In HTML file <!-- Button area starts hereuse this complete div container ‘savefrm’ to add buttons --> <divclass="saveform"> <inputtype="button"class="cmnBtn cancelbtn"id="btnCancel"value="Cancel"/> <inputtype="button"class="cmnBtn savebtn"id="btnSave"value="Save"/> <inputtype="button"class="cmnBtn previewbtn"id="btnPreview"value="Preview"/> <inputtype="button"class="cmnBtn releasebtn"id="btnRelease"value="Release"/> </div> <!-- Button area ends here --> In CSS file /* BTN Style */ .saveform{ text-align:right!important; margin-bottom:10px; clear:both; margin-top:10px; padding-right:10px;} .saveform.savebtn{ background:#dc6900url(../Content/images/save.png)no-repeat5px10px; text-indent:20px;} .saveform.cancelbtn{ background:#DEDEE0url(../Content/images/cancel.png)no-repeat5px8px; color:#333333!important; text-indent:20px;} This will help aperson,who wants to review or work on the project. CSS override rules Overriding classes is a common method adopted by integrators and web designers. It is very useful while working with CMS like sharepoint, Drupal etc. While developing any website/application, it is obvious to create multiple CSS files and end number of classes. It is very difficult to handle if page styles are different and there is a drastic change in structure and their content. In this case you can create a base style for all page elements,form elements, containers and components.And based on requirements you can over write these classes by changing declaration value. This process is having simple logic behind. You have created a button (search-button) for search by using <a> tag which is used in various pages of website/application. But in some pages you need similar button with different background, width and font color. In this case creating a different class is absolutely a wrong idea. You can use same class created for search-button and just over write whichever properties you want. Remember; do not duplicate all the existing values. You must have to re-write whatever you want to change. Duplicating all values is the same as creating new class. While overriding you must mention hierarchy (do not complicate hierarchy) to target that specific location otherwise it will impact overall pages where this class name added. This process can be useful if you want to modify the same class formultiple pages. You just need to define appropriate hierarchy. Example:{ width:77px; height:33px; background:url(../Content/images/searchbtn.png); color:#fff; text-decoration:none; display:block;
  7. 7. text-align:center; font-size:14px; line-height:28px;}{ width:130px; height:33px; background:#ccc url(../Content/images/searchbtn.png); color:#000; text-decoration:none; display:block; text-align:center; font-size:14px; line-height:28px;} Right way of writing: Only override specific values which you want to change{ width:130px; background:#fcfcfcurl(../Content/images/searchbtn.png); color:#000} In some cases overriding values doesn’t work, so adding a ‘!important’ keyword after value means this value should apply and ignore previous value. This keyword is supported by multiple browsers. This keyword should only use when you want to override values.{ width:130px; background:#fcfcfc url(../Content/images/searchbtn.png); color:#000 !important} Fixing bugs after integration It is obvious to find bugs where a couple of resources are working on a single project; we cannot track on each resource and ask why you made some changes. But we can cut down these types of surprises by controlling CSS files. Integrator can hold the rights and not allowing developers to add any class in CSS files. Though integrator controls, bugs is a part of website/application. It is not because someone writes a wrong code. Somewhere client requirement changes and integrator needs to modify in existing classes and HTML structure. While fixing bugs,integrator should be aware of the impact in changing in CSS file.At this time comment helps a lot and it gives a clear vision.In common scenarios fixing bugs is nothing but overriding classes. If you are aware of complete website/application it is very easy to handle issues and fix those without hesitation. Review and Modification in code Being an integrator and Web designer it is very important to keep an eye what is going on with the design. After integrating, all code should be reviewed.And if it is necessary integrator have to make require changes in CSS files and or HTML pages. It is also important to remove inline styles, internal styles. Sometime it was added for specific reason, so it is integrator’s duty to add those style(s)in appropriate CSS file(s) or create/override classes. If you follow rules from the beginning it is very easy to handle any project in any condition.