P.C.Kabeer » webdesign http://www.pckabeer.com The crazy life with crazy dreams Tue, 18 Oct 2011 08:12:17 +0000 en hourly 1 http://wordpress.org/?v=3.2.1 Html CheckList http://www.pckabeer.com/2011/10/18/html-checklist/ http://www.pckabeer.com/2011/10/18/html-checklist/#comments Tue, 18 Oct 2011 08:07:51 +0000 admin http://www.pckabeer.com/?p=86 1.   Structure and Visualization.
  • Do not use <font> element.
  • Move arrangement attributes (align, valign, width, height) to CSS.
  • Do not use tables except showing table data. Using tables for visual formatting is acceptable in complex situations only. Max table nesting can not be great than 3.
  • Move attribute “background” to CSS.
  • Design of input fields and buttons must be written as class in CSS.
  • Style table must be written as external file and linked using <link>
  • All images related to design (not content) move to block with style {background: transparent url(“gif”) no-repeat;}

2.  HTML code

  • If table cell contains only image with width and height, then don’t use these attributes for cell.
  • Use minimum cols and rows for tables.
  • All <image> elements must have “width” and “height” attributes.
  • All <image> elements, which are not links, don’t have “border” attribute.
  • All attributes values must be placed in double quotes.
  • All tags and attributes names must be in low case.

3.  CSS code

  • Unique elements must have “id” attribute, which is used for style. Repeated elements must use classes.
  • Determine Links style through styles of (td {}, td a {}, td a:hover {}). a:hover must redefine only changed atttributes.
  • Determine background color for <body>
  • Split declarations to groups (fonts, tables, text blocks, divs)
  • Determine geometrical dimensions in percents or pixels.
  • All colors values must be as short as possible and in high case (#FFF instead of #ffffff).
  • All tags and attributes names must be in low case.
  • All margins and indents must be defined for all browsers.
  • All classes and identifiers must be named logically with one naming convention.

4.  Structure

  • Use title, description and keywords in header.
  • All elements with closing tags must have it (ideally, use XHTML 1.0 Transitional/Strict).
  • Use alt attribute for <image>. If image don’t have semantic meaning, alt must be empty.
  • Use comments before main blocks.
  • Use standard tags for creating text structure (<h1>-<h4>, <p>, <ul>, <il>, <li> and so one).
  • Vertical and Horizontal menus must be defined using <li>.
  • Don’t use <b> and <i>. Use <strong> and <em>.
  • Blocks must be placed in document in the descending order of importance. Blocks location can be defined using CSS.
]]> http://www.pckabeer.com/2011/10/18/html-checklist/feed/ 0 Common web design mistakes http://www.pckabeer.com/2009/12/07/common-web-design-mistakes/ http://www.pckabeer.com/2009/12/07/common-web-design-mistakes/#comments Mon, 07 Dec 2009 18:30:40 +0000 pckabeer http://www.pckabeer.com/?p=37 Here are few of the most common mistakes made in web design.
1. Unnecessary Use of Flash.
2. Poor Search Results – use Google’s custom search engine.
3. Bad/Heavy Images leading to poor loading experience.
4. Irrelevant URL Structure – twitter.com/username makes sense, url’s convey a message.
5. Lack of a Clear Message – Header can convey this in most cases.
6. Not Understanding What the Client Needs – toughest part : )
7. Browser Inconsistencies – Make sure that all major browsers are covered.
8. Bad color coordination.
9. Outdated information.
10. Iterate – it is highly unlikely that you will get it right the very first time.

]]> http://www.pckabeer.com/2009/12/07/common-web-design-mistakes/feed/ 1