Outsourcing Projects

Showing posts with label Web Designing Tips. Show all posts
Showing posts with label Web Designing Tips. Show all posts

Monday, February 9, 2009

SEO Friendly Web Designing Tips

  1. Avoid creating menu on the left-hand side of a website . If unavoidable, an alternative way is to put some text with rich keywords at the top or above the left-hand menu so that this text will be the first thing to be read by search engines.
  2. Headlines are rated more important than the rest of the web page by search engines . To take advantage of this, you should have your keywords in the page headline. Since the header tag (h1) is quite large, you should format it to make it smaller.
  3. Every page should contain the ????title???? and ????description???? tags with good keywords to describe the page content. The number of words for the title should not exceed 9 and that for the description should not be more than 20 words in order to keep within the limits of most search engines.
  4. Try not to use Flash when possible . Flash cannot be read by the search engines to date and will cause slow page loading time and make people run away. If you really have a reason to use flash, try to make it smaller (e.g. as a flash header) and leave other area of your website for keyword-rich content.
  5. Think twice on how to use graphics . Make them relevant to your content and use an alt tag with relevant keywords for search engines to read as they cannot read graphics and also for your visitors so that they can have something to read when waiting for the graphics to load.
  6. Do not only use images to link out . You should always use text links to link out to important content on your web site. Spiders can follow image links, but like text links more though.
  7. Avoid using frames . Some search engines cannot spider web pages with frames at all. For the other search engines that can, they can have problems spidering it and sometimes they too cannot index the web page.

Thursday, January 8, 2009

Web Design Tips: Rounded Borders in CSS

Consumers often judge online stores by visual aesthetics alone, so Internet shopkeepers are wise to use large appealing images, handsome fonts, and occasionally an eye-pleasing curve.

When that curve is added someplace unexpected, say in a border around a text box or an image, it can be especially impactful. In this Web Design Tips, a recurring Practical eCommerce feature, I'll show you how to use CSS alone to bend the corners of your site's border elements. I'll also give you an update on the World Wide Web Consortium's (W3C) border-radius property in CSS3 and discuss browser compatibility—since Microsoft's Internet Explorer trails most other browsers in supporting this property in any form.
Rounded Borders in CSS

As you probably know, CSS stands for cascading style sheets. Basically, CSS are short text documents that serve as a "mechanism for adding style (e.g. fonts, colors, spacing) to web documents," or so said the W3C in its official description of the standard.

For years, designers have been using images or complex JavaScripts to add rounded corners to boxes and borders. But there is a CSS3 property that effective smoothes out otherwise pointed corners, simply and easily. The border-radius properties will round the corners of a border. The available tags are border-top-right-radius, border-bottom-right-radius, border-bottom-left-radius, border-top-left-radius, border-radius. The border-radius tag will take two lengths.

Read More Article...

Sunday, January 4, 2009

30 Ways To Keep Visitors On Site: Watch Your Conversion Rate Soar

Search engine optimization, links, directories — all of these are well-known means to drive visitors to your site. But, what can you do to keep them there? The number of visitors who land on your site and quickly move on is called your bounce rate — the rate at which visitors bounce to another site.

So, here are 30 sure-fire tips to keep visitors on site longer — and maybe even bookmark your site for future visits.

  1. Teach them something. You can't swing a dead copywriter without hitting a Glazer-Kennedy "Who else wants to make a million dollars?" long-form sales letter on the web. It's page after page of hype, with a PS and a PPS just to make things urgent and "interesting."

    Interesting? That's not what visitors want – steaming piles of hype. Provide informational content – no sales – about your product or services. Teach visitors and they'll look favorably upon your site.

  2. Keep it fresh. Related to #1, if they've read it once they won't wont to read it again so keep adding new articles of interest to your primary demographic – your ideal buyer.

  3. Add a blog. Blogs can be added to a site with a click if you go with a web host with a big tool kit. Blogs are an easy means of adding new content. It's a great way to add user-generated content (free stuff) and it's a terrific way to build a site community – a dedicated group of visitors who visit your blog everyday.

  4. Keep the navigation really, really simple. First, navigation links should be large and clearly labeled. One boating supply site uses "Gulls" and "Buoys" as labels for their women's and men's clothing line. May be cute but it's also confusing.

    Also, keep navigation consistent throughout the site. If you use a navigation bar at the top of the home page, keep it there on all landing pages so visitors don't have to look for it.

  5. Provide a site map. It's easy to get lost on a site that has a couple of hundred pages. A link to a site map helps visitors (and search engine spiders), and an omni-present link to the homepage keeps visitors from bailing on your site simply because they took a wrong turn.

  6. Provide product pictures. Indeed, product pictures sell products….something about a picture being worth a 1,000 words.

  7. Provide complete product descriptions. Skip the sales yak. Keep your product descriptions 100% informational. Be sure to list all product features. Then move on to #8.

  8. Describe product benefits. Most site owners (and copywriters) describe a product's features, i.e. 300 watts of raw power, a low-cut vamp, etc., but buyers don't purchase features; they purchase benefits. Be sure to describe how the product will make the reader's life easier, simpler, more productive, more fun or just better.

  9. Provide numerous marketing channels. Some visitors will be comfortable ordering online; others want to order by telephone. Give visitors a choice and post that telephone number on every page of the site.

  10. Keep it fun. Write in a chatty tone. Even serious subjects become more readable – accessible – when written in normal-speak not web-speak.

  11. Ask for site feedback. Provide the visitor with a means of leaving feedback for you and other readers.

  12. Encourage product reviews. Amazon does it and look what it's done for them. Good product reviews from visitors (1) shows you care about their needs and (2) provides solid gold marketing input. If the item is routinely slammed, dump it. If it gets good buyer reviews move it to the home page.

  13. Separate informational content from sales content. The easiest way to do this is to create an archive of informational content separate and distinct from product pages.

  14. Don't assume all visitors will land on the home page. Search engines index every page of a site so a category landing page may have more relevance to the user's query than the home page. So, consider every page a landing page and every product page a landing page, i.e. tell the visitor where s/he is.

  15. Keep site pages light. Even 30 seconds is an eternity when waiting for a page download. In fact, you'll lose 90% of potential visitors who have to wait for a 30-second download. Now that's a short attention span!

  16. Create visitor trust. From home page to landing page to checkout sequence, create trust in the minds of visitors. Not only does it keep visitors on-site longer, it generates more sales.

  17. Add RSS feeds. This simplifies the visitor's day by providing in one place all pertinent information relevant to the topicality of your site. So, instead of having to visit 10 sites for the latest in gold investing news, visitors can access your site for the latest via RSS feed.

  18. Please the eye. It's a subliminal thing. Pastels are appropriate for sites selling makeup or clothing. Fluorescent green works well for that high-protein energy boosting shake. Two completely different buyers, two different products, two different looks.

  19. Give them something to watch. A how-to video or PowerPoint deck will keep visitors watching, especially if it provides useful information. There's just something hypnotic about moving pictures!

  20. Allow visitors to bookmark pages. This is so simple to do yet few site owners do it. It's the best way for visitors to compare product A to product B.

  21. Don't be afraid of syndicated content. Some webmasters shy away from syndicated content because it's duplicate content and, therefore, doesn't help in SERPs placement. Okay, but it does provide informational content relevant to the interests of your visitor. And it's free. Remember, the objective is to keep them on site for as long as possible to make that sale.

  22. Personalize the homepage. Welcome repeat visitors by name. Make recommendations based on previous purchases. Create a "Your Shopping Cart" feature. In other words, make the visitor feel welcomed and valued. They are.

  23. Plant Easter Eggs. You don't see this much but it's a great idea. Easter eggs are little surprises. The term comes from computer gaming in which programmers plant little surprises to be discovered by the player.

    In the case of your site, tell readers about the Easter eggs on the home page. Tell them what they can "win" by discovering an Easter Egg – a small give-away that you can buy in quantity. Visitors will be looking at every page trying to find those fun surprises – and FREE stuff.

  24. Make sure your informational content is accurate. There is so much mis-and dis-information on the web. However, your visitors will stick around to read what you say – especially when you back it up with references – even links to references!

  25. Yes, grammar counts. Spelling and punctuation, too. Sure, most people won't care if you use except instead of accept. But some will. And they'll draw the rightful conclusion that if your site text isn't dead-on, maybe other aspects of your business are off target.

  26. Provide shopping carts. Again, obvious, but you'd be surprised how many sites don't offer shopping carts – even though the software is OSS!. Without a shopping cart, the user has to write down all product info – way too much trouble.

    A good shopping cart program will enable visitors to view cart contents, change quantities and delete items at any time.

  27. Slap security all over your site. Still more than one-half of all buyers won't buy online because they're afraid of getting ripped off. There are plenty of trust building tools like Verisign and BBBonline. Make sure your visitors and buyers know your site is secure – or they're gone.

  28. Offer a "Track Your Order" feature. Just another reason to get the visitor back on site. "Hey, as long as you're here, we have these on sale for the next two hours."

  29. Expand the viewers scope. You sell canoes online and you're doing okay. Well, put up a couple of informational articles on the joys of sea kayaking just before bringing out a new kayak product line. You can't always be sure what the visitor wants. Sometimes the visitor doesn't even know. But you can tell him or her, provide some interesting reading, some food for thought and, if all falls into place, generate a kayak sale.

  30. Tweak. Not every bird flies. Use site metrics analysis software to determine which features readers find appealing and which are ignored. Then, it's just a matter of building on the good stuff and dropping the unseen.
It's rare to get it right the first time, but tweaking will improve site performance and links popularity over time. And, the more visitor traffic and page views, the more successful the site.

So, once you've got them on site, keep them there with interesting, easy-to-find information that's relevant to the visitor's needs and wants. That's what makes conversion ratios skyrocket.

Source : http://www.edezines.com/

Wednesday, October 15, 2008

Crawler Friendly Web Design

"I'm not designing my site for search engines," is a common designer objection to SEO suggestions. But when search engines collectively have more users than either Internet Explorer or Firefox, how can you afford to ignore how they interact with your site. Search engines are like the third major browser, and if your site breaks for them, it breaks for all those potential visitors from search engines. Search engine friendly sites aren't hard to create and can be attractive to both search engines and human visitors at the same time.

Moderator: Gillian Muessig, President, SEOmoz

Speaker:
Shari Thurow, Founder and SEO Director, Omni Marketing Interactive

Shari asks how many of us have heard this session before, and lets us know that the presentation has been changed. The presentation will be available for download. Do download – there's a lot of good information in the presentation.

Shari makes clear that this session is not based on her personal design preferences, but the session is based on statistics and data. She is getting PhD in HCI with a specialization in search engines. Many of the slides she shows today are not even from her clients, but ones that illustrate her points.

Read More Article...

Tuesday, October 7, 2008

Web Designing Tips for You

Websites are generally conceptualized for the sake of marketing and sales. In this time and age when Internet marketing is the current craze, everyone is literally enthused to go for the same type of business. Online marketing is definitely soaring high in terms of its popularity and it only means that the doors are wide open for those who try it. Success comes when the right thing is adhered to. The appropriate steps are important to follow especially in line with web designing.

Website designing must be so accurate so as to bring forth more visitors and most importantly, sales. It calls for your keen attention to details. You need to make sure that the site is performing really well in order to attract more and more visitors who may be turned into potential clients. Therefore, it matters that you take time to concert your efforts on your website design.

Read More Article...

Tuesday, September 16, 2008

Web Shop Design: Using Flash Effectively

The question as to what and how much animation is appropriate for a Web site has plagued Web developers ever since the early days of the Internet. While tools such as Flash now include smart features that overcome some of their early limitations, this doesn't mean that every site needs Flash content. In this article, I'll explain some of the benefits and disadvantages of Flash and tell you what you need to do to make sure Flash works for you and not against you.

Flash: The Good and Bad

Flash is a common plug-in with Adobe research showing that 99 percent of Web users have Flash available. So, it is fair to assume that anyone visiting your site can probably view Flash content. If you choose to use Flash, one thing you'll like about it is that it is pretty much browser independent so you can expect your Flash movie to look the same in all browsers, which is not the case with HTML or CSS.

On the downside, Flash movies, particularly those that have not been designed correctly, can be slow to download and display leaving a delay between when the visitor gets to your site and when the content starts to play. This can be particularly annoying when a Web site is created entirely in Flash — a visitor won't see anything until the site has loaded. This experience is bad enough when using a DSL or broadband connection, and for dial-up users it's even worse.

Read More Article...

Sunday, September 7, 2008

Simple Tips To Improve Your Website Design

First, your web pages should load fast. Keep in mind that not everyone uses a fast internet connection. A great number of Internet users still surf the Internet via dial-up modems. Do not load your site with slow loading banners and images. Use interlaced low-res images that have been optimized for the web. If your website is not done loading in less than 15 seconds, most people will leave it.

Providing quick-loading web pages show that you value your visitors’ time. If you really cannot do without music or sounds, turn it off by default and ask visitors to start it themselves. Doing this will prevent your web pages from upholstery cleaning milwaukee In addition, many people do not like to be forced to listen to music or sounds while exploring a website because they are already listening to their favorite music.

Besides having to prevent visitors from frustration of waiting for the pages to load, you also need to pay attention to the text size. Be sure the text is big enough to make it easy to read. In addition, the background should not obscure your text. Choose colors very carefully. upholstery cleaning portland want to be safe, use black text on a white background. This way, someone with a color deficit or using a black and white screen can still read your text clearly.

Each link should also be clearly identified. Avoid relying on applet or plug-in for navigating around your Webpages. Neatly organized hyperlinks to different pages in your website from home page or any other page will help your visitors to move quickly to their destination.

Some webmasters use Flash to create cool drop-down menus. With Flash, together with Macromedia Fireworks and Dreamweaver, it takes less than a day for an upholstery cleaning products coder to create professional looking web pages. However, if you take the same route, make sure people can figure out how your Flash menu works.

Cross-browser compatibility is another important factor that may affect the usability of a web site. Not everyone uses Internet Explorer on Windows. Unfortunately there are code that will be displayed differently cheap upholstery cleaning Explorer, Firefox and Opera. That means it is wise to prepare your site so it will be viewable in those popular browsers.

Evaluating screen resolutions should also be done with care. A site that looks perfect in high resolution may turn out to be impossible to view correctly in other resolutions. For instance, serif fonts is more comfortable to read on paper, because serifs upholstery cleaning orlando individualize each letter. However, this advantage can be rendered useless when the fonts are viewed on computer screens, since factors such as screen resolution can affect the clarity of texts.

There are many factors that affect the usability and accessibility of a web site. Tools such as WebXACT or Bobby can help you find upholstery cleaning milwaukee how accessible your Website is. If you have a doubt, ask your family and friends for help. Being less familiar with the website, they can help find a lot of things you overlooked.

Source : http://www.corsavoo.com/

Thursday, September 4, 2008

Web Design : Tips on Using Color

Of all the choices you make when designing a Web site, one of the most important is the colors you use. Without reading anything on a Web site, simply seeing the colors it uses can tell you a lot about its products and the company behind it.

That is, of course, provided the designers chose colors that would deliver the right message to the site's visitors. In this article I'll talk about color, how to use the color wheel to find color combinations, and I'll introduce you to some tools that can help you choose colors for your Web site.

Back to Grade School

When you were at school you learned that the three primary colors were red, blue and yellow. When you mix these primary colors together, you get what are called secondary colors — mix red and yellow to make orange, mix red and blue to make purple and mix blue and yellow to make green.

Mixing the secondary colors gives you tertiary colors which are yellow-orange, yellow-green, red-orange, red-violet, blue-violet and blue-green. The name of each tertiary color is derived from the colors that are mixed to make it, with the primary color first.

Read More Article...

Wednesday, August 27, 2008

Web Designing Tips to Keep Your Visitor on Board

Learn how you can keep your website visitors intact by tricking with your website designing. Also understand the role website designing companies play in such situations.

The biggest problem that most websites face is with their bounce rates. Websites that are unpopular or do not have enough material to attract the user's attention are known to have a high bounce rate. Most search engine optimizers who are also responsible to study the performance of the websites, are busy understanding how the bounce rate of the websites can be controlled and the return ration of the visitors can be improved. Here are some such examples that will help you understand the importance of web design ing in this process and how people can take assistance of their web designing company to accomplish this task.

The biggest mistake that people commit is to create a lot of hype about their website in the site itself. It is high time they understand that this is not the right place for hype creation. People who have already landed on your website are now looking for some matter, they are wanting to learn something from your website, hence make sure that you have some informative stuff added in there, so that the user is satisfied to visit your website. In the same way it is also important to keep adding newer stuffs to your website content so that the re-visitors have something to look forward to.

Read More Article...

Monday, August 25, 2008

10 Tips on designing a fast loading web site

Tips and tricks on effective web design

The Number 1 rule that every web designer should follow is to create a fast loading web site. You might have a great design but very few people are going to see it if it takes a long time to load. While designing a web site always think about how long it will take to load. Try out our tips to build a great looking web site that also loads fast.

  • Minimize the use of images - The key to a fast loading web site is to minimize the use of images. Images do enhance a page but don't make 80% of your web site only images. Instead break it down as much as possible to simple HTML. Notice the popular sites like Yahoo, Google, Ebay, Amazon etc., they have very few images because the load time is more important. Very often simple designs are the best.
  • Optimize images for the web - Once you have decided on the images that you need on your site, make sure that it is optimized for the web. They should be in the gif or jpeg format. You can also minimize the size of the image by choosing the number of colors you need, from the color palette. The less the colors you choose, the less the size of the image. You can also use online tools like Gif Wizard to optimize your images or to get a recommendation on how to cut down the size of an image.
  • Use Tables creatively - You can get some great looking designs by using tables creatively . Tables load very fast because it is just HTML code. Tables can be used in the homepage, menus or anywhere you like. Check out our homepage and our menus to see how we have used tables in our site.
  • Cut down the use of animated gifs - Don't use animated gifs unless it is necessary. Animated gifs take a long time to load and can also be very irritating. But since they catch your attention you could use small animated gifs to draw a visitor's attention to a particular section of your site.
  • Design simple icons - Instead of using big, bulky images use simple and small icons that add a little color and draw the attention of a visitor. We have used small icons in our homepage to highlight the main sections of our site.
  • Use background images instead of big images whenever possible - Use background images whenever possible. This is usually a very useful tip for headers and footers. Instead of using an image of width 580 which is a uniform design you can use just a part of that as a background fill. This reduces the size of the web page as the image is small. The code will look like this :
  • Try out CSS Styles - Have fun with CSS styles to get some cool text effects. Again, a CSS Style is simple HTML code so it loads very fast. You can create cool rollovers using CSS Styles.
    Rollover the text on the right menu to see how we have used CSS Styles to get a simple but nice text effect.
  • Use Flash sparingly - There seems to be a lot of hype about Flash but I recommend that you minimize the use of Flash on a site. Don't make entire sites using Flash. It may look great but it takes hours to load and can really put off visitors. If you do want to use Flash use it within an HTML site and make sure it loads fast.
  • Design most of your site in HTML - As much as possible try to design your site using HTML. You can create great designs by just using HTML code. Use tables, CSS Styles and simple fonts to design your site. Minimize the use of animated gifs, Flash, bulky images etc.
  • Keep checking your load time - Last but not least, before you decide on the final design of your web site, check its load time on NetMechanic. This site gives you a free analysis of your web site which is extremely useful. We kept using it to improve our site till we got a report that said good loading time!
We learnt these tips while building our web site. We've enjoyed sharing them with you and hope that you found them useful.

Source : http://www.entheosweb.com/

Sunday, August 24, 2008

Useful tips for writing efficient CSS

Jonathan Snook has posted a few great CSS coding tips in Top CSS Tips. Several of them come down to personal preferences, and it seems my preferences differ a bit from Jonathan’s in some cases, so I thought I’d go through his tips and note my take on each of them.

px for font sizes

Jonathan’s arguments for using px make sense, but I always use em. I’ve learned how to use a combination of percentages and ems and feel comfortable sizing text that way.

CSS declarations on one line

Unlike Jonathan I use a single line for rules that only contain one declaration, but multiple lines for rules with multiple declarations. TextMate’s code folding takes care of the rest for me. Jonathan makes a valid comment about file size savings with single line declarations though.

Read More Article...

Wednesday, July 30, 2008

Why Flashy Web Designs are Bad for Business

Have you heard yourself saying, "I don't understand? I have a gorgeous site, a really cutting-edge splash page with a flash introduction, up-to-date technology, I paid a small fortune for this site, and I'm getting plenty of hits but no one is buying or staying in the site."

Well, you may be one of a growing number of businesses, both large and small, who believed all the hype about the latest in new technology. Many business owners want their website to have that cutting-edge look, and so will ask for things such as animation, music, flash, and other "bells and whistles" that would be detrimental to their site. These extras are probably driving potential customers away because they increase download time and are not search engine optimized.

In the rush to join everyone else on the Internet, businesses have ignored vital steps in the process of getting their business on-line. They assumed that because everyone else had gimmicks such as a splash/intro page, this was the right way to go. The result: businesses chose design companies who readily took their money and who designed exactly what the client wanted without clearly focusing on marketing goals. To be fair, oftentimes the graphic design company has no idea that a site designed with all the latest technology doesn't necessary translate into a site that has the functionality that an on-line business needs. This is because the graphic design firms specialize in graphic design, not in marketing. Many graphic design sites are full of splash pages, scrolling text, animation, etc. They use these tools because it allows the graphic designers to display their creativity and their knowledge of these "bells and whistles." Creativity is good but all the latest cutting-edge technology translates into a lack of functionality to effectively market any on-line business including their on-line presence.

When having your site designed, remember that first and foremost, you are building your site to increase prospects and sales. Don't look for a graphic design firm that believes all you need to do is get in the search engines and place banners to be successful. Don't hire a designer that is new to the Internet--meaning they have years of print design experience but have just decided to expand their horizons to the Internet. Don't hire a graphic designer that doesn't have a professional copywriter or marketing person on staff and don't hire a graphic designer just because they are the cheapest. Remember, cheap can cost you money--you get what you pay for. Hire a marketing/design firm that understands the difference between form and function and can apply it in a marketing perspective. Remember, many of these latest bells and whistles are very expensive and your site may not need them to be effective.

Every single design element affects your web sites functionality and marketability--from the decision about how the navigation will work to choosing the right colors, fonts, graphics, content, HTML code, and more. These will not only influence potential customers but search engine indexing as well.

If and when you’re ready to begin your on-line presence, start with a business plan and strategy. It is essential if you really want your business to succeed. Don’t be afraid to research marketing trends and investigate a marketing/design firm that will fit your needs.

If you are currently on-line but your business is not progressing as you think it should, don’t be afraid to request a web site analysis. There are firms that will analyze and help pinpoint areas of your on-line presence that need improvement for a successful Internet presence.

Last, but not least, keep an open mind to what the firm offers as suggestions for making your Internet experience a profitable one. Remember, this is their livelihood, this is what they do and they have the experience to back it up.

Are you ready to be successful?

Cheryl Carnright and Joann Marsili have over 35 years of combined graphic design & marketing experience. They are the authors of a free monthly newsletter: "B2B Marketing News." Visit their site http://www.b2bstrategicmarketing.com.

Monday, July 28, 2008

8 Tips for Designing a Great Website

Square buttons, round buttons, flashy buttons … will they match my shoes, my handbag or my tie? Are you stuck in a maze of buttons, headings, bullets, sub-headings and colour schemes?

STOP!!!!

Take a deep breath and read some practical tips for professional looking websites.

1. Select a colour scheme and stick to it.

If your company has a logo or preferred colours on its stationery that’s a good start. For those of you starting from scratch, choose two or three complementary colours and stick with them – don’t change colours on every page.

The most common colour schemes include:

  • Red, yellow and white
  • Blue and white
  • Red, grey and white
  • Blue, orange and white
  • Yellow, grey and white.

If you’re not sure what colour scheme to choose, surf the internet and find a website that you like. You can then model your colour scheme on what already exists.

2. Use templates.

Can’t find a website you really like? Another option is to choose a template. There are many templates or pre-set designs. These come as part of your web design software (such as FrontPage) or you can check out some websites that specialise in designing templates.

Visit:

www.web4business.com.au emplates1.htm
www.newtemps.com
www.website-templates-resale-rights.com
www.123webtemplatesandmore.com

3. Provide an easy to use navigation system.

This is one of the most important issues to consider when designing a website. You need to ensure your visitors can find what they are looking for easily. Most websites either display their navigation bar on the left or at the top. And since most people are used to this type of navigation, it’s best to stick with it.

It also helps to include your navigation bar at the bottom of each page to save your visitors from having to scroll back to the top.

4. Don’t go overboard on special effects

Whilst it is ok to have one or two special effects to jazz up your website, spinning graphics and logos often distract your visitor from the content, not to mention they can take too long to download. Your visitors may click away even before your spinning logo finishes loading.

5. Backgrounds

Ensure your visitors can read the text on the background, ie. no black writing on dark blue background or yellow on white. Also be careful that your links are visible before and after being visited. The default for links in most programs is blue (before being visited) and burgundy (after being visited), so if you have a dark background, ensure your links are light.

6. External Links

It is a good idea to open links to other websites in a new window. That way your visitors can easily return to your site when they are finished browsing the external link

7. Site Map & Search Feature

If you website is more than 15 pages, it is useful to have a site map or a “Search” feature to ensure your visitors can easily find what they’re looking for.

8. Content is King

While it is important that your website looks clean and professional, it is far more important that you concentrate your efforts on the content and promotion.

If you want a professional website, things to stay away from include:

  1. Flash intros, revolving globes, bevelled line separators, animated mail boxes
  2. Loads of pop up or pop under boxes
  3. Autoplay music. Allow your customer to play music only if they choose.
  4. Hit counters of the free variety, which say “you are 27th visitor”
  5. Date and time stamps, unless your website is updated daily or weekly
  6. Busy backgrounds.

Don’t sweat the small stuff and get yourself focussed on what to include on the website and the best way to promote it. We will cover these topics in future articles.

This article is written by Ivana Katz whi is the owner of Websites 4 Small Business - www.web4business.com.au, a company specialising in the design and promotion of small and home-based business websites.

Source : http://www.cyberindian.com/

Monday, July 14, 2008

Few fact to design your links

It is a fact that links have always been a vital part in the internet navigational process. Depending on the links and also on the content of the site that the link leads to, internet users decide on the worthiness of coming back to that site or not. It is a fact that links have always been a vital part in the internet navigational process. Depending on the links and also on the content of the site that the link leads to, internet users decide on the worthiness of coming back to that site or not.

One cannot fail to notice the latest trends imposed by web 2.0, the emergence of a new writing genre designed to cater for the new needs and tastes of internet users and also the transformation process that search engines undergo.

Broadly speaking, users go from page to page selecting only the most important information or just the information that is easier to spot; they need to be able to make a quick assessment of the page content, get the information they are seeking and go to another page.

Usually, web authors employ hypertext links to create or reinforce concepts: a list of related links can serve as the focus of a site. The problem posed by links has little to do with the web but is rather related to the concept of hypertext. A collection of links does not have the same effect on the reader and is not as legible as conventional linear text.

In the case of linear text, readers have to work harder in seek of needed information. Links also become a technical problem, because most web pages have a certain rank on search engines due to links. Links are to be used as a reinforcement of, not a substitute for content.

What is worth mentioning when tackling the link issue is that designers are supposed to use relevant link labels, give consistent click ability cues and also differentiate links that have been clicked from those that haven't.

1. Use relevant link description

Users' confusion must be avoided at all costs. In this respect, they should be able to look at every link and be able to predict to some extent the destination or the website they are about to visit. A negative example in this case is using the label - Click here-, which is rather confusing and does not provide any kind of information about the link destination.

Another relevant case is that of embedded links; when employing embedded links, the link text should accurately designate the link's direction. Users have a certain tendency towards ignoring the text surrounding embedded links; consequently, it is recommended that you should not create embedded links that use the surrounding text in order to provide hints about the link's destination.

2. Be aware that textual links do have certain main characteristics like:

underlining and color.

The second trait is not as important as the first one, i.e. underline can be eliminated in some cases like the one when an area functionality is absolutely obvious - for instance, we could think of a site menu where everybody expects a content summary as a presentation.

Thus, you should provide users with sufficient click ability cues. Trying to put the cursor over different parts of the page is time consuming and not quite "affordable" with a view to gain more traffic. At the same time, it's worth keeping in mind that there area certain click ability expectancies regarding different regions of a web page; for instance, items on the center, left, right side have a high probability of being links.

3. Use different colors for visited and unvisited links

Links that were clicked must differentiate one way or another from the ones that were not; the best way of doing that is the color contrast; links are supposed to stand out on the computer screen as much as possible; in this respect, bright, vivid colors are preferable - links should differentiate from linear text in any case.

Conversely, links that were already clicked should employ a rather pale and "washed" color. The effect of using different colors but both at the same level of chromatic intensity might result in a failure to establish a concrete content relationship between those links, users won't be able to tell visited from non-visited links.

Even though some compromises would be acceptable (like using other colors), using blue for text is an exception. Blue is a color with the most notable perceived affordance of click ability.

4. Colors for text are to be avoided

It is recommended that colors should be used for hyperlinks only. Nevertheless, there are generally recognized and allowed colors for certain words such as red for "error" or green for "ok". Technically speaking, when referring to document colors, it is advisable that you specify all of the colors (BGCOLOR, TEXT, LINK, VLINK, ALINK), to ensure an enjoyable and legible composition. Find out more about choosing the right colors for your web site.

The main reason reinforcing this idea is that some users may have certain colors set as default, so if you don't specify all the colors of a document, they may end up with an illegible document. In addition, even when using a background image, you should still specify BGCOLOR, because the user may not have the image loading on.

Did you find this article useful? For more useful tips & hints, Points to ponder and keep in mind, techniques & insights pertaining to Web Designing, Do please browse for more information at our website :-
http://www.thedesignbuild.com

Sunday, June 29, 2008

Web Design Tips

The difference between a good web designer and a great one is the ability to know how to take short cuts and save time without compromising the quality of work. Pixelsurgeon’s Jason Arber has put together 20 top tips and tricks you should be using to give your work that all-important professional edge.

1. Planning

When you’re itching to get started, it’s easy to overlook the most obvious step: planning. Whether it’s drawing wireframes and site diagrams in OmniGraffle or Visio, or even on a scrap of paper, you’ll save time by having an overview of your design at the site and page level before you start building. Obvious errors can be detected and solved before it’s too late to go back and it makes explaining your ideas to clients and colleagues a lot simpler than waving your hands in the air.

2. Do it by hand

Although there are some excellent tools around for building web sites, such as Adobe GoLive and Adobe (formerly Macromedia) Dreamweaver, professional code monkeys prefer to code by hand. Are they crazy masochists? Quite possibly.

There’s only one way to learn HTML, and that’s to roll up your sleeves and get your hands dirty with some actual code. But fear not: HTML has one of the easiest learning curves you’ll ever come across and you can create a basic web page with only a couple of lines. Writing code by hand also ensures that you write the leanest code possible, which is the ultimate aim of all HTML geeks.

Don’t throw out that copy of GoLive or Dreamweaver just yet. Both applications have excellent code writing environments, and have useful features, such as collapsable blocks of code and split views so you can code and see the results at the same time. If you want to try the code-only route, then any text editor that can save in the basic .txt format should do, but Mac users might want to check out Bare Bones Software’s BBEdit, and Windows users should give the freeware AceHTML editor from Visicome Media a whirl.

3. Stylesheets: importing vs linking

There are two ways to attach an external stylesheet to your HTML page, and not all browsers understand both methods. This can be used to your advantage to feed one stylesheet to modern browsers and another to Netscape 4.x, which would otherwise choke on more complex CSS.

Cascading stylesheets are designed to flow over each other. The secret is to create a simple stylesheet that works in Netscape 4, with more complex CSS relegated to an additional stylesheet that’s attached using @import, which Netscape 4.x will ignore:


4. Smarter gradient backgrounds

CSS gives you a lot of control and flexibility over the tiling of background images. And the great thing is that tiled images are not limited to the Body background but can also be applied to any DIV, block level or inline element.

Images that tile conventionally or just along the x or y axis can be set to scroll with the page or remain fixed while the rest of the page scrolls over it. Backgrounds can also be offset. This means that it’s easy to create a vertically graduated background that never repeats no matter how long the page is, using graphics that are only a few kilobytes in size.

Using the following code, the background.png file need only be as tall as the gradient and one pixel wide. This example assumes that the gradient fades into white, but the backgroundcolor attribute could be any value.

body { background-color: white; background-image: url(background.png); background-repeat: repeat-x; }

5. Commenting

When you come back to a site that you designed months ago, there’s nothing worse than trying to figure out what you did and attempting to untangle a spaghetti of code. Do yourself (and anyone else who wants to check out your code) a favour by putting comments in your HTML. Comments might add anything from a few bytes to a kilobyte or two to your page, but the time savings are invaluable.

Commenting also encourages you to keep your code tidy by breaking it into logical chunks. Some coders even use comments to create a table of contents for the page, which is only visible in code view.

Be aware that HTML and CSS use two different kinds of commenting, so you may want to learn the difference.

/* CSS comments are enclosed by a forward slash and an asterisk. */

6. Use simple PHP to build sites

There’s no need to become a PHP expert to start using it in your site. If your server supports PHP, you can quickly and easily use server side includes to build a library of commonly used elements, inserting them into your web page with a simple link. This is great for elements like menus, which can exist as a single instance, and means that if you add a new menu item or change the design, you just need to change the include file, which will then update the whole site.

Includes are simply snippets of HTML code such as a table or unordered list. The page calling the includes should end .php and the includes are inserted using the following simple code:

7. Set fonts using ems

Designers love specifying type sizes in pixels because it corresponds easily and naturally with what they do in Photoshop. But as a type size specification for the web, pixels have one major disadvantage: they can’t be resized in Internet Explorer. As monitor resolutions increase, it’s not only the visually impaired who may want to increase the font size in your design, so what’s the solution?

The answer is to specify type in ems. If you’re unfamiliar with the unit, an em is roughly the width of a lowercase em in a font, and using a browser’s default internal stylesheet, an em is roughly equivalent to 16 pixels. Set the font size attribute in the body tag to 62.5 per cent like this:

body { font-size: 62.5% }

This makes one em roughly ten pixels (16 x 62.5% = 10). Now you can equate pixel sizes to ems. For example, type that is set in 12 pixels could be expressed as 1.2em; 9 pixels becomes 0.9em and so on. What’s more, both the designer and user are happy.

8. IE Box Model Hack

Sooner or later you’ll come across an important bug in Internet Explorer that incorrectly calculates the width and height of block level items by including padding values within the box’s dimensions, rather than adding it outside the box. This can wreck layouts. The solution is known as the Box Model Hack, which uses another bug in IE to force it to use tags that other browsers ignore. If you have a div validly specified like this:

div {_ width: 100px;_ padding: 5px;_ border: 5px solid #fff;_ }

You’ll end up with a box that’s 120 pixels wide in most browsers, but only 100 pixels wide in IE. The easiest solutions is the box-within-a-box method, which places one div inside another:

div {_ width: 100px;_ }
div .hack {_ padding: 5px;_ border: 5px solid #fff;_ }

This is applied in the following way:



Your content goes here

9. Space saver

Nobody likes building forms in HTML, especially as browsers insist on adding padding around them for no reason. Simply add the following CSS to your stylesheet:

10. Test, test and test again

While Internet Explorer still dominates the browser market by a huge percentage, its lead is being gradually eroded by other browsers such as Firefox and Opera. There are also plenty of people out there still using archaic browsers like pre-Mozilla versions of Netscape.

It’s virtually impossible to design great-looking web sites that work in all browser versions, so it’s best to decide which browsers you’ll support. Mozilla-based browsers, WebKit-based browsers (such as Apple’s Safari), KHTML-based browsers (such as Konqueror), Opera and Internet Explorer versions four and higher are generally considered a safe benchmark. However, you should still be a good net citizen by ensuring that your code degrades gracefully, so that even unsupported browsers can experience your site – even in a limited form (see tip 14).

11. Format fundamentals

In the old days it used to be simple. If the image contained flat colours like a logo, use a GIF. If it was photographic, use a JPEG. There’s also an overlooked third format, PNG (pronounced ‘ping’) that comes in two flavours: an 8-bit version containing 256 colours, like GIFs, and a 24-bit version with alpha channel support allowing for variable transparency.

The bad news is that Internet Explorer doesn’t support PNG’s alpha channels without resorting to a complex hack. However, 8-bit PNGs generally compress much smaller than the equivalent GIF version. Unless you need animation, which PNGs can’t do, PNGs can replace GIFs in most situations, resulting in an overall file size saving.

JPEGs usually create smaller files than 24-bit PNGs, so unless you’re taking advantage of PNG’s alpha channel transparency using the hack then JPEGs are still the best format for continuous tone images.

12. The ‘title’ and ‘alt’ attributes

Ensure that all your images make use of the alt and title tags so that screen readers for the visually impaired can correctly parse your page:

”logo”

13. The correct format for pseudo classes

For text rollover effects, it’s important that the pseudo classes are in the right order, or they won’t work correctly in all browsers. The correct order is:

a:link { color: blue; }
a:visited { color: purple; }
a:hover { color: purple; }
a:active { color: red; }

14. Use semantic mark-up

The idea behind semantic mark-up is to separate the content of your web site from its appearance so that it degrades gracefully. Ideally, if you were to remove the stylesheets, your web site should still work. It might not look pretty, but it means that users with older browsers, will still be able to get meaningful content from your site.

The positioning, styling and a certain amount of interactivity can then be added with stylesheets and CSS-P.

15. Favicons

Favicons are the little 16x16 pixel icons that appear in your favourites lists and the title bars of web sites. They’re quick and easy to add: save a graphic in .ico format (Mac users may want to consider using Graphic Converter as Photoshop doesn’t support this format) and put it in your site’s root folder. It’s as simple as that.

16. Change capitalisation using CSS

If you need something written in capitals, such as a headline, rather than rewriting the copy, let CSS do the donkey work. The following code will transform all text with an h1 attribute into all capitals, regardless of format.

h1 { text-transform: uppercase; }

17. Wrapping text around images

For a quick and dirty way of wrapping text around images, use the image’s align attribute to push it to the left or right. Rather than jump below the image, text should now flow along the edge.

18. Universal character sets

Character sets are an important part of a web page’s definition, but they’re probably the least understood component. Character sets, which are defined in a web page’s invisible head section, tell the browser what method is being used to encode the characters. A charset ISO Latin 1 (also known as ISO 8859-1) will render the code it finds using a basic Western alphabet, but a charset of Shift JIS will attempt to render any characters it finds as Japanese.

With so many competing character sets, problems can occur, especially when using the MS Windows character set (which contains certain characters that may be replaced by a blank space on other operating systems) or when several languages need to appear on a single page.

The answer is to use a single universal character set that’s able to cover most eventualities. Luckily one exists: UTF-8, which is based on Unicode. Unicode is an industry standard that’s designed to enable text and symbols from all languages to be consistently represented and manipulated by computers. UTF- 8 is rapidly becoming the charset definition of choice, and should be included in your web page’s head like this:

19. Print styles

When people print web pages, often they’re not interested in your flashy graphics: they just want a simplified version of the page. Using CSS it’s possible to create a separate stylesheet that only affects printed versions of your site, rather than having to create a new HTML page or adapt an existing one. You add a print stylesheet in exactly the same way that you would add a regular stylesheet to your page:

or

This ensures that the CSS will only apply to printed output and not affect how the page looks on screen. With your new printed stylesheet you can ensure you have solid black text on a white background and remove extraneous features to maximise readability.

20. Learn from others

Finally, a quick and simple tip: learn from great sites built by others. Any site’s HTML is easily accessible by viewing a page’s source code. See how others have done things and apply their methods to your own work.

Source : http://www.netmag.co.uk/

Thursday, June 26, 2008

Web Design: Tips on Using Color

Of all the choices you make when designing a Web site, one of the most important is the colors you use. Without reading anything on a Web site, simply seeing the colors it uses can tell you a lot about its products and the company behind it.

That is, of course, provided the designers chose colors that would deliver the right message to the site's visitors. In this article I'll talk about color, how to use the color wheel to find color combinations, and I'll introduce you to some tools that can help you choose colors for your Web site.

Back to Grade School

When you were at school you learned that the three primary colors were red, blue and yellow. When you mix these primary colors together, you get what are called secondary colors — mix red and yellow to make orange, mix red and blue to make purple and mix blue and yellow to make green.

Mixing the secondary colors gives you tertiary colors which are yellow-orange, yellow-green, red-orange, red-violet, blue-violet and blue-green. The name of each tertiary color is derived from the colors that are mixed to make it, with the primary color first.

Read More Article...

Wednesday, June 25, 2008

Create a Personal Website

Personal Web Pages Guide Linda Roeder has a 10 step tutorial on creating a basic personal website. You may have heard or read that designing for the Web is different from designing for print. It is. But there are similarities. If you're considering expanding into professional Web design from a print background -- many print designer already have but others may be holding back -- one way to get started is by designing your own personal Web site.

Looking at Linda's steps it's easy to see the relationship between Web design and print design. For instance, some of the steps:

Read More Article...

Monday, June 23, 2008

Tips for proper web design

This is the number 1 tip that every web designer should follow. You might design a web site that looks fantastic but few people are going to see it if it takes a long time to load. Your designs should be optimized for the web and should not take more than 15 seconds to load. Remember, you might have a great design but very few people are going to see it if it takes a long time to load. Click here to for 10 tips to fast-loading web pages.

There's only one way to learn HTML, and that's to roll up your sleeves and get your hands dirty with some actual code. But fear not: HTML has one of the easiest learning curves you?ll ever come across and you can create a basic web page with only a couple of lines. Writing code by hand also ensures that you write the leanest code possible, which is the ultimate aim of all HTML geeks.

The placement of the navigation buttons or links of a website are usually placed in one of 3 different areas of the page. Across the top of each page or down the left or right side. Regardless of where you choose to put them try to keep the text on the buttons or in the links as short as possible. Anything longer than one or two words will cause that part of your layout to be too wide and crowd your content area.

Read More Article...

Sunday, June 22, 2008

How to Design a CSS Web Site for Both Firefox and Internet Explorer

Designing for IE - Design for Firefox First

Tips and Tricks to Get Your Site Looking Right in Both Browsers

Designing Web pages is challenging enough without having to build pages that work on every possible combination of Web browser and operating system in existence. So many Web designers choose to take the easy route and design just for the most popular browser, which is IE 6 right now.

But if you're going to focus your site on IE 6 you'll be causing some problems for yourself:

  • When IE 7 comes out, your site will need to be redesigned.
  • People who use other browsers won't get a good experience.
  • If new browsers come out and gain popularity, chances are your site won't be able to support them.
Standards-Based Web Design Is Best

If you design for Web standards then your Web site will be functional with every browser that supports those standards. And even long into the future, your site will stay functional.

But Internet Explorer 6 and 5 are not standards compliant. So what do you do? The common response is to design just for them and then try to force your site to look okay in standards compliant browsers like Firefox, Safari and Opera. But this is both backwards and difficult.

Read More Article...

How to Design a CSS Web Site for Both Firefox and Internet Explorer

Designing for IE - Design for Firefox First

Tips and Tricks to Get Your Site Looking Right in Both Browsers

Designing Web pages is challenging enough without having to build pages that work on every possible combination of Web browser and operating system in existence. So many Web designers choose to take the easy route and design just for the most popular browser, which is IE 6 right now.

But if you're going to focus your site on IE 6 you'll be causing some problems for yourself:

  • When IE 7 comes out, your site will need to be redesigned.
  • People who use other browsers won't get a good experience.
  • If new browsers come out and gain popularity, chances are your site won't be able to support them.
Standards-Based Web Design Is Best

If you design for Web standards then your Web site will be functional with every browser that supports those standards. And even long into the future, your site will stay functional.

But Internet Explorer 6 and 5 are not standards compliant. So what do you do? The common response is to design just for them and then try to force your site to look okay in standards compliant browsers like Firefox, Safari and Opera. But this is both backwards and difficult.

Read More Article...