Content

Go to Top.

Good Web Practices

  • Cross Browser compatibility- After designing the webpage from mock ups, check it on all browsers- Firefox, IE7, IE6, Opera, Safari (Mac). You can install multiple versions of IE from this site- http://tredosoft.com/Multiple_IE
  • Graceful degradation - Check the page after disabling JavaScript and CSS. The content should not get bad after disabling.
  • Progressive enhancement- Start with the basic and add the styles gradually making sure that it does not break in other browsers.
  • Put Semantic markup(meaningful tags) so that some styles show up even if the CSS is OFF.
  • Put the common styles on higher elements to avoid repetition.
  • Specificity- The styles possess weights/points corresponding to their proximity to the element, their position in the style scale (user defined, external, internal, inline etc).
  • Resolution compliant- Check the web page(s) in different resolutions. To change the resolution of your computer (for windows only), please refer to http://www.microsoft.com/windowsxp/using/setup/personalize/resolution.mspx
  • Fluid layout - The content should be flexible/ fluid if the browser size is increased or decreased.
  • Re-Usable Imagery- Put borders, backgrounds, navigation bar buttons etc in a manner which could be re-used irrespective of the content or the size of the font.
    • Sliding box technique- 2 congruent boxes sliding apart when contents increase (vertical or horizontal)
    • Box-cap technique-top and bottom OR left and right, the right image caps till the area required for the box.
    • Re-Usability - Use one image for drop down menus. Just position it differently.
  • Organize - Keep the 4 parts of the page separate- Content (XML), Structure (HTML), Presentation (CSS) and Behavior (JavaScript).
  • Small tips to fix big issues- Good Coding Habits-
    • Put a space before starting the "{" in the style sheet.
    • Always end the style with a semicolon ;}
    • Use all small case unless you are camelCasing a name
    • Put the style pertaining to a page/ block with a distinct prefix so that it does not mess other selectors with the same name.
    • If there is no text within any element defined by the CSS (like div, p etc) it will not show up; not even the background image. To show it, put some width or height to it.
    • Do not give height to a box which might expand later. Instead try to use min-height.
    • (Usually) after the page is submitted, the only changes that could be done are the style/CSS changes in the CSS.
    • For the images that needs to be changed often, img src is good other wise you can use background to put an image in the page by the CSS. It need not be in the HTML.
    • Anchors with 'text-decoration:none' should show the underline when hovered
    • For meta refresh, for the given redirect URL, put URL= to make it work in IE
Go to Top.

Accessibility Issues

  • Put title, alts, and captions for every image.
  • Try to put the micro format structure like vCard, vCalender etc. These are machine readable syntax.
  • The page should be navigable without using mouse- put tab index.
  • The page should not break when you make the font size bigger or smaller (CTL+ or ctrl -).
Go to Top.

Web dev Tools

  • Debugging tools-
    • For Firefox- Firebug- Helps to debug the HTML code, the CSS and also the Javascript in the page. It enables to see the update on the page when the values of the attributes/selectors are edited.
    • For Firefox- Web developer tool bar This can aid in reviewing the page with or without the CSS, the javascript and other assets. It also
    • For IE- Visual Web Dev -
  • Measuring tool- MeasureIt- This is a firefox addon and can be downloaded from - https://addons.mozilla.org/en-US/firefox/addon/539
  • FTP tool- WinSCP for Windows- This free ftp tool can be open a session in Putty - for Unix operations and open the files in editors like Text Pad , DreamWeaver etc
  • Editing tool- Dreamweaver, TextPad -These tools can color code the source code which makes it readable. DW also has other features which make coding convenient and less error prone. Like- auto completing of the code, Apply source format ( which makes the code approprately indented) etc.
  • Color code - Identifier & Comparison tool - Color Schemer- It is a paid software but very useful.
  • Graphic editors - Photoshop
Go to Top.

Hacks and Filters

Different browsers have special filters which apply only to them. We can use them to customise our page for

  • IE7 - * -Use star to filter the code for IE7 only
  • IE6 - _ -Use underscore to filter the code for IE6 only
  • @media -Use this code to filter the code for Opera only
Go to Top.

Some known bugs & their solution

  • IE - Box model issue- IE considers the padding of the box as a part of the width. This might pose problems in the actual sizing. Solution- Keep the width & the padding in separate elements.
Go to Top.

Questions to ponder-

  • Why we should/ should not use import@ instead of <link> for CSS?
  • Why we should/ should not use "expressions" for IE purposes? (Is it a good idea to have logic/javascript in CSS?)
  • What are the issues with alpha transparencies?
  • Why IE messes up with double class nomenclature?
  • Where should we use a light box model ? (Using Opacity & Z-Index)
  • For a drop down menu designed in CSS, how can we avoid the display none of the drop down menu on mouse out i.e, when the mouse is on the menu ?
Go to Top.

Yahoo! Specific Learning (YUI)- CSS

  • For cross browser CSS, use the Yahoo! CSS-http://yui.yahooapis.com/2.4.1/build/reset-fonts-grids/reset-fonts-grids.css. This resets the default styles in all browsers and then we can set new styles as per our designs.

Yahoo! Specific Learning (YUI)- Javascript

  • For DOM , use the api- 
    <!-- Dependency -->  
<script type="text/javascript" src="http://yui.yahooapis.com/2.4.1/build/yahoo/yahoo-min.js" >  
	 
<!-- Event source file --> 
<script type="text/javascript" src="http://yui.yahooapis.com/2.4.1/build/event/event-min.js" >

Some common commands for using Putty/CVS/ YALA (Yet Another Language Automation )tool

    • Navigation - After logging in,to go to the CSS files, type cdc followed by the country name. e.g. cdcus for U.S., cdcar for Argentina etc. To go to the generic intl, type cdc.
    • Regeneration - To regenerate the files, type ygc followed by the country name. e.g. ygcus for U.S., type yga to regenerate all intls.
    • Check out - To synchronise/update your code with the latest code on CVS-
      • cvo - to update all files. This has yga built built in the function.
      • cvs up on a particular folder/file. You have to do a ygc followed by the particular country name to regenerate it.
    • Check in - To check in your code, use cvs ci -m 'comments about the update here' fileName

How to akamise images on the HTML server.

  • Akamising is the process of putting images in the HTML server which can be accessed with a URL. Here is the process-
    • Upload the images in the correct folder by WInSCP ot any other ftp tool.
    • Run "gmake" in the respective folder.
    • Use the absolute URl to the image in the CSS. If there is a variable- "image_path" or "image_path_all" which generalizes the path, use it.

The design for intl. inheritance - Yahoo! worldwide

  • Coming soon...

Using Bugzilla to manage bugs