TMF Web Design

Staying Above the Fold(?)

2011-11-02T04:44:00.002+11:00

All web designers know about the fold. We also all know about the myth: 80% of web users never scroll down a webpage and therefore don't see your content below the fold.

For those unacquainted"the fold" in web design terms refers to the area of a web page which is visible on the screen without needing to scroll down the page. Needless to say the most important content must naturally be within this area. The fold usually comprises of an area of 1024 x 700 pixels for average desktop computers(with a 1024 x 740 resolution) and if your designingwith netbooks in mind then you need to consider that most netbooks have a screen height of 600px, which means your fold should stop at approximately 560px.

This area however has been becoming less important and having much of your content hidden below the fold has become a diminishing issue. As some research from cx parteners has shown the vast majority of users DO scroll down the page and having less content in the fold can encourage users to scroll down to find what they are looking for.

Take a look at the research: http://www.cxpartners.co.uk/thoughts/the_myth_of_the_page_fold_evidence_from_user_testing.htm

10 Good Sitemap Footers

2011-09-13T20:47:00.010+10:00

Ten examples of how to use a footer to benefit the design of a website and improve navigation.

Mashable.com

Skype.com

Flashdo.com

Squaremeal.co.uk

Searchsoa.techtarget.com

Hostelworld.com

Shutterstock.com

Deviantart.com

Themeforest.net

Taronga.org.au

Tools for SEO

2011-05-07T16:38:00.006+10:00

Designing and building a website is one thing, getting that number one position on search engines is all together another. This is where search engine optimization (SEO) comes in. SEO is an ongoing process for any website with the goal of making your site appear as high as possible in search engine rankings - and also making sure your site appears in the correct searches for your target market. There's no point in your food transport services business appearing where people are searching for restaurants.

Below is a list of online tools which I have made use of in the past to good effect. Each one can help send your SEO strategy pointing in the right direction to achieve a higher position in searches.

Firefox SEO Doctor

There are many plugins available for Firefox, one of the best I have found for analyzing the seo quality of a webpage is SEO Doctor. It gives any page a percentage score based on various factors that affect a pages SEO including the position of the highest <h1> tag, title tag and the number of links. The feature that makes this plugin shine however is that it will tell you what you need to fix on a page to make sure it has the best possible SEO score when there are marks against your page.

Firefox PageRank

A simple but useful tool wich sits in your firefox browsers toolbar and tells you the Google page rank for the current web page you have open. Great for checking your own sites but also great for comparing with your competitor sites too.

KPMRS

Keyword Position Monitoring Report Service is a search engine keyword position tracking tool. You can track various keywords and the position where your website appears when that keyword is searched. It covers all major search engines and also gives you location specific results (search engine results are often displayed relevant to your current location). There is a free limited service which comes with a small number of keywords/websites you can track, and for a reasonable price you can upgrade your service by purchasing extra keywords or adding more websites.

Google Webmaster Tools

Google offers their own tool for tracking your websites indexing and positioning on the Google search engine. Some features include a daily updated search query tool with impression and click data, sitemap, keyword management and crawl error reports.

Bing Webmaster Tools

At time of writing bing controls a bit almost 30% of the internet search market share, and is growing. Which makes closely tracking your bing positioning critical as it can count for a huge amount of your traffic. The Bing webmaster tools, although not quite as extensive as the Google webmaster tools still has a list of useful tools for sitemap, indexing management and crawl reports.

Yahoo Site Explorer

Yahoo Site Explorer provides a way to track your websites performance on the Yahoo search engine, including sitemap submission and indexing data.

Google Analytics

Google analytics is a free website analytical tool which helps you monitor your traffic and analyze your visitors. When used to good effect this tool will guide you in targeting your website to the correct market and getting the most out of each visit to your site. I would consider this a must-have for any website owner wanting to get ahead in their market.

Webalizer

This tools achieves the same goal as Google analytics, however has a distinct advantage over it's Google counterpart, it doesn't rely on JavaScript code to collect it's data but instead runs on the same server that your website is hosted on - this means Webalizer will have almost perfect accuracy when collecting data. The downside is that it's design is not very user friendly so will have to spend a bit of extra time getting to know the program the make the most out of it. Webalizer is easy to install, in fact it comes with just about every hosting package currently available.

XML Sitemaps.com

This website sells a product that can build a complete search engine friendly sitemap for any website at the click of a button. The program is affordable and installs onto your server as a sub-folder within your website. There is also a free alternative which requires no installation and runs off the XML-sitemaps.com website, however there a limit to the amount of pages you can add. Definitely worth checking out if you are in need of a sitemap.

XML sitemaps Wordpress plugin

This free plugin is the best solution I have found for building sitemaps for any self-hosted wordpress site. The plugin will automatically build the sitemaps for you as often as you like and notify major search engines of the changes. Sitemaps can also be customized with Wordpress specific options such as selecting which post categories to include/exclude.

Ping-O-Matic

Ping-O-Matic is a free service that can notify various search engines of updates to your blog. Apart from the major search engines Ping-O-Matic also notifies others such as IceRocket, Weblogs.com and NewGator.

Google Shopping

If you run an online store then this can serve as an extra pathway to which you can present your products to your customers online. Submit the products from your store and people can find those products directly through Google Shopping search.

Mass Search Engine Submission

This is a device often offered by hosting companies and also often quite costly, however can also bear unseen fruits. There are over 400 different search engines around the world, and these services offer to submit your URL to all of these search search engines for you. Now it's true that the vast majority of your traffic will come from google bing and yahoo, but if your website is new and you need to build visitors then it can pay off to get your name out to as many search engines as possible, you never know which one will start ranking your site high in results. One example of such services is Search Engine Booster.

HTML Special Characters

2011-04-10T22:54:00.000+10:00

Special Characters and symbols can be placed into any HTML page similar to a text or word document. To place a symbol into a HTML page a unique code must be entered into the HTML.

For Example, to quote a famous line from William Shakespeare:

"To be, or not to be: that is the question"

The HTML code for the above line would look something like this:

" To be, or not to be: that is the question "

Below is a list of many (but not quite all) of the special characters which can be used in a HTML document, along with the relevant name and/or number code for each character.

Character	Name Code	Number Code	Meaning
'	‘		left single quote
'	’		right single quote
‚	&sbquo;		single low-9 quote
"	“		left double quote
"	”		right double quote
"	&bdquo;		double low-9 quote
†	&dagger;		dagger
‡	&Dagger;		two daggers
‰	&permil;		per mil symbol
‹	&lsaquo;		single left angle quote
›	&rsaquo;		single right angle quote
♠	&spades;		spade suit
♣	&clubs;		club suit
♥	&hearts;		heart suit
♦	&diams;		diamond suit
‾	&oline;		overline
←	←		left arrow
↑	↑		up arrow
→	→		right arrow
↓	↓		down arrow
▲		▲	filled up arrow
▼		▼	filled down arrow
►		►	filled right arrow
◄		◄	filled left arrow
™	™		trademark symbol
!		!	exclamation mark
“	"	"	double quote mark
#		#	number symbol
$		$	dollar symbol
%		%	percentage symbol
&	&	&	ampersand
‘		'	apostrophe
(		(	left parenthesis
)		)	right parenthesis
*		*	asterisk
+		+	plus symbol
,		,	comma
-		-	hyphen
.		.	period
/	&frasl;	/	slash
:		:	colon
;		;	semicolon
<	<	<	less-than symbol
=		=	equals symbol
>	>	>	greater-than symbol
?		?	question mark
@		@	at symbol
☺		☺	unfilled smiley face
☻		☻	filled smiley face
[		[	left square bracket
]		]	right square bracket
\		\	backslash
_		_	underscore
`		`	grave accent
{		{	left curly brace
\|		\|	vertical bar
}		}	right curly brace
♪		♪	single musical note
♫		♫	double musical note
~		~	tilde
–	–		en dash
—	—		em dash
			nonbreaking space
¡	¡	¡	inverted exclamation mark
¢	¢	¢	cent symbol
♂		♂	male symbol
♀		♀	female symbol
£	£	£	pound sterling
¤	¤	¤	general currency symbol
¥	¥	¥	yen symbol
¦	¦ or &brkbar;	¦	broken vertical bar
§	§	§	section symbol
¨	¨ or &die;	¨	umlaut
©	©	©	copyright
ª	ª	ª	feminine ordinal
«	«	«	left angle quote
»	»	«	right angle quote
¬	¬	¬	not symbol
			soft hyphen
®	®	®	registered trademark
¯	¯ or &hibar;	¯	macron accent
°	°	°	degree symbol
±	±	±	plus or minus
²	²	²	superscript two
³	³	³	superscript three
´	´	´	acute accent
µ	µ	µ	micro symbol
¶	¶	¶	paragraph symbol
·	·	·	middle dot
¸	¸	¸	cedilla
¹	¹	¹	superscript one
º	º	º	masculine ordinal
¼	¼	¼	one-fourth
½	½	½	one-half
¾	¾	¾	three-fourths
¿	¿	¿	inverted question mark
À	À	À	uppercase A, grave accent
Á	Á	Á	uppercase A, acute accent
Â	Â	Â	uppercase A, circumflex accent
Ã	Ã	Ã	uppercase A, tilde
Ä	Ä	Ä	uppercase A, umlaut
Å	Å	Å	uppercase A, ring
Æ	Æ	Æ	uppercase AE
Ç	Ç	Ç	uppercase C, cedilla
È	È	È	uppercase E, grave accent
É	É	É	uppercase E, acute accent
Ê	Ê	Ê	uppercase E, circumflex accent
Ë	Ë	Ë	uppercase E, umlaut
Ì	Ì	Ì	uppercase I, grave accent
Í	Í	Í	uppercase I, acute accent
Î	Î	Î	uppercase I, circumflex accent
Ï	Ï	Ï	uppercase I, umlaut
Ð	Ð	Ð	uppercase Eth, Icelandic
Ñ	Ñ	Ñ	uppercase N, tilde
Ò	Ò	Ò	uppercase O, grave accent
Ó	Ó	Ó	uppercase O, acute accent
Ô	Ô	Ô	uppercase O, circumflex accent
Õ	Õ	Õ	uppercase O, tilde
Ö	Ö	Ö	uppercase O, umlaut
×	×	×	multiplication symbol
Ø	Ø	Ø	uppercase O, slash
Ù	Ù	Ù	uppercase U, grave accent
Ú	Ú	Ú	uppercase U, acute accent
Û	Û	Û	uppercase U, circumflex accent
Ü	Ü	Ü	uppercase U, umlaut
Ý	Ý	Ý	uppercase Y, acute accent
Þ	Þ	Þ	uppercase THORN, Icelandic
ß	ß	ß	lowercase sharps, German
à	à	à	lowercase a, grave accent
á	á	á	lowercase a, acute accent
â	â	â	lowercase a, circumflex accent
ã	ã	ã	lowercase a, tilde
ä	ä	ä	lowercase a, umlaut
å	å	å	lowercase a, ring
æ	æ	æ	lowercase ae
ç	ç	ç	lowercase c, cedilla
è	è	è	lowercase e, grave accent
é	é	é	lowercase e, acute accent
ê	ê	ê	lowercase e, circumflex accent
ë	ë	ë	lowercase e, umlaut
ì	ì	ì	lowercase i, grave accent
í	í	í	lowercase i, acute accent
î	î	î	lowercase i, circumflex accent
ï	ï	ï	lowercase i, umlaut
ð	ð	ð	lowercase eth, Icelandic
ñ	ñ	ñ	lowercase n, tilde
ò	ò	ò	lowercase o, grave accent
ó	ó	ó	lowercase o, acute accent
ô	ô	ô	lowercase o, circumflex accent
õ	õ	õ	lowercase o, tilde
ö	ö	ö	lowercase o, umlaut
÷	÷	÷	division symbol
ø	ø	ø	lowercase o, slash
ù	ù	ù	lowercase u, grave accent
ú	ú	ú	lowercase u, acute accent
û	û	û	lowercase u, circumflex accent
ü	ü	ü	lowercase u, umlaut
ý	ý	ý	lowercase y, acute accent
þ	þ	þ	lowercase thorn, Icelandic
ÿ	ÿ	ÿ	lowercase y, umlaut

Web Typography

2011-04-01T10:41:00.000+11:00

This is a great guide I found to utilizing good typography on your website. On any website, content is king so make sure your users can read your content.

http://ilovetypography.com/2008/02/28/a-guide-to-web-typography/

HTML Lists

2011-03-08T10:46:00.000+11:00

HTML lists can be used to display content such as bullet points or numbered bullets on a web page. For example:

my list item
my list item
my list item

or a numbered list:

my list item
my list item
my list item

Writing the code for a HTML list is very easy. For a bullet point list we start with this tag - <ul> (it stands for "Unordered List", simple right?). Every bullet point hereafter will be contained in <li></li> tags (the "li" stands for "list item"). At the end of all of the list items (bullet points) we close the unordered list with a </ul> tag. Here is the code which builds the bullet point list above:

The code for a numbered list is very similar, we simply replace the <ul></ul> with an <ol></ol> tag (stands for ordered list):

And thats the basics of HTML lists, if you have any other questions regarding lists let me know in the comments section.

CSS Position

2011-03-07T22:01:00.000+11:00

The CSS Position selector can be used to position elements around the page anywhere you want regardless of where the element appears in the HMTL document, ignoring all other elements on the page (like a new layer). Normally the position of all elements on a web page are determined by where it has been placed in the HTML, or by how the browser has rendered the page. Using this CSS selector we can gain much more control on where these elements appear.

There are a few different types of positioning in CSS, these include:

Fixed Positioning
Relative Positioning
Absolute Positioning
Static positioning

Fixed Positioning will place an element exactly where you want it relative to the web page, as a user scrolls down the fixed element will stay in the same spot (this is often used for menus that scroll down the page with you and backgrounds that don't move). Relative Positioning will allow you to move an element anywhere you like relative to its normal position, this can be useful when you need to shift something by a few pixels. Absolute Positioning works the same as fixed except it is relevant to the closest parent element which is relatively positioned. This also means that it scrolls with the page as normal, this positioning is often used in CSS drop down menus. Static Positioning is the default setting for all elements and would not normally be used unless you need to override a previous style.

The Image above demonstrates the default position of a <div> element which has had different CSS postions applied to it. Note how the absolute position moves to the corner of its containing <div>, this is because the containing <div> has a relative position set. In The Next box, the relatively positioned <div> is in the same place as it would have normally been, this is how it should be as a relative position allows you to move an element to any spot starting from its original location using CSS selectors (which I will talk about in a moment).

Example CSS code with all possible variations of the position selector:

div {
     position:absolute;
     position:relative;
     position:fixed;
     position:static;
}

To move a positioned element around the page you can use any of the following selectors:

div {
     position:absolute;
     left:30px;
     right:10px;
     top:10%;
     bottom:15%;
}

You can also control which elements appear above or below others (like a layer order):

#div1 {
z-index:1;
}

#div2 {
z-index:2;
}

In this example #div2 will overlap #div1, in other words the element with the higher z-index will appear on top of the element with the lower z-index.

Making Web Buttons

2011-03-05T19:05:00.003+11:00

When it comes to making buttons for your website there are many different design options you can take. The buttons I will teach you to make in this tutorial is a design which I have used many times on a number of websites to make those little functionality buttons such as 'submit' or 'more info'. The design is fairly simple and easily customizable, by just changing the colours the button can easily fit into any website design palette.

This button was built using Photoshop CS5, however could be built using any professional grade image editing program.

Create a New File

Create a new Photoshop file by clicking File -> New in the menu bar. Set the width of the file to 400 pixels and the height to 200 pixels. This is much larger than what you would normally use however for the purpose of this tutorial we will make the button larger and save it as a smaller version for web use.

Draw the Button Shape

Select the Rounded Rectangle Tool and set the corner radius to 25 pixels. Now point your cursor to the top left corner of the screen, however not the VERY edge - you want to leave a small space between the edge of your button and the edge of your image so there is room to a add a drop shadow around your button later.

Once you have postioned your cursor close to the top left corner of your image (about 5px space should do it) click and drag down to the bottom right edge (leaving the small gap before the end of the image as you have at the top left corner) and unclick the mouse button. You now have the basic shape of your web button.

Add Some Colour

Now we need to add some colour to our button. To do this I have used a gradient overlay effect. In the layer palette highlight (click on) the button layer your created in the last step, click the effects icon at the bottom of the layer palette and select 'gradient overlay'. Click on the gradient display and enter these two colours in the hexadecimal box, "#253fac" for the left and "#405ac6" for the right colour (If you need more help on applying gradients in Photoshop see my other tutorial - Gradient Backgrounds).

You can of course use any 2 colours for your button however as a rule I always make sure the colours I use have minimal contrast and derive from the same base coloour as it looks much more professional and clean then something like a pink/yellow gradient.

Dropshadow

Next we apply a drop shadow to our button. Click on the effects icon again and select "drop shadow" from the list. The drop shadow will be applied to the button automatically, leave all the setting as default and click ok.

Write the Text

Lastly we need to write the text for our button. In this case we will use black, size 116pt and font "Helvetica". Select the text tool from the toolbar and set the colour, size and font accordingly. Now write the text "sumbit" and position it in the middle of the button.

Generally speaking I will only ever use black, white, dark gray or light gray colours for button text. The text should also have enough contrast with the background to be readable, which is another reason why it is important to have a low contrast between the 2 gradient colours. For example if the bottom colour on the gradient was dark and the top colour was light then it would hard to read any text there as it would blend in too much with the background towards either the top or bottom of the button.

Last Touches

In the layer palette deselect the visibility icon for the background layer, making it invisible. Select File -> Save for Web and Devices from the main menu and set the dimensions to 60x40 pixels and the file type as .png. Save the file and the button is finished! when you know this simple technique off by heart buttons like this can be made in under 2min.

CSS Padding

2011-03-04T11:25:00.000+11:00

The padding selector can be used to create extra space around the content of an element within its boundary. Extra padding will expand the area of its border and the total size of the element. For example if I set a <div> element to be 500x100px in size with a padding of 10px then the total calculated size of my <div> is now 520x120px because a 10px of padding is added to each side of my <div> tag.

So why use it? Padding is a great way to space an elements content away from the border, which looks much cleaner and easier to read:

This box has no padding. Note how the text hugs the side of the border and looks messy and hard to read

This box has 10px of padding. This is much neater! and easier to read too.

To use the padding selector is very easy, the code below shows an example of every different variant of the padding selector as well as all of the possible values to enter:

div {
   /*these all set a 10px padding around every side*/
          padding:10px;
          padding:10pt;
          padding:10em;
        padding:10%;
   /*padding can also be set to specific sides*/
          padding-top:10px;
          padding-right:20px;
          padding-bottom:30px;
          padding-left:40px;
     /*specific sides can also be set in a condensed line of code, the code below will do exactly the same thing as the code above*/
          padding:10px 20px 30px; 40px;
}

CSS Border

2011-03-03T14:38:00.003+11:00

The CSS border selector allows you to set a border around HTML elements on a web page. For example the code:

#mydiv {border:2px solid #444444;}

Gives this <div> element a 2px wide solid border with a colour defined by the hexadecimal value 444444.

The border selector contains 3 parts:

The width of the border
The Border style
The colour of the Border

The table below outlines all of the different variations of the border selector and the possible values that can be applied to them.

Property	Description	Values
border	Sets all the border properties in one declaration	border-width border-style border-color
border-bottom	Sets all the bottom border properties in one declaration	border-bottom-width border-bottom-style border-bottom-color
border-bottom-color	Sets the color of the bottom border	border-color
border-bottom-style	Sets the style of the bottom border	border-style
border-bottom-width	Sets the width of the bottom border	border-width
border-color	Sets the color of the four borders	color_name hex_number rgb_number transparent inherit
border-left	Sets all the left border properties in one declaration	border-left-width border-left-style border-left-color
border-left-color	Sets the color of the left border	border-color
border-left-style	Sets the style of the left border	border-style
border-left-width	Sets the width of the left border	border-width
border-right	Sets all the right border properties in one declaration	border-right-width border-right-style border-right-color
border-right-color	Sets the color of the right border	border-color
border-right-style	Sets the style of the right border	border-style
border-right-width	Sets the width of the right border	border-width
border-style	Sets the style of the four borders	none hidden dotted dashed solid double groove ridge inset outset inherit
border-top	Sets all the top border properties in one declaration	border-top-width border-top-style border-top-color
border-top-color	Sets the color of the top border	border-color
border-top-style	Sets the style of the top border	border-style
border-top-width	Sets the width of the top border	border-width
border-width	Sets the width of the four borders	thin medium thick length inherit

_{Table courtesy of W3Schools}

Placeholder Images

2011-03-03T13:13:00.000+11:00

Filling your prototype designs with placeholder images can eat up development time if you don't have a good image set ready. There is another way you can add placeholder images to your unfinished designs, with a single line of code that links to an online service and loads the images where you need them.

placehold.it is a service that does just that, saving a bit of time and hassle on your part.

Another alternative to placeholdit with a slight humorous twist is placekitten, which provides the same service but only feeds pictures of kittens.

PHP in External Stylesheets

2011-03-03T12:10:00.000+11:00

PHP can be used in an external CSS file and linked from a HTML document in a similar way any normal stylesheet would. Using PHP in a stylesheet opens doors to powerful new functionality such as database integration and conditional styles.

The first thing you need to do is create a new .php file or rename your .css file to .php and add the following code to the top of the page:

<?php
header('Content-type: text/css');
?>

This code alters the page header settings to tell the browser to pass the content as a normal CSS stylesheet file. Next you need to link to your new PHP stylesheet!

And thats it, you can now add any PHP code into your stylesheet! Pull data from the database to display user set styles, change styles based on the day of the week or time of day, or control styles with conditional statements.

CSS Drop Down Menu

2011-03-02T21:28:00.006+11:00

This is a purely CSS drop down menu. It works on all major web browsers (IE7 and 8, Firefox, Chrome, Safari) and falls back gracefully to a normal menu in IE6.

The basic principal behind this code is that each menu item (including it's relevant drop down items) are contained within a list item (<li>) tag within an un-ordered list - which is given the CSS id of #ddm.

Inside each list item are two parts, the top link and its drop down links. The drop down links are contained within their own <div> tag to make them easy to control with CSS. Each <div> tag within the menu is set to invisible by default using the CSS selector - [#ddm li div {visibility:hidden;}]. What this selector is saying is that every <div> element on the page which exists inside an <li> element which is inside an element with an id of #ddm must be invisible to the user.

When the mouse is hovered over a list item the visibility state of the <div> tag is reversed - [#ddm li:hover div {visibility:visible;}]. This selector tells the browser that every <div> element on the page that is contained inside an <li> element which currently has the mouse hovering over the top of it and is inside an element with an id of #ddm is now visible to the user.

When visible, the <div> tags appear in the right place due to a CSS selector [position:absolute;]. This selector allows us to put an element anywhere on the page we like relative to the first parent element with the [position:relative;] selector applied (in this case it is the <li> containing the <div>).

The last trick to this code is keeping the hover background colour on the top link after the mouse moves down to the drop down links (usually after the mouse moves off the top link to the drop down links below it, the top link loses its CSS [:hover] state therefore losing all the CSS styles set to it when a mouse hovers over it). To fix this I used the [#ddm li:hover a {...}] selector. This is telling the browser that all <a> tags (links) within an <li> on a [:hover] state in an element with an id of #ddm are to have said styles applied to them (in this case keeping the desired background colour). These styles will not effect the <a> tags within the drop down <div> tag.

The code for this drop down menu is below. If you have any questions/comments about this code let me know in the comments section.

CSS Styles:

#ddm {
        margin-left:0px;
        padding-left:0px;
    }

    #ddm li {
        list-style-type:none;
        float:left;
        position:relative;
        z-index:2;
    }

    #ddm li a {
        padding:5px;
        background:#39F;
        color:#fff;
        margin-left:2px;
        text-decoration:none;
        font-family:Verdana, Geneva, sans-serif;
        font-size:12px;
        display:inline-block;
        height:16px;
    }

    #ddm li a:hover {
        background:#388cdf;
    }

    #ddm li div {
        visibility:hidden;
        position:absolute;
        top:28px !important;
        top:26px;
        left:2px;
        background:#388cdf;
        width:200px;
        z-index:1;
    }

    #ddm li div a {
        background:none;
        float:none;
        display:block;
    }

    #ddm li div a:hover {
        text-decoration:underline;
    }

    #ddm li:hover a {
        padding-bottom:7px;
        background:#388cdf;
    }

    #ddm li:hover div {
        visibility:visible;
    }

HTML:

<ul id="ddm">
    <li>
        <a href="">Home</a>
        <div>
            <a href="">Latest News</a>
            <a href="">Popular products</a>
            <a href="">Cusotmer Feedback</a>
        </div>
    </li>
    <li>
        <a href="">About</a>
        <div>
            <a href="">History</a>
            <a href="">Satisfaction Policy</a>
        </div>
    </li>
    <li>
        <a href="">Products</a>
        <div>
            <a href="">Specials</a>
            <a href="">Outdoor</a>
            <a href="">Indoor</a>
            <a href="">Electrical</a>
        </div>
    </li>
    <li>
        <a href="">Services</a>
        <div>
            <a href="">Installation</a>
            <a href="">Delivery</a>
        </div>
    </li>
    <li>
        <a href="">Contact</a>
        <div>
            <a href="">Store Locator</a>
            <a href="">Give Feedback</a>
            <a href="">Search Knowledgebase</a>
        </div>
    </li>
</ul>

Tools for Web Development

2011-02-28T22:18:00.000+11:00

I have put this together as a list of useful tools that make web development just that little bit easier.

1. Firebug

A fantastic tool for debugging and testing your web page designs. With this tool you can use the mouse to select any page element and immediately see it's HTML and CSS code. Once selected you can also edit the element within Firebug and the changes appear on the screen in real time. Firebug also allows you to locate Javascript errors, can help in debugging server side code by showing you a pages parameters and headers and aids in performance testing by reporting how long each element of your web pages takes to load.

2. jQuery

Possibly the most widely used Javascript library in world. For those unacquainted with Javascript libraries, they are essentially a set of pre-written functions, similar to the already defined Javascript methods (e.g. alert()). The functions which make up the jQuery library do a fantastic job in making Javascript much easier to write and make Javascript much more powerful by allowing any coder to create impressive visual effects using a minimal amount of actual code.

3. OmniGraffle

A prototypers dream, with OmniGraffle you can quickly build multiple wireframes for a website and get to the right design before the development stage. OmniGraffle makes use of a set of simple drawing and text tools which make is easy to build mock designs.

4. NetBeans

My favorite free IDE and a good alternative to other expensive solutions such as Dreamweaver. Net Beans is brought to us by ORACLE and was originally built by SUN, a company which also built (now owned by ORACLE) VirtualBox, a free virtual machine program.

5. MAMP

Mac Apache MySQL PHP is a local server management package for Mac's. It makes running a local server for testing and development purposes almost too easy, simply install the app and it completely sets itself up on your computer. When you need to run the servers just open the app and your all good to go.

Eliminate form spam with CAPTCHA

2011-02-28T11:10:00.000+11:00

Building a web form is an effective and innovative way to get the right data and communications from your users. Forms however are often plagued by spam, fake form submissions often designed to trick you into clicking a link connected to a virus. The vast majority of these are sent automatically by a spam bot.

This is where CAPTCHA (Completely Automated Public Turing test to tell Computers and Human Apart) code comes in. It's simply a field you add to your form that makes sure it is in fact a human not a spam bot that is completing your form.

As the example below shows, CAPTCHA code includes 2 parts, an image in which a series of characters are show and a text field where the user enters the code. If the correct code is entered the form is submitted, if not it's rejected.

The concept of CAPTCHA code which made it such a success is that a spam bot cannot read the characters hidden in the image where a human can.

One of the most popular solutions is Google's reCAPTCHA. This code is widely used, very easy to set up on your website or blog and accessible to blind users.

Another solution which I personally use is http://www.white-hat-web-design.co.uk/articles/php-captcha.php. This code is PHP based and runs off your website, it is also nicely flexible and customizable.

How To: Auto Generate Your XML Sitemaps

2011-02-25T16:09:00.001+11:00

For a small site, hand coding your sitemap is easy enough if you have minimal pages which aren't likely to change in the future. However for large dynamic websites an automated solution is necessary.

These are a few options I have used in the past:

Google XML Sitemaps (Wordpress Plugin)

This is a free plugin for wordpress which allows you to build a sitemap of your wordpress site automatically. The program also notifies all major search engines of the sitemap update and has a large list of options to customize the sitemap it builds.

http://wordpress.org/extend/plugins/google-sitemap-generator/

xml-sitemaps.com

This script comes in two versions, the free limited version which is run from the xml-sitemaps.com server and a paid downloadable script ($19.99 at time of writing) which installs and runs on your own web server. One of the benefits of this script is its ability to run cron jobs, which means it will automatically create your sitemaps on its own as often as you tell it (e.g. once a week).

http://www.xml-sitemaps.com/

JCrawler (Joomla Extension)

A free Joomla extension which builds an XML sitemap of your website and submits it to 5 major search engines.

http://extensions.joomla.org/extensions/structure-a-navigation/site-map/5386

How To: Design a Web Page Layout

2011-02-25T14:31:00.003+11:00

How do you design the right layout to best meet the needs of the client and maximize the effectiveness of the page?

A badly laid out web page is one that does not achieve the web page's desired purpose in a streamlined and effective way. For example, a web page built to promote a competition which does not have a clear call to action at the end of the sales pitch (such as an 'enter now' button) would be demonstrating a bad layout because the user has taken the time to read/scan their way down the page there is no clear call to action to take them to the next step in the process.

Identifying Elements

The first thing you should do when starting a new layout is to define your page elements. If you try designing a page before you have an idea of what's going into it you'll find yourself drowning in re-designs before you build your first prototype! Defining your elements can be as simple as writing a list on a piece of paper. For example take the list below for a blog page layout:

logo/banner
menu
news/blog feed
module column
footer

Positioning the Elements

The elements of a web page need to be positioned to streamline the use of any web page. If the purpose of a web page is to display information then that information must be at the top of the page with no other distractions deferring from the beginning of the text other than those necessary such as the logo and navigation.

Some of the basic rules I stick to:

Users scan (not read) a web page diagonally downwards from top left to bottom right
The further down the page an elements is the less likely it is that it will be seen, so keep the most important elements towards the top of the page
Because users scan a page rather than reading, more important elements need to 'pop out' from the others, and in the same way less important elements should be made to blend into the background
The layout should always follow a clear or logical path

For example take the layout sketch below:

Notice that all of the elements on this page have come from the list earlier. This layout has been designed to maximize the effectiveness of the page to make it clear and simple to any user to read and enjoy the blog.

Logo/Banner - First thing comes comes first, the branding. Just about every single website will need the logo/name/banner to be in the top right or top center position of every page. Visually it is the most important spot on a web page as it is the first thing the user will see, and if a user leaves your web page with nothing else then it should be the image of your business in their memory.

Menu - This important element should always appear in a clear and logical place to make it easy for users to find their way through your website and find what they are looking for. In this case it appears just below the banner.

Blog Feed - This is the most important content element of the page, therefore it takes the most top left position after the logo/menu.

Modules - The modules take a right hand side postion as they are the least relevant content elements to any page, they will house links to other articles, archives, sub-menus, extra/quick links, tags, etc which are never important to the main purpose of the page but provide links to more content within the blog.

Footer - Down the bottom of course is the footer, which houses all of the extra content/links which do not always fit into the pages purpose but provide extra information about the website/business for those who want to know more. For example privacy statements, acknowledgments and links to related but external websites or social network accounts.

Testing your Layout for Effectiveness

There are a few ways of testing your layout for its effectiveness at guiding users to your desired outcome. One option is in-house testing, which involves observing users and how they react to your web page. For large scale testing I would suggest using the Google website optimizer which allows you to test different versions of web pages or page elements to determine which layout is the best for your website.

Website Fonts

2011-02-11T13:20:00.000+11:00

Getting the font you want on your website been a problem for many web designers for a long time. The problem ultimately lies in the fact that a web page's font are relient on which fonts are installed on the client machine. This can make your job as a web designer frustrating at times, different computers have different fonts installed... different phones have different fonts installed.... different tablets have different fonts installed!

The good news is our friends at Google have realised a new API to make our lives are little easier. It's called the Google font API as it allows websites to display fonts without needing the font to be installed on the client machine. It also doesn't use any server side code, just a single line of javascript and CSS.

At the time of writing this article the Google Font Directory consisted of 94 fonts and as consistently growing. You may also submit a font of your own to the directory here https://services.google.com/fb/forms/submitafont/

The Google Fonts Directory - http://code.google.com/webfonts

Getting Started Guide - http://code.google.com/apis/webfonts/docs/getting_started.html

Web Design Inspiration

2011-02-10T21:51:00.001+11:00

Finding it hard to spark the flare and design something your clients really want? Below is a list of websites I have used in the past to help me cross design bridges and get projects done to spec on time:

designmeltdown.com

An archive of web design trends and patterns. The website is mostly a collection of blog posts which focus on examples of web design elements such as footers, headers and navigation. However if your looking for a place to find quality examples to set your design bar or to just head you in the right direction then there is almost always something here to help you.

spammeltdown.com

Similar to Design Meltdown, Spam Meltdown focuses on email design. Examples of email design here are very numerous and a separated into a variety of categories. If you find yourself hired to design a HTML email to meet advertising goals then this is definitely a good place to start.

logopond.com

A collection of logos chosen for their effectiveness and creativity. There are many logo templates available at a cheap price if you know where to look. However if your client needs a truly custom logo to promote their brand then you will find some fantastic examples at this site, and hopefully something that will inspire your own creation.

colourlovers.com

A great place to find colour palettes for websites. This website has a vibrate community who submit their own colour palettes and patterns.

CMS for Web Designers

2011-02-10T20:27:00.001+11:00

Couch CMS is a new light weight content management system on the block built to take the heavy lifting out of designing your clients websites. Couch CMS can take any HTML/CSS website or template and enable it for custom editing in a fairly quick and easy setup process.

The control panel consists of a simple design which includes a left hand navigation menu to control the various static web pages and dynamic sections of the website. At the bottom of the navigation are separate links to manage users and comments.

Major Features:

Editable Regions
Clone Pages
Comments
Listing of Cloned Pages
SEO Friendly Links
Auto-Validating Forms
Events Calendar
Search
RSS Feeds
Custom 404/Site-Offline Pages
Paypal Integration
URL Cloaking

For more information visit the official site - www.couchcms.com

CSS List Style Type

2010-12-18T22:07:00.001+11:00

The CSS list style type selector allows you to change the bullet point that precedes list items by choosing from a set of predefined custom bullet points (you can also set your own custom image as the bullet point on lists using another CSS selector: list-style-image).

Examples

none	no bullet point at all
circle	circle
disc	filled circle. This is default
square	square
armenian	traditional Armenian numbering
decimal	number (1,2,3...)
decimal-leading-zero	number padded by initial zeros (01, 02, 03...)
georgian	traditional Georgian numbering (an, ban, gan...)
lower-alpha	lower-alpha (a, b, c, d, e...)
lower-greek	lower-greek (alpha, beta, gamma...)
lower-latin	lower-latin (a, b, c, d, e...)
lower-roman	lower-roman (i, ii, iii, iv, v...)
upper-alpha	upper-alpha (A, B, C, D, E...)
upper-latin	upper-latin (A, B, C, D, E...)
upper-roman	upper-roman (I, II, III, IV, V...)

CSS Text Align

2010-12-11T12:48:00.001+11:00

The CSS text-align selector sets the text justification within a HTML element. It has 4 possible values - left, right, center and justify.

Examples

text-align:left; or text-align:right; or text-align:center; or text-align:justify;

Simple Gradient Backgrounds for Web (using Photoshop)

2010-12-10T09:52:00.000+11:00

A gradient is a gradual transition between two colours. As a background for a website it can be much more pleasing to the eye compared to a flat colour.

The trick to a great looking gradient is choosing the right colours. Both should be similar to each other to achieve a subtle effect, strong gradients often look tacky on a website, especially when used with bright colours that don't match!

Making the gradient:

1. Open up Photoshop (I am using version cs3). Create a new file with a width of 20px and any height you require (I did 150px).

2. Now ad a new rectangle shape object to your image and make it the same size as image (20 x 150px). Our gradient will be put on the shape, by doing this you make it easier to come back later and edit the gradient colours if you need to.

3. Select the shape layer and open the layer effects. Tick the gradient box to ad a gradient overlay to the shape object.

4. Click gradient preview to open the gradient editor.

5. Now open the colour Picker by Double clicking the bottom left "Stop Marker".

6. Choose your first colour (I used #74c2de) by either entering the hexadecimal value into the text box or choose one from the colour picker.

7. Repeat step 4 - 6 for the second gradient colour however choosing a slightly darker colour (I used #5aacca).

8. Your gradient is now done! Save your file for web and devices (Click 'File' from the menu and select 'save for web and devices') and in the save options set the width of the image to 1px, however leave the height the same. This reduces file size and decrease your websites download time.

CSS Background

2010-12-05T16:44:00.000+11:00

Sets the background of HTML elements. This can be either a colour or an image, customized with some handy CSS options. There are a few different selectors you can use:

Selector	Description
background	Sets all background options in one selector
background-color	Specifies a background colour for a HTML element
background-image	Links an image to be used as a background
background-attachment	Sets whether the background image stays where it is placed or scrolls with the page
background-position	Allows you to offset the default position of the background

Examples

background:

background:url(images/myimage.gif) #999999 left top no-repeat scroll;

background-color:

background-color:#999999; or background-color:#grey; or background-color:rgb(153,153,153);

background-image:

background-image:url(images/myimage.gif);

background-attachment:

background-attachment:scroll; or background-attachment:fixed;

background-position:

background-position:left top; or background-position:5px 5px; or background-position:5% 5%;

How to Build a Website

2010-11-18T15:10:00.000+11:00

Have you recently entered the market for setting up your first website? Maybe you are a programmer/designer new to the industry just out of study or maybe you are not a web designer at all but have just started a brand new business venture and want to take it online.

Before you get started you need to know what actually makes up a website and what costs are involved.

There are 3 major parts to any website:

The domain name, e.g. “www.mysite.com”.

Every domain name is unique, it is the address to which your website can be found on the internet just the same as your home address is how your house can be found on the street. They must be bought through a domain name registrar and will cost somewhere between $10 and $20 per year. As I mentioned above, each domain name is unique so as soon as you know what you want, buy it! Otherwise it may be taken before you can get it.
The hosting package.

Every website must be stored on a server. In simple terms a server is a computer running a special server programme that is connected to the internet 24/7, allowing any other computer to access the files on the server any time of the day.

You can purchase a hosting package from one of many hosting companies around the world. A website can be hosted from any location in the world regardless of where you or your business actually resides. The differences in hosting overseas may be a cheaper cost due to exchange rates, however you may have trouble with their support because of time differences.

Make sure you shop around for your hosting, there are many aspects to a hosting package and some will look like a great deal at first but will incur extra costs for add on features you missed in the original sign up.

You can see some hosting company comparisons at http://www.findmyhosting.com/
The physical website itself.

These are the actual files that make up the website, for example the home page of a website will be a file called “index.html”.

If you are a web designer/developer you will already have this part covered. However if you are not then you will need to hire one! There are some “make your own website” options out there but they lack the power to build you a website worth selling.

A website can also be broken down into 3 areas:

The Logo

Designing your logo is an important process, and entirely separate from the website itself even though the two must match each other seamlessly. Your logo must reflect your business and if possible entice the emotions in people that relates to your business/website. Designing the logo is a process which can be just as long, important and costly as designing the website itself.

Expect to pay $600 - $800 for a professionally designed logo. If you are quoted less, the logo may just be template based and your options for customising it will be limited.

Images/Artwork

When having your website designed you will need to either supply or purchase some images, your designer will head you in the right direction and make some suggestions if needed.

The images you use can be ones you take yourself of your business/studio/shop or you may want to purchase some “stock images” from a website such as http://www.istockphoto.com/. Do not however use images you do not have permission for as the owner does have the right to take legal action.

An image bought from a stock images site will typically cost $5 - $20 per image, depending on the size/quality of the images you buy.

The Web Design

With the logo and images ready the website can be built. The theme of the website will likely be built to match your logo/images and any colour preferences you have already supplied.

In total expect to pay somewhere between $500 to $5000 for building a website depending on the scale of what you require.

Your web designer will upload your website to your hosting account and connect the domain name for you also.