GUI Design Best Practices Guidelines                      Nadeem KhanVersion 1.0                                   GUI Des...
Table of Contents1     Objective ............................................................................................
GUI Design Practices Guidelines                                                   Nadeem KhanVersion 1.01       ObjectiveT...
GUI Design Practices Guidelines                                                   Nadeem KhanVersion 1.03       HTML/XHTML...
GUI Design Practices Guidelines                                                     Nadeem KhanVersion 1.04       Cascadin...
GUI Design Practices Guidelines                                                    Nadeem KhanVersion 1.04.3 Guidelines fo...
GUI Design Practices Guidelines                                                     Nadeem KhanVersion 1.0  #nav-(whatever...
GUI Design Practices Guidelines                                                  Nadeem KhanVersion 1.0    A customer revi...
GUI Design Practices Guidelines                                                     Nadeem KhanVersion 1.05     High Perfo...
GUI Design Practices Guidelines                                                       Nadeem KhanVersion 1.0Most text-orie...
GUI Design Practices Guidelines                                                  Nadeem KhanVersion 1.06.2 Paths: Leading ...
GUI Design Practices Guidelines                                                         Nadeem KhanVersion 1.07      JavaS...
GUI Design Practices Guidelines                                                     Nadeem KhanVersion 1.0Feature-Detect R...
GUI Design Practices Guidelines                                                     Nadeem KhanVersion 1.0referencing a fi...
GUI Design Practices Guidelines                                                       Nadeem KhanVersion 1.0If you will be...
GUI Design Practices Guidelines                                                     Nadeem KhanVersion 1.0Using A Referenc...
GUI Design Practices Guidelines                                                     Nadeem KhanVersion 1.0<a href="#" onCl...
GUI Design Practices Guidelines                                                     Nadeem KhanVersion 1.0Some rules for u...
GUI Design Practices Guidelines                                                      Nadeem KhanVersion 1.0Namespaces can ...
GUI Design Practices Guidelines                                            Nadeem KhanVersion 1.0      UIZE JavaScript Fr...
GUI Design Practices Guidelines                                                        Nadeem KhanVersion 1.08      Graphi...
GUI Design Practices Guidelines                                                     Nadeem KhanVersion 1.04. suitable for ...
GUI Design Practices Guidelines                                           Nadeem KhanVersion 1.0http://net.tutsplus.com/ar...
GUI Design Practices Guidelines                                                      Nadeem KhanVersion 1.09       Usabili...
GUI Design Practices Guidelines                                                   Nadeem KhanVersion 1.0      Tables     ...
GUI Design Practices Guidelines                                                      Nadeem KhanVersion 1.09.4 User Experi...
GUI Design Practices Guidelines                                                        Nadeem KhanVersion 1.0enables web a...
GUI Design Practices Guidelines                                                           Nadeem KhanVersion 1.0Gizmox, th...
GUI Design Practices Guidelines                                                   Nadeem KhanVersion 1.011.1.2         CSS...
GUI Design Practices Guidelines                                           Nadeem KhanVersion 1.0http://www.anybrowser.com/...
GUI Design Practices Guidelines                                    Nadeem KhanVersion 1.0http://developer.apple.com/intern...
Upcoming SlideShare
Loading in...5
×

Best practicesguidelines gui

2,782

Published on

Published in: Technology, Education
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,782
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
0
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Transcript of "Best practicesguidelines gui"

  1. 1. GUI Design Best Practices Guidelines Nadeem KhanVersion 1.0 GUI Design – Best Practices Guidelines
  2. 2. Table of Contents1 Objective ............................................................................................... 32 Audience ................................................................................................ 33 HTML/XHTML/DHTML ............................................................................ 4 3.1 XHTML best practice guideline.............................................................. 4 3.2 Design Strategies ............................................................................... 4 3.2.1 Resources......................................................................................................... 44 Cascading Style Sheets .......................................................................... 5 4.1 What to avoid .................................................................................... 5 4.2 Best Practices Guidelines ..................................................................... 5 4.3 Guidelines for Optimizing CSS while coding ........................................... 6 4.4 Structural Naming Convention in CSS ................................................... 6 4.5 Types of selectors .............................................................................. 8 4.5.1 Resources......................................................................................................... 85 High Performance Web Pages ................................................................ 96 Interface Design .................................................................................... 9 6.1 Navigation and Wayfinding ................................................................ 10 6.2 Paths: Leading the way ..................................................................... 117 JavaScript Framework ......................................................................... 12 7.1 Javascript Best Practices ................................................................... 12 7.2 List of JavaScript Framework ............................................................. 19 7.2.1 JavaScript Resources ..................................................................................... 208 Graphic Design ..................................................................................... 21 8.1 GIF, JPG and PNG File Formats: Pros and Cons .................................... 21 8.1.1 Reference ....................................................................................................... 229 Usability / Accessibility / User Experience (UX) .................................. 24 9.1.1 Usability Resources ....................................................................................... 24 9.2 Accessibility ..................................................................................... 24 9.3 Accessibility Tips .............................................................................. 24 9.3.1 Accessibility Resources ................................................................................. 25 9.4 User Experience (UX) ........................................................................ 2610 MS Silverlight / Visual WebGui ............................................................ 26 10.1 What is Silverlight ............................................................................ 26 10.2 What is Visual WebGui ...................................................................... 26 10.3 What is Visual WebGui over Silverlight. ............................................... 27 10.4 How does it work? ............................................................................ 2811 Annexure – CSS Technique .................................................................. 28 11.1.1 Nifty Corners ............................................................................................. 28 11.1.2 CSS Gradients ........................................................................................... 29 11.2 Other techniques .............................................................................. 2912 Did you know ....................................................................................... 2913 Tools .................................................................................................... 2914 Testing ................................................................................................. 3015 Resources / links ................................................................................. 3016 Web Design Best Practices Checklist .................................................... 31
  3. 3. GUI Design Practices Guidelines Nadeem KhanVersion 1.01 ObjectiveThe purpose of this document is to outline the Best Practices Guidelines to be followed for CSS.These guidelines provide a check list for reviewing & evaluating adherence to coding techniques,and web design. The objective of these guidelines is to -  Ensure CSS code maintainability  Avoid common errors  Avoid common performance issues’  The easiest way to ensure optimal rendering of a pages  Cleaner code  Faster development  Greater control2 Audience  Web designers  Development Team Page 3 of 31
  4. 4. GUI Design Practices Guidelines Nadeem KhanVersion 1.03 HTML/XHTML/DHTMLThe practices are not a must in order to write (X)HTML, but they are needed if you want to writegood quality code.3.1 XHTML best practice guideline  Document Type Definition – Doctype  All tags must be lowercase.  All elements must be closed, even the ones with no closing tag. In that case the tag should have ‘/’ character at the end. For example <br> – <br />, <hr> – <hr />.  Well formed code. This means that the tags should be properly nested. For example, instead of <em><strong>text</em></strong>, the correct version should be <em><strong>text</strong></em>  Write standard compliant code. This means that your code must comply with all the rules from W3C regarding XHTML.  Don’t use tables for layout – use DIVs.  Keep your XHTML tags to minimum.  Use list based menus / navigation system.  Don’t use too many id’s and classes, you can choose to use CSS selectors in order to identify and stylize content.  Keep Your Tag Names Lowercase.  All Images Require "Alt" Attributes.  Don’t force people to download a new browser or special plug-in to see your site.3.2 Design Strategies  Know your target devices.  Think vertical, not horizontal.  Design with lists, not tables.  Use all possible parts of the markup language.  Keep navigation simple and consistent.  Use caution with external CSS.  Keep colors and images simple.  Carefully design session, cache, and security management.3.2.1 Resourceshttp://net.tutsplus.com/articles/web-roundups/10-rare-html-tags-you-really-should-know/ Page 4 of 31
  5. 5. GUI Design Practices Guidelines Nadeem KhanVersion 1.04 Cascading Style Sheets4.1 What to avoid  Avoid in-line CSS.  Avoid !important.  Avoid CSS hacks.  Redeclaring inherited values  @import or <link> the css. It is better to <link rel="stylesheet" type="text/CSS" ... > because using @import can delay the rendering of your page.  Try to use valid CSS filters instead of non-validating hacks  Don’t use quotation marks around paths/URLs when setting a background image or loading in an imported file (They are not required or necessary and they will freeze IE5 on the Mac.)  Minimize use of classes:- Only use classes on elements that have any chance of being repeated on a page and in different locations, if the element is going to exist in a predictable location cascade based on the parent div ID,4.2 Best Practices Guidelines  Use good naming conventions.  Create classes for error handling named based on the error.  Code link pseudo-classes in this order: Link, Visited, Hover, Active.  Build and test your CSS in Firefox (or Safari if you are working on a Mac).  Use CSS shorthand.  Use CSS Rollover.  CSS declarations on one line.  Comment your code.  Organize your CSS file.  Indent as necessary.  Make your code easy to read.  Group selectors allow you to select multiple elements at once.  You can use child selectors.  Make use of different media types.  Name classes/IDs based on function, not appearance.  You can use attribute selectors. Attribute selectors match elements based on the presence or value of attributes.  Change capitalization using CSS.  Order all the elements belonging to the header, main container, footer ... together for better overview.  Take a look at CSS framework, a lot of great ideas are integrated and commented.  Combine selectors: - Keeping your CSS light is important to minimize download times; as much as possible, group selectors and rely on inheritance. Page 5 of 31
  6. 6. GUI Design Practices Guidelines Nadeem KhanVersion 1.04.3 Guidelines for Optimizing CSS while codingGuidelines to optimize your CSS.  Use space only when you need it.  Use shorthand CSS.  Don’t put semicolon after the last property in a selector.  Use ‘700′ instead of ‘bold’.  Use ‘400′ instead of ‘normal’.  Use 0 instead of ‘0px’ or ‘0em’  Merge selectors with the same properties.4.4 Structural Naming Convention in CSSStructural naming convention – in essence – just means that you name (by assigning a classand/or id attribute to them) elements by describing what they are, and not where they are orhow the look. Its counterpart is called presentational naming which describes the locationand/or appearance of web page elements.#container Page container#branding Used for a header or banner to brand the site. #branding-logo Used for a site logo #branding-tagline Used for a strapline or tagline to define the sites purpose#nav or #navigation Used to contain a navigation device #nav-main Main or primary navigation #nav-section Navigation to pages within the current site section #nav-external Navigation to pages outside the site #nav-supplementary or #nav-supp A supplementary list of links, perhaps in a footer. This can replace the common, butpresentational #footer Page 6 of 31
  7. 7. GUI Design Practices Guidelines Nadeem KhanVersion 1.0 #nav-(whatever) A list of links named at a designers descretion#search Related to search interface and search results #search-input A search form #search-output Search results which could include a <div> or other markup including definition lists#content Used for content rather than for another purpose such as navigation #content-main The main content area #content-news News related content #content-(whatever) Could include any form of content, including #content-related, #content-quote etc.#siteinfo Used for various site related information #siteinfo-legal Copyright information etc. #siteinfo-credits Designer or other creditsE-commerce related#content-products An overall area containing products .products Referring to individual products .products-prices Prices, discounts, special offers etc. .products-description A summary or longer description of a product .products-review Page 7 of 31
  8. 8. GUI Design Practices Guidelines Nadeem KhanVersion 1.0 A customer review .products-(whatever) Could include any form of product related content4.5 Types of selectorsTheres a whole bunch of selectors but for our purposes, we can break it down into three types,of increasing importance:  Element selectors (and pseudo-element selectors) Eg. p {color:red;}  Class selectors (and attribute selectors) Eg. .myclass {color:red;}  ID selectors. Eg. #myid {color:red;}4.5.1 Resourceshttp://reinholdweber.com/?p=1http://www.evotech.net/blog/2007/04/css-best-practices/http://www.brookgroup.com/Resources/Design-and-Usability/CSS-Best-Practices.html Page 8 of 31
  9. 9. GUI Design Practices Guidelines Nadeem KhanVersion 1.05 High Performance Web Pages 1. Make Fewer HTTP Requests 2. Put CSS at the Top 3. Avoid CSS Expressions 4. Make JavaScript and CSS External 5. Avoid Redirects 6. Remove Duplicate Scripts 7. Minimize the number of iframes 8. Minimize DOM access 9. Choose <link> over @import 10. Avoid filters 11. Optimize images 12. Use CSS sprites 13. Optimize CSS sprites 14. Dont scale images in HTML 15. Make favicon.ico small and cacheable 16. Inline styles and scripts should also be minified 17. GIF - dont use a bigger palette than you need 18. Use png8 instead of gif and Keep color count low (<256) to fit in a PNG8 19. Be mobile-friendly” – don’t leave big gapshttp://developer.yahoo.com/performance/rules.html6 Interface DesignUsers of web documents don’t just look at information, they interact with it in novel ways thathave no precedents in paper document design; therefore, web designers must be versed in theart and science of interface design. The graphic user interface (gui) of a computer systemcomprises the interaction metaphors, images, and concepts used to convey function andmeaning on the computer screen. It also includes the detailed visual characteristics of everycomponent of the graphic interface and the functional sequence of interactions over time thatproduce the characteristic look and feel of web pages. Graphic design and visual “signature”graphics are not used simply to enliven web pages—graphics are integral to the user’sexperience with your site. In interactive documents, graphic design cannot be separated fromissues of interface design. Page 9 of 31
  10. 10. GUI Design Practices Guidelines Nadeem KhanVersion 1.0Most text-oriented informational web sites are converging on a relatively consistent layout ofheader, footer, local navigation, and content elements that together make a useful, familiarstarting point for web interface designs. In general, people find the familiar easier to use andremember, and if your site follows these familiar patterns, users will quickly adapt and begin tofocus on your unique content, features, or productsNavigation isn’t just a feature of a web site, it is the web site, in the same way that the building,the shelves, and the cash registers are Sears. Without it, there’s no there there.—Steve Krug6.1 Navigation and WayfindingWayfinding has four core components: 1. Orientation: Where am I am right now? 2. Route decisions: Can I find the way to where I want to go? 3. Mental mapping: Are my experiences consistent and understandable enough to know where I’ve been and to predict where I should go next? 4. Closure: Can I recognize that I have arrived in the right place? Page 10 of 31
  11. 11. GUI Design Practices Guidelines Nadeem KhanVersion 1.06.2 Paths: Leading the wayIn web sites paths are the consistent, predictable navigational links that appear the same waythroughout the web site. Paths can be purely in the user’s mind, as in your habitual navigationthrough a favorite newspaper site. Paths can also be explicit site navigation elements such asbreadcrumb trails that show you where you are in relation to the overall site Page 11 of 31
  12. 12. GUI Design Practices Guidelines Nadeem KhanVersion 1.07 JavaScript FrameworkJavaScript is one of the most widely used languages in web development. Its simple, yet verypowerful, and the numbers of ways that it can be used are almost limitless.A JavaScript library is a library of pre-written JavaScript controls which allow for easierdevelopment of JavaScript-based applications, especially for AJAX and other web-centrictechnologies.7.1 Javascript Best PracticesAlways Use varVariables in JavaScript either have global scope or function scope, and using the var keyword isvital to keeping them straight. When declaring a variable for use either as a global variable or asa function-level variable, always prefix the declaration with the var keyword. The examplebelow highlights the potential problem caused by not doing so.Problem Caused By Not Using Varvar i=0; // This is good - creates a global variablefunction test() { for (i=0; i<10; i++) { alert("Hello World!"); }}test();alert(i); // The global variable i is now 10!Since the variable i inside the function was not declared as a function-level variable by using thevar keyword, it references the global variable in this example. It is a good idea to always declareglobal variables using var, but it is vital to declare function-scoped variables using var. The twoapproaches below are functionally identical.Fixed Functionfunction test() { var i=0; for (i=0; i<10; i++) { alert("Hello World!"); }}Fixed Functionfunction test() { for (var i=0; i<10; i++) { alert("Hello World!"); }} Page 12 of 31
  13. 13. GUI Design Practices Guidelines Nadeem KhanVersion 1.0Feature-Detect Rather Than Browser-DetectSome code is written to detect browser versions and to take different action based on the useragent being used. This, in general, is a very bad practice. Any code which even looks at the global"navigator" object is suspect.The better approach is to use feature detection. That is, before using any advanced feature thatan older browser may not support, check to see if the function or property exists first, and thenuse it. This is better than detecting the browser version specifically, and assuming that you knowits capabilities. An in-depth article about this topic can be found athttp://www.jibbering.com/faq/faq_notes/not_browser_detect.html.Exampleif (document.getElementById) { var element = document.getElementById(MyId);}else { alert(Your browser lacks the capabilities required to run this script!);}Use Square Bracket NotationWhen accessing object properties that are determined at run-time or which contain charactersnot compatible with dot notation, use square bracket notation. If you are not an experiencedjavascript programmer, its not a bad practice to use square bracket notation all the time.Objects properties in javascript can be accessed primarily in two ways: Dot notation and Squarebracket notation.Dot notationMyObject.propertySquare bracket notationMyObject["property"]With dot notation, the property name is hard-coded and cannot be changed at run-time. Withbracket notation, the property name is a string which is evaluated to resolve the property name.The string can be hard-coded, or a variable, or even a function call which returns a stringproperty name.If a property name is being generated at run-time, the bracket notation is required. For example,if you have properties "value1", "value2", and "value3", and want to access the property using avariable i=2:This Will WorkMyObject["value"+i]This Will NotMyObject.value+iAlso, in some server-side environments (PHP, Struts, etc) form field names are appended with []to denote that the form field should be treated as an array on the server-side. However, Page 13 of 31
  14. 14. GUI Design Practices Guidelines Nadeem KhanVersion 1.0referencing a field name containing [] using dot notation will not work because [] is the syntaxfor reference a javascript array. So, square bracket notation is required.This Will Workformref.elements["name[]"]This Will Notformref.elements.name[]The recommendation for using square bracket notation is to always use it when it is required(obviously). Using it when not strictly required is a matter of personal preference andconvention. One good rule of thumb is to use dot notation to access standard properties ofobjects, and square bracket notation to access properties which are defined as objects in thepage. So, while document["getElementById"]() is perfectly vaid using square bracket notation,document.getElementById() is the preferred syntax because getElementById is a standardproperty of the document object as defined in the DOM specifications. Mixing the use of dot andsquare bracket notation makes it clear which properties are standard and which are namesdefined by the content:document.forms["myformname"].elements["myinput"].valueHere, the forms property is a standard property of document, while the form namemyformname is defined by the page content. Likewise, the elements property and valueproperty are both defined by the specs, but then myinput name is defined in the page. Thissyntax is very clear and easy to understand and is a recommended convention to follow, but nota strict rule.Avoid evalThe eval() function in javascript is a way to run arbitrary code at run-time. In almost all cases,eval should never be used. If it exists in your page, there is almost always a more correct way toaccomplish what you are doing. For example, eval is often used by programmers who do notknow about using Square Bracket Notation.The rule is, "Eval is evil." Dont use it unless you are an experienced developer and know thatyour case is an exception.Reference Forms and Form Elements CorrectlyAll forms in an HTML form should have a name attribute. For XHTML documents, the nameattribute is not required and instead the form tag should have an id attribute and should bereferenced using document.getElementById(). Referencing forms using indexes, such asdocument.forms[0] is a bad practice in almost all cases. Some browsers make the form availableas a property of the document itself using its name. This is not reliable and shouldnt be used.The example below uses square bracket notation and correct object references to show themost fool-proof way of referencing a form input.Correct Reference To Form Inputdocument.forms["formname"].elements["inputname"]Bad Practicedocument.formname.inputname Page 14 of 31
  15. 15. GUI Design Practices Guidelines Nadeem KhanVersion 1.0If you will be referencing multiple form elements within a function, its best to make a referenceto the form object first and store it in a variable. This avoids multiple lookups to resolve the formobject reference.var formElements = document.forms["mainForm"].elements;formElements["input1"].value="a";formElements["input2"].value="b";When validating an input field using onChange or similar event handlers, it is always a good ideato pass a reference to the input element itself into the function. Every input element within aform has a reference to the form object that it is contained in.<input type="text" name="address" onChange="validate(this)">function validate(input_obj) { // Get a reference to the form which contains this element var theform = input_obj.form; // Now you can check other inputs in the same form without // hard-coding a reference to the form itself if (theform.elements["city"].value=="") { alert("Error"); }}By passing a reference to the form element and accessing its form property, you can write afunction which does not contain a hard reference to any specific form name on the page. This isa good practice because the function becomes more reusable.Avoid withThe with statement in javascript inserts an object at the front scope chain, so anyproperty/variable references will first try to be resolved against the object. This is often used asa shortcut to avoid multiple long references.Example Using withwith (document.forms["mainForm"].elements) { input1.value = "junk"; input2.value = "junk";}The problem is that the programmer has no way to verify that input1 or input2 are actuallybeing resolved as properties of the form elements array. It is checked first for properties withthese names, but if they arent found then it continues to search up the scope chain. Eventually,it reaches the global object where it tries to treat "input1" and "input2" as global variables andtries to set their "value" properties, which result in an error.Instead, create a reference to the reused object and use it to resolve references. Page 15 of 31
  16. 16. GUI Design Practices Guidelines Nadeem KhanVersion 1.0Using A Reference Insteadvar elements = document.forms["mainForm"].elements;elements.input1.value = "junk";elements.input2.value = "junk";Use onclick In Anchors Instead Of javascript: Pseudo-ProtocolWhen you want to trigger javascript code from an anchor <A> tag, the onclick handler should beused rather than the javascript: pseudo-protocol. The javascript code that runs within the onclickhandler must return true or false (or an expression than evalues to true or false) back to the tagitself - if it returns true, then the HREF of the anchor will be followed like a normal link. If itreturns false, then the HREF will be ignored. This is why "return false;" is often included at theend of the code within an onclick handler.Correct Syntax<a href="javascript_required.html" onclick="doSomething(); return false;">go</a>In this case, the "doSomething()" function (defined by the user somewhere in the page) will becalled when the link is clicked, and then false will be returned. The href will never be followedfor javascript-enabled browsers. However, if the browser does not have javascript enabled, thejavascript_required.html file will be loaded, where you can inform your user that javascript isrequired. Often, links will just contain href="#" for the sake of simplicity, when you know forsure that your users will have javascript enabled. This practice is discouraged. Its always a goodidea to put a local fall-back page that will be loaded for users with javascript disabled.Sometimes, you want to conditionally follow a link. For example, if a user is navigating awayfrom your form page and you first want to validate that nothing has changed. In this case, youronclick will call a function and it will return a value itself to say whether the link should befollowed.Conditional Link Following<a href="/" onClick="return validate();">Home</a>function validate() { return prompt("Are you sure you want to exit this page?");}In this case, the validate() function should always return either true or false. True if the usershould be allowed to navigate back to the home page, or false if the link should not be followed.This example prompts the user for confirmation, then returns true or false, depending on if theuser clicked OK or Cancel.Below are examples of things NOT to do. If you see code like this in your pages, it is not correctand should be fixed.What Not To Do<a href="javascript:doSomething()">link</a><a href="#" onClick="doSomething()">link</a><a href="#" onClick="javascript:doSomething();">link</a> Page 16 of 31
  17. 17. GUI Design Practices Guidelines Nadeem KhanVersion 1.0<a href="#" onClick="javascript:doSomething(); return false;">link</a>Use The Unary + Operator To TypeConvert To NumberIn javascript, the + operator is used for both addition and concatenation. This can causeproblems when adding up form field values, for example, since javascript is a non-typedlanguage. Form field values will be treated as strings, and if you + them together, javascript willtreat it as concatenation instead of addition.Problematic Example<form name="myform" action="[url]"><input type="text" name="val1" value="1"><input type="text" name="val2" value="2"></form>function total() { var theform = document.forms["myform"]; var total = theform.elements["val1"].value + theform.elements["val2"].value; alert(total); // This will alert "12", but what you wanted was 3!}To fix this problem, Javascript needs a hint to tell it to treat the values as numbers, rather thanstrings. You can use the unary + operator to convert the string value into a number. Prefixing avariable or expression with + will force it to evaluate as a number, which can then besuccessfully used in a math operation.Fixed Examplefunction total() { var theform = document.forms["myform"]; var total = (+theform.elements["val1"].value) + (+theform.elements["val2"].value); alert(total); // This will alert 3}Avoid document.alldocument.all was introduced by Microsoft in IE and is not a standard javascript DOM feature.Although many newer browsers do support it to try to support poorly-written scripts thatdepend on it, many browsers do not.There is never a reason to use document.all in javascript except as a fall-back case when othermethods are not supported and very early IE support (<5.0) is required. You should never usedocument.all support as a way to determine if the browser is IE, since other browsers also nowsupport it.Only Use document.all As A Last Resortif (document.getElementById) { var obj = document.getElementById("myId");}else if (document.all) { var obj = document.all("myId");} Page 17 of 31
  18. 18. GUI Design Practices Guidelines Nadeem KhanVersion 1.0Some rules for using document.all are  Always try other standard methods first  Only fall back to using document.all as a last resort  Only use it if you need to support IE versions earlier than 5.0  Always check that it is supported with "if (document.all) { }" around the block where you use it.Dont Use HTML Comments In Script BlocksIn the ancient days of javascript (1995), some browsers like Netscape 1.0 didnt have any supportor knowledge of the script tag. So when javascript was first released, a technique was needed tohide the code from older browsers so they wouldnt show it as text in the page. The hack was touse HTML comments within the script block to hide the code.Using HTML Comments In Script Is Bad<script language="javascript"><!-- // code here//--></script>No browsers in common use today are ignorant of the <script> tag, so hiding of javascript sourceis no longer necessary. In fact, it can be considered harmful for the following reasons:  Within XHTML documents, the source will actually be hidden from all browsers and rendered useless  is not allowed within HTML comments, so any decrement operations in script are invalidAvoid Cluttering The Global NamespaceGlobal variables and functions are rarely required. Using globals may cause naming conflictsbetween javascript source files and cause code to break. For this reason, it is a good practice toencapsulate functionality within a single global namespace.There are several ways to accomplish this task, some of which are much more complicated thanothers. The simplest approach is to create a single global object and assign properties andmethods to this object.Creating A Namespacevar MyLib = {}; // global Object cointainerMyLib.value = 1;MyLib.increment = function() { MyLib.value++; }MyLib.show = function() { alert(MyLib.value); }MyLib.value=6;MyLib.increment();MyLib.show(); // alerts 7 Page 18 of 31
  19. 19. GUI Design Practices Guidelines Nadeem KhanVersion 1.0Namespaces can also be created using Closures, and Private Member Variables can also besimulated in javascript.Avoid sync "Ajax" callsWhen making "Ajax" requests, you may choose either async or sync mode. Async mode runs therequest in the background while other browser activities can continue to process. Sync modewill wait for the request to return before continuing.Requests made with sync mode should be avoided. These requests will cause the browser tolock up for the user until the request returns. In cases where the server is busy and the responsetakes a while, the users browser (and maybe OS) will not allow anything else to be done. Incases where a response is never properly received, the browser may continue to block until therequest is timed out.If you think that your situation requires sync mode, it is most likely time to re-think your design.Very few (if any) situations actually require Ajax requests in sync mode.Use JSONWhen storing data structures as plain text or sending/retrieving data structures via Ajax, useJSON instead of XML when possible. JSON (JavaScript Object Notation) is a more compact andefficient data format, and is language-neutral.Use Correct <script> TagsThe LANGUAGE attribute is deprecated in the <script> tag. The proper way to create a javascriptcode block is:<script type="text/javascript">// code here</script>7.2 List of JavaScript Framework  ajile  dojotoolkit  extjs  jquery  mochikit  mootools  openrico  prototypejs  qooxdoo  SproutCore  SWFObject, a JavaScript library used to embed Flash content into webpages. Page 19 of 31
  20. 20. GUI Design Practices Guidelines Nadeem KhanVersion 1.0  UIZE JavaScript Framework  Yahoo! User Interface Library (YUI)  My Library  javascriptians ajax library  jsAnim - JavaScript Animation LibrarySee also  Ajax framework  Widget toolkit  List of JavaScript libraries  Comparison of JavaScript frameworks7.2.1 JavaScript Resourceshttp://dean.edwards.name/packer/http://www.javascripttoolbox.com/bestpractices/http://dev.opera.com/articles/view/javascript-best-practices/http://net.tutsplus.com/tutorials/javascript-ajax/10-essential-principles-of-the-javascript-masters/http://net.tutsplus.com/tutorials/other/creating-a-google-map-with-expressionengine/http://net.tutsplus.com/tutorials/javascript-ajax/24-javascript-best-practices-for-beginners/ Page 20 of 31
  21. 21. GUI Design Practices Guidelines Nadeem KhanVersion 1.08 Graphic Design8.1 GIF, JPG and PNG File Formats: Pros and ConsUse fewer colors for indexed images and try Local (Selective) paletteIf you’re optimizing icons, buttons or other artwork in PNG8 try to reduce colors numbers downto 32 or 64. Often you will cut out image file size significantly without decreasing visual imagequality. Using the selective palette lends itself better to blockier pixels which make imagecompression a lot more efficient as compared to Perceptual or Adaptive palettes which tend tobe too diffuse.Use Posterization to reduce number of colors in PNGPosterization reduces the amount of colors, converting similar colors to the single one. To usethis technique apply Image->Adjustment->Posterize with the amount of Levels around 40 beforesaving image. Watch out: color alternation is possible, especially if you’re trying to stitch imagewith a HTML background.Avoid saving JPEG as ProgressiveBy saving JPEG in Progressive mode Photoshop adds multiple copies of the image at lowerresolution to make the image appear quickly on the screen, while progressively improving inquality. While sometimes it can give you slightly lower file size, most of the time the file size willbe bigger. Progressive JPEG files are not displayed on many mobile devices.Reduce noise to decrease image sizeNoise requires from JPEG algorithm add more recourses to store it leaving less space for reallyuseful information, i.e. image itself. It means by eliminating noise you will not only decrease filesize but improve overall visual look of the image. You can use a number of different Photoshopplugins such as Noise Ninja or Imagenomic Noiseware professional. The easy way to reducenoise in Photoshop is to change color mode to Lab and then apply Filter->Median (2-4) toChannels a and b. Included in free Photoshop action to optimize images for Web.GIF: Graphics Interchange FormatPros1. 256 number of colors.2. uses lossless compression.3. suitable for logos, flat areas of color with well defined regions. Page 21 of 31
  22. 22. GUI Design Practices Guidelines Nadeem KhanVersion 1.04. suitable for icons with few colors.5. support for transparency.6. suitable for small animations.CONS1. the oldest format for web – 1989.2. in most cases it has a bigger file size than PNG.PNG: Portable Network GraphicsPROS1. 24bit color / 8bit color(256 colors).2. uses lossless compression.3. suitable for flat areas of colors, logos, transparent or semitransparent images.4. suitable for icons.5. in most cases PNG has a smaller file size than GIF.6. it has alpha channel transparency which is more advance than GIF’s transparency.7. approved as standard in 19968. proposed as replacement of GIF by World Wide Web ConsortiumCONS1. it is wise to avoid using PNG with big photos and images with details because of the big generated file size2. in different situations it has bigger file sizes than JPGJPG: Joint Photographic Experts GroupPROS1. 24bit color2. suitable for images, high details & quality pictures3. uses lossy compression4. it is the most used graphic file format5. approved as standard in 19946. used in design and photography industry – it is likely to see nature photos in JPG file format7. it is good when you are willing to drop quality from a picture for the sake of file sizeCONS1. it does not support transparency2. it is not suitable for logos and icons because it does not have transparency and it can generate a bigger file size for small resolution images.8.1.1 Referencehttp://www.geekpoint.net/web-designing/6903-printing-photoshop-best-practices.htmlhttp://psd.tutsplus.com/http://developer.yahoo.com/yslow/smushit/ Page 22 of 31
  23. 23. GUI Design Practices Guidelines Nadeem KhanVersion 1.0http://net.tutsplus.com/articles/10-principles-of-the-user-interface-masters/http://net.tutsplus.com/videos/screencasts/how-to-convert-a-psd-to-xhtml/http://net.tutsplus.com/tutorials/html-css-techniques/quick-tip-insert-flash-the-correct-way/ Page 23 of 31
  24. 24. GUI Design Practices Guidelines Nadeem KhanVersion 1.09 Usability / Accessibility / User Experience (UX)User experience is the basis of effective web designIn today’s more social, interactive, online environment, there’s a growing acceptance thatusability and user experience are complementary. We’re finally abandoning the silo mentality,with usability professionals now called user experience professionals to encompass the muchwider discipline of user experience.It’s no longer adequate to design just for efficiency so that people can navigate a site, findinformation and carry out tasks. What’s more, designing for efficiency only deals with the ‘cando’ aspects of a site’s user interface. Just because a site is easy to use doesn’t mean that it willengage users. User experience also deals with how people are feeling, how they are reactingemotionally, and how they can be persuaded to act.9.1.1 Usability Resourceshttp://www.humanfactors.com/downloads/articles.asphttp://www.humanfactors.com/products/usability-products.asphttp://www.usability.gov/government/bestpractices.html9.2 AccessibilityHow a blind person will "see" you’re Web page – audio comparison of inaccessible andaccessible Web pages.The two Web pages in the following table appear to be similar. But to a blind person who has tolisten to your Web page there is a great difference. How you construct the pages can mean thedifference between a tedious and obscure rendering of the information in the page, and onethat gets the message across. To hear the difference, listen to the audio files for each of thepages.Note that the illustrations of the pages here are probably too small to read. Reading along withthe audio often provides contextual cues that make a page easier to understand. The true audiouser who cannot see the page does not have these cues, so to get the best understanding oftheir situation, it is much better to not read along when listening9.3 Accessibility Tips  Structure your document so it can be read without stylesheet  Separate your links  Meaningful links  Include skip to content link  Provide text equivalent for non-text data  Image links. Related to the above, be careful when using only images for links. Without text equivalent, screen readers will not be able to display the link. Use ALT attribute so screen readers can use it as a link text. Page 24 of 31
  25. 25. GUI Design Practices Guidelines Nadeem KhanVersion 1.0  Tables Identify row and column headers. Use TH for headers instead of regular TD styled with alternative styling. Also, provide captions with CAPTION element to describe the contents of the table. If you dont wish to use captions use TITLE attribute to describe the contents in few words. Use SUMMARY attribute for describing tables purpose. This is especially useful for non-visual readers.  Client Scripting  Color  Link to accessible version of your page  Validate9.3.1 Accessibility Resourceshttp://www.w3.org/WAI/http://www.wimba.com/assets/resources/WC_Accessibility.pdfhttp://msdn.microsoft.com/en-us/library/aa350483.aspxhttp://www.w3.org/TR/WAI-WEBCONTENT/http://www.w3.org/TR/WAI-AUTOOLS/http://www.w3.org/TR/UAAG/http://aprompt.snow.utoronto.ca/http://www.adobe.com/resources/accessibility/best_practices/best_practices_acc_flash.pdf Page 25 of 31
  26. 26. GUI Design Practices Guidelines Nadeem KhanVersion 1.09.4 User Experience (UX)UX honeycomb • Useful: If its not useful, who cares if its usable? • Usable: Dont make me think! (Steve Krug, who wrote the book) • Desirable: Positive experiences build brand loyalty. • Accessible: Available to all, regardless of disability. • Findable: You cant use what you cant find. (Peter Morville: The Age of Findability) • Credible: Quality design builds trust.10 MS Silverlight / Visual WebGui10.1 What is SilverlightSilverlight is a new Web presentation technology that is created to run on a variety of platforms.It enables the creation of rich, visually stunning and interactive experiences that can runeverywhere within browsers and on multiple devices and desktop operating systems. Inconsistency with WPF (Windows Presentation Foundation), the presentation technology inMicrosoft .NET Framework 3.0 (the Windows programming infrastructure), XAML (eXtensibleApplication Markup Language) is the foundation of the Silverlight presentation capability.10.2 What is Visual WebGuiVisual WebGui (VWG) is an open source “Web like desktop” application platform. Itincorporates RAD development framework that integrates seamlessly into Visual Studio. VWG Page 26 of 31
  27. 27. GUI Design Practices Guidelines Nadeem KhanVersion 1.0enables web applications development using desktop like ultra productive( WinForms like) drag& drop designer. Application built with VWG can be accessed through multiple presentationlayers (currently available DHTML, Silverlight and a smart client).10.3 What is Visual WebGui over Silverlight.Visual WebGui over Silverlight is the only available RAD tool to develop a fully blown, data-centric, enterprise-level Microsoft Silverlight applications. Choosing VWG Over silverlight thedeveloper/designer is provided with over 60 Windows Forms controls and the tools to rapidlycreate an animated, cross-device, multimedia rich and fully customized Minority Report likeSilverlight application.VWG over Silverlight is based on the VWG “On-Server” WebModel concept. This means theentire application flow, UI logic and validations are developed and processed on the server whilethe browser serves as a “display” for the output and a “receptor” for user input. Once in runtime mode, a VWG application is accessed by automatic downloading a 200K kernel,Nothing butthat small kernel runs on client.VWG over Silverlight uses Ajax uniquely optimized protocol (over standard HTTP / XML). Kernelis downloaded once after which only state and data changes are going back and forth asrequired. This results in a highly responsive application which utilizes fewer resources enablingservers to handle more concurrent users. An average round trip is made up of less than 1K ofMeta data unaffected by application wight and size.The On-Server WebModel utilizes a client side “rendering” engine which communicates with theserver over XMLHttp. The client never consumes data or services directly since all of theapplication logic, UI logic and data access is handled on the server. The client simply connects tothe “view” on the server and therefore never compromises security. Furthermore, since aproprietary protocol is used to correlate view state between the server and the client, it’s agreater challenge to override, eavesdrop or hack. The only data that is delivered to the client isdata that can be viewed on the client meaning there is never any sensitive data that may berequired for logic or validation beyond what is rendered and seen by the user on the screen.VWG methodology has a real-world, field-proven track record for simplifying development andsaving time and resources in DHTML application development. This is also true to Silverlight,VWG simplifies Silverlight line of business (LOB) development with a proven 90% cut indevelopment time while it empowers it as a GUI for LOB applications.It is currently the fastest method of choice for a migration path to Silverlight and it does itwithout losing any of Silverlights rich capabilities - still allowing you to use Expression Blend forstyling. Theres no need for retooling, retraining or fighting to stay on the learning curve. Onceyouve made the simple transition you will be more productive than ever.Many development shops are still sitting on the fence to see where Silverlight is going. Many saythat if they had a default option for users who still havent installed the Silverlight plug-in theywould jump into Silverlight without hesitation. VWG allows for single development and dualdeployment to either DHTML or Silverlight. This lets developers cater for all their users whetherthey have installed Silverlight or not. Both will be able to access the application, with theSilverlight users enjoying a richer GUI. Page 27 of 31
  28. 28. GUI Design Practices Guidelines Nadeem KhanVersion 1.0Gizmox, the company behind the Visual WebGui (VWG) open source platform, has beencooperating with Microsoft in the development of VWG server-empowered Silverlight. VisualWebGui over Silverlight is the extension to the Visual WebGui server that allows a VWGdeveloper to use Microsoft Silverlight as there VWG application’s presentation layer.10.4 How does it work?Once a VWG application was developed the developer can distribute this application asSilverlight application, DHTML application or both. When a user enters a URL in the browser theIIS routs the request according to the extension that was entered. SWGX is the Visual WebGuiSilverlight extension. The IIS routs the request to the Visual WebGui server, which sends on theinitial request a small kernel to the client and an XML file with the initial data that is reacquired.This kernel in a Visual WebGui silverlight application holds a XAP file with the Visual WebGuiSilverlight core dll’s. A XAP file is basically a compiled Silverlight application. The file is actually a.zip file that contains all the files necessary for the application. The XAP file holds also aAppManifest.xaml that describes a Silverlight application to the Silverlight Streaming hostingservice. The manifest is an XML file that specifies the values used to create an instance of yourSilverlight application on the Silverlight Streaming server.At the heart of Silverlight is the browser-enhancement module that renders XAML and draws theresulting graphics on the browser surface. When the browser (with a Silverlight plug-in) receivesa XAP file the XAP holds the genric.xaml file of the Visual WebGui Silverlight Application. It isrendered by the Silverlight plug-in to display a Silverlight application UI.In the background the communication with the server is managed by Visual WebGui serverbinding mechanism. The server binding mechanism provides a generic mechanism to interactbetween the server and the client, using the highly optimized communication methods of VisualWebGui.In conclusion VWG SDK is used for rapid development of fully blown, data-centric, enterprise-level Microsoft Silverlight applications.Visual WebGui over Silverlight allows developers to present a Visual WebGui application as aSilverlight application with all that it implies. This allows the developer to enjoy the fast and easyWinforms design time capabilities of Visual WebGui while using Silverlight’s abilities to displayrich, visually stunning and interactive experiences in Web applications.11 Annexure – CSS Technique11.1.1 Nifty CornersNifty Corners are a solution based on CSS and Javascript to get rounded corners without images.http://www.html.it/articoli/niftycube/index.htmlhttp://www.spiffycorners.com/index.php?sc=spiffy&bg=680000&fg=B3B300&sz=5px Page 28 of 31
  29. 29. GUI Design Practices Guidelines Nadeem KhanVersion 1.011.1.2 CSS GradientsUntil CSS gives us gradients we have to rely on background images — or do we? Heres a demousing no images whatsoever, just pure CSS.http://www.designdetector.com/2005/09/css-gradients-demo.phpNote: The choice of using this will depend on the design considerations, bandwidthavailability etc.11.2 Other techniqueshttp://www.flog.co.nz/lab/ARC/ARC.htm12 Did you know You can assign multiple classes to a given element Do NOT start a class name with a number! It will not work in Mozilla/Firefox. Do NOT start an ID name with a number! It will not work in Mozilla/Firefox. Do not leave spaces between the property value and the units! "margin-left: 20 px" (instead of "margin-left: 20px") will only work in IE6, but it will not work in Firefox or OperaRelated linkhttp://www.binarytrends.com/article_details/9/CSS-Selectors.-Did-You-Know-All-of-Them13 Toolshttp://riddle.pl/emcalc/http://builder.yaml.de/http://www.cssoptimiser.com/http://colorschemedesigner.com/http://colorblender.com/http://www.kolur.com/http://spritegen.website-performance.org/http://www.csssprites.com Page 29 of 31
  30. 30. GUI Design Practices Guidelines Nadeem KhanVersion 1.0http://www.anybrowser.com/ScreenSizeTest.htmlhttp://browsersize.com/ : - You can edit, debug, and monitor CSS, HTML, and JavaScriptlive in any web page.http://www.getfirebug.com/http://www.iconico.com/CSSScrollbar/http://www.jotform.com/14 Testing(http://validator.w3.org/http://jigsaw.w3.org/css-validator/15 Resources / linkshttp://www.noupe.com/css/css-layouts-40-tutorials-tips-demos-and-best-practices.htmlhttp://www.lynchconsulting.com.au/go/articles/advanced-tables-tutorial/http://paularmstrongdesigns.com/projects/awesomeform/http://www.learn-css-tutorial.com/BrowserIssues.cfmhttp://www.richinstyle.com/bugs/http://www.gtalbot.org/BrowserBugsSection/http://www.tjkdesign.com/articles/float-less_css_layouts.asphttp://www.grc.com/menu2/invitro.htm Page 30 of 31
  31. 31. GUI Design Practices Guidelines Nadeem KhanVersion 1.0http://developer.apple.com/internet/webcontent/bestwebdev.htmlhttp://www.contentwithstyle.co.uk/content/a-css-frameworkhttp://www.sitepoint.com/article/top-ten-css-tricks/http://www.petefreitag.com/item/475.cfmhttp://www.456bereastreet.com/archive/200503/css_tips_and_tricks_part_1/http://www.alistapart.com/articles/practicalcss/http://www.noupe.com/css/101-css-techniques-of-all-time-part2.htmlhttp://arbent.net/blog/40-outstanding-css-techniques-and-tutorialshttp://cssglobe.com/post/1614/4-uber-cool-css-techniques-for-links16 Web Design Best Practices Checklist Background Information Page Layout Browser Compatibility Navigation Color and Graphics Multimedia Content Presentation Functionality Accessibilityhttp://terrymorris.net/bestpractices/ Page 31 of 31

×