Archive for May, 2009

1. Avoid CSS Expressions

2. Avoid Filters

3. Specify units for non-zero values, but not for zero values.

4. Don’t use quotation marks around paths/URLs when setting a background image or loading in an imported file

5. Try to avoid applying padding/borders and a fixed width to an element. Rather, apply padding to the parent element.

6. Minimize number of ID’s used

7. Minimize number of classes used

8. Don’t use anchors, instead use ID’s.

9. Combine selectors.

10. Use good naming conventions

11. Never use layout descriptives in class names.

12. Use functional names for your classes.

13. Always use intention revealing classnames

14. Avoid using the same classname for different purposes.

15. Always use the same classname for similar purposes.

16. Put your classname on the outer-most element. The child elements can be targeted with the parent elements classname or ID.

17. Declare relative font sizes instead of absolute.

18. Avoid !important.

19. Code link pseudo-classes in this order: Link, Visited, Hover, Active.

20. Minify CSS

21. Optimize CSS Sprites

Read Full Post »

Best Practices of HTML

1. Doctypes
By using a certain DOCTYPE (strict or transitional) you claim to have correctly implemented a certain (X)HTML flavor:
Make all your tags lower case (<p> instead of <P>);
Close all your tags, even empty ones (<br /> and <hr /> instead of<BR> and <HR>);
Make all attribute names lower case and quote all attribute values; and onmouseover instead of onMouseOver;
Give empty attributes a value—such as <input type=”checkbox” checked=”checked” /> instead of <INPUT TYPE=checkbox CHECKED>;
3. Black List
Some HTML tags have been deprecated. There are excellent CSS equivalents
4. Put Stylesheets at the Top
5. Put Scripts at the Bottom
6. Make JavaScript and CSS External
7. Avoid Redirects
8. Minimize the Number of iframes
9. No 404s
10. Choose <link> over @import
11. Optimize Images
13. Don’t Scale Images in HTML
14. Make favicon.ico Small and Cacheable
15. Keep Components under 25K
16. Never Use Inline Style
17. Never Use Inline Javascript.
18. Tag Names Lowercase19. Use H1 – H6 Tags
20. Wrap Navigation with an Unordered List
21. All Images Require “Alt” Attributes
22. Validate Continuously

Read Full Post »

123Greeting.com Tab Menu

When we start revamp 123Greeting.com our plan is to set well and easy navigation systems. Where we can load all of our category and followed by the sub category as a 2nd level navigation. We start finding which type of navigation will fit for our site. Even one things we have to keep in mind that we have to keep balance with the exiting site. With the new navigation systems the user doesn’t needs to learn more. What we like to mean that user should complete their task is less time.

How I start
(1) Plan for accessibility at each stage of development.
(2) Start with designing with markup ‘semantically’.
(3) All functionality must be keyboard accessible.
(4) Use of <ul>, <ol>, <li> for list of items.
(5) Place important content first (Source order independent).
(6) Microformats .

Why <div> not <table>

Div is used to describe content that cannot be properly described by other more semantic tags. Adding semantic meaning to content probably makes websites rank higher. div element marks up only one block at a time, the code base is much smaller than that of a table-based structure. Less code is code that is more readable, easier to maintain, faster to develop, less buggy, smaller in size.

1 Level top navigation (tabs)
User navigation is the “main thoroughfare” that takes the user from the opening of an application to the content area where the user works. Where I found the tabs is the best navigational systems which can fit for our systems. Why I choose tab navigation for our first level navigation.

Horizontal navigation bars are very neat. Because top-down flow is slightly superior to left-right flow, it’s natural for high-level navigation to sit above content.
The obvious problem is when a top bar gets wider than the page. It’s normal for web pages to extend vertically, and users are used to scrolling vertically. Horizontal scrolling is to be avoided at all costs! If viewer use text-based navigation, and it’s re sizable, viewer navigation could get bigger or smaller depending on the user’s browser settings.
Horizontal bars are therefore appropriate where the number of items is known in advance, there are not going to be any more items added, and there is enough width to accommodate all items safely in the target screen resolution.

HTML elements

For page navigation, <a> is the element I use because of its attribute href to link to other page. Besides this, there are other 2 CSS syntax for <a> which are very useful. a:hover {background:#fff} changes background color to white on hover, which in fact removes the use of javascript onmouseover. Another useful css syntax is {display:block}. It could expand hover area to the whole area of parentNode with proper {padding:xx}.
we use <span> as the parentNode of <a> , we use <li> instead because it’s simple for naming in CSS. <li> is a block element. So we can foresee there are 2 techniques to generate tabs.

inline <li> + <a>
<li> + block <a>

inline <li> + <a>

CSS li {display:inline} changes the elements of <li> to inline ones. And they will display horizontally as inline elements. >ul> serves as a natual container for all <li> elements. You could select to add a content box or not.
One point that may be aware is you may not use CSS li {margin:0px} to set the gaps between the tabs to 0. There are always 5px of gap between the tabs. The reason for that is when a block elements are changed to inline. If there’s whitespace between the elements, the browser will display 5px space for the whitespace between the inline elements.

<li> + block <a>

CSS {display:block} changes the element <a> to block ones so we get better hover effect. CSS li {float:left} makes <li> elements float horizontally. This is another way of making tabs, which you don’t need to consider the effect of white space between the <li> elements. But the tabs can be designed under the content box by changing the position of the <ul> and content box <div> upside down. A javascript script has been developed to make it possible for the tabs located in the top, bottom, left and right side of the content box for the content navigation.

Read Full Post »