Think Big , Think Unique !!

12 most important tips which every designer should know

2008-01-21T11:13:00.000+05:30

On internet everybody is in hurry, you, as a web designer, should communicate why the visitor should spend time on your designed website. And this message should be communicated very FAST. Often, designers totally concentrate on the good outer look of the site and forget this goal. These are few things which every professional designers should keep in mind while designing the site. These tips not only improves search engine rankings but they also increases user interaction with the site thus higher conversions are achieved.

Page Titles: Often designers use WYSISYG editor, editors generally put a default title in the pages which is not relevant. So whenever you design a page make sure that you put appropriate titles that are relevant to the individual pages.

Meta Tags: There are generally 2 cases that occurs in relation to meta tags. Either the designers do not insert meta tags on the pages or they insert too many meta tags on the pages which does not offer any real benefit. There are, however, 3 meta tags which must be inserted in every page :-

<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=character set here" />

<meta name="Description" content="small page description here" />

<meta name="Keywords" content="keywords here" />

JavaScript Codes: Many a times it has been seen that designers put JavaScript codes in the source codes of the pages. If possible, put the JavaScript codes in a separate JavaScript file (.js extension) and include it in the html code.

CSS: The styling of web page is recommended to be done in CSS. CSS has many advantage over traditional tags and it also offer cross browser compatibility without much modifications.

Frames or Not? : Never use frames. It is a strict no. what can be done through frames can also be done in conventional and much better way. Frames affect search engine crawlablity and thus reduces search engine rankings. Also web pages using frames are now being frowned upon.

Consistent Design: How will your visitors know they are still on your site if it's pages are not consistent? You can guarantee consistency by placing navigation in the same place on each page and your logo in the same spot at the top of the page. If you have expandable menu items, put them on every page of your site in the same place. Your visitors will expect it to be there and it's not user centered if they have to learn a new navigation system for each section. Use consistent navigation on every page. A different design and way to navigate it for each section is confusing. Also make sure that the breadcrump function is there. It improves user interaction and also improves the ranking by passing PR smoothly to each pages of the site.

Images with ALT and Title Tags: Every image tag you put in a web page should have alt and title attributes. Every alt tag should contain the description of the image. And image title tags should be used to increase the density and relevancy of the page.

Flash Content: Flash sites does not provide much options for optimizing. More over search spiders are having problems crawling flash content. So, a full flash site is never recommended. However flash elements can be embedded into html pages.

Validate the Pages: Validate the web pages to be 100% compliant with the latest W3C standards.

Relevancy: This is the most important element of the pages. As already discussed, on internet everybody is in hurry, you, as a web designer, should communicate why the visitor should spend time on your designed website. And this message should be communicated very FAST. Often, designers totally concentrate on the good outer look of the site and forget the relevancy thing. So, how to make a page relevant?. Just follow simple tips. Suppose you want to design a web page for "web design services", for the document to be relevant you need to take care of four elements.s

Title tag: Give the appropriate and unique title to the web page like "web design services' will fit our example.

Meta Description : Now fill the meta description tag with the little description about the content that is going to be placed on the page

Meta Keywords : Put some relevant keywords in the page. Recommended but not necessary.

Content: Content is king. If the page is about web design services then write only about the web design services that you offer and nothing else. If your page is relevant, you visitor will stay else he will bounce to another website.

Site Structure: Site Structure is another important thing. So,how to design the structure of the site. Structure your site according to categories and sub categories. The main domain should contain the top category and then there should be subcategories and all the pages related to that subcategory should be placed in that folder. Remember the fact that any (I repeat any) page in the site should be just 2 clicks or a maximum of 3 clicks away from root index page. You will say, okay this is possible in small sites but how come is this possible in bigger sites. Read on:

Sitemap: Always make a sitemap. A good sitemap is one which allows visitors to reach any page on the site with just 2 or 3 clicks. And that's why good sitemap increases rankings by providing deep crawl ability.

CSS design principles

2007-10-25T17:21:00.000+05:30

CSS2, as CSS1 before it, is based on a set of design principles:

Forward and backward compatibility. CSS2 user agents will be able to understand CSS1 style sheets. CSS1 user agents will be able to read CSS2 style sheets and discard parts they don't understand. Also, user agents with no CSS support will be able to display style-enhanced documents. Of course, the stylistic enhancements made possible by CSS will not be rendered, but all content will be presented.

Complementary to structured documents. Style sheets complement structured documents (e.g., HTML and XML applications), providing stylistic information for the marked-up text. It should be easy to change the style sheet with little or no impact on the markup.

Vendor, platform, and device independence. Style sheets enable documents to remain vendor, platform, and device independent. Style sheets themselves are also vendor and platform independent, but CSS2 allows you to target a style sheet for a group of devices (e.g., printers).

Maintainability. By pointing to style sheets from documents, webmasters can simplify site maintenance and retain consistent look and feel throughout the site. For example, if the organization's background color changes, only one file needs to be changed.

Simplicity. CSS2 is more complex than CSS1, but it remains a simple style language which is human readable and writable. The CSS properties are kept independent of each other to the largest extent possible and there is generally only one way to achieve a certain effect.

Network performance. CSS provides for compact encodings of how to present content. Compared to images or audio files, which are often used by authors to achieve certain rendering effects, style sheets most often decrease the content size. Also, fewer network connections have to be opened which further increases network performance.

Flexibility. CSS can be applied to content in several ways. The key feature is the ability to cascade style information specified in the default (user agent) style sheet, user style sheets, linked style sheets, the document head, and in attributes for the elements forming the document body.

Richness. Providing authors with a rich set of rendering effects increases the richness of the Web as a medium of expression. Designers have been longing for functionality commonly found in desktop publishing and slide-show applications. Some of the requested rendering effects conflict with device independence, but CSS2 goes a long way toward granting designers their requests.

Alternative language bindings. The set of CSS properties described in this specification form a consistent formatting model for visual and aural presentations. This formatting model can be accessed through the CSS language, but bindings to other languages are also possible. For example, a JavaScript program may dynamically change the value of a certain element's 'color' property.

Accessibility. Several CSS features will make the Web more accessible to users with disabilities:

Properties to control font appearance allow authors to eliminate inaccessible bit-mapped text images.
Positioning properties allow authors to eliminate mark-up tricks (e.g., invisible images) to force layout.
The semantics of !important rules mean that users with particular presentation requirements can override the author's style sheets.
The new 'inherit' value for all properties improves cascading generality and allows for easier and more consistent style tuning.
Improved media support, including media groups and the braille, embossed, and tty media types, will allow users and authors to tailor pages to those devices.
Aural properties give control over voice and audio output.
The attribute selectors, 'attr()' function, and 'content' property give access to alternate content.
Counters and section/paragraph numbering can improve document navigability and save on indenting spacing (important for braille devices). The 'word-spacing' and 'text-indent' properties also eliminate the need for extra whitespace in the document.

Class vs. ID

2007-10-19T12:07:00.000+05:30

The ID attribute of an HTML tag is intended solely to provide a unique identifier. The CLASS attribute, however, was specifically designed to allow authors to assign styles to elements.

Strictly speaking, no two elements within a document (web page) can have the same ID. Anytime you add an ID attribute to a tag, its value should be different from that of any other element's ID on the page, even if they have different tag names. So a style rule with an ID selector can, at most, only apply to a single element on a page.

So why not just use an inline style instead of an ID selector in a style sheet? Well, you'll probably find it more convenient to keep all your style definitions in one place, rather than scattered throughout the document. And, if the style sheet is external, it can be shared by multiple pages.

The class selector, on the other hand, can be applied to several elements on a page. You can even make rules using the same class name with different tag names. As an example, given the following,

h3.this{
color: red;
}

p.this{
color: gray;
}

...

Danger


Proceed with caution!

the text within the H3 element would be red but the text within the P element would be gray.

Best CSS Tips

2007-10-09T12:30:00.000+05:30

px for font sizes

Sacrilege, I know. There are perfectly good ways to get consistent font sizing and I really should use them but Internet Explorer is the only browser that I can think of that doesn't resize text. If the majority of your audience uses IE, then be nice to them and don't use pixels. Otherwise, I figure with IE7 supporting it, pixels are the new ems.

When using pixel sizes, I also get to be sparing in my usage. I specify it on the body and any headers that need it. Inheritance is less of an issue (how many sites have you seen list items inexplicably smaller than the rest of the content like it was less important).

CSS declarations on one line

I've always put my entire declaration on one line. The second one may look prettier but it sure doesn't help me find anything. When looking for something in a style sheet, the most important thing is the ruleset (that's the part before the { and } ). I'm looking for an element, an id or a class. Having everything on one line makes scanning the document much quicker as you simply see more on a page. Once I've found the ruleset I was looking for, find the property I want is usually straightforward enough as there are rarely that many.

Blocking the Styles

I break down my style sheet into three separate blocks. The first is straight element declarations. Change the body, some links styles, some header styles, reset margins and padding on forms, and so on. This is usually a small block as I only like to redefine what I need to. No global margin and padding reset for me. I clear the body and form and maybe adjust paragraph if the design really needs it. Otherwise, let the browser handle it. I find the more you try to override what the browser does, the more styles you have to put in, which simply adds to the time to track down bugs and maintain the code.

After element declarations, I have my class declarations; things like classes for an error message or a callout would go hear. I usually only have a couple of these.

Finally, the meat. I start by declaring my main containers and then any styles for elements within those containers are indented. At a quick glance, I can see how my page is broken down and makes it easier to know where to look for things. I'll also declare containers even if they don't have any rules.

Browser Support

Support only the latest browsers. That means dropping support for IE5 and IE5.5. Lots of time and effort to be saved here. No box model hacks needed for IE6. In fact, in supporting just the most recent versions of browsers, I end up using very few hacks. Along with using very few hacks means I can avoid shovelling different style sheets to separate browsers. I have one sheet, and that's it. Any hacks I do use are normally commented as such. Similar to the use of pixel measurements, you have to consider your audience before dropping browser support.

The biggest thing for me is still triggering hasLayout in IE to do float containment and I've been using zoom:1 for that. I like it because it's innocuous and shouldn't mess with anything else.

Containing Floats

I just touched on float containment so let's expand on that. My current approach to containing floats is using overflow:hidden (with possibly zoom:1 for Internet Explorer). No clearing div or use of :after. Only worry about containing your floats if you have a background you are trying to set on your container. The overflow should be set on the container.

Keep in mind that the content within the container should be designed to stay within the container. Anything too big and it'll get clipped. Shifting things using negative margins outside the container will also get clipped.

Understand Overflow

Overflow is usually where people get bit by IE. If you've got two floated elements and the content from the left container overflows then, in IE, the container grows and inevitably pushes the right container below it. This is usually a sign that you've messed up your margins, widths, or padding on one of these containers but Firefox (et al) won't reveal this. Using something like overflow:hidden or overflow:scroll on a container can help prevent IE from allowing the content to push the width of the container but you're better off trying to fix the issue in the design.

Allow Block Elements to Fill Their Space Naturally

My rule of thumb is, if I set a width, I don't set margin or padding. Likewise, if I'm setting a margin or padding, I don't set a width. Dealing with the box model can be such a pain, especially if you're dealing with percentages. Therefore, I set the width on the containers and then set margin and padding on the elements within them. Everything usually turns out swimmingly.

Use CSS Shorthand

This might seem like beating a dead horse but I still see people doing really verbose statements where they're setting margin-top, margin-right, margin-bottom and margin-left. My general rule of thumb is, you can use the long form only if you're setting one side. Once you have to set more than one side, it'll take less bytes to use shorthand.

In shorthand, remember that the properties start at the top and work clockwise. margin: top right bottom left; It's also handy to know the shorter forms if you have equal values for top and bottom or left and right.

For border, if you only have to set more than one side differently then use two declarations. The first to set all sides, and then a second to change the values for one of the properties.

Avoid Unnecessary Selectors

Just specify the minimum number of selectors necessary for the style. If you find yourself doing ul li {...} or table tr td {...} then you're being more verbose than you need. LI's will inevitably be in UL's (okay, I suppose they could find themselves in OL's, in which case, be more specific for those styles) and a TD will inevitably be in a TR and a TABLE.

Or putting the element name in front of an ID selector (Example: div#navigation). I used to do this because it'd help me "remember" which element the ID is on. As it turns out, I tend to use similar class names from project to project and they inevitably appear on the same elements. I also tend to just do a search to find where something is. So, these days, I just leave it at #navigation.

Using less selectors will mean less selectors will be needed to override any particular style — that means it's easier to troubleshoot.

Keep it Simple

If it hasn't been evident throughout this post, only add when you need to, and that includes hacks. No need to get any more complicated than you need to.

Size text without using pixels

If you’re wondering how some designers get font sizes to work using em as a unit rather than px, it’s easy. There is a trick that was written about a while ago (maybe on ALA) that resets the font sizes for the entire site so that 1.0em is the same as 10px.

body { font-size: 62.5% }

Simply throw the font-size: 62.5% bit into your body styling and you’re done. Now you can use ems to sizes your fonts rather than pixels.

So your paragraph styles might look something like this:

p { font-size: 1.2em; line-height: 1.5em; }

You might be wondering why it matters how you size fonts? Any major site needs to be able to withstand a user enlarging text (old people use the web too!), and setting absolute sizes is not good practice.

Make your code easy to read

When I was looking at some of the CSS code, I noticed that he separated his heading tags nicely. It looked something like this:

h1 {}
h1#logo { font-size: 2em; color: #000; }
h2 {}
h2.title { font-size: 1.8em; font-weight: normal; }

Quickly scanning the CSS for the different heading tags is a breeze if you use this technique. It is also helpful if you’re sharing code or working on a large site where you are using the same heading tags (say, h2) in multiple places since you’ll be able to style each one independently and not worry about child classes inheriting attributes from the parent class.

I also use similar techniques for paragraph tags, anchor tags, and any other tag that requires multiple classes to look correct in every instance.

Separate code into blocks

This might be common sense to some of you but sometimes I look at CSS and it’s not broken down into “sections.” It’s easy to do an it makes working with code weeks, months, or years later much easier. You’ll have an easier time finding classes and elements that you need to change.
This is how I usuall break down my site:

/* Structure */

This is where I’d put the primary site structure divs and classes.

/* Typography */

This is where I would list things like paragraphs, headings, and other miscellaneous font styles such as small and strong tags.

/* Links */

This one is simple - all the styling for anchor tags.

/* Lists, images, etc. */

This is where I would style images, lists, and any other elements that didn’t fit into the rest of the section. If I have an unordered list for the navigation I might setup a new section for navigation and setup all the styles for the navigation, including the list and link styles, in this section - it makes editing the navigation much easier.

Stop using so many divs!

This has been echoed by a lot of coders and standards nuts, and while I don’t think there is anything wrong with using a lot of block level elements, I laugh a little when I see someone style their article headlines using a div rather than a heading tag. Some people even style their bylines using a div! Try using the small tag or the a span for goodness sake.

Style everything at once

I noticed that I was typing “margin: 0; padding: 0;” in just about every element. I remembered seeing someone use “*” to style everything on a page at once. I decided it didn’t make much sense to define margin and padding over and over when I always gave them the same parameters.
It’s easy to do:

* { margin: 0; padding: 0; }

Now you only have to define margin and padding on elements where you actually want some.