What exactly is Web Accessibility ?
Simply put, web accessibility is about making a site accessible to the largest range of people possible. For the majority of website owners, this is simply good business sense. After all, the more people you have using your site the better.
Making a website accessible involves removing potential barriers to access and one of the best ways of doing this is to build sites to 'web standards'.
Who does this affect ?
People often think that web accessibility relates only to people with physical disabilities. Although they are often most affected by poorly designed sites, accessibility is a much wider issue and at a fundamental level, affects us all.
* Blind, visually impaired and colour blind people are probably the most obvious
group of individuals affected by accessibility issues. This group also makes up
a very large percentage of web surfers
* People with physical disabilities, such as those with impaired mobility
* People surfing the web using mobile phones and PDA's. These people are possibly
the most affluent and technically advanced group of people suffering from web accessibility issues.
* People using old browsers or old computers. Many companies and organizations
have standardized on older browser versions and don't use the latest computer
equipment.
* People using slow internet connections.
* The 'Silver Surfer' is one of the largest growing markets on the web. This
sector has accessibility issues such as reduced mobility, reduced hand-eye
co-ordination and poor vision.
* Young Internet users can also have poor hand-eye co-ordination, coupled with a
low reading age.
* People who don't speak or understand English fluently.
The positive aspects of having an accessible website are:
* Ability to tap into affluent niche markets like the 'Silver Surfer' or people using PDA's and phones.
* The positive PR that comes from adopting a socially responsible attitude and complying with web best practices.
* Accessible websites are inherently more search engine friendly. After all, Google is the largest "blind user" on the web.
* Increased turnover from more people using your site.
The negative aspects of an inaccessible website are:
* You could be turning away large numbers of potential customers each day without even knowing it.
* When people have a positive experience of a website they generally don't tell people. But if they have a negative experience they are likely to tell everybody!
* Excluding people from your website can generate very negative PR.
* Your website might even find itself open to litigation.
Web accessibility is a broad issue and one that affects both web users and website owners.
Source / Read more about Web accessibility & its effects at
The Business Case for Web Accessibility
Tuesday, December 25, 2007
Friday, November 30, 2007
Milestone’s Top 10 Website Programming Guidelines
1. Use clean CSS (cascading style sheets) codes
2. If websites are built on a dynamic platform, make sure that your Content Management System is search engine friendly
3. Keep your codes clean by calling all java scripts and CSS using an include file
4.Use keyword rich H1 TAGS
5.Use ALT Tags for images to enable your site to be read by visitors with visual/hearing impairments and name all your images keyword rich
6. Keep the download time low by reducing images on the site
7. Float the content right at the top and make it easy for the crawler to index your page
8. Make sure phone numbers and address are on every page as text
9. Use Absolute Links, no relative links
10. Check for browser compatibility so the site appears the same across all platforms
Source : Top 10 Website Programming Guidelines
2. If websites are built on a dynamic platform, make sure that your Content Management System is search engine friendly
3. Keep your codes clean by calling all java scripts and CSS using an include file
4.Use keyword rich H1 TAGS
5.Use ALT Tags for images to enable your site to be read by visitors with visual/hearing impairments and name all your images keyword rich
6. Keep the download time low by reducing images on the site
7. Float the content right at the top and make it easy for the crawler to index your page
8. Make sure phone numbers and address are on every page as text
9. Use Absolute Links, no relative links
10. Check for browser compatibility so the site appears the same across all platforms
Source : Top 10 Website Programming Guidelines
Monday, November 19, 2007
Great Design Requires Good Listening: Six Keys To Become An Empathic Designer
Design and usability expert Joshua Porter, looks at this very issue and at the traits required to become what one would call "an empathic designer".
How To Be an Empathic Designer
"A common mistake that people make when trying to design something completely foolproof is to underestimate the ingenuity of complete fools.” - Douglas Adams
Part of being a web designer is trying to understand and make sense of how people are using your design. Therefore, being empathic, or having the ability to share and understand the feelings of another, is a valuable trait to have.
The more empathic you are, the more you can understand how people are using your design, how they think and feel about it, and what you need to do to make it great.
But How Do You Become Empathic ?
What if you’re not naturally an empathic person ? Here are a few things I try to keep in mind when I feel like I’m getting too far away from the people I design for.
1) Keep an Open Mind
It is a great irony that the people who claim to have open minds probably have closed ones, and the people who fear most a closed mind probably have the most open ones. But fear in this case is an enabler, as it allows the designer to keep up their energy and watchfulness for something new, something they didn’t understand before, something that is key to the success of their design. Once you have everything figured out, it’s time to stop designing.
2) Realize that People Make Sense to Themselves
No matter what people do, however irrational it may appear, they probably make sense to themselves. So even if they do something that seems completely off the wall, try to understand it, at least from their perspective and in their context. Often this has the effect of changing the way you see what you’re working on, not temporarily but permanently.
3) Take a Partnership Role
Too often we take an expert or specialist role in what we’re doing. This is normal, as it reinforces our need to be there. But if we can take a partnership role, especially with the people who we design for, then we open ourselves up to many more opportunities to learn. This is partly because we are more ready for it, and partly because most people like being in a partnership more than other types of relationships. One of the tricks of usability testing facilitation is to always talk in terms of partnership…as in “we need your help and together we can make this product better”.
4) Keep Truth as a Mistress
President James Garfield said “truth will set you free, but first it will make you miserable.” I think he was referring to the difficulty that Truth sometimes has in getting into our head. We first observe to fit what we see into what we know, and if it doesn’t fit then we have a choice. We either accept something new or we dismiss it. The more we accept truth, the easier it is to accept the idiosyncrasies of others, and therefore become more empathic toward them.
5) Everybody has a Story to Tell
I’ve got a friend who is as quiet as a mouse. In public situations he rarely says a word. He would probably be horrible to try to design for because he doesn’t say much at all. Getting feedback or insight from him would be like pulling teeth. But once you accept that and let him unfold as he wants to, he becomes an entirely different person. He’s got a story, and an interesting one, and I think most people do, too. Life is interesting! Even if it doesn’t look like it at first.
6) Record Things you Don’t Understand
One of our unfortunate tendencies in life is to dismiss things we don’t understand. We ignore them because we can’t figure them out at the moment. This, however, is the wrong move. Instead, we should take note of them, write them down and perhaps come back to them later.
If we accept that there are things outside of our understanding, then we become more empathic to those who have a different view of the world.
Originally written by Joshua Porter
Source : http://www.masternewmedia.org/interface_and_navigation_design/design-methods/great-design-requires-good-listening-how-to-be-empathic-designer-20071110.htm
How To Be an Empathic Designer
"A common mistake that people make when trying to design something completely foolproof is to underestimate the ingenuity of complete fools.” - Douglas Adams
Part of being a web designer is trying to understand and make sense of how people are using your design. Therefore, being empathic, or having the ability to share and understand the feelings of another, is a valuable trait to have.
The more empathic you are, the more you can understand how people are using your design, how they think and feel about it, and what you need to do to make it great.
But How Do You Become Empathic ?
What if you’re not naturally an empathic person ? Here are a few things I try to keep in mind when I feel like I’m getting too far away from the people I design for.
1) Keep an Open Mind
It is a great irony that the people who claim to have open minds probably have closed ones, and the people who fear most a closed mind probably have the most open ones. But fear in this case is an enabler, as it allows the designer to keep up their energy and watchfulness for something new, something they didn’t understand before, something that is key to the success of their design. Once you have everything figured out, it’s time to stop designing.
2) Realize that People Make Sense to Themselves
No matter what people do, however irrational it may appear, they probably make sense to themselves. So even if they do something that seems completely off the wall, try to understand it, at least from their perspective and in their context. Often this has the effect of changing the way you see what you’re working on, not temporarily but permanently.
3) Take a Partnership Role
Too often we take an expert or specialist role in what we’re doing. This is normal, as it reinforces our need to be there. But if we can take a partnership role, especially with the people who we design for, then we open ourselves up to many more opportunities to learn. This is partly because we are more ready for it, and partly because most people like being in a partnership more than other types of relationships. One of the tricks of usability testing facilitation is to always talk in terms of partnership…as in “we need your help and together we can make this product better”.
4) Keep Truth as a Mistress
President James Garfield said “truth will set you free, but first it will make you miserable.” I think he was referring to the difficulty that Truth sometimes has in getting into our head. We first observe to fit what we see into what we know, and if it doesn’t fit then we have a choice. We either accept something new or we dismiss it. The more we accept truth, the easier it is to accept the idiosyncrasies of others, and therefore become more empathic toward them.
5) Everybody has a Story to Tell
I’ve got a friend who is as quiet as a mouse. In public situations he rarely says a word. He would probably be horrible to try to design for because he doesn’t say much at all. Getting feedback or insight from him would be like pulling teeth. But once you accept that and let him unfold as he wants to, he becomes an entirely different person. He’s got a story, and an interesting one, and I think most people do, too. Life is interesting! Even if it doesn’t look like it at first.
6) Record Things you Don’t Understand
One of our unfortunate tendencies in life is to dismiss things we don’t understand. We ignore them because we can’t figure them out at the moment. This, however, is the wrong move. Instead, we should take note of them, write them down and perhaps come back to them later.
If we accept that there are things outside of our understanding, then we become more empathic to those who have a different view of the world.
Originally written by Joshua Porter
Source : http://www.masternewmedia.org/interface_and_navigation_design/design-methods/great-design-requires-good-listening-how-to-be-empathic-designer-20071110.htm
Friday, November 2, 2007
Automate Your Design Process with These 13 Tools and Tips
These tools and tips will show you how to quicken your workflow when designing or editing a website.
Quicker Text Editing
Use search and replace so you don’t have to manually open up all those files anymore! Let these programs do that for you.
- TurboSR Search And Replace
This free utility allows you to search through text, .html and xml files and replace text. It works on multiple files too, no need to open each one. - ReplaceEm
ReplaceEm is a search and replace utility that supports multiple files. The best part about this one is that it can use regular expressions. - Search And Replace
Another lightweight and fast text replacement utility. This one allows you to search through and entire folder and choose only certain extensions (html, dll, etc). Requires the .net framework. - TexRep 2.0
TexRep is another text replacement tool, but this one allows you to make copies of the original while replacing text. Handy for when you want to change something but change you mind back.
Put Your Photoshop To Work
Over are the days of opening an image, resizing that image and finally saving. Set Photoshop to run a batch for you and sit back and relax.
- Using The Photoshop Batch Command
If you are unfamiliar with the batch command in Photoshop, this is a good place to start. It breaks down what each option in the batch dialogue means. - How To Batch Rename Files In Photoshop
Using Photoshop’s File Browser (called Bridge in CS3) you can batch rename all your files. Ideal for organizing your images for uploading. - Advanced Batch Processing - Video Tutorial
This video tutorial shows you how to resize an image and add a border with only one action. Any image size is dynamically adjusted to not exceed a certain width (while retaining its aspect ration) and a 3px border is added. - Batch Watermark Images With Different Dimensions/Orientations
Create a watermark and apply it to the same spot on all your iamges, regardless of dimensions and orientation! - SampsonVideos - Image Resizing
This screencast by SampsonVideos shows you how to batch resize a folder of images and export them to another folder, thus preserving your original files.
Appreciate The Little Things In Dreamweaver
Even though I never use the WYSIWYG portion of Dreamweaver, I still find it to be a huge time saver. Find out the ways you too can save time.
- Templates In Dreamweaver
Dreamweaver allows you to create templates. That is, if you start a new document it will retain your site’s structure so all you have to do is decide what content you would like to add. This is a great time-saver. - Dreamweaver’s Search & Replace
This video tutorial will quickly get you up to speed on how to use the powerful search and replace dialogue in Dreamweaver. - Dreamweaver’s Assets Panel
Another video tutorial showing you how you can save time in Dreamweaver using the assets panel. - Setting Up Dreamweaver’s FTP Connection
Adobe’s instructions for connecting to your site’s FTP through Dreamweaver. This is a huge time-save because you can edit and upload within Dreamweaver. Dreamweaver retains your site’s structure so you don’t have to specify and upload folder, you just click “put” and you’re done.
Tuesday, October 16, 2007
Colour contrast checking tools to improve the accessibility of your design
If text does not have sufficient contrast compared to its background, people will have problems. People with color blindness or other visual impairments as well as people browsing the Web under less than ideal circumstances (bad monitor, window reflections, sunlight hitting the screen) may not be able to read the text, at least not without difficulty.
With that background out of the way, on to the actual color contrast checking tools. Some tools are Web based, while others are standalone applications or browser extensions that you run locally on your computer.
The list:
Colour Contrast Check: The tool gives you immediate feedback by showing what the chosen colour combination looks like and whether it passes the test.
Colour Contrast Analyser: You will need to enter the values for foreground and background colours into a form and submit it, after which the results are displayed.
Colour Contrast Visualizer: Using a slightly different approach, Tom Hooper’s color Contrast Visualizer helps you find acceptable color combinations by visualizing the colors that provide sufficient contrast on a color palette. color Contrast Visualizer is available in Flash and Adobe AIR versions, so you will need support for either of those to use it.
Colour Contrast Analyzer Firefox Extension: Instead of having you enter each colour combination manually, Gez Lemon’s Firefox extension finds all text elements in a document and examines the difference between foreground and background colours for them. It displays the results in a new tab, complete with previews of the colours. This can look a bit overwhelming, but it’s a good way of finding problematic areas of a design. Obviously this tool does not work with images – you’ll need an HTML document for it to work.
CSS Analyser: The CSS Analyser does a colour contrast test of your CSS. It also validates the CSS and checks that relevant text sizes are specified in a relative unit of measurement.
Luminosity Contrast Ratio Analyzer: This tool tests foreground and background colour combinations according to an algorithm developed by the Trace R&D Center.
Vischeck: The online tool simulates colour blindness on an image that you upload or on a web page that you specify, while the Photoshop plugin changes the colours of the document you are working on.
Contrast Analyser, Version 2.0: A standalone application available for Windows and Mac OS X. You can specify the foreground and background colours numerically or by pulling sliders, it will check and preview the selected colours against various types of colour blindness.
Graybit: It lets you submit a URL to a web page which will be converted to grayscale and displayed in your web browser.
Sim Daltonism: Available for Mac OS X only, this standalone application does not calculate colour contrast, but is still very useful. It simulates various kinds of colour blindness in realtime, which makes it easy to check if a design is likely to cause problems.
Source : 10 colour contrast checking tools to improve the accessibility of your design
With that background out of the way, on to the actual color contrast checking tools. Some tools are Web based, while others are standalone applications or browser extensions that you run locally on your computer.
The list:
Colour Contrast Check: The tool gives you immediate feedback by showing what the chosen colour combination looks like and whether it passes the test.
Colour Contrast Analyser: You will need to enter the values for foreground and background colours into a form and submit it, after which the results are displayed.
Colour Contrast Visualizer: Using a slightly different approach, Tom Hooper’s color Contrast Visualizer helps you find acceptable color combinations by visualizing the colors that provide sufficient contrast on a color palette. color Contrast Visualizer is available in Flash and Adobe AIR versions, so you will need support for either of those to use it.
Colour Contrast Analyzer Firefox Extension: Instead of having you enter each colour combination manually, Gez Lemon’s Firefox extension finds all text elements in a document and examines the difference between foreground and background colours for them. It displays the results in a new tab, complete with previews of the colours. This can look a bit overwhelming, but it’s a good way of finding problematic areas of a design. Obviously this tool does not work with images – you’ll need an HTML document for it to work.
CSS Analyser: The CSS Analyser does a colour contrast test of your CSS. It also validates the CSS and checks that relevant text sizes are specified in a relative unit of measurement.
Luminosity Contrast Ratio Analyzer: This tool tests foreground and background colour combinations according to an algorithm developed by the Trace R&D Center.
Vischeck: The online tool simulates colour blindness on an image that you upload or on a web page that you specify, while the Photoshop plugin changes the colours of the document you are working on.
Contrast Analyser, Version 2.0: A standalone application available for Windows and Mac OS X. You can specify the foreground and background colours numerically or by pulling sliders, it will check and preview the selected colours against various types of colour blindness.
Graybit: It lets you submit a URL to a web page which will be converted to grayscale and displayed in your web browser.
Sim Daltonism: Available for Mac OS X only, this standalone application does not calculate colour contrast, but is still very useful. It simulates various kinds of colour blindness in realtime, which makes it easy to check if a design is likely to cause problems.
Source : 10 colour contrast checking tools to improve the accessibility of your design
Wednesday, October 3, 2007
8 Web Design Tactics to Help You When You're Stuck
Originally written by Matthew Inman (Oatmeal) Web design can be incredibly frustrating. You'd think that with the infinite possibilities of what-goes-where it'd be pretty easy to land a design that works, yet somehow we've all been stuck before: working hour after hour on a design that refuses to look right. Throwing away pixels like they're going out of style.
These 8 tactics are what I use to get out of that sticky spot
Design from the inside out
A lot of designers start off a design by focusing on the header. Often times what's inside the page is what makes it look good; the header is supplementary. Try leaving the header alone for a while and working on some elements in the body, you'll be surprised at how much easier it is to design a page once you've got a solid body going.
Sketch something
My whiteboard is my salvation. Pencil and paper works too. I read an article years ago by a designer who would draw dozens of little 2x3" mockups in his spiral notebook before even opening up a graphic design program. The best part of creating mockups this way is the speed at which you can burn through possible layout ideas. Sketch something, scribble it out. Sketch something else, scribble it out. Do this ten times and you've probably got a fairly decent idea of how to the page should come together.
Seek inspiration offline
CSS galleries and design showcase websites are excellent sources of inspiration, but sometimes a bit of offline media can be just what you need to spur some fresh ideas. Open up a newspaper or magazine, go to the grocery store and look at the packaging, watch a television ad. Pay attention to things that are applicable to your design such as typography, color, and element placement. Ask yourself questions like "What is it I like about this magazine ad?" and "What is about this packaging that just works ?" There's a lot you can learn from observing traditional media.
Learn to let it go
Ever make a button that looks ridiculously awesome but just doesn't belong in your design ? You put so much effort into your ridiculously awesome button, you'll go to great lengths to make it work.
Learn to let it go. Save the button and file it away. Although you've lost this battle, you'll soon have an arsenal of ridiculously awesome buttons you can use in designs later on.
Step away from the computer
If you're having a difficult time with something, leave it alone for a while and come back later. It'll probably be easier after you've had a bit of a break and your mind has settled. Regarding web design, I've noticed this always plays out in a certain way: If I'm hating a design I'm working on and I shelve it for a few days, a lot of the time my reaction upon returning will be "Holy crap that's fantastic!" On the flip-side, I'll often toil away long into the night working on what looks like the best design I've ever created. The next morning I'll look at it again and cringe at the horrible abomination I've created. The moral here is to give your design some space.
Be absorbent
Learn to effectively pinpoint what it is you love about other designer's work and incorporate it into your own. Don't steal designs, but don't deprive yourself of external stimuli either. Become better at identifying why you love the way something looks.
Don't be a one-hit-wonder
Try to avoid using the same techniques over and over again, even if you've done really well with them in the past. Gradient rectangles are my crutch - I have a terrible habit of using them whenever I feel like a design isn't working. "This design sucks...I'll add a rectangle with a gradient fill!" The result is usually something that I'm unhappy with because it looks the same as all my previous work. Try imposing yourself with silly rules, such as "No drop shadows today" or "2D elements ONLY." Locking yourself out from certain design habits forces you to learn new ones.
Seek input from others
This is a tricky one. There are so many ways to ruin a web design, especially when the wrong kinds of people are involved. Be careful who you ask and find people who can provide constructive criticism. Find someone who can tell you specifically what's wrong and how it could be improved. Grow some thick skin, too. Don't assume every criticism is an attack on your work of art. Roll with the punches.
Source : Web Design Tactics
Monday, September 24, 2007
Gorgeous Website Footers
Originally written by Matthew Inman (Oatmeal)
Footers usually repeat the primary navigation and contain anything that is considered "the fine print," such as copyright information and a privacy policy. With the rising popularity of standards based design, they also have become the home for xhtml and css compliance badges.
Below is a list of 19 sites I gathered from around the web who have footers that caught my eye.
Sunday, September 16, 2007
Essential steps to planning your website
Thinking about investing in a new website, or a re-design for your current one? Not sure where to start? Use the following points as your roadmap to make sure you stay on track.
Goals
It may sound obvious, but the first step before selecting a designer is to lay out your website’s goals. You can use your list in your discussions with possible designers, and then refer back to it throughout the design process to keep you focused. After the website is complete, you can look back at your goals to gauge the success of the project.
Some questions to ask yourself when developing your goals:
➢ What do you want your website to accomplish?
➢ Who is your audience?
➢ What is the purpose of your website? Will it provide information, advertise, sell your products, or entertain?
A clear vision of your site is essential when you bring your idea to your website developer.
Structure
Consider what you want your website to look like and how it will be organized. A well planned and structured site that is easily navigable will help your visitors find what they need right away. Think about websites that you’ve visited in the past: when you can find what you need quickly and easily, you can be sure that serious time and effort went into planning it.
Design
The style and tone of your site conveys information about your company to your visitors. It is vital to work with a designer who can work with your goals and produce a design vision that matches your company’s needs.
Do some research on your competitors. Choose 3 – 5 websites within your field and do a quick analysis of the design: what do you like or dislike about the overall look or specific features? This information will help your web designer define your tastes, which will translate into a website that looks good and feels right.
It’s important to be clear about what you want, but also to be open to suggestions and possible changes from your designer, as well. They’re combining your goals and design tastes into an effective visual tool. Flexible creative control allows your designer to produce a refined website that fits within your vision as well as industry standards. A recent study by Consumer Reports Webwatch discovered that the design of a website is the number one factor used by consumers to decide whether or not to trust a site: professional designers are skilled at determining what that trustworthy look is.
If you already have a logo, business cards and/or marketing materials then these should be supplied to your website designer, preferably in digital format. Consider how these existing materials will tie in with your website: consistency is key.
Content
Good website design will provide a great first impression with visitors, but that will fade quickly if the content doesn’t back it up. Fresh and interesting content will keep your visitors coming back, your product selling, and your message out there.
Remember that content doesn’t just refer to the text on each page; it can also include promotional animations, interactive product demonstrations, images, music, or video, just to name a few. The web offers almost limitless options for tailoring specific portions of your site to better meet your and your vistors’ needs.
Content is undeniably important. It’s beneficial to hire a good content writer, or at least an editor if you plan on preparing the content yourself. Your web designer should be able to recommend writers or editors they’ve worked with in the past. Matching your visual tone with the proper voice further establishes confidence with your visitors.
Production
Take the opportunity to use and experience your website after it launches. Additions and modifications can be made at any time. If you have analysis and tracking statistics available, use these to see where improvements can be made, and how successful any changes are. Remember not to lose sight of your original goal, and allow it to guide what types of changes you request. A website isn’t a static tool like a business card or magazine ad - one of the benefits is that it can be constantly changing.
Marketing
Now that your well-designed website with its great content is live, you just have to make sure people see it.
➢ Make sure your designer optimizes your website for search engines with descriptive titles, metatags, and a site map. These small details can determine whether your website turns up on page 12 or page 1 of Google search results.
➢ Consider pay-per-click ads in popular search engines.
➢ Your designer can prepare a few banner ads that match the look and feel of your website for you to strategically place on portal sites for your industry.
➢ Your URL should be added to everything your company sends out: business cards, letterhead, e-mail signatures, telephone on-hold messages, even your holiday cards.
Maintenance
Keep customers coming back by updating your website – no one will come back a second time to see the same stale content. You’ll likely want to update homepage features, calendars and events, news, new links, photos and other items as well.
While maintenance may be one of the last steps in creating your website because it won’t start until after the site is live, it is one of the most important steps and should be considered at the same time you lay out your goals. There are two main options to consider: your designer can do updates for you, or you can build your site on a content management system (CMS).
The option I don’t recommend is the former. If your designer makes updates for you, you are at the mercy of their work and holiday schedule. Your news may not be so new anymore if you happen to send it over during their summer holiday and it gets posted in the fall. The better your designer is, the more likely they are to be busy, and unless you want to pay for the full-time services of a webmaster, a CMS is likely a better option for you.
A content management system allows you to maintain your website yourself without any knowledge of HTML or design. If you can use a word processor and browse folders on your computer, you can use a CMS. These programs integrate your website design into them, and allow you to edit only specific sections, such as your blog, podcasts, photo galleries, online catalogs, forums, FAQs, events, and any text-based sections.
In some cases, you may need the skills of your designer to keep certain aspects of your site in check even with a CMS in place. Make sure to ask your designer about this possibility, and consider establishing a maintenance contract so that you’re both upfront about timelines and costs.
Goals
It may sound obvious, but the first step before selecting a designer is to lay out your website’s goals. You can use your list in your discussions with possible designers, and then refer back to it throughout the design process to keep you focused. After the website is complete, you can look back at your goals to gauge the success of the project.
Some questions to ask yourself when developing your goals:
➢ What do you want your website to accomplish?
➢ Who is your audience?
➢ What is the purpose of your website? Will it provide information, advertise, sell your products, or entertain?
A clear vision of your site is essential when you bring your idea to your website developer.
Structure
Consider what you want your website to look like and how it will be organized. A well planned and structured site that is easily navigable will help your visitors find what they need right away. Think about websites that you’ve visited in the past: when you can find what you need quickly and easily, you can be sure that serious time and effort went into planning it.
Design
The style and tone of your site conveys information about your company to your visitors. It is vital to work with a designer who can work with your goals and produce a design vision that matches your company’s needs.
Do some research on your competitors. Choose 3 – 5 websites within your field and do a quick analysis of the design: what do you like or dislike about the overall look or specific features? This information will help your web designer define your tastes, which will translate into a website that looks good and feels right.
It’s important to be clear about what you want, but also to be open to suggestions and possible changes from your designer, as well. They’re combining your goals and design tastes into an effective visual tool. Flexible creative control allows your designer to produce a refined website that fits within your vision as well as industry standards. A recent study by Consumer Reports Webwatch discovered that the design of a website is the number one factor used by consumers to decide whether or not to trust a site: professional designers are skilled at determining what that trustworthy look is.
If you already have a logo, business cards and/or marketing materials then these should be supplied to your website designer, preferably in digital format. Consider how these existing materials will tie in with your website: consistency is key.
Content
Good website design will provide a great first impression with visitors, but that will fade quickly if the content doesn’t back it up. Fresh and interesting content will keep your visitors coming back, your product selling, and your message out there.
Remember that content doesn’t just refer to the text on each page; it can also include promotional animations, interactive product demonstrations, images, music, or video, just to name a few. The web offers almost limitless options for tailoring specific portions of your site to better meet your and your vistors’ needs.
Content is undeniably important. It’s beneficial to hire a good content writer, or at least an editor if you plan on preparing the content yourself. Your web designer should be able to recommend writers or editors they’ve worked with in the past. Matching your visual tone with the proper voice further establishes confidence with your visitors.
Production
Take the opportunity to use and experience your website after it launches. Additions and modifications can be made at any time. If you have analysis and tracking statistics available, use these to see where improvements can be made, and how successful any changes are. Remember not to lose sight of your original goal, and allow it to guide what types of changes you request. A website isn’t a static tool like a business card or magazine ad - one of the benefits is that it can be constantly changing.
Marketing
Now that your well-designed website with its great content is live, you just have to make sure people see it.
➢ Make sure your designer optimizes your website for search engines with descriptive titles, metatags, and a site map. These small details can determine whether your website turns up on page 12 or page 1 of Google search results.
➢ Consider pay-per-click ads in popular search engines.
➢ Your designer can prepare a few banner ads that match the look and feel of your website for you to strategically place on portal sites for your industry.
➢ Your URL should be added to everything your company sends out: business cards, letterhead, e-mail signatures, telephone on-hold messages, even your holiday cards.
Maintenance
Keep customers coming back by updating your website – no one will come back a second time to see the same stale content. You’ll likely want to update homepage features, calendars and events, news, new links, photos and other items as well.
While maintenance may be one of the last steps in creating your website because it won’t start until after the site is live, it is one of the most important steps and should be considered at the same time you lay out your goals. There are two main options to consider: your designer can do updates for you, or you can build your site on a content management system (CMS).
The option I don’t recommend is the former. If your designer makes updates for you, you are at the mercy of their work and holiday schedule. Your news may not be so new anymore if you happen to send it over during their summer holiday and it gets posted in the fall. The better your designer is, the more likely they are to be busy, and unless you want to pay for the full-time services of a webmaster, a CMS is likely a better option for you.
A content management system allows you to maintain your website yourself without any knowledge of HTML or design. If you can use a word processor and browse folders on your computer, you can use a CMS. These programs integrate your website design into them, and allow you to edit only specific sections, such as your blog, podcasts, photo galleries, online catalogs, forums, FAQs, events, and any text-based sections.
In some cases, you may need the skills of your designer to keep certain aspects of your site in check even with a CMS in place. Make sure to ask your designer about this possibility, and consider establishing a maintenance contract so that you’re both upfront about timelines and costs.
Monday, September 3, 2007
Rubbish web design
Websites don’t have to be at the cutting edge of design to be good, but if it’s colours clash, has lots of irritating animations and is so badly laid out it makes it unreadable you will find it here in the rubbish design section.
1. www.scrap-your-car.co.uk
We love the blinking dials and the creative use of a dash board...
2. www.pinkcyan.co.uk
If you wanted a website desiging would you ask these guys ?
3. www.british-athletics.co.uk
This a classic example of making a website before thinking about how it should look.
4. www.plexos.com
What is this website about? It appear to have no stucture or meaning.
5. www.learnerdriving.com
What can you say about the design of this website ?
6. www.wlhg.co.uk
We wonder if the person who designed this website sat back and thought to them selves "You know what you have done a good job"
Source : Rubbish web design
1. www.scrap-your-car.co.uk
We love the blinking dials and the creative use of a dash board...
2. www.pinkcyan.co.uk
If you wanted a website desiging would you ask these guys ?
3. www.british-athletics.co.uk
This a classic example of making a website before thinking about how it should look.
4. www.plexos.com
What is this website about? It appear to have no stucture or meaning.
5. www.learnerdriving.com
What can you say about the design of this website ?
6. www.wlhg.co.uk
We wonder if the person who designed this website sat back and thought to them selves "You know what you have done a good job"
Source : Rubbish web design
Monday, August 27, 2007
Tutorial on Customizing Ready made Templates
Get a clear idea of how you can customize ready-made website templates to suit your area of business and your individual tastes and preferences by following the guidelines given below
Before you start, some important points to be noted : Some tips if you cannot find the template under the specific category you desire
. You don't need to necessarily search for a template under a specific category that relates to your business. You can choose any template where you like the layout and get it customized to suit your business.
. Navigation links, pictures and colors can easily be changed.
. If you have pictures relating to your web site, you can easily customize any template of your choice from any category.
. Ready-made website templates can be completely changed to give a unique special design to your website.
Now, let’s begin the tutorial
Add Your Logo
Add your logo to the site. Take a look at this example; we added the logo to SusanFrostConsulting.com which is a customization of Business template 9. As you can see, simply adding the logo and header changed the look of the template and made it unique to the client. We also added an extra menu on the left to add additional links.
Change The Pictures
Change the pictures to pictures of your organization or business. For e.g., in the above sample we have added a picture of the individual who owns the site to give a personal and unique look to the site.
Customize the Colors of the Template
Once you have added your pictures and logo, customize the colors of the template to suit the pictures. You will see that just by changing the colors of the template, it looks unique and different.
Alternatively, you can choose a color theme that you like from another template and customize your template with those colors. E.g. www.mosa-rentals.com which was a customization of Business template 1 has used the template colors of Family template 7
Customize the Navigation Links
Customize the links to the names that you would like them to be. For example even a travel template can be used for a food website just by changing the pictures and navigation.
Add Scripts or Design Elements
Add a unique homepage like how we added to www.mosa-rentals.com, where used the same layout idea to create a unique homepage.
You can also add drop-down menus, swap images, photo-galleries and much more
Source : http://www.maagraphics.com/tips-articles/tutorial-on-customizing-ready-made-website-templates.htm
Before you start, some important points to be noted : Some tips if you cannot find the template under the specific category you desire
. You don't need to necessarily search for a template under a specific category that relates to your business. You can choose any template where you like the layout and get it customized to suit your business.
. Navigation links, pictures and colors can easily be changed.
. If you have pictures relating to your web site, you can easily customize any template of your choice from any category.
. Ready-made website templates can be completely changed to give a unique special design to your website.
Now, let’s begin the tutorial
Add Your Logo
Add your logo to the site. Take a look at this example; we added the logo to SusanFrostConsulting.com which is a customization of Business template 9. As you can see, simply adding the logo and header changed the look of the template and made it unique to the client. We also added an extra menu on the left to add additional links.
Change The Pictures
Change the pictures to pictures of your organization or business. For e.g., in the above sample we have added a picture of the individual who owns the site to give a personal and unique look to the site.
Customize the Colors of the Template
Once you have added your pictures and logo, customize the colors of the template to suit the pictures. You will see that just by changing the colors of the template, it looks unique and different.
Alternatively, you can choose a color theme that you like from another template and customize your template with those colors. E.g. www.mosa-rentals.com which was a customization of Business template 1 has used the template colors of Family template 7
Customize the Navigation Links
Customize the links to the names that you would like them to be. For example even a travel template can be used for a food website just by changing the pictures and navigation.
Add Scripts or Design Elements
Add a unique homepage like how we added to www.mosa-rentals.com, where used the same layout idea to create a unique homepage.
You can also add drop-down menus, swap images, photo-galleries and much more
Source : http://www.maagraphics.com/tips-articles/tutorial-on-customizing-ready-made-website-templates.htm
Friday, August 17, 2007
Website Design resources
The folks at web design from scratch have recently posted a list of their 10 favorite web site designs. The sites make up good sources of inspiration. I particularly like the IconBuffet. For about $300 you can get a great set of icons that will make your application stand out.
Another source to consider is the icons we added to the 2007 templates.
Another source to consider is the icons we added to the 2007 templates.
Friday, August 10, 2007
More about how to put video on your web site
If you want to put videos on your web site, what video format is the best choice? How to convert videos to this format? And how to put videos on Web using your own site not other video hosting service site like YouTube? This small how-to-do-it-step-by-step guide is going to help you with these questions.
Read it at How to convert video to Flash video and put video on your site
Read it at How to convert video to Flash video and put video on your site
Tuesday, July 24, 2007
How to Put Video on your Website: The Basics
Video is an extremely powerful medium. If you use eye-catching videos on your website chances are you will capture your website visitor's interest. Moreover, if you put video on your webpages, search engines will love you and will push your website in the top pages of their search results.
There are a lot of ways to implement videos on your website. Let's discuss some basic issues in this article.
You have two options (from the website visitor's perspective) when you want to put video on your website. Either let the visitor wait for the download of the entire video file and then view it, or use streaming techniques to immediately start playing the video file when the page loads. Streaming video becomes more and more popular every day.
Many web designers or webmasters think that the process of creating a video, editing it and uploading it to the website is a pain. The truth is that it does take time to do it, but it's not that complicated.
What you should pay attention to, is the bandwidth usage. Videos are real bandwidth eaters. You should also be aware of the various legal problems that may arise if you use video files that don't belong to you.
So if you decide to put video on your website you may first think if the value of the video justifies the time you need to spent to prepare the video and implement it on your website. Will the specific video help the website visitors? What technique of video implementation is better for you?
For example in a slow internet connection (56 kbps), a 1mb video file will take about 5 minutes to download. Is the value of the video high so that a visitor with a slow internet connection will wait for the file to download?
In other words, if you want to put video on your website make sure it's a good one. One that adds real value for your website's visitors and enhances your website's quality.
If you wish you could put videos on your website quickly without worrying about bandwidth issues and video quality then your wish came true. Have a look at this sophisticated video software that will help you put videos on your web pages in 3 easy steps. There's also a surprise bonus gift for you if you act on time.
This article is free for republishing
Source: http://www.articlealley.com/article_119691_81.html
There are a lot of ways to implement videos on your website. Let's discuss some basic issues in this article.
You have two options (from the website visitor's perspective) when you want to put video on your website. Either let the visitor wait for the download of the entire video file and then view it, or use streaming techniques to immediately start playing the video file when the page loads. Streaming video becomes more and more popular every day.
Many web designers or webmasters think that the process of creating a video, editing it and uploading it to the website is a pain. The truth is that it does take time to do it, but it's not that complicated.
What you should pay attention to, is the bandwidth usage. Videos are real bandwidth eaters. You should also be aware of the various legal problems that may arise if you use video files that don't belong to you.
So if you decide to put video on your website you may first think if the value of the video justifies the time you need to spent to prepare the video and implement it on your website. Will the specific video help the website visitors? What technique of video implementation is better for you?
For example in a slow internet connection (56 kbps), a 1mb video file will take about 5 minutes to download. Is the value of the video high so that a visitor with a slow internet connection will wait for the file to download?
In other words, if you want to put video on your website make sure it's a good one. One that adds real value for your website's visitors and enhances your website's quality.
If you wish you could put videos on your website quickly without worrying about bandwidth issues and video quality then your wish came true. Have a look at this sophisticated video software that will help you put videos on your web pages in 3 easy steps. There's also a surprise bonus gift for you if you act on time.
This article is free for republishing
Source: http://www.articlealley.com/article_119691_81.html
Monday, July 9, 2007
The Web 2.0 Effect: The Characteristics of a web2.0 website
The term web2.0 was originally presented by O'Reilly Media (A well known media company publishing books and websites on various computer technology topics). It's a term that refers to a new generation of websites (social networking websites, wiki-based websites etc). These websites take advantage of web application technologies and give web users the ability to collaborate and share their experiences, views, opinions and interests while they surf the web.
The web2.0 is a revolutionary phenomenon. Let's talk about the most basic characteristics of the websites using the web2.0 concept:
- A web2.0 website should be completely interactive and dynamic with a friendly user-interface based on the latest web2.0 technologies like AJAX.
- Web2.0 websites should deliver web based applications to Internet users and allowing them to make use of these applications through a web browser.
- A web2.0 website should implement social networking capabilities allowing users to interact with each other and create friend lists.
- A web2.0 website should be a democratic website where users will be able to add value by interacting with the web based application.
- A Web2.0 websites should allow it's users to exercise various controls over the website data and content (adding/deleting/editing content).
The conclusion is that web2.0 websites are build on participatory web based applications focusing basically on user experience and collaboration.
Examples of successful web2.0 websites
Although this new Internet revolution or trend is not widespread among web developers or Internet marketers yet, millions of users are actually participating in such websites. Not a lot of them are aware of the web2.0 concept but they are already an active part of it.
Here are some super-successful websites utilizing the web2.0 technologies:
- YouTube.com : The concept of YouTube is very simple. It allows Internet users to share their favorite video files with the entire world. YouTube gained so much popularity in such a little time. Everyone was surprised when the giant search engine Google bought the YouTube company for over 2 billions dollars!
- Wikipedia : The most famous online encyclopedia. It's free, it's huge, it's quite a resource for everyone and it's updated every single minute since anyone can edit it's contents. Which is why it became such a popular web place.
- Social Bookmarking websites like Digg.com : These type of websites like Digg.com offer users the ability to create friend lists and share their favorite websites, opinions, stories etc with people all over the globe. The popularity of these social bookmarking websites is increasing every day, making the website owners rich!
- MySpace.com : I bet you've heard of MySpace.com. This website will allow you to create your own profile, friend list and personal homepage adding whatever you want on it (text, images, videos, links, etc). It will also allow to share your profile and web page with other MySpace users. Amazingly simple but so clever. MySpace.com is now one of the most visited websited in the entire Internet.
What do all these websites have in common ?
The web2.0 concept. These websites are active web based applications. They all allow internet users to actively participate and customize the way the website looks and feels, thus giving the pleasure and impression of collaborating to the online community. The web2.0 is so evolutionary because of it's simplicity and it will become even more widespread among website designers and internet marketers.
A great resource for everyone interested in the web2.0 phenomenon is this step-by-step web2.0 E-guide that will teach you how to conquer any niche using the web2.0 concept. It's one of the first and most complete guides I've found that will teach you everything you need to know and more! There's a free web2.0 e-letter with loads of information waiting for you there.
Source: http://www.articlealley.com/article_143432_4.html
The web2.0 is a revolutionary phenomenon. Let's talk about the most basic characteristics of the websites using the web2.0 concept:
- A web2.0 website should be completely interactive and dynamic with a friendly user-interface based on the latest web2.0 technologies like AJAX.
- Web2.0 websites should deliver web based applications to Internet users and allowing them to make use of these applications through a web browser.
- A web2.0 website should implement social networking capabilities allowing users to interact with each other and create friend lists.
- A web2.0 website should be a democratic website where users will be able to add value by interacting with the web based application.
- A Web2.0 websites should allow it's users to exercise various controls over the website data and content (adding/deleting/editing content).
The conclusion is that web2.0 websites are build on participatory web based applications focusing basically on user experience and collaboration.
Examples of successful web2.0 websites
Although this new Internet revolution or trend is not widespread among web developers or Internet marketers yet, millions of users are actually participating in such websites. Not a lot of them are aware of the web2.0 concept but they are already an active part of it.
Here are some super-successful websites utilizing the web2.0 technologies:
- YouTube.com : The concept of YouTube is very simple. It allows Internet users to share their favorite video files with the entire world. YouTube gained so much popularity in such a little time. Everyone was surprised when the giant search engine Google bought the YouTube company for over 2 billions dollars!
- Wikipedia : The most famous online encyclopedia. It's free, it's huge, it's quite a resource for everyone and it's updated every single minute since anyone can edit it's contents. Which is why it became such a popular web place.
- Social Bookmarking websites like Digg.com : These type of websites like Digg.com offer users the ability to create friend lists and share their favorite websites, opinions, stories etc with people all over the globe. The popularity of these social bookmarking websites is increasing every day, making the website owners rich!
- MySpace.com : I bet you've heard of MySpace.com. This website will allow you to create your own profile, friend list and personal homepage adding whatever you want on it (text, images, videos, links, etc). It will also allow to share your profile and web page with other MySpace users. Amazingly simple but so clever. MySpace.com is now one of the most visited websited in the entire Internet.
What do all these websites have in common ?
The web2.0 concept. These websites are active web based applications. They all allow internet users to actively participate and customize the way the website looks and feels, thus giving the pleasure and impression of collaborating to the online community. The web2.0 is so evolutionary because of it's simplicity and it will become even more widespread among website designers and internet marketers.
A great resource for everyone interested in the web2.0 phenomenon is this step-by-step web2.0 E-guide that will teach you how to conquer any niche using the web2.0 concept. It's one of the first and most complete guides I've found that will teach you everything you need to know and more! There's a free web2.0 e-letter with loads of information waiting for you there.
Source: http://www.articlealley.com/article_143432_4.html
Friday, June 29, 2007
9 Important Tips for a fast loading web site
It is important to have a reasonably fast loading web site so that viewers are not made to wait for a long time and to accommodate users on slow internet connections. Search engine algorithms also do take into consideration your load time.
Follow these tips while designing and developing your site:
1. Optimize your HTML code: Make sure that your site doesn't have any unwanted tags and that it is optimized.
2. Effective Table designing: Design using nested tables instead of using cell merges and splits. Use separate tables where ever possible. Not designing for 100% height is better as if you use just one outer table, the web page is displayed only after the table is loaded fully. If many outer tables are present [you can have different tables for the header, content, footer, etc.] the page displays the content of each table as soon as its elements are loaded.
3. Maximize content area: This not only reduces load time, it enhances the readability of your site.
4. Minimize use of graphics, Flash, scripts: These are the major contributors to the size of your web page, so try minimizing them. Try using background colors and fills instead of heavy images.
5. Optimize all heavy files: As much as possible optimize heavy graphics, Flash files and scripts. In editors like fireworks and flash you can see the various options in the preview panel to reduce the sizes. See how popular web sites like google and yahoo have pages that are very small in size and thus load in seconds.
6. Stick to simple designs: Most fast loading sites have very simple designs. Take the hint! Complicated designs will slow down your pages.
Spread out your content: In case you find yourself having very long pages of content, break them down into separate sections and thus bring down the sizes of the individual pages.
7. Use Text Links instead of graphic buttons: basically try to make use of HTML as much as possible. Use CSS Styles for text links to make them as attractive as buttons. Read our CSS Styles tutorial
8. Use Server Side Include (SSI) files where ever possible. SSI files once called from the web server reside in its cache so on subsequent requests they load faster.
9. Using Layers instead of tables is a new concept for better load time. We will be bringing out an article on it soon.
Source : http://www.smartwebby.com/web_site_design/fast_loading_websites.asp
Follow these tips while designing and developing your site:
1. Optimize your HTML code: Make sure that your site doesn't have any unwanted tags and that it is optimized.
2. Effective Table designing: Design using nested tables instead of using cell merges and splits. Use separate tables where ever possible. Not designing for 100% height is better as if you use just one outer table, the web page is displayed only after the table is loaded fully. If many outer tables are present [you can have different tables for the header, content, footer, etc.] the page displays the content of each table as soon as its elements are loaded.
3. Maximize content area: This not only reduces load time, it enhances the readability of your site.
4. Minimize use of graphics, Flash, scripts: These are the major contributors to the size of your web page, so try minimizing them. Try using background colors and fills instead of heavy images.
5. Optimize all heavy files: As much as possible optimize heavy graphics, Flash files and scripts. In editors like fireworks and flash you can see the various options in the preview panel to reduce the sizes. See how popular web sites like google and yahoo have pages that are very small in size and thus load in seconds.
6. Stick to simple designs: Most fast loading sites have very simple designs. Take the hint! Complicated designs will slow down your pages.
Spread out your content: In case you find yourself having very long pages of content, break them down into separate sections and thus bring down the sizes of the individual pages.
7. Use Text Links instead of graphic buttons: basically try to make use of HTML as much as possible. Use CSS Styles for text links to make them as attractive as buttons. Read our CSS Styles tutorial
8. Use Server Side Include (SSI) files where ever possible. SSI files once called from the web server reside in its cache so on subsequent requests they load faster.
9. Using Layers instead of tables is a new concept for better load time. We will be bringing out an article on it soon.
Source : http://www.smartwebby.com/web_site_design/fast_loading_websites.asp
Wednesday, June 20, 2007
Top Ten Absolutely Free Websites for Downloading Cool Fonts
The following list of websites is the best compilation of sites on the web where you can download many different fonts totally free. Also, there are a variety of different types of fonts and styles you can download from the following sites so start searching today. Keep in mind that these sites are not listed in any particular order.
#1 www.1001freefonts.com/links.htm
Great site because it ranks other font websites in order of popularity as well as having more than 1,000 different fonts to download for free. This website is certainly a great resource if you need a lot of fonts and don’t want to pay for them!
#2 www.acidfonts.com
This is also a great website if you simply want to visit one site and download fonts without having to search multiple websites. At acidfonts.com you will be able to download a variety of different fonts for your PC and even convert the fonts over to your Mac if you want. This website will certainly provide you with the fonts you need for your website and business.
#3 www.1001fonts.com
This website may easily be confused with the first website listed, however it is completely different and also has a great selection for free font downloads. There are fonts available for the PC as well as Macs, so anyone can get the fonts they need from this website for free.
#4 www.coolarchive.com
This website is really cool, as it says in its name, because not only can you download over 1000 fonts completely free, there is also clipart, sounds, icons, applications, bars, bullets, and arrows. Most anything you need to design your website just the way you want is available on this site. If you are not sure how to download and install a font then read the FAQs to find out how.
#5 www.fontfreak.com
This is an amazing website with literally thousands upon thousands of fonts to download and dingbats as well. This is a highly rated website and completely free.
#6 www.downloadfreefonts.com
This is another great website because when you enter you can either choose Mac or PC or the top 20 font websites. From either Mac or PC you will be able to download the fonts you like most or you can visit all of the different top websites to check out the font availability and diversity.
#7 free.sinoa.com/FreeFonts/index.htm?29
Check out the different fonts available and then download the ones you like best or that suit your purposes best all for free!
#8 www.highfonts.com
A wide variety of fonts are available on this website, not to mention over 1001 free fonts to choose from. This site has a lot to offer and directs you to some good free font links as well.
#9 www.abstractfonts.com/fonts/
Great website for free fonts as well as other font related information you might find helpful.
#10 www.freefontsnow.com
This website has fonts for both Mac and PC and is yet another great way to search for fonts as well. You can either search categories to look for particular styles of fonts, or you can search by first letter if you already know the name of your font.
Michael Turner reveals his foolproof way to increase website traffic in his free 7 part mini-series. Grab it free right now at http://www.powertraffictactics.com/
Article Source: http://EzineArticles.com/?expert=Michael_Turner
#1 www.1001freefonts.com/links.htm
Great site because it ranks other font websites in order of popularity as well as having more than 1,000 different fonts to download for free. This website is certainly a great resource if you need a lot of fonts and don’t want to pay for them!
#2 www.acidfonts.com
This is also a great website if you simply want to visit one site and download fonts without having to search multiple websites. At acidfonts.com you will be able to download a variety of different fonts for your PC and even convert the fonts over to your Mac if you want. This website will certainly provide you with the fonts you need for your website and business.
#3 www.1001fonts.com
This website may easily be confused with the first website listed, however it is completely different and also has a great selection for free font downloads. There are fonts available for the PC as well as Macs, so anyone can get the fonts they need from this website for free.
#4 www.coolarchive.com
This website is really cool, as it says in its name, because not only can you download over 1000 fonts completely free, there is also clipart, sounds, icons, applications, bars, bullets, and arrows. Most anything you need to design your website just the way you want is available on this site. If you are not sure how to download and install a font then read the FAQs to find out how.
#5 www.fontfreak.com
This is an amazing website with literally thousands upon thousands of fonts to download and dingbats as well. This is a highly rated website and completely free.
#6 www.downloadfreefonts.com
This is another great website because when you enter you can either choose Mac or PC or the top 20 font websites. From either Mac or PC you will be able to download the fonts you like most or you can visit all of the different top websites to check out the font availability and diversity.
#7 free.sinoa.com/FreeFonts/index.htm?29
Check out the different fonts available and then download the ones you like best or that suit your purposes best all for free!
#8 www.highfonts.com
A wide variety of fonts are available on this website, not to mention over 1001 free fonts to choose from. This site has a lot to offer and directs you to some good free font links as well.
#9 www.abstractfonts.com/fonts/
Great website for free fonts as well as other font related information you might find helpful.
#10 www.freefontsnow.com
This website has fonts for both Mac and PC and is yet another great way to search for fonts as well. You can either search categories to look for particular styles of fonts, or you can search by first letter if you already know the name of your font.
Michael Turner reveals his foolproof way to increase website traffic in his free 7 part mini-series. Grab it free right now at http://www.powertraffictactics.com/
Article Source: http://EzineArticles.com/?expert=Michael_Turner
Friday, June 1, 2007
Use Of Graphic Design To Increase Website Useability
There can be no argument about the importance of design in attracting Internet users to a particular web site. No one would bother to explore the contents of a site if it does not contain eye-catching graphics that can please the visual sense of the users. With so many kinds of web sites existing online, it is extremely challenging to attract users and keep them interested in the site.
But a web site developer does not simply apply graphics freely on a site. Graphics should be used in the correct manner, or else, users might get turned off because the graphics featured just overwhelmed or confused them.
While it is true that attractive design is important for reasons that need not be explained, the choice of design must be carefully considered against the fulfilling the needs of users. When done successfully, it could be safely said that the web site has achieved its goals.
Graphics used in the Internet is inextricably linked to multimedia. Multimedia is a combination of graphics, text, sound, and animation to express a message to users. The multimedia features that will be incorporated to a web site should be dependent on the content. In general, multimedia and graphics should serve as supports to content, and should have precise, instructional purpose.
According to research, animated images can facilitate the transfer of learning in a positive way if it is utilized to show a vital part of the concept that is being illustrated. On the other hand, animation can serve as a barrier to user recall and performance.
Here are the guidelines in incorporating graphics to web sites:
1. Justify the usage of the graphics
The most obvious problem that can be seen on web pages is the over-usage of graphics. The main downside of this is that complicated, unnecessary graphics can take a long time to download, and this, of course, will not sit well with users. The graphics to be applied should support the transfer of data and should also be in relation to the accompanying text.
2. The difference between graphics with text-redundant data and those containing information that is non-redundant is that the former facilitates and ushers in the learning process, while the latter does not either help or slow down learning.
3. Consistency should be a priority in graphic design
4. Web pages should be marked up so that text will be downloaded before the graphics. In this way, the users will know immediately if the page has the information that they are looking for, and if not, they will be able to save precious waiting time knowing that they do not need that certain page.
5. The loading of graphics should be controlled as such that loading will commence from top to bottom, and the users scrolling down the page will encounter said graphics.
6. The downloading of pages should be fast in order to save users waiting time, and in order to reduce the chances that they will get frustrated that they will abandon plans to download. Here are several ways to achieve fast download periods:
-Keep the physical size of the graphics to a minimum
-Images should be combined in order to minimize the number of server connections. Remember, the more connections that exists, the slower the download time will be
-Decrease image resolution
-Limit the colors that will be used for the images
-Limit the use of animation
Animation is very much a part of web graphic design. The primary difference between web text and graphics and contents that are print-based is the dynamics. Moving displays attract the attention of users as long as the frequency of the display is regulated. Too much animation display can irritate and distract users. An animation that is perpetually moving can destroy the readable quality of the web page.
The usage of blinking texts should be avoided. It has long been regarded as an overused feature and the latest browsers no longer support it.
In designing a web site, there always exists a conflict between the desire to have total control over the appearance of a page and the need to permit users to establish their own preferences. The general appearance of the page should be made by the designer, but there are certain elements that users should have control over, such as color and text background, and the option whether to display graphics or not.
It takes a considerable amount of effort to establish and maintain the attractiveness and efficiency of a web site. If the guidelines above will be followed, all the efforts of web designers will bear desirable results. They only have to remember that the benefit of the users will always be the basis for everything.
Author Resource:- 5 Shades Hosting is a successful web hosting provider that has been providing website design and affordable web hosting services for individuals and businesses for almost a decade now. Dollar-for-dollar, feature-for-feature, you'll find the best web hosting plans right here plus a full Money Back Guarantee.
Article From Niche Article Directory
But a web site developer does not simply apply graphics freely on a site. Graphics should be used in the correct manner, or else, users might get turned off because the graphics featured just overwhelmed or confused them.
While it is true that attractive design is important for reasons that need not be explained, the choice of design must be carefully considered against the fulfilling the needs of users. When done successfully, it could be safely said that the web site has achieved its goals.
Graphics used in the Internet is inextricably linked to multimedia. Multimedia is a combination of graphics, text, sound, and animation to express a message to users. The multimedia features that will be incorporated to a web site should be dependent on the content. In general, multimedia and graphics should serve as supports to content, and should have precise, instructional purpose.
According to research, animated images can facilitate the transfer of learning in a positive way if it is utilized to show a vital part of the concept that is being illustrated. On the other hand, animation can serve as a barrier to user recall and performance.
Here are the guidelines in incorporating graphics to web sites:
1. Justify the usage of the graphics
The most obvious problem that can be seen on web pages is the over-usage of graphics. The main downside of this is that complicated, unnecessary graphics can take a long time to download, and this, of course, will not sit well with users. The graphics to be applied should support the transfer of data and should also be in relation to the accompanying text.
2. The difference between graphics with text-redundant data and those containing information that is non-redundant is that the former facilitates and ushers in the learning process, while the latter does not either help or slow down learning.
3. Consistency should be a priority in graphic design
4. Web pages should be marked up so that text will be downloaded before the graphics. In this way, the users will know immediately if the page has the information that they are looking for, and if not, they will be able to save precious waiting time knowing that they do not need that certain page.
5. The loading of graphics should be controlled as such that loading will commence from top to bottom, and the users scrolling down the page will encounter said graphics.
6. The downloading of pages should be fast in order to save users waiting time, and in order to reduce the chances that they will get frustrated that they will abandon plans to download. Here are several ways to achieve fast download periods:
-Keep the physical size of the graphics to a minimum
-Images should be combined in order to minimize the number of server connections. Remember, the more connections that exists, the slower the download time will be
-Decrease image resolution
-Limit the colors that will be used for the images
-Limit the use of animation
Animation is very much a part of web graphic design. The primary difference between web text and graphics and contents that are print-based is the dynamics. Moving displays attract the attention of users as long as the frequency of the display is regulated. Too much animation display can irritate and distract users. An animation that is perpetually moving can destroy the readable quality of the web page.
The usage of blinking texts should be avoided. It has long been regarded as an overused feature and the latest browsers no longer support it.
In designing a web site, there always exists a conflict between the desire to have total control over the appearance of a page and the need to permit users to establish their own preferences. The general appearance of the page should be made by the designer, but there are certain elements that users should have control over, such as color and text background, and the option whether to display graphics or not.
It takes a considerable amount of effort to establish and maintain the attractiveness and efficiency of a web site. If the guidelines above will be followed, all the efforts of web designers will bear desirable results. They only have to remember that the benefit of the users will always be the basis for everything.
Author Resource:- 5 Shades Hosting is a successful web hosting provider that has been providing website design and affordable web hosting services for individuals and businesses for almost a decade now. Dollar-for-dollar, feature-for-feature, you'll find the best web hosting plans right here plus a full Money Back Guarantee.
Article From Niche Article Directory
Wednesday, May 23, 2007
Avoid These Web Site Design And Writing No-Nos
Is your website doomed before it even gets off the ground?
A badly-designed website can turn off potential customers before they even think about buying your product. Here are some website design mistakes that you should avoid.
1. Don't load your web site with a lot of high tech
clutter. As a rule, avoid using fancy animation or script
code unless it is absolutely necessary.. Those things only serve to distract from your sales message.
2. A website that loads slowly is just about the most
annoying thing on the Internet. Don't use large graphics
or anything else that dramatically increases your site's
load time.
3. Don't make the mistake that everyone will totally
understand your web site message. Use descriptive words and examples to get your point across.
4. Don't write your strongest point or benefit only once.
You should repeat it at least 3 times because some people
may miss it.
5. Don't push all your words together on your web site.
People like to skim; use plenty of headings and sub
headings.
6. Stay focused. Don't use site content your target
audience isn't interested in. If people are coming to your
site to find info about fishing, then don't include soccer content.
7. Keep a unified theme. Don't use 50 different content formats all over your web site. Use the same fonts, text sizes, text colors, etc.
8. Stick to the basics. Don't use words your web site
visitors might not understand. People are not going to stop
and look in a dictionary, they will just go to another site.
9. Don't let your selling words and phrases go unnoticed. Highlight important words and phrases with color, bolding, italics, underlining, etc.
10. Don't forget to use words that create emotion. All
people have emotions, people will have more interest when
they are emotionally attached.
11. Don't use unnecessary words or phrases on your site.
You only have so much time to get your visitor's attention
and interest; so make ever word count.
12. Stay organized by avoiding the "cluttered" look. I see plenty of websites that have banners and graphics strewn all over the place with no rhyme or reason. These sites look awful and , needless to say, I click away from them as quickly as possible.
By avoiding these website design mistakes, you increase the odds that visitors will stay on your site long enough to make that purchase.
Ronald Gibson is a Web Designer and Internet Marketer. He
is the Webmaster of AffiliateUtopia.com, which offers information about some of the best money making opportunities on the Web. For more information, visit: http://www.affiliateutopia.com/
A badly-designed website can turn off potential customers before they even think about buying your product. Here are some website design mistakes that you should avoid.
1. Don't load your web site with a lot of high tech
clutter. As a rule, avoid using fancy animation or script
code unless it is absolutely necessary.. Those things only serve to distract from your sales message.
2. A website that loads slowly is just about the most
annoying thing on the Internet. Don't use large graphics
or anything else that dramatically increases your site's
load time.
3. Don't make the mistake that everyone will totally
understand your web site message. Use descriptive words and examples to get your point across.
4. Don't write your strongest point or benefit only once.
You should repeat it at least 3 times because some people
may miss it.
5. Don't push all your words together on your web site.
People like to skim; use plenty of headings and sub
headings.
6. Stay focused. Don't use site content your target
audience isn't interested in. If people are coming to your
site to find info about fishing, then don't include soccer content.
7. Keep a unified theme. Don't use 50 different content formats all over your web site. Use the same fonts, text sizes, text colors, etc.
8. Stick to the basics. Don't use words your web site
visitors might not understand. People are not going to stop
and look in a dictionary, they will just go to another site.
9. Don't let your selling words and phrases go unnoticed. Highlight important words and phrases with color, bolding, italics, underlining, etc.
10. Don't forget to use words that create emotion. All
people have emotions, people will have more interest when
they are emotionally attached.
11. Don't use unnecessary words or phrases on your site.
You only have so much time to get your visitor's attention
and interest; so make ever word count.
12. Stay organized by avoiding the "cluttered" look. I see plenty of websites that have banners and graphics strewn all over the place with no rhyme or reason. These sites look awful and , needless to say, I click away from them as quickly as possible.
By avoiding these website design mistakes, you increase the odds that visitors will stay on your site long enough to make that purchase.
Ronald Gibson is a Web Designer and Internet Marketer. He
is the Webmaster of AffiliateUtopia.com, which offers information about some of the best money making opportunities on the Web. For more information, visit: http://www.affiliateutopia.com/
Tuesday, May 1, 2007
11 Web Design Tips
Before you start design on a website step back a minute – or two. Think about what a website is REALLY supposed to do for the client as well as the visitor. In its simplest form, a website is there to facilitate a transaction of information between it and the visitor. With this in mind, here are some tips for designing useful web sites:
1. Font Free for All: Keep the number of font families you use on a page to a minimum. Using many different fonts on a page communicates a sense of disorganization. Use different fonts only to assist in organizing the page in a clear manner; however you can usually achieve this by changing font sizes and font weight.
2. Put it on my tab: Check your forms to be sure the tab key proceeds to the next expected (and logical) field on a form. For example, if your form is collecting address information and you are on the city field the next tab should go to state, not the 2nd address line field.
3. Dump the landing page: In this day and age that extra click the user has to make on that cool splash page that you spent 2 hours on in Photoshop is not going to impress them - well maybe the first visit; it will most likely be viewed as a nuisance and irritate them by the 2nd or 3rd visit. The visitor wants to get to the information they need ASAP – concentrate on using that graphics savvy to help support the content within the site (i.e. navigation, organized layout).
4. Don’t be too Flashy: There are some sites out there (they know who they are) that use Flash in a really creative but useful manner (http://www.2advanced.com). There are others that use it with the creativity in mind but let the concept of usability fall by the way side. For instance, putting a flash segment on a splash page can compound the annoyance in tip 3. Not only does the visitor have to click just to get to the meat of the site but now he may have to wait for a flash movie to load on top of it.
In addition be careful when creating navigation systems with Flash. I have been to many sites where you almost have to chase after the link because it is spinning around in some sphere or only appears when you hover over some other section just right. I am certainly not against the use of Flash at all – just gratuitous use of it. I liken it to the gratuitous show of female skin in a bad sci-fi movie which has absolutely no bearing on the plot - although I find this a lot easier to accept.
5. No Bouncing Balls: Keep animation to a minimum unless it truly supports the site. Bouncing balls, moving smiley faces, spinning text in most cases is not going to help support the site and usually becomes distracting and sometimes annoying.
6. Background and Readability: Be careful when using backgrounds to choose or create one that will keep a good contrast with the text that sits on top of it. Too much texture in a background can also wreak havoc on the readability of a site.
7. CSS = Yes: Be sure to use CSS (Cascading Style sheets) to separate the content from the presentation. Using inline styles makes things tough when want to change to presentation attributes of a site. There is tons of free material on CSS all over the web.
8. Read up on colors and the emotions/moods they tend to evoke: Note that colors do convey different meanings in different cultures. Also, utilize a good color scheme generator to help you in creating an overall color scheme of the site. Here is a link to a free online one - http://wellstyled.com/tools/colorscheme2/index-en.html.
9. But it worked on my machine!: Be sure to test in as many browsers as possible. Things that look great in Internet Explorer may soon be transformed to a collection of HTML elements in complete disarray in another browser or even another version of IE – especially when using a tableless layout approach.
10. You sunk my JavaScript!: Keep the “Display a notification about every script error” checked in IE if you use it as your main browser during development especially when using JavaScript – which I try to keep to a minimum anyway. IE has a habit of overlooking JavaScript errors otherwise leading you to believe that all is well – until you start getting phone calls! Remember though to test in MANY browsers which brings, me to the next tip.
11. Get Firefox 2.0 and download the free utlilites Firebug and Webdeveloper: On top of being another browser to test with, the add-ons Firebug and Webdeveloper are extremely helpful.
John LaSpina's 12 year system development career has spanned many different system development factions including Geographic Information Systems (GIS), Financial, Billing, Engineering applications, Intranets, Extranets, and Web Sites.
The development languages/tools John uses includes VB, C#, HTML, DHTML, CSS, PHP, Perl, Javascript, MS SQL Server, Oracle, MySQL, and Photoshop
Article Source: http://EzineArticles.com/?expert=John_LaSpina
1. Font Free for All: Keep the number of font families you use on a page to a minimum. Using many different fonts on a page communicates a sense of disorganization. Use different fonts only to assist in organizing the page in a clear manner; however you can usually achieve this by changing font sizes and font weight.
2. Put it on my tab: Check your forms to be sure the tab key proceeds to the next expected (and logical) field on a form. For example, if your form is collecting address information and you are on the city field the next tab should go to state, not the 2nd address line field.
3. Dump the landing page: In this day and age that extra click the user has to make on that cool splash page that you spent 2 hours on in Photoshop is not going to impress them - well maybe the first visit; it will most likely be viewed as a nuisance and irritate them by the 2nd or 3rd visit. The visitor wants to get to the information they need ASAP – concentrate on using that graphics savvy to help support the content within the site (i.e. navigation, organized layout).
4. Don’t be too Flashy: There are some sites out there (they know who they are) that use Flash in a really creative but useful manner (http://www.2advanced.com). There are others that use it with the creativity in mind but let the concept of usability fall by the way side. For instance, putting a flash segment on a splash page can compound the annoyance in tip 3. Not only does the visitor have to click just to get to the meat of the site but now he may have to wait for a flash movie to load on top of it.
In addition be careful when creating navigation systems with Flash. I have been to many sites where you almost have to chase after the link because it is spinning around in some sphere or only appears when you hover over some other section just right. I am certainly not against the use of Flash at all – just gratuitous use of it. I liken it to the gratuitous show of female skin in a bad sci-fi movie which has absolutely no bearing on the plot - although I find this a lot easier to accept.
5. No Bouncing Balls: Keep animation to a minimum unless it truly supports the site. Bouncing balls, moving smiley faces, spinning text in most cases is not going to help support the site and usually becomes distracting and sometimes annoying.
6. Background and Readability: Be careful when using backgrounds to choose or create one that will keep a good contrast with the text that sits on top of it. Too much texture in a background can also wreak havoc on the readability of a site.
7. CSS = Yes: Be sure to use CSS (Cascading Style sheets) to separate the content from the presentation. Using inline styles makes things tough when want to change to presentation attributes of a site. There is tons of free material on CSS all over the web.
8. Read up on colors and the emotions/moods they tend to evoke: Note that colors do convey different meanings in different cultures. Also, utilize a good color scheme generator to help you in creating an overall color scheme of the site. Here is a link to a free online one - http://wellstyled.com/tools/colorscheme2/index-en.html.
9. But it worked on my machine!: Be sure to test in as many browsers as possible. Things that look great in Internet Explorer may soon be transformed to a collection of HTML elements in complete disarray in another browser or even another version of IE – especially when using a tableless layout approach.
10. You sunk my JavaScript!: Keep the “Display a notification about every script error” checked in IE if you use it as your main browser during development especially when using JavaScript – which I try to keep to a minimum anyway. IE has a habit of overlooking JavaScript errors otherwise leading you to believe that all is well – until you start getting phone calls! Remember though to test in MANY browsers which brings, me to the next tip.
11. Get Firefox 2.0 and download the free utlilites Firebug and Webdeveloper: On top of being another browser to test with, the add-ons Firebug and Webdeveloper are extremely helpful.
John LaSpina's 12 year system development career has spanned many different system development factions including Geographic Information Systems (GIS), Financial, Billing, Engineering applications, Intranets, Extranets, and Web Sites.
The development languages/tools John uses includes VB, C#, HTML, DHTML, CSS, PHP, Perl, Javascript, MS SQL Server, Oracle, MySQL, and Photoshop
Article Source: http://EzineArticles.com/?expert=John_LaSpina
Subscribe to:
Posts (Atom)
