Entries tagged as website design

Related tags

Key features of a good website navigation system

١٣ ذو القعدة ١٤٢٧
03 Dec 2006, 12:09 AM

Website useability is an important consideration in any website design. Websites are designed to be viewed by many different people and it is important that designers allow for different needs. A website navigation system must allow for easy and intuitive navigation between the different sections of a site. Some of the key features of any website navigation system are given below:


Continue reading "Key features of a good website navigation system"

Posted in General website design
Comments (0) | Trackbacks (0)
Defined tags for this entry: , , ,

RoundedCorner free website theme

٢٥ شعبان ١٤٢٧
18 Sep 2006, 12:44 PM
Click on thumbnail to see full sized version
Click to view larger image.
A standards based pure CSS design that is full of rounded rectangles and soft shadows. An ideal theme for a blog or personal site, roundedcorner is free for most uses. I would appreciate it if you did not remove the link to my site in the footer of each page. This theme has 3 variations included in the zip file.

Continue reading "RoundedCorner free website theme"

Posted in Themes
Comments (0) | Trackbacks (0)
Defined tags for this entry: , , ,

CSS button hovers without the lag

٢٤ شعبان ١٤٢٧
17 Sep 2006, 08:00 AM
Both the hover (bottom) and normal (top) states of the button are in one image.
One of the best features of css is the ability to perform button hovers without java script. By button hovers I mean creating links that have different background images based on whether the mouse pointer is over the link or not. With CSS this is as simple as setting different background images for the a tag and the a:hover pseudo class:
a{
background-image:url("img/normal.png");
}
a:hover{
background-image:url("img/mouseover.png");
}
 

The image specified in the a:hover class will be displayed when the user moves the mouse pointer over an image. Once the user moves the mouse pointer away from the image it will revert to normal.png as specified in the a class.

This technique is an easy way to implement button hovers but it has one flaw. When the user moves the mouse over the link for the first time there is a time lag during which the mouseover.png image is fetched by the browser. Therefore the user does not see this effect immediately.Whats the solution? Well I discovered it while going through the code of the free wordpress theme freshy.

The author of that theme Julien De Luca uses an interesting techinque. Both the normal state and the hover state of the button are placed in the same image. However the position of the background is changed depending on hover or not:

a {
background-image:url("normal.png");
background-position:top left;

}

a:hover{
background-position:bottom left;
}
 

Using this technique you can remove the time lag because the browser has to fetch only one image that contains both normal and hover states.

Posted in Code
Comments (0) | Trackbacks (0)
Defined tags for this entry:

Search engine optimization basics

٢٣ رجب ١٤٢٧
17 Aug 2006, 06:49 PM
Search engines are used by all netizens to find useful content. Search Engine Optimization or SEO is the art of developing websites that enjoy a good position on search engine results pages. Website designers and developers are keen to see their websites succeed.  Optimizing thier websites for search engine traffic can really help improve their website's visibility. In this post I examine some of the key factors that affect search engine rankings.

Continue reading "Search engine optimization basics"

Posted in Code, General website design
Comments (0) | Trackbacks (0)
Defined tags for this entry: , ,
(Page 1 of 1, totaling 4 entries)
This website theme by Abdussamad Abdurrazzaq