Navigation encompasses the range of ways a user may move around a web site, and the tools designers offer to help them.
Good navigation needs to complement the information architecture, and be totally clear.
Principles for good navigation design
A site must:
Let me know where I am at all times
Clearly differentiate hyperlinks from content
Let me know clearly where I can go from here
Let me see where I've already been
Make it obvious what to do to get somewhere
Indicate what clicking a link will do
1. Let me know where I am at all times
'Signposting' is part of navigation (how can you navigate somewhere if you don't know where you're starting from). Clear signposting is always important, to let people know where in the site they are, down to the page level (particularly when you consider that someone could be entering via an unusual link or search engine result).
Where navigation includes "where you are now", it must be clearly indicated. The WDFS side navigation differentiates between "here" nav and "there" nav by showing "here" in black text on a grey background with no hyperlink (even the presence of a hyperlink suggests it's "there").
Note: Tabs naturally show "here" from "there". (See Navigation models)
2. Clearly differentiate hyperlinks from content
When navigation is apart from content, differentiate through complete physically separation, grouping and/or style from content.
When links are within content, you have to use style to differentiate. Conventional blue, underlined style with distinct 'hover', 'active' and 'visited' colours work really well. It has become generally acceptable to exclude the underline from links, although I strongly recommend keeping text hyperlinks in blue when on a white/grey background.
3. Let me know clearly where I can go from here
It must be obvious at a glance where I can go from here. That means that hyperlinks must be clearly distinguishable from content (see previous principle).
4. Let me see where I've already been
Being able to see pages you've already visited helps you to filter where you might want go now. It also helps you understand where you are in relation to where you've been.
HTML differentiates between unvisited and visited links by default. The standard colours work very well because they are conventional and easily recognised. If the designer must change the default link colour settings, they *must* provide alternatives that clearly differentiate visited and unvisited links. If tempted to change link colours because of your content's background colour, think whether the background colour is really that important. Would white be a better solution?
5. Make it obvious what to do to get somewhere
Once a user knows where they can go, they need to know how to get there. It should be clear to tell what is navigation from what isn't, without any thought at all.
Note: If you have to label your navigation "Navigation", you've failed to make navigation clear enough.
6. Indicate what clicking a link will do
The target of a link must be obvious. i.e. The link must tell me either:
what I'll get
where I'll go
or what will happen, when I click it.
The way to do this is to make the content of the link say either:
what I'll get
where I'll go
or what will happen, when clicked
Where should you put navigation?
Depends on the type of navigation. The golden rules are:
put the most useful navigation where it's closest to hand
put navigation where the user is likely to look for it
Most people are right-handed, and the commonly-used vertical scrollbar sits on the right side of the screen. This means that most of us tend to leave the mouse pointer over on the right-hand side of the screen when 'idle'. So, when you've got vertically-oriented nav, putting it on the right has its benefits.
(Lots of smart sites are using right-hand navigation, including A List Apart - see below.
Navigation within a screen
Main navigation tools for moving around a screen are: the scrollbar, and internal hyperlinks. Resist using frames or inline frames for content, because if that content needs to scroll, the navigation tool won't be in the usual place.
Resist using CSS to mess around with the window scroll bars! This is nearly always detrimental to usability.
Note, if your site is completely Flash, don't make the movie totally full-screen, make it the width it needs to be, and leave space in the holding HTML document, so that the mouse wheel works.
Saturday, 19 January 2008
Content 101
The purpose of design is to facilitate communication. Choosing what to communicate is the first step.
It's risky to start a design before paying close attention to what a site will feature and why.
A good site design creates a structure that enables a clear two-way dialogue with all its users.
Content is our problem
A lot of designers think that web design is about the interface, and that content is what's added on later, or else it's "the client's problem".
I've seen designers argue that the content must be changed to fit the way the site was designed. This only represents the designer's failure.
Designing for the content should be the designer's problem and focus, because content is the key to success.
Remember the purpose of design: To enable communication between the consumer and the content.
Content is what it's all about.
It's content that makes a site work, flow and communicate well with the right tone. That makes it the web designer's problem, because effective communication is our problem.
It's our job to maximise a web site's effectiveness and that means understanding how users will interact with a site's content.
Designing for communication
It always helps to have a framework to start from, so that we're not designing into thin air. A good way to build a framework is to list what a site has to say, and then prioritise those messages. I like to picture an active two-way conversation between the site and the user.
It's risky to start a design before paying close attention to what a site will feature and why.
A good site design creates a structure that enables a clear two-way dialogue with all its users.
Content is our problem
A lot of designers think that web design is about the interface, and that content is what's added on later, or else it's "the client's problem".
I've seen designers argue that the content must be changed to fit the way the site was designed. This only represents the designer's failure.
Designing for the content should be the designer's problem and focus, because content is the key to success.
Remember the purpose of design: To enable communication between the consumer and the content.
Content is what it's all about.
It's content that makes a site work, flow and communicate well with the right tone. That makes it the web designer's problem, because effective communication is our problem.
It's our job to maximise a web site's effectiveness and that means understanding how users will interact with a site's content.
Designing for communication
It always helps to have a framework to start from, so that we're not designing into thin air. A good way to build a framework is to list what a site has to say, and then prioritise those messages. I like to picture an active two-way conversation between the site and the user.
Tuesday, 3 April 2007
The Dreamweaver Template
What is a Dreamweaver Template?
A Template is basically a structure used commonly for many items (pages in a web site in our context). A Dreamweaver Template is a common structure created and used for all or some pages of a web site using the Macromedia Dreamweaver (now Adobe) tool. There can be any number of dreamweaver templates for a web site. That is, each section of a web site can have its own template with variations in structure or color from the others.
As an example, lets say you want to built a web site which has 20+ pages with a lot of content. For this we recommend using a common template or templates - where all pages or a group of pages have one basic design and only the content varies. This way even if your site is a little distracting due to necessary design effects, your design is noted once (hopefully with a appreciative eye :-) and then the visitor focuses on the content automatically.
Tip)) A clean consistent layout with a neat navigation that uses a lot of white space will enhance your site's look, readability and stickiness factor.
What are the advantages of using Dreamweaver Templates?
In the current web design & development world Macromedia Dreamweaver has become the top tool used globally by designers and web programmers. One of the main attractive feature of Dreamweaver which has made it so popular IS? Yes you guessed it right, The Dreamweaver Template and the ease with which these templates can be created and used by even beginners.
The Macromedia team keep all current technology developments into play with their upgrades. We recommend their latest offering - Macromedia Dreamweaver 8 - to anyone who wants to create or maintain web sites efficiently - even with little or no past knowledge. In a nutshell, all you need to do is:
Design the common structure and save it as a Dreamweaver Template with the content area(s) editable.
Apply it to all your web site pages or create new pages using the template and insert your content in the editable area(s). No kidding, its that simple!
Another huge advantage of using Dreamweaver Templates is when you want to modify the common elements of your pages. All you need to do is make your changes to the template and save it. All the pages using the template are automatically updated without you having to check and modify each page. Thus dreamweaver templates save a lot of precious development and maintenance time!
For Developers and Clients: The key advantage dreamweaver templates provide is separation of design & code from content for pages using templates. This means that :
Developers and their clients can breath easy knowing that the code and design cannot be messed up by inexperience in handling the prepared web pages as non-editable regions are locked and cannot be edited from within Dreamweaver.
This helps Clients to confidently make changes to their web site pages (created by their web designers) without having to go back and forth for every minor content change. Furthermore with just a little practice they can create web pages (using the prepared template) and maintain their own web site easily. One real life example is our very own Dreamweaver Template clients, who with a limited budget purchase & download a top quality ready-to-use Dreamweaver Template from our web site, then customize, upload and set live their cool web site within a couple of days.
How to create a Dreamweaver Template?
* Design your web site with a common structure in mind that features in all the pages.
Tip)) Follow a simple header, footer, side menu(s) & common navigation design approach for visitors to easily identify with your web site - at least for your inside pages.
* The next step is to save this common structure as a Dreamweaver Template. For this, open File and and click on Save As Template. Give it a name (usually just 'template') and click on Save.
*This template file will be saved under the folder called Templates (which is automatically created by the Dreamweaver) with a .dwt extension.
* In case you get a message saying that your dreamweaver template doesn't have any editable regions, just ignore it as it is a new template without any pages under it. You can add the editable regions after saving the template (.DWT) file.
How to create an Editable Region?
An Editable region is a named region in a Dreamweaver Template where content can vary from page to page. These Editable regions can contain text or media specific to that particular page. To create an editable region in a Dreamweaver Template, place your cursor in the template where you need an editable region and then go to Insert >> Template objects >> New Editable region. Give it a name. Click OK. You will find the name of the editable region surrounded in a light blue box in the place where you inserted it.
Tip)) Make sure your editable region tag is not within a paragraph or other block tag as it will not let the text you insert in your actual pages format properly.
How to create a new web page using your dreamweaver template?
Now you are all set to use the template in your pages.
For Dreamweaver MX and Above: Click File New.. In the pop-up window that appears go to the Templates tab and select the desired template.
For Dreamweaver 4: Click New from Template and select the desired template from the pop-up window.
To fill the content for that page, go to the editable region(s) and enter your page specific content. Remember you can edit only the editable region(s) in the page and not the elements included within the template.
How to apply the Template to your existing template based or non-template web pages?
For Dreamweaver MX and Above: To apply the template to an existing page, select Modify >> Templates >> Apply template to Page..
For Dreamweaver 4: To apply the template to an existing page, select Modify >> Templates >> Apply template to Page..
In case your pages already used a dreamweaver template you can safely apply another template by specifying the editable regions into which the existing editable regions should be copied. Your task is made simple - you are not asked to do this - if you have the same editable region names in both templates.
Tip)) Thus, to easily toggle between your dreamweaver templates use a common naming convention for all your editable regions. For example use 'content' for the content area, 'right_menu', 'left_menu' or just 'menu' for the possible menu areas, etc.
For non-template pages just instruct dreamweaver to place all non-editable region content that could get kicked out into the content area editable region - this way you don't loose any data stored in the original page.
How to Modify & Update a Dreamweaver Template?
So you have made the template and the pages using it. How do you modify the common elements of your template pages? All you need to do is make your changes to the dreamweaver template and save it. All pages are automatically updated on request. Simple!
Tip))The use of Server Side Includes (SSI) with dreamweaver templates for large websites. Include files save you the trouble of updating and uploading numerous pages having the same content. For example in your dreamweaver web site if you navigation links are in an include file you can change your navigation at any time and will have to upload only that single include file.
-This page is part of the SmartWebby's Free Web Design Guide-
A Template is basically a structure used commonly for many items (pages in a web site in our context). A Dreamweaver Template is a common structure created and used for all or some pages of a web site using the Macromedia Dreamweaver (now Adobe) tool. There can be any number of dreamweaver templates for a web site. That is, each section of a web site can have its own template with variations in structure or color from the others.
As an example, lets say you want to built a web site which has 20+ pages with a lot of content. For this we recommend using a common template or templates - where all pages or a group of pages have one basic design and only the content varies. This way even if your site is a little distracting due to necessary design effects, your design is noted once (hopefully with a appreciative eye :-) and then the visitor focuses on the content automatically.
Tip)) A clean consistent layout with a neat navigation that uses a lot of white space will enhance your site's look, readability and stickiness factor.
What are the advantages of using Dreamweaver Templates?
In the current web design & development world Macromedia Dreamweaver has become the top tool used globally by designers and web programmers. One of the main attractive feature of Dreamweaver which has made it so popular IS? Yes you guessed it right, The Dreamweaver Template and the ease with which these templates can be created and used by even beginners.
The Macromedia team keep all current technology developments into play with their upgrades. We recommend their latest offering - Macromedia Dreamweaver 8 - to anyone who wants to create or maintain web sites efficiently - even with little or no past knowledge. In a nutshell, all you need to do is:
Design the common structure and save it as a Dreamweaver Template with the content area(s) editable.
Apply it to all your web site pages or create new pages using the template and insert your content in the editable area(s). No kidding, its that simple!
Another huge advantage of using Dreamweaver Templates is when you want to modify the common elements of your pages. All you need to do is make your changes to the template and save it. All the pages using the template are automatically updated without you having to check and modify each page. Thus dreamweaver templates save a lot of precious development and maintenance time!
For Developers and Clients: The key advantage dreamweaver templates provide is separation of design & code from content for pages using templates. This means that :
Developers and their clients can breath easy knowing that the code and design cannot be messed up by inexperience in handling the prepared web pages as non-editable regions are locked and cannot be edited from within Dreamweaver.
This helps Clients to confidently make changes to their web site pages (created by their web designers) without having to go back and forth for every minor content change. Furthermore with just a little practice they can create web pages (using the prepared template) and maintain their own web site easily. One real life example is our very own Dreamweaver Template clients, who with a limited budget purchase & download a top quality ready-to-use Dreamweaver Template from our web site, then customize, upload and set live their cool web site within a couple of days.
How to create a Dreamweaver Template?
* Design your web site with a common structure in mind that features in all the pages.
Tip)) Follow a simple header, footer, side menu(s) & common navigation design approach for visitors to easily identify with your web site - at least for your inside pages.
* The next step is to save this common structure as a Dreamweaver Template. For this, open File and and click on Save As Template. Give it a name (usually just 'template') and click on Save.
*This template file will be saved under the folder called Templates (which is automatically created by the Dreamweaver) with a .dwt extension.
* In case you get a message saying that your dreamweaver template doesn't have any editable regions, just ignore it as it is a new template without any pages under it. You can add the editable regions after saving the template (.DWT) file.
How to create an Editable Region?
An Editable region is a named region in a Dreamweaver Template where content can vary from page to page. These Editable regions can contain text or media specific to that particular page. To create an editable region in a Dreamweaver Template, place your cursor in the template where you need an editable region and then go to Insert >> Template objects >> New Editable region. Give it a name. Click OK. You will find the name of the editable region surrounded in a light blue box in the place where you inserted it.
Tip)) Make sure your editable region tag is not within a paragraph or other block tag as it will not let the text you insert in your actual pages format properly.
How to create a new web page using your dreamweaver template?
Now you are all set to use the template in your pages.
For Dreamweaver MX and Above: Click File New.. In the pop-up window that appears go to the Templates tab and select the desired template.
For Dreamweaver 4: Click New from Template and select the desired template from the pop-up window.
To fill the content for that page, go to the editable region(s) and enter your page specific content. Remember you can edit only the editable region(s) in the page and not the elements included within the template.
How to apply the Template to your existing template based or non-template web pages?
For Dreamweaver MX and Above: To apply the template to an existing page, select Modify >> Templates >> Apply template to Page..
For Dreamweaver 4: To apply the template to an existing page, select Modify >> Templates >> Apply template to Page..
In case your pages already used a dreamweaver template you can safely apply another template by specifying the editable regions into which the existing editable regions should be copied. Your task is made simple - you are not asked to do this - if you have the same editable region names in both templates.
Tip)) Thus, to easily toggle between your dreamweaver templates use a common naming convention for all your editable regions. For example use 'content' for the content area, 'right_menu', 'left_menu' or just 'menu' for the possible menu areas, etc.
For non-template pages just instruct dreamweaver to place all non-editable region content that could get kicked out into the content area editable region - this way you don't loose any data stored in the original page.
How to Modify & Update a Dreamweaver Template?
So you have made the template and the pages using it. How do you modify the common elements of your template pages? All you need to do is make your changes to the dreamweaver template and save it. All pages are automatically updated on request. Simple!
Tip))The use of Server Side Includes (SSI) with dreamweaver templates for large websites. Include files save you the trouble of updating and uploading numerous pages having the same content. For example in your dreamweaver web site if you navigation links are in an include file you can change your navigation at any time and will have to upload only that single include file.
-This page is part of the SmartWebby's Free Web Design Guide-
Publishing your Site using Dreamweaver
>>1. Define your Dreamweaver site : Local and Remote<<
To set up your local and remote sites in dreamweaver, create a Dreamweaver site definition to allow you to manage the files within Dreamweaver.
1. Select Site > Manage Sites, the Manage Sites dialog box appears.
2. click New, and select Site from the pop-up menu. The Site Definition dialog box appears. If the dialog box is showing the Advanced tab, click Basic.
3. The first screen of the Site Definition Wizard appears, enter a site name to identify your site within Dreamweaver.
4. The next screen of the wizard appears, asking if you want to work with a server technology. Select the No option to indicate that for now, unless you have dynamic pages and know your technology.
5. The next screen of the wizard appears, asking how you want to work with your files. Select the option labeled "Edit local copies on my machine, then upload to server when ready (recommended)." Click the folder icon next to the text box and locate your site root folder locally.
6. The next screen of the wizard appears, asking how you connect to your remote server. Select FTP/SFTP for a remote server or Local/Network for an intranet site.
7. If you selected FTP, enter the following options:
* Enter the hostname of the server (such as ftp.smartwebby.com).
* In the text box that asks what folder contains your files, enter the path on the server from the FTP root folder to the remote site's root folder. If you're not sure, consult your system administrator. In many cases, this text box should be left blank.
* Enter your user name and password in the appropriate text boxes.
* If your server supports SFTP, select the Use Secure FTP (SFTP) option.
* Click Test Connection.
* If the connection is unsuccessful, consult your system administrator.
8. If you selected Local/Network, click the folder icon next to the text box and browse to the remote site's root folder. You may want to deselect the Refresh Remote File List Automatically option for improved speed.
9. Click Next. Don't enable file check-in and check-out for the site. Click Next.
10. Click Done to finish setting up your local and remote sites.
>>2. Upload your files to the remote site server<<
To make your pages publicly accessible, you must upload your pages to your site. After setting up your local and remote sites, you can upload your files from your local folder to the web server.
* In the Files panel (Window > Files), select the site's local root folder.
* Click the blue Put Files arrow icon in the Files panel toolbar.
* Dreamweaver copies all the files to the remote site folder you defined. This operation may take some time, as Dreamweaver must upload all the files in the site.
* Open your remote site in a browser to make sure everything uploaded correctly.
That's it.
To set up your local and remote sites in dreamweaver, create a Dreamweaver site definition to allow you to manage the files within Dreamweaver.
1. Select Site > Manage Sites, the Manage Sites dialog box appears.
2. click New, and select Site from the pop-up menu. The Site Definition dialog box appears. If the dialog box is showing the Advanced tab, click Basic.
3. The first screen of the Site Definition Wizard appears, enter a site name to identify your site within Dreamweaver.
4. The next screen of the wizard appears, asking if you want to work with a server technology. Select the No option to indicate that for now, unless you have dynamic pages and know your technology.
5. The next screen of the wizard appears, asking how you want to work with your files. Select the option labeled "Edit local copies on my machine, then upload to server when ready (recommended)." Click the folder icon next to the text box and locate your site root folder locally.
6. The next screen of the wizard appears, asking how you connect to your remote server. Select FTP/SFTP for a remote server or Local/Network for an intranet site.
7. If you selected FTP, enter the following options:
* Enter the hostname of the server (such as ftp.smartwebby.com).
* In the text box that asks what folder contains your files, enter the path on the server from the FTP root folder to the remote site's root folder. If you're not sure, consult your system administrator. In many cases, this text box should be left blank.
* Enter your user name and password in the appropriate text boxes.
* If your server supports SFTP, select the Use Secure FTP (SFTP) option.
* Click Test Connection.
* If the connection is unsuccessful, consult your system administrator.
8. If you selected Local/Network, click the folder icon next to the text box and browse to the remote site's root folder. You may want to deselect the Refresh Remote File List Automatically option for improved speed.
9. Click Next. Don't enable file check-in and check-out for the site. Click Next.
10. Click Done to finish setting up your local and remote sites.
>>2. Upload your files to the remote site server<<
To make your pages publicly accessible, you must upload your pages to your site. After setting up your local and remote sites, you can upload your files from your local folder to the web server.
* In the Files panel (Window > Files), select the site's local root folder.
* Click the blue Put Files arrow icon in the Files panel toolbar.
* Dreamweaver copies all the files to the remote site folder you defined. This operation may take some time, as Dreamweaver must upload all the files in the site.
* Open your remote site in a browser to make sure everything uploaded correctly.
That's it.
Web Design Tips
1. Prepare your site navigation before designing.
2. Navigation should be clear and consistent. The important links of your website should be on every page, in the same location, and in the same sequence. Effective navigation is getting your visitors to stay on your site and also for visitors to find what they are looking for easily and quickly.
3.Use simple PHP to build sites. The page calling the includes should end .php and the includes are inserted using the following simple code:
4. Text rollover effects, it’s important that the pseudo classes are in the right order, or they won’t work correctly in all browsers. The correct order is:
a:link { color: blue; }
a:visited { color: purple; }
a:hover { color: purple; }
a:active { color: red; }
5. Set fonts using ems - An em is roughly the width of a lowercase em in a font, and using a browser’s default internal stylesheet, an em is roughly equivalent to 16 pixels. Set the font size attribute in the body tag to 62.5 per cent like this:
body { font-size: 62.5% }
This makes one em roughly ten pixels (16 x 62.5% = 10). Now you can equate pixel sizes to ems. For example, type that is set in 12 pixels could be expressed as 1.2em; 9 pixels becomes 0.9em and so on.
6.Always check for broken links within a site before uploading it to your web server.
7. Ensure that all your images make use of the alt and title tags so that screen readers for the visually impaired can correctly parse your page:
8.Usability test
2. Navigation should be clear and consistent. The important links of your website should be on every page, in the same location, and in the same sequence. Effective navigation is getting your visitors to stay on your site and also for visitors to find what they are looking for easily and quickly.
3.Use simple PHP to build sites. The page calling the includes should end .php and the includes are inserted using the following simple code:
4. Text rollover effects, it’s important that the pseudo classes are in the right order, or they won’t work correctly in all browsers. The correct order is:
a:link { color: blue; }
a:visited { color: purple; }
a:hover { color: purple; }
a:active { color: red; }
5. Set fonts using ems - An em is roughly the width of a lowercase em in a font, and using a browser’s default internal stylesheet, an em is roughly equivalent to 16 pixels. Set the font size attribute in the body tag to 62.5 per cent like this:
body { font-size: 62.5% }
This makes one em roughly ten pixels (16 x 62.5% = 10). Now you can equate pixel sizes to ems. For example, type that is set in 12 pixels could be expressed as 1.2em; 9 pixels becomes 0.9em and so on.
6.Always check for broken links within a site before uploading it to your web server.
7. Ensure that all your images make use of the alt and title tags so that screen readers for the visually impaired can correctly parse your page:
8.Usability test
Saturday, 31 March 2007
Job Interview
I had a job interview last Wednesday(21/03/07) at an IT promotional company as a digital contents consultant.This roll was a bit challenging for me but I always want to update my skills and extend my knowledge of marketing for business.
Their main concern was me being a mother. There are thousands of working women who are mothers in this country. How are they managing their families?
I'll be 40 years old next year. Even though, I have two children I still love to create design and also gain new knowledge and experience.
Subscribe to:
Posts (Atom)