Webdesigning Tips

Right Colors for Your Web Site

2011-05-06T03:21:00.000-07:00

Colors influence web site visitors
Whether you’re creating your first Web site or you’re a seasoned Web designer/developer, When creating a web site, choosing the optimum colors is one of the most difficult tasks. You want to make sure that the color gives the right impression. Choosing the perfect chromatic palette is important in order to effectively communicate the message, in order to strengthen the idea of a unique entity and to create brand awareness.

A few tips that you should consider for any website:
Use a natural palette of colors.
They are more pleasing than any of their artificial counterparts. Combine them in order to get the emotional response that you want to get from your visitors. Unnatural colors, such as bright green, blue or red usually cause eye fatigue and chase visitors (i.e. prospects) away. Also you should be aware that primary colors like red, yellow or orange can work well for culinary promotion purposes.

Srong contrast between a page’s background and its text.
The best combination for readability is black text on white background, but there are also other excellent combination. Besides white, other effective web site background colors are dark blue, gray and black. The situation is not the same for product promotions. When the product is the center of attention, desaturated colors are recommended.

Read More

Dreamweaver CS5.5 / Features

2011-05-04T19:21:00.000-07:00

Design confidently, build cutting-edge HTML5 and CSS3 websites, and add new levels of interactivity in Adobe® Dreamweaver® CS5.5 software. Design for multiple devices concurrently, and have greater confidence in comprehensive code checking.

Read More

Web standards checklist

2011-03-07T21:43:00.000-08:00

Web standards – more than just ‘table-free sites’
The term web standards can mean different things to different people. For some, it is ‘table-free sites‘, for others it is ‘using valid code‘. However, web standards are much broader than that. A site built to web standards should adhere to standards (HTML, XHTML, XML, CSS, XSLT, DOM, MathML, SVG etc) and pursue best practices (valid code, accessible code, semantically correct code, user-friendly URLs etc).

In other words, a site built to web standards should ideally be lean, clean, CSS-based, accessible, usable and search engine friendly.

More At: http://blog.varadesigns.com/?p=162

HTML Link Tag

2011-03-04T21:46:00.000-08:00

In HTML the link tag is used to connect external sytle sheets to a web page. But the link tag has sever other uses. The link tag found in the head of the HTML document. The link tag is convey relationship between the current page and other Internet documents, and it is a singleton tag, it closed with a slash at the end of the tag <link />

Links and External Style Sheets

The stylesheet link looks like:

<link href=”styles.css” rel=”stylesheet” type=”text/css” />

The attribute href defines the URL where the style sheet is located. The type attribute defines the user what MIME type the linked document will be. It should always be “text/css”. Then the rel attribute indicates that the relationship of this link is a style sheet.

More at : http://blog.varadesigns.com/?p=149

About rel=”nofollow”

2011-03-03T22:14:00.000-08:00

“Nofollow” provides a way for webmasters to tell search engines “Don’t follow links on this page” or “Don’t follow this specific link.”

Originally, the nofollow attribute appeared in the page-level meta tag, and instructed search engines not to follow (i.e., crawl) any outgoing links on the page. For example:

Before nofollow was used on individual links, preventing robots from following individual links on a page required a great deal of effort (for example, redirecting the link to a URL blocked in robots.txt). That’s why the nofollow attribute value of the rel attribute was created. This gives webmasters more granular control: instead of telling search engines and bots not to follow any links on the page, it lets you easily instruct robots not to crawl a specific link. For example:

Read More At : http://blog.varadesigns.com/?p=145

Expandable Website Design

2011-03-03T07:04:00.000-08:00

Designing Websites For All Screen Resolutions

Tutorial on Designing for 800 x 600, 1024 x 768, 1280 x 1024 and higher

Designing web sites to fit all resolutions is a very important web design principle. Try out the Entheos site in all resolutions higher than 800 x 600 and you will find that it is designed to fit the page exactly. Therefore, visitors who have higher resolution can see more content in one page which reduces scrolling. Most web sites are designed for only one resolution. They may look perfect in a 800 x 600 resolution but if viewed in a 1024 x 768 resolution look a little empty. You’ll find a lot of wasted space around it making the web site look quite small.

From our research we have found that majority of our viewers are on the 1024×768 resolutions and higher. As time goes by more and more people are going to switch to higher resolutions as seen by our site statistics. It is therefore very important to design web sites for all resolutions. That is one of the principles we follow while designing web sites for our clients. With that bit of background information, lets get started on how to design a web site for all screen resolutions.

Read More at : http://blog.varadesigns.com/?p=141

960 CSS Framework – Learn the Basics

2010-12-28T23:00:00.000-08:00

CSS frameworks have been here for some time. About the usefulness of these frameworks has been discussed for numerous times. Some say CSS isn’t advanced enough, others say these frameworks saved them many hours of developing time. We will not repeat this discussion here.

I have discovered CSS frameworks just a while back. After experimenting with the Malo CSS framework, the Blueprint framework and 960, I came to the conclusion I like the 960 CSS framework most.

This tutorial will explain the basics of this framework so you can start developing with 960 pretty fast.

The basics principles

You have to know a couple basic principles to “learn how the framework works“. You can learn these during the experimenting process, but I will explain them here for you, too. Let’s start.

Do not edit 960.css

A small note before: do not edit the 960.css file. If you do this, you won’t be able to update the framework in the future. Because we need to style our HTML though, we will create a separated CSS file.

Loading the grid

Before we can use CSS codes in an external file, we have to load these in our own HTML site. Which can be done via these codes:

Read more at : http://divitodesign.com/css/960-css-framework-learn-basics/

Using CSS without HTM

2010-12-27T22:45:00.000-08:00

If we could stack pseudo elements (e.g. :after:after) we could build a whole website with no HTML other than <html>. Probably good we can’t.

In response to this, I created this quick demo (view in Firefox or Opera), illustrating that technically you don’t need any HTML at all to use CSS.

Source : http://css-tricks.com/using-css-without-html/

Cross Domain iframe Resizing

2010-12-26T22:05:00.000-08:00

Website Designing Services

2010-12-07T02:32:00.000-08:00

Website Designing Services: "vara designs is Web Desinging Services from Hyderabad in India. We offering wide range of creative services related to Professional Website Design, Website Development, Web2.0 Design, Corporate Logo Design, Website Maintenance, Website Redesigning, Search Engine Optimization, Multimedia Flash Introduction Animations and eCommerce Web Wevelopment."

Free SEO Tips

2010-12-06T20:50:00.000-08:00

Many will argue that nothing of value is free anymore in life. I beg to differ! In this latest blog, I will give you some great free SEO tips to get you started with your website. Throughout the life of your website (which is hopefully a long and fruitful one), you are going to be inundated with reading material that says "do this" and "do that" to your website to make it more search engine friendly. Many of these suggestions are outdated and some perhaps are even harmful. I can remember the days when it was suggested that you have as many instances of your keywords in the body text of your website. That we now know is not a good thing and is in fact spammy to the major crawler based search engines like Google and Yahoo.

Keyword enriched HTML title tags

Make sure to always insert your top 3-4 keyword phrases into your HTML title tag. This is one of the most important things you can do for your website's SEO and overall search engine friendliness. This tag sets the precedence for the content that is on the page after your HTML title. This tag will also serve as the headline of your search results on Google. Make sure that the HTML title tag also relates some sort of call to action.

Use H1 headline tags

H1 headlines are a great way to mimic the message in your HTML title thus adding more "weight" to your most important keywords. We have already established that you want to reinforce your keywords with great content on your website itself. H1 headlines are a fantastic way to accomplish this goal. By both using a keyword enriched HTML title and H1 headlines, you are letting search engine bots know that you really want to convey useful content to back up your on page, highlighted keywords. It is a good idea to use the same terms in both your HTML title tag and in your H1 headline, but don't make the mistake of making them both EXACTLY the same.

The H1 headline will also greatly benefit the viewers on your website. Headlines on your website are just as important as a headline in a newspaper. It relays the central message of the page within your website. You can also greatly reduce your website's bounce rate by clearly defining what you are going to talk about on your website. More often than not, a visitor will leave your website if you simply post text on the page without a descriptive initial headline. When was the last time you read a newspaper article without first reading the headline?

Setup Meta Tags

Although meta tags are not as important as the used to be, they still absolutely can help get you some highly targeted traffic from search engines. You should make sure to implement meta data that is unique, informative and catchy. Also, make sure to change your meta data for each page on your website. I like to suggest to our customers that they create all of the content on the page itself, then take measures to create the meta data. Yahoo/Bing seem to use website's meta tag data more precisely than does Google.

I would still make sure to have creative meta data in your coding. It is important to think of meta tag data as the information that a person sees in your search engine rank listing. When a potential visitor finds your website's listing after a keyword search, the text that they read is often pulled directly from your website's meta data. The part that the visitor clicks is often your meta title. The text that follows the clickable link is many times your meta description. Someone is many times more apt to click on your ranking link when it gives them a call to action or has descriptive keyword phrases within it. If your meta data contains blasé information and merely says "Home Page" then your chances of a click are far less.

Internal linking

Make your internal linking a priority. The best way to assure that all of your pages are found by search engine bots is to link to each and every one of them. Search engines depend on following links to find all pages and websites on the internet. If there were no links, search engine bots would have no way of successfully navigating their way around. The same holds true for your website on a much smaller scale. Make sure to link to your top pages within your website directly from the homepage. You can link to smaller pages on your website from some of your inner pages.

Create a site map

This section somewhat piggy backs on the last one with internal linking. Create a link on your homepage that reads, "Site map." I suggest keeping it very simple with your site map. All you need to do is create good old fashioned HTML links to all of your pages on your website. Search engine bots love a good, simple site map. They can easily access your site map and follow (and index) your links rather quickly! This can save you a lot of time and will make sure that your hard to find, or deep rooted links are followed and found.

Concentrate on keyword enriched anchor text

The words that are found in your anchor text carry great weight with search engine algorithms. The anchor text is the wording in the clickable part of a link. Many crawler based search engines like Google view the text that people link to you with as a crucial element. I suggest making your anchor text the exact keyword phrase that you desire to be found on a major search engine with.

For example, when we request links, many times our link proposal will look like this:

Web Designing - Web Site Designing Services
Web Site Designing Services

Those are a couple of keyword terms that we are targeting and thus we have included them in our anchor text.

Use lots of keyword enriched content

When you write the content for your website, make sure to repeat your desired keyword phrases in your text. Make sure to stay on topic! Use your HTML title tag, HTML description meta data and H1 headlines to remain focused on the message of your page. Always reinforce your headlines and title with interesting data. You know your business best, so relay that information on your website. The more content the better I have always found. The more content the better as you are letting search engine bots know that you are a great source for their readers/searchers.

Create a blog

Search engines love to give their audience the best possible user experience. Another way to let search engines know that you have an important website is to always update it with fresh new content. A blog is perfect for this. It is a lot of work, trust me. The rewards though can be great for your website and your search engine rankings. Always keep the notion in the back of your mind that search engines want to give their audience a reason to come back and search engine over and over again. The only way that a search engine can please their audience is if they display great websites. In a search engine's "mind" a website that constantly updates with new and useful information is one that is worth showing their searchers.

Source : http://www.free-seo.biz/blog/Free-SEO-Tips/

10 Useful Techniques To Improve Your User Interface Designs

2010-11-19T03:49:00.000-08:00

Web design consists, for the most part, of interface design. There are many techniques involved in crafting beautiful and functional interfaces. Here’s my collection of 10 that I think you’ll find useful in your work. They’re not related to any particular theme, but are rather a collection of techniques I use in my own projects. Without further ado, let’s get started.

1. Padded block links
2. Typesetting buttons
3. Using contrast to manage focus
4. Using color to manage attention
5. White space indicates relationships
6. Letter spacing
7. Auto-focus on input
8. Custom input focus
9. Hover controls
10. Verbs in labels

Read More at : http://www.smashingmagazine.com/2008/12/15/10-useful-techniques-to-improve-your-user-interface-designs/

Quick CSS Trick: Using Span to Break Up Words in URLS

2010-11-17T22:50:00.001-08:00

WEBSITE DESIGNING AND DEVELOPMENT SERVICES

How about breaking up the words in the URL with color? Check it out:
www.badgerfootballforums.com

I think that works pretty well, and it is something that can be achieved very easily with a little CSS:

a span { color: #971212; }

Then in your anchor link in your HTML just wrap the word you want colored in a span like so:

www.badgerfootballforums.com

To extend this concept a bit, how about the colors reverse themselves upon rollover? Like so:

Just do this in your CSS:

a { color: black;}
a span { color: #971212; }
a:hover { color: #971212; }
a:hover span { color: black; }

Source at : http://css-tricks.com/quick-css-trick-using-span-to-break-up-words-in-urls/

15 CSS Tricks Must be learned

2010-11-16T04:22:00.000-08:00

As web designers and developers, we have all come to learn many css tricks and techniques that help us achieve our layout goals. The list of these techniques is an ever expanding one, however, there are certain tricks that are essential to achieve your goal. Today, we will review 20 excellent css techniques to keep in mind when developing your theme.

1. ABSOLUTE POSITIONING INSIDE A RELATIVE POSITIONED ELEMENT.

Putting an absolutely positioned element inside a relatively positioned element will result in the position being calculated on its nearest positioned ancestor. This is an excellent technique for getting an element to “stick” in a certain spot where you need it, for instance, a header badge.

2. Z-INDEX AND POSITIONING.

z-index can be somewhat of a mystery to developers. Often, you will find designers putting a very large z-index value on a div or element in order to try and get it to overlap another element. What we need to keep in mind, is that z-index only applies to elements that are given a “position” value. If you find an element will not adhere to a z-index rule you’ve applied, add “position:relative” or “position:absolute” to the troublesome div.

3. MARGIN AUTO

Using margin auto in a theme is a fantastic way to get an element centered on the screen without worrying about the users screen size. However, “margin: auto” will only work when a width is declared for the element. This also means to apply margin: auto to inline elements, the display first must be changed to block.

4. USE PADDING CAREFULLY AND APPROPRIATELY

One mistake I often made when starting off with css was using padding without knowing all the effects and the CSS Box Model. Keep in mind that according to the box model, padding adds to the overall width of the element. This can cause a lot of frustration with elements shifting out of place. For example:
#div { width:200px; padding: 30px; border:2px solid #000; }
Equals a total width of 264px (200 + 30 + 30 + 2 + 2). In addition, remember that padding, unlike margins, cannot contain negative values.

5. HIDING TEXT USING TEXT-INDENT

Lets say you have an image you are using for your websites logo. This image will be inside an h1 tag, which is good for SEO, however, we also want to have our text title written in the h1 tags so the search engines can read it easily. Some may be tempted to use “display:none” on an element. Unfortunately, we would have to separate the image logo from the h1 tag if we used this technique. Using text-indent and negative values, we can get passed this like so.

h1 { text-indent:-9999px;/*Hide Text, keep for SEO*/ margin:0 auto; width:948px; background:transparent url("images/header.jpg") no-repeat scroll; }
This will ensure that all text is not visible on any resolution while allowing it stay inside the h1 element containing the logo. This also will not hide the text from screen readers as display none will.

6. IE DOUBLE FLOAT MARGIN BUGS

I’m sure we have all dealt with this one, as this is one of the most common css “hacks” we need to use. If you haven’t seen this bug before, basically, a floated element with a given margin suddenly has doubled the margin in IE 6 and has dropped out of position! Luckily, the fix is super simple. We just change the display of the floated element to “inline” as seen below.

.yourClass { float: left; width: 350px; margin: 20px 0 15px 100px; display: inline; }

This change will have no effect on any browsers since it is a float element, but for some reason in IE it fixes the double margin issue.

7. USING CSS TO FIGHT SPAM

This would be something you could include to really spice up your theme description. Alen Grakalic of CSS-Globe.com wrote a fantastic post on how to use css as a kind of CAPTCHA technique. A form is declared like so:

<label for="Name">Name:</label> <input type="text" name="name" /> <label class="captcha" for="captcha">Answer?</label> <input type="text" name="captcha" id="captcha" />

For the id “captcha”, we use a background image via css. This would require the spam scripts to find your html element, scan your css, compare selectors, find the certain selector and background image, and then read that background image. Its pretty safe to say most wont be able to do this. The downside is if someone is not surfing with css enabled, they wont know what to do.

8. PNG IN IE 6 FIXES

I’m sure we could all agree dealing with transparent png’s in IE 6 is a real headache. The fixes range from complex Javascript techniques to just using a Microsoft proprietary filter, to using conditional comments to swap them out for a .jpg. Keep in mind, all of these but the conditional comments rely on the Microsoft AlphaImageLoader.
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(...);
Read more on how to fix IE 6 PNG transparency:
SuperSleight Fix
Twin Helix Fix
Google’s IE 7.js

9. CSS CROSS BROWSER TRANSPARENCY

Believe it or not, it is pretty simple to get decent cross browser transparency using css. We can cover, IE, Firefox, Safari, Opera, and old browsers like Netscape Navigator. Chris Coyier recently came to our rescue again demonstrating these techniques.

.yourClass { filter:alpha(opacity=50);/*Needed for IE*/ -moz-opacity:0.5;/*Older mozilla broswers like NN*/ -khtml-opacity: 0.5;/*Old versions of Safari and "KHTML" browser engines*/ opacity: 0.5;/*FF, Safari, and Opera*/ }

This wont validate, but its not really an issue and the ThemeForest staff is pretty understanding when it comes to techniques like this.

10. USE CSS IMAGE SPRITES

CSS Image sprites are a fantastic way to load many of your css images at one time, in addition to reducing http requests and the file size of your theme. In addition, you wont have to deal with any images “flickering” on hover. CSS Image sprites are achieved by putting many of your image elements all into one image. We then use css to adjust the background position, width, and height to get the image where we want it.

11. USE CONDITIONAL COMMENTS TO SUPPORT IE 6

Far too often, web developers are forced to introduce new css rules and declarations that only apply to certain versions of IE. If your not familiar with a conditional comment, the code below would only link to a style sheet if the users browser is less than or equal to IE 7:

This code would go in the head section of your html file. If the css does not seem to be taking place in IE after you have linked to your specific style sheet, try getting more specific with your css selections to override default styles.

12. CSS SPECIFICITY

As mentioned above, CSS styles follow an order of specificity and point values to determine when styles override one another or take precedence. Nettuts recently had a nice article in which the point values for css were explained. They are like so:

Elements – 1 points
Classes – 10 points
Identifiers – 100 points
Inline Styling – 1000 points

When in doubt, get more specific with your style declarations. You can also use the !important declaration for debugging purposes if needed.

13.ACHIEVING A MINIMUM HEIGHT IN ALL BROWSERS.

When developing, we often realize we need an element to have at least a certain height, and then stretch to accommodate more content if needed. Unfortunately, IE doest recognize the min-height property correctly. Fortunately, we have what is known as the min-height fast hack, that goes like so:
#yourId { min-height:300px; height:auto !important; height:300px;/*Needs to match the min height pixels above*/ }

Simple, effective, and it validates just fine. This is also one of the few cases when the !important feature comes in great handy.

14. THE * HTML HACK

If you need or wish to avoid linking to IE specific style sheets, one can use the * html hack. In a perfect world, the HTML element will always be the root element, so any * before html would not apply. Nevertheless, IE treats this as a perfectly legitimate declaration. So if we needed to target a certain element in IE, we could do this:
* html body div#sideBar { display:inline; }

15. SLIDING DOORS TECHNIQUE

One major problem with using images for navigation buttons, is that you run the risk of the clients text being too long and extending past the button, or being cut off. Using two images and the css sliding doors technique, we can create buttons that will expand to fit the text inside. The idea behind this technique, is using two images for each button, and applying the images via a background declaration in CSS. For example:
HTML Markup: Your Title CSS: a.myButton { background: transparent url('right.png') no-repeat scroll top right; display: block; float: left; height: 32px; /* Image height */ margin-right: 6px; padding-right: 20px;/*Image Width*/ /*Other Styles*/ } a.myButton span { background: transparent url('button_left.png') no-repeat; display: block; line-height: 22px; /* Image Height */ padding: /*Change to how you see fit*/ }

Read More At : http://blog.themeforest.net/general/15-css-tricks-that-must-be-learned/

How To Design A Logo - Learn professional logo design in just 5 steps!

2010-11-12T23:02:00.000-08:00

Learn professional logo design in just 5 steps!

1. A logo must be simple
A simple logo design allows for easy recognition and allows the logo to be versatile & memorable. Good logos feature something unexpected or unique without being overdrawn.

2. A logo must be memorable
Following closely behind the principle of simplicity, is that of memorability. An effective logo design should be memorable and this is achieved by having a simple, yet, appropriate logo.

3. A logo must be timeless
An effective logo should be timeless – that is, it will stand the test of time. Will the logo still be effective in 10, 20, 50 years?

4. A logo must be versatile
An effective logo should be able to work across a variety of mediums and applications. For this reason a logo should be designed in vector format, to ensure that it can be scaled to any size. The logo must work in just one colour too.

5. A logo must be appropriate
How you position the logo should be appropriate for its intended purpose. For example, if you are designing a a logo for children’s toys store, it would be appropriate to use a childish font & color scheme. This would not be so appropriate for a law firm.

For further reading on the rules and principles of great logo design I highly recommend to read the logo design tips from Logo Factory before continuing and also the article Why logo design does not cost $5.00. You may also wish to read How NOT To Design A Logo.

Read More at : http://justcreativedesign.com/2008/01/08/how-to-design-a-logo/

SPAN Tag Description

2010-11-11T23:26:00.000-08:00

The <span> tag in XHTML is a tag that groupings of inline content (defined) within the content of a page. What this means is that a <span> tag defines portions of Web elements to make them easier to manage, style, and manipulate. You can use the <span> tag when you want to change the color of a single word. The <span> tag is a very powerful tool for Web developers because it is so open-ended. The span tag can do anything you want it to do.

In order to use the <span> tag you need to know the HTML definition of the <span> tag. Some key tips:

HTML Definition of the SPAN Tag:

The <span> tag is an inline-level element.

The <span> tag can only contain other inline elements like abbr, strong, or tt.

The <span> tag can be inside <p&t; tags or <div&t; tags.

Tips for Using the SPAN Tag:

The <span> tag doesn't do anything by itself. In fact, the only attribute that might affect the page is the title attribute, and that depends upon the Web browser.
Use span tags when you don't want any changes to the layout other than exactly what you specify in the styles of the span. For example, if you use a <div&t; or <p&t; most browsers will add space around the element, because they are block elements. It's always a good idea to close your <span> tags as soon as you open them. Then place the contents within the element.

If you nest your <span> tags, be sure that you know where your content is going (in other words, which SPAN it should be part of).

CSS Breadcrumbs

2010-11-10T01:32:00.001-08:00

Breadcrumbs is a term used to describe hierarchical links that tell the visitor where he/she currently is on your site. Visually breadcrumbs are just links with some sort of separator between them, such as a bullet image. This CSS code transforms ordinary looking links into a breadcrumb by giving each link a background image.

There are many different ways to implement breadcrumbs in CSS. Ideally the separator image should not even be part of the link, but dynamically inserted using CSS Generated content. However, since IE6 does not support generated content, that's not feasible at the moment. Then there's the debate over whether breadcrumbs should be implemented as a list, which I personally think is no more appropriate than just using regular <a> elements.

CSS Code :

<style type="text/css">

/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */

.breadcrumb{
font: bold 14px "Lucida Grande", "Trebuchet MS", Verdana, Helvetica, sans-serif;
}

.breadcrumb a{
background: transparent url(media/breadcrumb.gif) no-repeat center right;
text-decoration: none;
padding-right: 18px; /*adjust bullet image padding*/
color: navy;
}

.breadcrumb a:visited, .breadcrumb a:active{
color: navy;
}

.breadcrumb a:hover{
text-decoration: underline;
}

</style>

HTML Code:

<p class="breadcrumb"><a href="http://www.dynamicdrive.com/">Dynamic Drive</a> <a href="http://www.dynamicdrive.com/style/">CSS</a> here</p>

<p class="breadcrumb"><a href="http://www.dynamicdrive.com/">Dynamic Drive</a> <a href="http://www.dynamicdrive.com/style/">CSS</a> <a href="http://www.dynamicdrive.com/style/csslibrary/category/C1/">Horizontal Menus</a> Here</p>

Happy Halloween

2010-11-01T23:51:00.000-07:00

HTML, CSS, and JavaScript got invited to a halloween party. They decided they would all dress up as each other!

HTML went as JavaScript:
<div id=”pumpkin” onclick=”alert(‘Boo!’);”></div>

JavaScript went as CSS:
var jackolantern = document.getElementById(‘pumpkin’);
jackolantern.style.color = “orange”;
jackolantern.style.backgroundColor = “black”;

CSS went as HTML:
#pumpkin:before {
content: “Happy Halloween!”;
}

Read More at :http://css-tricks.com/happy-halloween/

VISIBONE HTML AND COLOR POPUPS

2010-10-31T23:14:00.000-07:00

These handy popups by VisiBone will open a separate window to the left side of your screen for quick reference and will get out of your way and hide as soon as you click on another window screen, ready for when you need it next.

Use these popups online, or download the Desktop Popup zip file below to use them offline. Big thanks to VisiBone for this wonderful free service mirrored here (with permission) for your convenience. We wholeheartedly recommends VisiBone's exceptional tools, well known in the design community.

HTML Popup
The HTML Popup by VisiBone is a tall skinny on-screen quick reference showing all HTML tags and attributes in use or universal.

Included:

color-coded indications of support by Netscape®, Microsoft® Internet Explorer and W3C®,
style sheet alternatives, and
bug and clash icons with details online.

Read AT : http://websitetips.com/visibone/

The Current State of Web Design: Trends 2010

2010-10-30T21:18:00.000-07:00

Web design is a fickle industry. Just like every other form of artistic expression, Web design has undergone a continuous and surprisingly fast evolution. Once a playground for enthusiasts, it has now become a mature rich medium with strong aesthetic and functional appeal. In fact, we are experiencing what could be the golden era of Web design — or at least the best period thus far. We have powerful new tools at our disposal (CSS3, HTML5, font-embedding, etc.), a plethora of freely available resources, a strong design community and also (if you needed any more!) reliable support of Web standards in the major browsers.

We’re seeing better interaction design and more aesthetically pleasing designs. And we’re seeing more personal, engaging and memorable sites, too. But what exactly is making the difference? What new directions is Web design heading in today? What new techniques, concepts and ideas are becoming important? In this article, we present some observations on the current state of Web design. We describe existing and upcoming trends and explain how Web design might evolve in the coming months and years. We’ll also touch on what we as Web designers should be ready for to keep abreast of new challenges and opportunities.

Read more at : http://www.smashingmagazine.com/2010/05/04/web-design-trends-2010/

Rounded Corners with CSS without using images

2010-10-28T23:40:00.000-07:00

Hi,

No need to spend much time on designing and conversion of html. It is possible to create rounded corners with CSS without using the images. No need to spend much time to design curved boxes. I have tried my self. It reduced my work..

visit the below link..

http://varadesigns.com/css-tricks/create-rounded-corners-with-css.html

-vara

Search Engine Optimization – How to Get the Best Rankings

2010-10-24T22:25:00.000-07:00

Effective search engine optimization is absolutely crucial for any website proprietor that likes to boost their traffic. No issue how many promotion you location on other websites and in the press the best way to get a bigger number of exclusive tourists is through search engine rankings and online directories.The idea behind seo edinburgh is to make your world broad web falls as appealing as likely to the engine crawlers. You may have a attractively conceived website that comprises unbelievable images and a flawless layout for reading but this solely will not advance your search rankings, there are other components that are important.If you believe of the times when you use one of the foremost search engines you should inquire yourself how many distinct falls do you actually gaze through? It is rather uncommon for any individual to get to the fourth of fifth falls of the results. For creative search engine optimisation edinburgh your location desires to be on the very first page.There are some methods that can help you to accomplish this -1. Always hold in brain that every lone sheet of your website can get noted separately. So the tenets of SEO need to be administered to each sheet and not just your dwelling page.2. Decide upon the most apt sayings and keywords for every page. These need to be applicable to the data comprised in that exact sheet as well as a phrase or saying that a famous person is expected to kind into a Google. There are devices accessible that you can use to find out how many individuals have actually drafted that exact saying into a search engine. This can help you perfect your concepts to get the greatest results. Remember that sayings do not inevitably make grammatical sense.3. Every sheet that you conceive desires to have a name that comprises the most important keyword or phrase. Many individuals do not do this and easily use the identical generic saying in each page’s name, and this is generally the enterprise name.4. Use Meta Tags correctly. These reside for the cause of search engines and correct indexing. There desires to be the Meta name, Meta keywords, and Meta description. The explain is the part that will appear below the sheet name in a search engine so you need to make it concise but furthermore catchy.5. Whatever you accept as factual to be the most important keywords should be recurring often in the body and content of the world broad web page. But do not advance over the peak as else the sheet may be rejected. Understand the correct density. Do You Want To Know How You Can Increase Your Search Engine Ranking?Visit my website on and I will display you a completely automated connection building service that builds high administration incoming connections to advance your Google grading, two times your Google traffic, and spectacularly boost your sales by 100% without you even lifting your fingers.Click Here To Unlock The Secret Resource ==> Getting organic search traffic has not ever been this easy!

How to Make a Website Interactive

2010-10-11T06:04:00.001-07:00

Technology has made businesses to run more conveniently. Now it is possible to get the response from the customers about a particular product or service at a greater speed. The reason is simple- A Faster Interaction.

The customers and prospects want to speak what they like and what they expect from a particular brand. They have become more knowledgeable. They are not satisfied just by availing services given by the service provider. In turn they are looking for more. They want to be a part of your community and want to connect. They want to tell what they are feeling about a particular product or service.

By making your website interactive you can help your customers and prospects to connect. You can boost interactivity in your website by using technology effectively. Let us see how:

Ask people to comment on your blogs. This increases interactivity in your website. People would not take pain to comment on your blog unless they find something valuable, something interesting or something controversial. You can also ask a question in your blog to inspire the conversation. Offer regularly a content which people like to read so that they comment on it willingly.

Let people judge your offerings. You can use star rankings or numerical value system in your website by which visitors can rate you.

People are very fond of playing contests and winning something. Winning an item through sweepstakes in which good drawing is required or through contests where skills are required is enjoyable as well as a great way to make people hooked towards your website.

People love to share their views, opinions, interests and challenges. You can get them involved by asking them to take part in surveys or polls.

Website's interactivity can also be increased by asking for feedbacks from your prospects. It is a great way to research your target audience.

For more inputs visit us at: halwits.com

Article Source: http://EzineArticles.com/?expert=G_Halwasiya

VirtueMart Joomla Shopping Cart

2010-10-05T09:14:00.002-07:00

VirtueMart is a full featured eCommerce engine VirtueMart offered by Joomla. The VirtueMart templates are a good option for online business owners who want to create an Internet shop with enhanced security, performance and usability. It is a great option for professional software without the high cost. The software has had well over 2.5 million downloads since its initial release. Users can experience the software for free with modification options. This software can also be used with the Content Management System, Joomla.

VirtueMart templates are written in PHP and can be used in regular MySQL/PHP environments. The software is capable of using Secure Sockets Layers with an encryption (128-bit). Flexible tax models were included such as ship-to-address and tax calculation. Users can perform shipping address management. They are also able to view customer accounts, order history, confirmation emails and change currencies and languages if desired.

The product catalog features include a powerful web-administration interface which is powered by using Javascript. The feature also allows users to upload an unlimited number of products and categories. Users can classify their products by putting them in certain lists or categories. A free marketing tool is included in the VirtueMart template such as the 'Shopper Groups'. With this group option, the user can allow different payment options and price levels. Shop statistics allow the user to monitor products and categories that are doing better than others for marketing purposes. Another similar feature is the 'shop statistics' tab which is a control panel with a summary of orders and customers. Website owners can build a marketing list to sell future products and services. Currencies from different countries and states can be easily managed without having to seek outside sources. For those who have a huge inventory list, the number of products can easily be viewed.

Payment modules are important for making the most sales. In order to increase sales, it is a good idea to include credit card processing. This can easily be done as a variety of payment modules are included; Paypal, EWay, Worldpay, 2Checkout, NoChex and Paymate. There is also an option for shipping modules where customers can pick different shipping carriers with rate configuration. Some of the modules include UPS, FedEx, InterShipper and Canada Post. The Shiping Module API allows users to exend their shop with multiple shopping modules at the same time.

VirtueMart templates also come with extensions to improve the user's experience. Some of these extra extensions include import/export tools, VM themes, payment extensions, language packs and shipping extensions. One of the most advanced extensions are the ones created directly from Joomla such as the 'product slideshow' feature which is great for attracting customers to buy more products and/or services. The VirtueMart Administrator ACL is another popular plugin.

VirtueMart templates offers a variety of options for those looking to create a professional and neat looking e-commerce website. With the ability to attract customers with products and organized categories, the user can only increase their profit and overall sales.

Stan Lem is not a beginner in writing for the web - he started about 5 years ago and took special involvement in the niche of website design and web development - more specifically VirtueMart themes and VirtueMart templates.

Article Source: http://EzineArticles.com/?expert=Stan_Lem

The Importance of Using a Good Web Design

2010-10-05T09:14:00.001-07:00

If you're wondering why your online business or company website is not generating the results you expect, then there may be something wrong with the current web design you're using. What most people don't realize is that their choice of web layout greatly affects the performance of the business itself. This means if you have a bad design, you're actually repelling potential customers away and losing profits. So it doesn't really matter how amazing your products and services are; if the users are not impressed by your website's appearance, they will find it hard to believe that you offer quality products and services.

But when you do have a good web design, it's quite easy for prospective clients to trust your company. If they're able to see a professional-looking website with informative content, they're more likely to check out what you have to offer. Thus, you'll be significantly increasing your online traffic because all the users that are interested in the kind of products you sell will now visit your site often due to its high-quality design. If you're able to create a truly amazing layout, people may even prefer your website than that of your competitors-which means you'll be getting more sales and promotion opportunities for your company.

Having a proper layout isn't only for you own good though because your visitors can also gain a lot from it. Here are some of the many benefits that your users can enjoy from your web design:

• Easy navigation. They will find it much simpler to browse the entire website because it's now easier to navigate. This also means that you will no longer have to deal with complaints from your prospective customers.

• Quick information. They can quickly locate the specific information they need since the articles and posts are well-organized. They'll also be interested in reading your contents and learning more about your products and services especially when it's always available to them.

• Complete user experience. You'll be giving your users a satisfying browsing experience that will make them want to visit your site more often.

So if you want to keep your users interested in your website, you should definitely start working on your website's appearance and presentation right away. Remember that the web design you choose is a direct reflection on your business, that's why it's very important that you select an impressive and professional layout so you won't have any trouble catching your target audience's attention.

Looking for the best web services in Tulsa, OK? Visit Tulsa Web Design today to get quality web design, web development, internet marketing, and SEO assistance at a very affordable rate!

Article Source: http://EzineArticles.com/?expert=Rob_J._Lawrence

CSS3 Shadow Effect

2010-09-27T02:37:00.001-07:00

Shadow effects are specified based on specified order. The property dont increase the size of the box, though they can extend past its boundaries.

.shadow {
text-shadow: 5px 5px 5px #a1a1a1;
font-size:3em;
color:#000;
font-family:"Times New Roman", Times, serif
}

The above class specifies text shadow effect, it extends 5px to the right and 5px below the text, and the 5px blur.

Browser Support

IE8 - None
FF3.5+ - Yes
SA1.3+ - Yes
OP9.5+ - Yes

shadow value must specify a shadow offset and a blur radius and color.

Using two lenghth values the offset will specified.

* First value represents the horizontal distance to the right of the text in positive.
The negative value move the text to left side.

* Second value represents the vertical distance below the text (if it’s positive) or above the text (if it’s negative).

The blur radius is specified after the offset values; it’s a length value that represents the size of the blur effect. If no radius is specified, the shadow will not be blurred.

Color can be specified before or after the offset and blur radius values.

Developing a Website

2010-09-26T10:01:00.000-07:00

Many people want to have a website. They do not have the technical expertise to put it together themselves. There is no need to panic. In a capitalistic economy where there is a need there is always someone to fill it. Web development is no different. You can hire these resources to be done or find resources to teach you how to do it yourself.

A search on the internet will find you resources. You can go more independent and hire someone to do a custom web design. They will help with the set up look and graphics on your site. They can even make some suggestions as to content. These services will cost you but may be a very good investment. If you want the best chance at making your site stand out and do what you want it to then hiring a web designer might just be the way to go. You will want to compare prices on what services they have to offer.

You can also choose to download software to use on a web hosting site and make your own design. This may not be as original but will cost less than hiring someone exclusively for your site and web development. The software that is offered is made for the non expert to use. You can even find resources to help you make a shopping cart if you want to set up a store. You can also set up blogs and forums. As noted earlier, if there is a desire for a resource then there is someone to fill that need. A lot of this software is free to download. You will want to compare prices of the hosting sites as well. They are usually relatively inexpensive.

If you want people to see your site you will need to think about website promotion. Web promotion is what gets people to your site. Using an SEO service may help you in this area. Search engines are what people use to find sites and you want to make sure your site comes up as one of the first on its list. You may pay for services to have your site listed. You can also use methods such as using keywords to get your website to be on a list from a search engine. Some hosting sites will also offer web promoting services.

When you develop your site you must be clear in your goals. Decide if you want it to be for personal satisfaction. You might just be sharing a blog about your life with your friends and family. On the other hand, you might have a goal of making money. Those are two distinct goals and you will have to decide which your focus is.

AeeSoft offers quality website Design and web development at very affordable price.

Article Source: http://EzineArticles.com/?expert=Nav_K_Singh

Important Suggestions For Using Web Design Tips

2010-09-22T23:19:00.001-07:00

When it comes to a functional and profitable website, there are some details which can be implemented to help your visitors find their way around and be more likely to purchase from you than from your competitors. Below you will find web design tips which can help you in deciding what to display on your pages.

Clutter will only confuse your visitors and they will quickly leave your site to click on the next link in the search engines results. Taking the time to plan the layout of your website will not only improve the appearance, it will improve the functionality required to assist visitors in finding the shopping cart.

A good method to prevent clutter is to divide the website into categories of related information, or products. By doing this you can free up space on your home page by creating links to additional pages which now contain the information that was previously cluttering up your front page.

When a person is about to spend money, they want to know how to get in contact with the owner of the site. Providing a Contact Us form will greatly ease the mind of those who would otherwise leave in search of a site that wants to hear from their customers. This simply little form also provides the business owner with the email address of a visitor so that you can keep them updated as to new specials you are conducting.

A blog is an area where you can allow visitors, and customers, to leave messages for every visitor to your site. It can also be used by you to keep fresh content available for the search engines to enjoy. By using certain keywords you will be in compliance with the indexing requirements of search engines and your site will appear higher up the rankings list.

Another business tool that can improve your site management is known as an Opt-in Newsletter. Unlike the Contact Form and Blog, this convenient correspondence tool can help you organize the list of people by location and interest and only provide product offers that are focused on their previous purchases.

A good website has fresh content, ease of use and organized information which can focus any visitor to the items which brought them there, and improve the chances that they will make a purchase before leaving your site. It is better to clean house and improve your site with web design tips than your lose a customer to your competition.

Moustique Design are an affordable freelance web development company offering custom website design London including CMS (content management systems), graphic design, ecommerce and much more.

Article Source: http://EzineArticles.com/?expert=Carolyn_Clayton

How To Achieve Internet Business Growth and Profitability in The Recession

2010-09-22T23:18:00.000-07:00

After the economic slump, it's hard to believe that profits even exist. For many it feels like pigs are more likely to fly, over their business making profits. Even though competition between internet businesses is tough, it's not impossible to make a decent profit, if you have the right tools at hand, a decent marketing plan and excellent customer service.

Whether you're selling a product or a service online, it's vital that you have a good customer service plan, which will give you the advantage over your competition. Excellent customer service does mean you go that little bit further for your customers, but it is definitely worth it. If a customer is happy with the service, they will mention it to others and pass it on the chain. It's a good marketing plan, word of mouth, as it costs nothing; all it takes is your effort and time with customers. These days, word of mouth is still just as powerful as the internet, and can make or dismantle your business. So always make sure what customer's say is positive about your business, rather than negative, by providing top standard customer services.

Providing a top quality service is not only about getting the goods posted or services booked as soon as possible, it's also about interaction. Interaction is key to providing a personal service, after all customers often don't like impersonal services, where they can't have their question answers. Because your business is based online, you may not be able to speak to them face-to-face; however, you still can offer a personal service by providing a contact area on your website, a direct point of contact such as 'live chat' and a blog where they can comment. Add to these social media sites and you have every point of contact possible, making you accessible, which is key to a personal service.

Build your website around your customer's wants and needs by providing product or service information, several points of contact, articles, reviews and newsletters to update them on services, offers, and other vital bits of information. Keep them interested with newsletters, however, keep it as an option rather than an imperative by asking them to sign up if they want to - not everyone likes to read newsletters after all! Allow the customer to have freedom and control, and they will come to you when they need you.

Building up a relationship with your customers is certainly not easy, but can be done through interaction and providing special services and discounts to the loyal customers. Discounts for you and one friend, also open up the opportunity to pass on how good your products or services are by word of mouth. Keeping customers, rather than just attracting new ones, is far more profitable and useful way of marketing in an economic downturn and upturn.

If you are interested in website design Birmingham, have a look at www.aimprouk.com

Article Source: http://EzineArticles.com/?expert=Marie_Coles

Tips on How to Make Your Website User Friendly

2010-09-22T23:15:00.000-07:00

Usability is the key concept that will make your website an instant success with your customers - the theory is to attract and retain. Here, an effortless experience is the desired outcome that you want each customer to experience time and time again on your site.

Below are some core usability tips that have been put together with the help of Surrey web design:
1. Simple Navigation:
There is nothing more frustrating than arriving at a website that has no easy navigation, particularly when you are in a rush to find what you are looking for. Users are very impatient and if they cannot find what they are looking for they will leave your site. The simple solution to this is to have an accessible menu bar with appropriate tab headings e.g. Home, About Us, Products and Contact, that is consistent across each page. Keep these tab headings short and specific as this is all you need from your primary navigation. Note, if a user can not find what they want in 3 clicks they'll leave your site.

2. Homepage Link:
It is imperative to continually have a consistent link to your home page at the top of your site so that users can be directed back to the homepage at all times. Remember your homepage is like a hub of information - users will use this page the most as it shows a summary of everything on the site and how to get to it. Tip: remove the homepage link on the actual homepage so not to confuse users if they are actually on the home page.

3. Help Users Out
Offer your users helpful tabs such as 'FAQ' and 'Contact Us' so that they can get their queries answered efficiently. Also including a search tool within your site will benefit lazy or inexperienced users who will not click through to your secondary navigation. Here users can type in a search phrase such as 'website designer surrey' and after hitting enter they will be shown all pages within your site that relate to this.

4. Use Breadcrumb Trails
Breadcrumb trails or cookie crumbs enable users to visibly see what page or section they are on within your site. This helps them see how they got there and shows all the primary and secondary navigation to display how each section has related to one another.

E.g: Home > Our Services > Web design surrey

Adido have three offices across the South in Bournemouth, Guildford and Southampton. The company specialise in web design, web development and SEO. The agency are one of the leading website designer surrey.

Article Source: http://EzineArticles.com/?expert=Jo_Da_Silva

Meaningful Trans-Created Website Translations

2010-09-20T22:45:00.000-07:00

Current business practices dictate that most companies will use websites or some kind of online presence to market their business. In most cases these sites are nothing more than online brochures. But websites are more than a place to share basic knowledge and services; they are marketing vehicles that should be driving business through your door and directly to your cash register.

Online analytics gives us the ability to track our website visitors and tweak the information we present in a way we never could before. Which leads to a very important question... should we offer translations of our website?

Content in your website is like location to a Realtor. We log onto the internet to find information, to research products and read reviews... among many other things. Providing the best, easily accessed information puts you at the top of the search engines and increases the likely hood you'll be found by your prospects.

According to an AOL study, most Hispanics consume online media in English. This makes a lot of sense because most of the internet's content is in English, 27.6%. Chinese websites come in second with 22.1% and Spanish ranks a distant third at 7.9%.

This study also tells us that almost 50% of new (over the last 7 years) Spanish speaking American's "prefer" to surf the net in Spanish. However, the general consensus in the Hispanic community is to mistrust translated websites.

Why?

Most sites are literally translated instead of meaningfully trans-created. Free services and instant online translations add to the general misgivings about the accuracy of the content provided and instead offer a feeling of being undeserved.

Knowing how easy it is to create a misunderstanding in the English language with simple punctuation - IE the famous "eats, shoots and leaves" vs. "eats shoots and leaves", thank you Lynne Truss, you can imagine the issues and confusion that may arise with a literal website translation.

The message your website conveys has meaning and so must the translation. Investing in a trans-created website will provide your visitors with information in a way it was meant to be received and will position you as an expert in your field to the audience you are trying to attract.

Article Source: http://EzineArticles.com/?expert=Tami_Ross

Cross Browser Compatibility

2010-09-09T05:17:00.000-07:00

There are literally hundreds of web browsers in use around the world. All of them implement the W3C document standards a little differently. Web designers must wrestle with these differences to make a web site work. This article discusses the effect those different implementations has on design.

What is Cross Browser Compatibility?

If a web page is completely cross-browser compatible, it will look more or less the same in all of the existing web browsers. The most commonly used browsers are Internet Explorer, Netscape Navigator, Firefox and Opera.

Each one of these browser implements HTML, JavaScript and Cascading Style Sheets (CSS) a little differently. Some difference only create cosmetic difference others can break the webpage. The situation gets worse because each browser is free to implement “enhancements” to the W3C standard version of each of these formats.

Then to compound matters even more the underlying operating systems also creates difference in how the computer displays graphical elements and text differently. When you add the fact that people are also using multiple versions of each of the browsers, no wonder web designers get headaches.

So what is a web designer to do?

Obviously, 100% compatibility with all potential browsers is impossible. But it is possible to design your web page so it will work in the most popularly used browsers.

To accomplish that, a web designer must write squeaky-clean code that conforms to the W3C standards to get consistent results across all browser platforms. The whole idea behind the standards is that if each browser adheres to the same set of rules, you will get more or less consistent results in all of the existing browsers.

Conforming can be a real challenge. It will limit some of the neater effects available in specific browsers. There are online code validators available. You can validate HTML code at http://validator.w3.org , the validator can also validate your CSS and links. The service is free.

The validator checks your code based on the DOCTYPE you specify on the webpage. The DOCTYPE tells the browser which version of HTML or CSS the web page is using.

HTML Editors

There are some compatibility issues associated with anything other than hand coding for HTML (and for that matter, even with hand coding.)

Best Choice - The best choice for compatibility is Dreamweaver but you cannot use layers. Layers must be converted to tables to be used.

Worst Choice - The worst choice is FrontPage. FrontPage is loaded with problems because it uses Microsoft and therefore internet explored specific code. Items that will not work in other browsers include:

Marquees – you can use a JavaScript scroller to create a similar effect that will work in the most common browsers.

bgsound tag – this is IE specific.

Page Transitions – this is IE specific.

Front Page generated Style sheets - this is IE specific and can have unexpected results or crash other browsers.

Front Page generated DHTML – it is better to use JavaScript to create the effects you want since it is more likely to be cross browser compatible.

Hover Buttons - this is IE specific and has been know to crash browsers including older versions of IE. You can use JavaScript, flash or CSS to get similar effects.
Other HTML Editors – the rest of the HTML editors will fall somewhere between Dreamweaver and FrontPage in cross browser compatibility. You just have to test the code your HTML editor generates.

CSS Style Sheets

Not all of your style sheets will work correctly in all of the browsers. However, style sheets rarely crash a web browser, but sometimes the pages will be downright ugly if not completely unreadable. One of the major CSS problems is absolute positioning since most browsers do not support it and it will cause different block to overlap others and create a jumbled mess.

Flash

Flash is great for adding style to a webpage and Macromedia provides flash plug-ins for all of the major web browsers. But don’t build the entire site with flash. Browser for the blind, most handheld devices do not support flash.

A small but significant number of users don’t like it and don’t install the plug-in so they won’t be able to access a flash site. Also, search engines spyders can’t follow the links on a flash site and won’t index it.

Graphic Links

While these are attractive, they have the same problems as flash with browsers for the blind and hand-held devices. Always use the alt tag with graphics.

Bottom Line – even code that is validated may not work correctly in all the major browsers. The best way a web designer can create cross browser compatibility is to test all of their web pages in the most popular browsers to see what happens. Personally, I find that a combination of style sheets and tables works best to ensure my pages look good in all of the browsers.

Source : http://articles.webdesigners123.com/cross_browser_compatibility.php

Using Colors On A Website

2010-09-09T05:15:00.000-07:00

Choosing the right colors for your website is just as important as selecting graphics and content. This article discusses what factors to consider when selecting your website colors.

Colors have many effects on people. Certain colors can invoke specific emotions in people. Emotional reactions can affect the image of your company in the visitors mind and can have a major effect or your company’s “brand”.

If you doubt color evokes emotion, consider the phrases, “green eyed monster” “seeing red” or “in a black mood”. The green-eyed monster is a reference to jealousy, seeing red means a person is angry and a black mood refers to depression. People do associate colors with specific moods. Scientific texts have proven that different colors can make people happy, sad, relaxed, excited, angry or afraid.

Anything that can evoke those responses in people needs to be looked at carefully when designing your website. Colors tend to be classified as “neutral, “warm” or “cool”. So, let’s take a look at some of them.

Neutral Colors

Whites – Whites stand for purity and cleanliness. In eastern cultures white is the color of death while in western cultures in is the color of marriage and hope.

Grays – Grays exude reliability and conservatism. Shades of gray are one of the most popular colors for business attire.

Browns – Browns stand for the earth, home and family.

Blacks – Blacks tend to signify power, elegance and sophistication. In western cultures also stands for death.

Warm Colors

Reds – Reds are good for attracting attention. That is why they are frequently used in sales letters to emphasize specific points. Red symbolizes, anger, violence, lust, passion and can actually raise people’s blood pressure.

Yellows – Yellow can mean weakness or cowardice as well warmth and happiness.

Oranges – Orange is associated with fall harvesting and Halloween. It can also stimulate a person’s appetite.

Pinks – Pinks usually symbolize innocence, femininity and romance.

Cool Colors

Blue – Blue has a calming effect on people. It exudes intelligence and trust. It is a surprising that many financial and health care institutions use blue themes. Blue can also suppress appetite.

Green – While the green stands for jealousy, greed and inexperience, it also stands for money and wealth.

Purple – Purple tends to symbolize creativity. The darker shades were once reserved for royalty and the lighter shades are usually associated with romance.

Web Safe Colors

Vacuum tubes, LCD and Plasma screens all display colors differently. There are 216 colors that can be displayed on every type of monitor in every web browser and will look almost identical. These 216 are called web safe colors. If consistent color is important, you should only use web safe colors on your websites.

Color Schemes

Color schemes can be composed of a single color, complimentary colors or contrasting colors.

Single Color -- Single color schemes uses several different shades and intensities of a single color on a white background. For example, if you want to use a red color scheme, you can use everything from the lightest pink to a red so dark it is almost black.

Complementary Colors – Complementary color schemes use two or more colors that look good together and create a pleasant blend that is appealing to most people. One color may be dominant and the other used to compliment it.

Contrasting Colors – Contrasting color schemes use two or more dominant colors to create an “eye grabbing effect”. For example, using a dark blue page background, a deep red frame around a white background text area with black text is a typical contrasting color scheme.

Web designers need to be careful when using contrasting colors because some combinations tend to “vibrate” such as red text on a blue background and can hurt some people’s eyes, while other combinations are just had to focus on. Other combinations “clash” and are unpleasant to look at.

General Color Guidelines

The following guidelines are suggestions that should make your web pages readable for everyone.

Text should be readable. Obviously black on white is the default choice but others are also good. White or Yellow or other light colors work on black or any other dark color background. But, Yellow, Green or Gray on white does not.
Use colors that are attractive and pleasing to the eye.
Select the colors that portray the image you want to give your visitors.
For consistent colors across different browsers, use web safe colors.
Do not use a normal color intensity images as a background behind text. It makes it difficult to read. If you use an image, use it as a faded watermark.
Colors should be uniform on all your web pages to create a “brand” for your site and let your visitors know they are still on your website.
When you come to designing your website, choose you color scheme just as carefully as you choose your graphics and content. The overall appearance will determine the impression the visitor gets of your company and can mean the difference between success and failure.

Source : http://articles.webdesigners123.com/using_colors_on_website.php

Why Good Website Navigation Is Important ?

2010-09-09T05:13:00.000-07:00

Web surfers are basically an impatient bunch and if a website is hard to figure out because the links are not obvious, they will click away never to return. Website navigation is one of the most crucial elements in determining the effectiveness of a website. This article discuses the basic principle of designing website navigation.

To be effective website navigation must first and foremost make sense to the average person. While there is always room for creativity, well-designed websites tend to have similar navigation layouts.

As a web designer you must always keep in mind the basic purpose of the website and the intended audience when designing navigational elements. Most websites exist to either inform the visitor about a product or service or to actually sell the product or service. Therefore there are some basic guidelines to follow:

Make sure all navigational elements are clearly links by using standard conventions for links such as buttons, menus, underlining the text or changing color on mouse. Resist the temptation to use clever or ambiguous names for links.

When using non-conventional links, explicitly tell the visitor that this is a link. For example, suppose you design a web page where you want to use a map showing several different cities and want to let the user click on the city name to pull up information about that city. Just make sure you tell the user to click on the city name to get more information about that city.

Remember the “Three Click Rule” that most professional web designers use. Studies have shown that most users will not click more than three links to get to the information they want. So every page on your website should be reachable within three clicks.

I do not recommend using a flash movie or other type of splash page on your website. Keep the web page design simple yet attractive. But if you do decide to use one, make certain you use the META REFRESH tag to take the visitor automatically to your home page after a few seconds and provide a clickable, clearly marked button or link so the visitor can skip the entry page and go directly to your home page otherwise a large percentage of visitors will just click away never to return. Remember most visitors are looking for information not entertainment.

Navigation Element Locations

Top Menus – a top of the page menu bar is usually located directly below the page header graphic that contains the site logo. These menu items may be single links, drop down menus, or expanding menus. Each menu item can be represented by a graphic or just text. In ether case a hyperlink is associated with each item that the visitor can click on to get to the information described.

Left Side Navigation – left side navigation is typically implemented as either a column or text area on the left top portion of the webpage. Like the top menu, each item can be a single link or an expanding menu.

Right Side Navigation – right side navigation is not used that often, but when used, it is implemented as a column or text area on the top right side of the webpage. Most designers use this area for advertisements rather than site navigation.

Bottom Menus – bottom menus can be either a menu bar or footer. Menu bars use either graphics or text links while footers almost exclusively use text links.

Important Navigation Elements

Internal Page Links – Every page on the website should be within two or three clicks from the home page. Important pages should be ONE click away. The type of website will determine which links are more prominently displayed.

Login Boxes – login boxes should be prominently displayed. Common locations are top left, top right or inside the page header.

Shopping Carts – if you use a shopping cart to sell your products, you should prominently display a view cart button on each page. The most commonly used location is the top right side just below or as part of the header.

Order Buttons – if you use individual order buttons they should be large and visible. The fewer clicks it takes to get to your order page, the more orders you will get.

Breadcrumbs – breadcrumbs are both links and a graphical representation of where you are in the site. Breadcrumbs are usually located at the top left of the page just under the header. Each word is a link back to the previous page. They are in the form

Home-> Articles-> Marketing

External Links – external links can be used anywhere but are most frequently used inside the text areas on a website. They may be references to more information located on another site, to recommended products, or to almost anything else.

Advertisements – advertisements are usually either a graphic or text with an associated hyperlink. Ads can be placed anywhere on a webpage but are usually used just under the header banner, down the right hand side of the page, under navigation elements on the left margin, across the bottom of the page or even interspersed within the test areas of the page. Studies show that ads “above the fold” are more effective.
(“Above the fold” refers to the area of a webpage that is visible without having to scroll.)

Downloadable Items – if you offer downloadable items such as audio, video or pdf files, make sure that you tell the user haw big the file is and whether they need an application to use the file. If they do an application, provide a link to the application. For example, provide a link to the free Acrobat reader if you offer pdf files.

Site Map – A site map is a good way to layout your entire site for your visitor. (Search engine spyders like them too.) It is just a hierarchical listing of every page on your site with a clickable hyperlink to that page.

Summary

A good navigation system can increase the numbers of pages viewed by each visitor. This in turn can increase signups, customers, sales, members or whatever it is your site is designed to do and make your website more successful.

Graphic Formats

2010-09-09T05:10:00.000-07:00

Although hundreds of graphic file formats exist web browsers only support a few of them. This article describes the different graphic file formats that are available to web designers and when they should be used.

The graphic file formats supported by most popular web browsers are Graphic Interchange Format (GIF), Joint Photographic Experts Group (JPEG), Portable Network Graphics (PNG) and vector graphics. Some of the properties of graphic files are:

Transparency – this property allows the image to be varying degrees of opaqueness from solid to completely transparent (see-through).

Compression – this property allows the image to be stored in a much smaller file by using a mathematical algorithm to handle groups of pixels as a single item.

Interlacing – Interlacing allows the image to be loaded by first drawing the odd rows and then going back and drawing the even rows. It allows the visitor to see the picture sooner.

Animation – Animation gives the appearance of movement by using a series of successive still pictures. Animated gifs do not require a browser plug-in and can work on almost all devices.

Progressive loading – Progressive loading is similar to interlacing in that it only loads a portion of the picture initially but is not based on alternating rows and allows the user to see the picture quicker.

GIF

GIF was originated in the 1980 and was adopted by web designers in the early 1990s as the preferred graphic format for web pages. GIF files use a compression algorithm that keeps file sizes small for fast loading.

They are limited to 256 colors (8 bits) and support transparency and interlaced graphics. It is also possible to create animated graphics using the GIF format. All browsers can display GIF files.

GIF Advantages:

Most widely supported graphic format.
Diagrams look better in this format.
Supports transparency.

JPEG

JPEG files are compressed but support “true color” (24 bit) and are the preferred format for photographs where image quality matters. JPEG supports a progressive format that allows for an almost immediate image that will improve in quality as the rest of it loads.

Unlike a GIF file, the compression for JPEG files can be controlled by the web designer, which allows for different levels of picture quality and file size. All browsers can display GIF files.

JPEG Advantages:

Large compression ration mean faster download speeds.
Produces excellent quality for photographs and complex drawings.
Supports 24-bit color.

PNG

PNG is a fairly recent format that was introduced as an alternative to GIF files. PNG supports up to 24 bit color, transparency, interlacing and can hold a short text description of the image’s content for use by search engines.

Unfortunately, most browsers do not support PNG and the ones that do support it, don’t support all of its features yet. But that will change in the future.

PNG Advantages:

Overcomes the 8-bit color limitation of GIF.
Allows text description of the image for search engine use.
Supports transparency.
Diagrams look better than they do in JPEG.

Vector Graphics

Most web graphics are raster images or bitmaps, which consist of a grid of colored pixels. Drawing and illustrations should be created as vector graphics which consist of mathematical descriptions of each element that makes up the lines shapes and color of the image. Vector graphics are created by drawing programs such as Adobe Illustrator and Macromedia Freehand and are the graphic artists choice for creating drawings. Vector graphics must be converted to either GIF, JPEG OR PNG format to be used on a web page.

Which Format Should You Use?

A web designer could choose either the GIF or JPEG format for most uses. But, since the file size of a GIF is usually small than the file size of a JPEG, most web designers will use the GIF format for backgrounds, boxed, frames and any other graphical element that look fine using 8-bit color.

Most designers will select the JPEG format for photographs and illustrations where the compression doesn’t compromise the visual quality of the image.

As PNG becomes fully supported by most web browsers, it will probably replace GIF as the web designer’s choice for non-photographic page elements. However, GIF will still be used for animation.

Bottom Line – GIF and JPEG are universally supported and the web designer’s choice is determined by the graphic element being used.

Source : http://articles.webdesigners123.com/graphic_formats.php

Website Templates

2010-09-09T05:09:00.000-07:00

Website templates are web page designs created by professional web designers that are sold to others for their use. Templates normally have dummy content used as a placeholder so you can see what a finished page will look like. A template is an easy way for a novice to create a good-looking professional quality websites quickly and easily.

Most of the commercially available templates can be found in a variety of themes and color schemes. Theme templates come complete with appropriate graphic for each theme. If you have some graphic or web design skills and a knowledge of HTML, you can create a customized professional looking website at a fraction of the time it takes to create everything yourself. Just remember you don’t own the copyright to the design.

Before selecting a template, you will need to identify the goals you have in mind for your website so you can select the most appropriate template.

Advantages of Using Website Templates

There are several advantages to using templates such as:

Templates provide the basic webpage layout.
Templates can provide a consistent look and feel for the site.
Most come with professional quality graphics.
Most allow you to customize the graphics if desired.
It is usually easy to add your content using almost any HTML editor.

Disadvantages of Using Website Templates

It can be difficult to make any web design changes unless you are skilled in both HTML and can use a graphics program like Photoshop.
Although features like a login box may be part of the template design, the programs needed to make them work are not included.
Any interactive features have to be integrated into the template.
You do not own the copyright to the design unless you actually purchase it from the designer.

Features of a Quality Website Template

The following items are things to look for in a well-designed web template. A template should:

Be easily editable.
Be compatible with most HTML editors.
Upload easily.
Come with complete html files.
Have header graphics provided in psd format for easy editing.
Have their both the fla and swf files if the template uses flash.
Download quickly after the content is added.
Retain the original design no matter how much content is added.

Customizing an HTML Web Template

If you want to customize a web template but don’t have the necessary skills to do it, most template designers and other web designers offer template customization services as reasonable prices. These services usually involve minor design changes, customizing header graphics, adding logos, removing unneeded unattractive elements, etc.

Many web developers will be happy to integrate any interactive features into your template. Please keep in mind that the developer will either need to write the necessary scripts or modify existing scripts to make the interactive features work. If an existing script is not freeware, the web developer will have to add the cost of purchasing a license for the script to his labor charges.

Customizing a Flash Web Template

If you want to do anything more than just add text or substitute a graphic file in a flash template, you will either need have expertise in creating flash programs or hire a flash programmer to modify the template.

If the fla files came with the template, you can modify it using a flash editing program such as Macromedia Flash or Swish. If the fla files are not available the first thing that needs to be done is to decompile the movie since the swf files are movies. Once the movie is decompiled, the necessary changes can be made and the flash movie recompiled in any flash editor.

Summary

A quality web template can allow a novice webmaster create a professional looking website quickly and easily at a reasonable cost. Since the templates came in a variety of industry specific themes and color schemes, you should be able to find one that is right for your website.

Web template can offer the professional designer a lost cost alternative to creating the web design, header graphic, logo and all of the other graphical elements, which will allow them to charge less for their work. In either case, it is important to purchase a quality template.

Source : http://articles.webdesigners123.com/website_templates.php

Photo Optimization

2010-09-09T05:08:00.000-07:00

Photo Optimization is necessary to allow a web page to load in the shortest amount of time possible. Fast loading time require small files. This article discusses the methods used for photo optimization.

In an ideal world, a web designer could use the highest quality photos and have the webpage download lightening fast. Fast loading requires small file sizes for pictures. Unfortunately, there is a trade off between picture quality and file size.

Web surfers are a notoriously impatient bunch. If a website takes too long to load, they will just click away and never come back.

Computer monitors can only display images at 72dpi (dots per inch). So the first step in photo optimization is to reduce the resolution to 72 dpi. Large picture can be sliced up into smaller ones and the put back together on the web page. Each piece will be a very small file and together will load in a fraction of the time a single image file would load.

Most graphic files contain information about the color palette of the image. This information is usually unnecessary for displaying on the web. Many graphic programs included the ability to “Save for the web”. This option discards all of the unnecessary information in the file without any loss of picture quality.

Another method that appears to speed up load time is to use either the GIF or PNG interlaced or the JPEG progressive property. Both of these properties allow the picture to load gradually as first a blurry image that becomes sharper and clearer. In reality the picture actually loads a fraction of a second slower than the regular formats do but it appears to load faster the site visitor.

Width and Height IMG Attributes

The HTML tag tells the web browser to create a specific sized box to hold the graphic. That way the browser can continue loading the rest of the web page while the graphic file is downloading. If you don’t put the width and height attributes, the web browser must pause until the images is downloaded before it can load the rest of the page.

How Many Images should you use?

Some web designers use images for everything. While it may look good, it will definitely slow down the speed of the page loading. Page loading speed in the sum of the HTML file plus the size of all of the embedded files. Images constitute more than 50% of the download time.

Using fewer images will speed download time and just may keep a visitor from bailing through impatience.

Photo Quality

Photo quality is determined by the clarity, color purity and detail of a photo. Use a graphic editor to remove noise and other unwanted features. Most editors allow you to correct red-eye and sharpen edges to improve clarity.

Professional editors like Fireworks or Photoshop will let you change the background, adjust the color levels and do almost anything else you want to do to the photo.

You can also use a thumbnail on the webpage that links to a larger and higher resolution version of the image so that people who want to can view it.

Photo Optimization Guidelines

The following suggestions will allow you to optimize your photos for fast download times without sacrificing picture quality:

Change the resolution of all images to 72dpi.
Convert graphic text into stylized text.
Crop the images to the actual size needed.
Minimize color depth when it’s not necessary for quality.
Specify the actual width and height of all images.
Use thumbnails where appropriate.

Bottom Line – Graphics should enhance the content of a web page except in that rare occurrence where the images are the content. In either case, you need to optimize photos and other graphic files to allow for the fastest downloading time possible for the web page otherwise you risk losing the visitor forever.

Source : http://articles.webdesigners123.com/photo_optimization.php

Web Design Guidelines

2010-09-09T05:07:00.001-07:00

The goal of most web designers is to create an attractive, easily accessible and functional website that will convince the visitor to do something. Creating such a website requires good graphic design, easy and intuitive site navigation, logical site layout and good web copy. The following suggestions are general web design guidelines.

Web Content

You want the visitor to see you as a knowledgeable information source and/or a reputable business. Poor grammar and spelling will immediately reduce your credibility. Remember that people use the internet to find information. Whether you are selling your own product or recommending someone else’s products, you must first provide valuable information to the visitor or they will click away and find a website that gives them what they what they want.

Cross Browser Compatibility

There are at least a hundred different browsers in use. You must design your website to work properly in the most widely used browsers. To do that you may not be able to use all of the really great special effects that are available because they may not be supported in most browsers.

Even though most web browsers are free, people do not necessary bother to upgrade to the latest versions. The average surfer may not know how to upgrade their browser or have the attitude, “If it works, don’t fix it.” Remember your visitor may have a PC, a MAC, a Linux box, a PDA or a cell phone and they all use different browsers.

Good web design requires your web pages to work in Microsoft Internet Explorer, Netscape, Firefox, Opera and Safari at a minimum. Validating your HTML code will help but the final test is to view your website in different browsers running on different platforms.

Graphics and Photos

Web surfers are impatient and studies show that most people will click away if a webpage takes longer than 10 seconds to load. Always optimize your photos and other graphic files to have as small a size as possible without sacrificing picture quality.

Always use the height and width attributes on the picture so the rest of the page can load while the graphic files is downloading. Use the ALT HTML tag so people with graphics turned off and those using hand held devices know what the picture is supposed to be.

Background Colors

If you use anything other than white behind text, be sure to specify link colors otherwise the user’s browser defaults will determine what color the links are which can make them unreadable.

Multimedia

Multimedia is composed of flash movies, video clips, audio clips and background music. Always use streaming media because it reduces download time. Make sure the visitor can stop and start multimedia files or in the case of flash introductions, skip them if they want. That way people with slow connections or devices that don’t support multimedia can ignore them.

Also, put any important information presented in multimedia in text as well so the visitor has access to that information without using multimedia. If a plug-in is needed to use the multimedia, always provide a link to it so the user can install it. Finally, always remember the 10-second rule for site loading when deciding to use multimedia.

Site Navigation

Site navigation should be simple and intuitive. Studies have shown if a visitor cannot access the information they want within three clicks, they will leave the site. This is called the 3-click rule. Every area of your website should be reachable within three clicks from anywhere else on the site. If you use anything other than simple text links, make sure to test your navigation in all the major browsers.

Links

Periodically test all site links to be certain that they are valid. Nothing chases a visitor off faster than broken links. There are several free online services that will periodically check your links.

Frames

Avoid using frames, since they make it difficult to bookmark individual pages on your web site and you want people to bookmark pages so they can come back.

Summary

Good Web design is a combination of common sense and good planning. Your site should be attractive and easy to use and most importantly provide the user with the information or services they want.

Source : http://articles.webdesigners123.com/web_design_guidelines.php

W3C and Validation

2010-09-09T05:05:00.000-07:00

Who is W3C? W3C stands for the World Wide Web Consortium. The goal of W3C is to provide a set of web standard and guidelines that will help alleviate the problem of code incompatibility in the hundreds of different web browsers in use throughout the world today.

The standards are only a guideline, but smart web designers and web developers pay heed to what the organization has to say. In fact many of the web programming jobs found on web design freelancer job boards, specifically requests that the code used to build a website is W3C validated. Although fairly common for XHTML and HTML it is becoming increasingly important especially if the web site is a total CSS web site.

Tim Berners-Lee who pretty much invented the World Wide Web when he developed the first web browser back in 1989 and other industry pioneers created the consortium to promote the standardization of the technologies used on the World Wide Web. Without some level of standardization, the internet would not be a global medium it is today. Interoperability between different machines requires a standard interface and standardized data communication protocols to carry the information back and forth.

That is the W3C’s mission. To publish the standards necessary so that all computers can speak the same language and communicate and all web browsers render web pages so that look and act the same way. The consortium also engage in efforts to educate web designers and developers so they will work together to build their websites on the W3C standards.

Because of the work of the consortium, someone using a Macintosh in China or a windows XP machine in Canada can access a web page hosted on a Linux server in South America. If that web page was created using validated HTML and CSS code, the webpage should appear very similar and have the same basic functionality on all of the different operating systems and web browsers available.

Why is Using Standardized and Validated Code Important?

Although all web browsers understand and render HTML, they don’t all do it the same way. Each browser has proprietary extensions to HTML and CSS that it uses to create special effects because none of the standardized code can do what they web designers wants to do. The result is that code that looks and works great in Internet Explore may crash Firefox, Opera or Safari and vice versa. Unfortunately, many web designers choose to code for internet explore and ignore the other 35% of web surfers. There are hundreds of different browsers and more appearing as PDAs, cell phones and practically every other imaginable electronic device is being built to be “internet compatible”.

It is impossible to test your web pages on every browser. While testing on the major browsers will probably be sufficient for most people, web designers who want their websites to work on as many different platforms as possible can check the code they write to see if it meets the standards.

Why don’t all the web designers and web developers use W3C validated code?

They don’t use it because none of the most popular HTML editors generate 100% compatible code. The newer the standards, the less likely the code generated meet them. Of all the HTML editors available, Dreamweaver does the best job and Front Page the worst job. It’s not surprising that FrontPage, which is a Microsoft product, writes code almost exclusively for internet explorer. The rest of the popular HTML editors rank somewhere between FrontPage and Dreamweaver.

Hand coding is no guarantee that the code will meet the standards either unless the person writing the code is well versed in the latest standards. Another problem is that a lot of the fancier and nicer features available are not universally supported by web browsers. Many web designers and web developers choose to ignore the 35% of web surfers so they can use the effects they want to use. In some cases, the site looks ok but doesn’t have all the functionality. Drop down menus are a common element commonly used that don’t work in some popular browsers. A good web designer will add a text link somewhere on the page for the parts of the menu that don’t work in all browsers. That way, the majority of visitors get the cool features while the others can still get where they want to go.

Summary

As the number of web browsers continues to increase, standardized code becomes absolutely essential. If you use non-standard, non-validated code that doesn't work in a particular browser, it is your fault. If you use standard, validated code and it doesn't work, it is a bug in the web browser. The W3C organization offers an official public validator service at http://validator.w3.org.

source : http://articles.webdesigners123.com/w3c_validation.php

Communicating Your Needs to Your Web Designer

2010-09-09T05:02:00.000-07:00

Communicating with a web designer can be the most difficult part of the hiring process because you and the web designer don’t speak the same language when talking about the details of a website. This article explains how to get your ideas across to the web designer you want to hire.

Ok, so you’ve decided to hire a professional web designer to build your website. You spent some time looking for the right person. Eventually you found the right web designer that you believe will design the most “remarkable”, “extraordinary” website the internet community has yet seen.

So now what? Explaining to the web designer the layout design you have in your mind can be a very frustrating process. You will find that putting the “picture” in your mind into words can be a difficult task. Actually in most cases this is the biggest hurdle between you and the final outcome. No matter how talented the web designer is, if you can not communicate with him properly, in his own professional language, he will not be able to use his talent to achieve your design.

There are two possible situations you may face:

You know what content you want on the website but have no clue how to present it to the user.
You know what content you want on the website, and you have the layout in your mind, but you don’t know how to implement it.
In both cases you will need to explain your thoughts to the web designer. Although most people who read those lines are probably thinking that being in the second situation is better then being in the first situation. However, real life experience shows the opposite to be true. Giving a web designer the complete freedom of action regarding the web design based solely on the website content is usually a smart thing to do. You will find that explaining to the web designer what the nature of your website is, whether it’s a product that you want to sell or a hobby item, is much easier then trying to explain to him the temperate of the color schema or an undefined shape that you would like to have in the website header.

Actually for both of the situations, I would suggest you use the same approach, but with a minor modification to each situation. If you know of a website that has all the features you want or need and/or a site that looks the way you want your site to look, be sure to give the site’s url to the web designer. Doing so will give him some idea of want you want. You will both be looking at the same thing but will actually look at it from a different angle. Therefore, it may be better to give him more than one website as an example. The more websites you find that can express your feelings and/or needs, the easier it will be for web designers to understand your intention without you having to use a single “technical” term. Chances are that you won’t find a single website that has all of the feature you want. After all, if such a website already exists there would be no place for your new web site to be born. Use several websites to express the different features you want. Spend as much time as necessary until you find just the right websites to provide examples of your needs. Doing research at this stage will definitely save you a lot of time later trying to point the web designer in the right direction.

Although you are the one who needs to express your self to the web designer, you must learn to listen to him as well. When he uses technical terms, ask for their meaning. Do not finish any part of the conversation unless you are absolutely sure that both sides are on the same page. Remember that when a web designer speaks about the temperature of a color, he is not talking about the next day’s forecast.

Remember, you hired a professional web designer because you want a professional looking website and you couldn’t do it yourself. So, trust the web designer’s judgment when they tell you something you want won’t work or isn’t the best way to accomplish your goals. After all, you are paying them for their expertise. Don’t try to tell them how to do their job.

It is OK to require that a web designer gets your approval each step of the way so you can tell them if one of your goals isn’t being met. Also, if you really don’t like how something looks and want it changed, tell them immediately. Don’t wait until everything is done and then decide you don’t like it.

A final word about cost

You have agreed on what needs to be done and the web designer has given you a price quote. Simple modifications and bug fixes are usually included in the price. However, other major changes or outright revisions may or may not be included. Make sure the agreement states what is included, what constitutes a revision rather than a fix, and how many changes you can make after delivery without incurring additional costs.

Source : http://articles.webdesigners123.com/communicating_needs_web_designer.php

eCommerce Website Design

2010-09-09T04:58:00.000-07:00

eCommerce websites have their own unique character that is designed to lead the visitor to one simple task – make an online purchase. A web designer needs to consider a variety of online selling principles while designing an eCommerce website. In this article we will try to take a look at some of the major design aspects that you must have in an eCommerce website.

Many of you are probably already asking why eCommerce website design is different from any other website design. They all need to be attractive, well organized and use the right colors that fits the website spirit and so on. Your instincts are good. However a close look at some successful eCommerce websites will reveal the conceptual differences that are typical in a successful eCommerce website.

An eCommerce website needs to follow certain selling principles:

Give the user a pleasant experience during his online shopping.
Make certain you provide sufficient information on who owns the website and why they should be trusted.
The website must be easy to use. If it isn’t, the visitor will go to your competitor.

Those principles are not new. We all know those basics from our day to day experiences in the mall, shopping center and every other market place that is waiting for us to open up our wallets. The big challenge for a web designer is how to translate those conventional marketing techniques to the virtual world of the internet. I’m sure you’ve all noticed that in most supermarkets the bread stand is placed at the far end of the building, yet you can smell the fresh bread at the entrance (sometimes they even use a special air duct to carry the smells). That has been done deliberately. Marketers use our sense of smell to draw us through the store where we are exposed to all sorts of tempting goodies as we go to get our loaf of bread.

How do you draw an imaginarily path in a web page? A path designed to lead the visitor to do what you want him to do…make an online purchase. Unlike the supermarket our website has no smell. In a website the distance from one point to the other is pretty much the same, so the exit is always right there. In a website you can try to order the “shelf” in the way you think will best expose the visitor to many of your products, but there is always a chance that he will find a short cut to another page that can also be the way off your site.

As can be see, although putting your products on the web is much easier then renting space and opening a supermarket. However, selling your products on the web can be difficult.

A good eCommerce website design will lead the visitor to the right page in one click or two at the most. Sometime web designers will use techniques that would never be considered for non-eCommerce websites. Everyone has seen at least one sales letter website. On these web pages the only link is to the order form. Sales letters are not the most typical eCommerce website because they usually sell only one product. That allows the web designer the ability to exaggerate the one click principle and make it an advantage. All the facts about the product have been presented to the user is a smart way while every few lines he has the option to click on the order form. If he is not yet convinced he will have the option to continue to read more facts and testimonials about the products. Believe it or not, those sales letter websites are actually selling.

“What about online shops?” Online shops have to deal with more then one product. Of course, the greater number of products increases the complexity of the website. Sophisticated eCommerce websites use a variety of personalization technologies in an effort to determine the best selection of products to offer to the visitor. Personalization technologies are a major part of advanced eCommerce websites. However this topic is beyond the scope of this article. The cleverness of an eCommerce website’s personalization technology has a major influence on its design. The first to use such technology was Amazon.com who decided to push their client’s books to a visitor based on that visitor’s past orders combined with the statistics they had collected on all visitors used to predict what someone looking at a specific book might also be interested in reading. Today the goal is to try to predict what to offer the user on his first visit as well.

An eCommerce web design is also about the layout. One important aspect is where the user’s eyes look first when accessing a web page. Lots of research has been done on this topic. Most research showed that the middle left side area will attract the most attention followed by the center of the page. By using these techniques web designers try to draw the “walking path” for the visitor’s eye, much like what was done at the supermarket. An experienced eCommerce web designer will know how to create designs to meets those demands.

If you are about to open an eCommerce website or you are already own one, make sure you understand the web design principles for online selling. Consider consulting with an experienced website designer preferably someone who has experience with eCommerce websites.

Good luck with your sales.

Source : http://articles.webdesigners123.com/ecommerce-website-design.php

Banner Design Success Techniques

2010-09-09T04:55:00.000-07:00

Banners have been a major part of the World Wide Web world since its early days. Copywriters burn the midnight oil looking for new designs that will grab the visitor’s attention and compel him to click on their banner. This article discusses some of the most successful banner designs.

Teasing your curiosity

“Do Not Click Here”. How many of you have seen this slogan in a banner? What did you do when you first saw it? If you are like most people, when you first saw it, you clicked on it. What makes this simple sentence so powerful that it compels the visitor to click on it? The answer is curiosity !!!

Copywriters and web designers are always looking for ways to arouse the website visitor’s curiosity. As banner designers their goal is to attract the visitor to the banner, usually completely ignoring the other elements on the web page that are more important to the website owner. However, because the “Do Not Click Here” slogan tells us nothing about what is on the next page, it arouses the visitor’s curiosity and makes it almost impossible not to click on this banner to see what’s behind it.

Simple integrated design

When Larry Page and Sergey Brin first introduced their product, “Google”, to potential investors, they mentioned Adwords as a backup option in case they didn’t make any money. We all know how lucky they were that they eventually needed to use that backup plan. What made these “boring” ads such a great success?

Unlike other ads, Adwords neither arouse the visitor’s curiosity nor disturb the main flow of the web page. In fact, the opposite is true. Adwords are meant to look like part of the search results giving the user the feeling that those ads are there because he asked for them. No one has any doubt that this simple design helps Google to promote both their search engine and the Adwords advertising program.

Take part in the action

Banner designers wisely used interactive technologies like Flash to develop type of banners that invite the user to take part in the action. Drawing the user into the action can be accomplished in many creative ways. Some web designers use popular old games elements as part of the scene. You all know the famous game pacman. One of the banners that I like the most is the one where the user is allowed to let pacman “eat” few dollar signs. At the successful completion of this mission, a nice slogan is revealed asking him to open a saving account that will earn money with a fixed interest rate. The idea behind those interactive banners is simple: Let the user take part in the action and then at the right moment when his mind is less resistant, show him the sales message. Those interactive banners proved to be very efficient. Their biggest disadvantage is that most webmasters will not allow that kind of banner because it distracts too much from the web page content.

Back to Black and White

Website designers are always seeking to be different with their design ideas. One banner fashion trend that can be found lately is Black and White banners. Although research shows that blue and yellow are the most efficient color to use in a banner, Black and White banners have been seen a lot lately. It’s probably something that will eventually vanish, but the idea behind it is to be different and to make the user wonder what’s up and hopefully click on the banner to find out.

Get Out of the box

Have you heard about the milliondollarhomepage.com? If not, check out this website before continuing to read this article. This website has proven that creative thinking not only can bring you money but also create a whole new trend. Right after the milliondollarhomepage.com got the internet community’s attention, many designers used this idea to deign a banner on which they sell a 10x10 pixel area. Like the original concept, this banner design had its impact. Advertisers are investing money on these ad spaces while at the same time visitors are curious enough time after time looking at those unorganized pixel banners to click on them.

What about the next trends

What the next trends of banner design will be is something that probably no one can accurately predict. It’s up to some web designer to come up with a new concept that proves to be efficient. There is no doubt that in the future we will see new ways of designing banners, especially when more and more advertising budgets are being spent on the internet instead of commercial TV and other types of advertising media. I guess we will just need to be patient.

Source : http://articles.webdesigners123.com/banner-design-success-techniques.php

Annoying Website Design

2010-09-09T04:51:00.000-07:00

Have you ever considered that your website may be annoying? When it’s comes to website design, knowing what visitors hate most is a must, unless you don’t want them to visit you again. This article describes what you should exclude from your website. If you know about an annoying website, feel free to send this article to its webmaster.

A few weeks ago I received an email from a colleague asking me to check one of the website he had developed. He is a web designer and his client wanted a nice attractive flash header. The flash header was great. You can’t miss it at all. Some nice graphics elements were flying in while sound effects created just the right atmosphere. However, after starting to explore the website, the header became very annoying because every time you clicked on the website the header restarted. What was pleasant initially became very annoying very quickly, disturbing your concentration and making it difficult to read what was on the page.

He is not the first to create what I like to call – "annoying website design". Many webmasters, especially new webmasters are totally “in love” with their ideas and tend to go overboard with their design in one way or another. It’s nice to have an attractive header, but is it really necessary to assault the visitor’s mind with it? In my opinion, absolutely not!

Webmasters sometimes forget that their website design should send a message to the visitor that should reflect the website topic and not the programmer’s skill level.

Is Your Website Design Annoying?

Well…. It’s not that hard to be annoying. However, some webmasters are much better than others at annoying their visitors. Check my top 5 list and decide for yourself whether you have been annoying your visitors.

Background music – Unless you are operating an online internet radio station or sell music CDs, why play a midi/wav file in the background continuously on every page?

Huge font size – If you are designing a website for people with a disability then you are doing the right thing, but if not then you are shouting. People don’t like it when someone shouts at them.

Small font size – Do you want to be heard? Keep a normal tone, don’t shout but "speak" in a reasonable volume.

Overlapping layers – Layers can be very useful up to the point. But not when they are being used to put an annoying message in the visitor’s face. Don’t try to force your visitor to read your messages. Try persuasion instead of brute force.

Popup windows – Even though popup windows are now blocked by many add on tools, webmasters keep using them. The annoying part of popups is sometimes we actually miss important information because of those anti popup tools. Haven't you heard the old phrase "if you can’t beat him, join him”? Don’t use pop up windows. Put your important messages in a central place on your website.

Most likely each one of us has our own private top five lists. You probably have many more annoying design cases in mind. Well, you’re right, the list is much longer then that. I just wanted to describe some of the highlights in order to bring this important subject your attention.

Some of you are probably reading those lines and smiling while some others have a feeling a deja-vu. Keep in your mind that as a webmaster the last thing you want to do is put lots of effort into your website and then find out that your visitors hate it. It's not a matter of taste, it's more about being the same polite person we all try to be when we go to a party.

I tried to point out a few things that might be useful to some web designers and webmasters. I don’t know about you, but I’m going to send this article to my friend, hopefully he’ll send it to his client :)

Source : http://articles.webdesigners123.com/annoying-website-design.php

How to find a good freelancer ?

2010-09-09T03:56:00.001-07:00

Whether you currently deal with a freelancer website, or are just looking for the best place to find a freelancer, the biggest problem you face is how to find a good reliable freelance, one that will do the job properly with good quality work and finish it on time.

Many sites offer you, the webmaster, a place to post your projects to be bid on by freelancers. All of these sites let you contact offshore workers that live in countries where wages are only a fraction of what they are in the more industrialized nations. This allows you to keep your project budget low and save money by keeping your full-time staff small.

So, how can you find this “diamond in the rough”? You know, that reliable individual who delivers quality work on time and within agreed upon budget? There is no simple answer. The best you can do is using the tools provided by the freelance website to try and minimize your risk.

Unfortunately, most of the existing freelance websites use a very poor rating system that only allows a webmaster to rate a freelancer on a scale from 1-10. This system doesn’t take any of the more important variables into account, such as the complexity of the project.

The complexity of a project is important. A freelancer doing many simple and inexpensive jobs may have an excellent rating and do very good work for that kind of project. But, there is no guarantee they can handle a more complex project. Since the more complex projects cost more to get done, at least one freelance website has developed a rating system that takes complexity into consideration by using the dollar amount of the project as part of the rating formula to provide the webmaster with additional information. Thereby, hoping to make the webmaster’s decision a little easier.

Here are a couple of additional suggestions for hiring a freelancer:

Do Not Post a Budget !!!

“Why not?” you ask. If you post a budget, most freelancers will bid based on the budget amount. Unfortunately, a reasonable cost in one part of the world is insanely high or ridiculously low in another part of the world.

For example, you want someone to create a logo for you. Any decent graphic artist should be able to do that. So, it probably is safe to go with the lowest bidder. But, suppose you need a sales letter written for an Australian audience, do you really think someone is Eastern Europe or China will be able to do as good a job as a native Australian? Probably not, but, the cost of living is a lot higher in Australia and that individual would need to charge more for the same amount of work.

Do Not Hire Outside of Your Expertise.

But, you say, “If I was an expert, I wouldn’t need to hire someone else!” While that may be true, you do need to be sufficiently familiar with the area of work to be able to accurately describe the project, to know what and isn’t technically possible and know whether the bids you receive are reasonable for the amount of work involved.

If Necessary, get advice from someone who does know the area of work. Most sites provide a message board for you to negotiate with the bidders anonymously before you select one of them for the project. Pay careful attention the freelancer’s reaction to the project. The ideal candidate is one who loves his work. Ask them to describe similar projects they have done in the past or to provide samples of their work if feasible. Graphic artists, web designers and writers will be able to provide samples. Programmers and some others may not be able to provide samples but they may be able to provide references if they haven’t already been rated by other webmasters.

Following the steps above and keeping the lines of communication open will dramatically increase your chances of having a successful experience with your chosen freelancer. It can save you both time and money as well as help you manage your business in the most effective manner. After all, you face all of the same challenges in dealing with freelancers as you face in dealing with any employee, plus the additional challenges created by being in different geographic locations.

Good luck.

source : http://articles.webdesigners123.com/how_to_find_good_freelancer.php

Embed Audio and Video in HTML 5 Pages

2010-09-08T05:18:00.000-07:00

In Lesson 1 and Lesson 2 of our HTML 5 tutorial, we looked at some new structural tags you can use to help eliminate the “div-soup” of HTML 4.x layouts, as well as some other semantic tags to help give your pages easy-to-parse dates, metadata and captioned images.

Now it’s time to take a look at what might be the most-hyped part of the HTML 5 specification — the audio and video tags.

Contents
Video’s a tough nut to crack
Using the <video> tag
Using the <audio> tag
Conclusion

Video’s a tough nut to crack
Currently, the only way to reliably embed video on a web page so that all users can see it regardless of browser or operating system, is with Flash. This requires the Adobe Flash plugin and a combination of the <object>and <embed> tags.

Most users have the Flash plugin installed already (actually, something like 95% of web-connected users have some version of it), but proponents of HTML 5 are pushing for an open video standard that doesn’t require any plugins. That’s the idea behind the new <video> tag in HTML 5 — it provides a way to embed (and interact with) video without the need for a proprietary plugin like Flash.

Unfortunately, video isn’t that simple. Not only does the browser need to understand the <video> tag, it also needs to have the necessary codec to play the video. The obvious solution would be for the authors of the HTML 5 specification to pick a video codec and mandate that every browser maker implements it.

That was the idea that was proposed, anyway. It’s also the point when the fur started flying. The debate over various codecs is rather complex (we covered it on the Webmonkey blog, and our sister site Ars Technica has a nice in-depth look at the debate), but the short story is that browser makers couldn’t agree on a video codec. Apple doesn’t like the proposed Ogg Theora codec and Opera and Mozilla don’t want to pay the license fees necessary to ship their browser with the H.264 codec. Google is implementing both, and Microsoft stayed largely out of the fray since it currently has no plans to implement the HTML 5 video element at all.

Faced with a standoff among the browser makers, HTML 5’s benevolent dictator, Ian Hickson, effectively threw up his hands and said “screw it” — so now there’s no specific video codec named or mandated in the HTML 5 spec.

Does that mean the video tag is useless? No, it just means that widespread adoption of a video codec is still a ways off.

In the meantime, let’s take a look at how you would use the video tag, and how you can use it today with some fallback code for the browsers that can’t handle it.

Using the <video> tag
Lest you think what we’re about to wade through is ultimately an exercise in futility, if there is no agreed upon standard, consider this: Google is chomping at the bit to use the video tag for YouTube.

In fact, there’s already a mockup of what YouTube would look like using only HTML 5. While the company hasn’t announced a timeline to convert YouTube to use the HTML 5 <video> tag, you can bet that when they do, a sizable chunk of the web will follow suit.

So how does video work? Well, are you ready? Here’s the code to embed a video in HTML

5:<video src="/myvideo.mp4"></video>

Pretty simple right?

Well, ideally you would do something more like this (which is what the aforementioned YouTube demo does):

view sourceprint?
1 <video width="640" height="360" src="/demo/google_main.mp4?2" autobuffer>
2
3 <div class="fallback">
4
5 <p>You must have an HTML5 capable browser.</p>
6
7 </div>
8
9</video>

There are also a number of useful attributes for the <video> tag, including auto-play controls, a “poster” attribute that points to an image file to display before the video is loaded and a boolean attribute for play/pause controls. The full list of video tag attributes can be found on the W3C schools site.

The <video> tag also has a whole host of events you can hook into with JavaScript, allowing you to play movies inside movies and set up complex user interactions via mouse and keyboard events. Here’s an example that uses the video tag in conjunction with the Canvas tag and Web Workers (we’ll cover those in the future) to create a motion tracking system for web video.

Since not every browser can play MP4 videos, and since very few of them understand the video tag, what should you do today?

The unfortunate answer is that you’ll need to point to multiple videos. Hardly ideal, but if you want to push the HTML boundaries, you can embed your video using the <video> tag for browsers that support HTML 5 and fallback on Flash for those that don’t.

Something like this would do the trick:

01 <video src="video.mp4" controls>
02
03 <object data="player.swf" type="application/x-shockwave-flash">
04
05 <param value="player.swf" name="movie"/>
06
07 ...etc...
08
09 </object>
10
11 </video>

Obviously, all we’ve really done is wrap the same old <object> and <embed> tags with the new <video> tag — hardly a great leap for the web.

How about we get rid of the fallback code, keep our HTML limited to the video tag and use a little JavaScript to handle the Flash embedding behind the scenes?

Drupal developer Henrik Sjokvist has an example of how to do just that using the following HTML 5 code:

1 <video controls>
2
3 <source src="video.m4v" type="video/mp4" /> 
4
5 <source src="video.ogg" type="video/ogg" /> 
6
7
8
9 </video>

Sjokvist’s Flash solution requires a little JavaScript to sniff out the browsers capabilities and then offer Flash if the browser can’t understand HTML5 (note that the code uses the swfobject library to handle the actual embed). We prefer this method since it keeps the actual HTML code cleaner and when video tag support is ubiquitous, all you need to do is drop the JavaScript. There’s no requirement to rewrite your actual pages.

Another possible solution would be to simply load the MP4 movie into a Flash container file. As of Flash Player 10, Flash supports dynamically loaded MP4 files, so all you would need is to use Sjokvist’s JavaScript detection code, but rather than feeding your player SWF a separate .flv video file, you could just load the same MP4 file.

If you need a refresher course on how to dynamically load videos into a Flash file, check out this Stack Overflow page which has a quick overview and some basic sample code.

Using that scenario, you’ve got a solution where every visitor can see your video and you only need to offer two actual files: Ogg Theora for Firefox and other browsers which support it, and an MP4 for everyone else.

Using the <audio> tag
The audio tag is more or less a duplicate of the video tag. The same codec limitations apply — Mozilla only supports Ogg Vorbis files, while Safari can handle pretty much anything QuickTime can.

The code looks very similar to <video>:

1 <audio src="/music/myaudio.ogg" autoplay>
2
3Sorry, your browser does not support the <audio> element.
4
5

</audio>

And as with the <video> tag, the same Flash-based workarounds would give you near universal support for today’s crop of browsers.

Conclusion
As you can see, the audio and video landscape in HTML 5 has some issues — namely the inability for browser makers to come to any sort of codec consensus. But bear in mind that the good old <img> tag also lacks a specific format mandate and we’ve managed to make that work over time.

Source : http://www.webmonkey.com/2010/02/embed_audio_and_video_in_html_5_pages/#Video.27s_a_tough_nut_to_crack

How To Use HTML Meta Tags

2010-09-05T23:19:00.000-07:00

Want to get a top ranking in search engines? No problem! All you need to do is add a few magical "meta tags" to your web pages, and you'll skyrocket to the top of the listings.

If only it were so easy. Let's make it clear:

* Meta tags are not a magic solution.
* Meta tags are not a magic solution.
* Meta tags are not a magic solution.

Meta tags have never been a guaranteed way to gain a top ranking on crawler-based search engines. Today, the most valuable feature they offer the web site owner is the ability to control to some degree how their web pages are described by some search engines. They also offer the ability to prevent pages from being indexed at all. This page explores these and other meta tag-related features in more depth.

Meta Tag Overview

What are meta tags? They are information inserted into the "head" area of your web pages. Other than the title tag (explained below), information in the head area of your web pages is not seen by those viewing your pages in browsers. Instead, meta information in this area is used to communicate information that a human visitor may not be concerned with. Meta tags, for example, can tell a browser what "character set" to use or whether a web page has self-rated itself in terms of adult content.

Let's see two common types of meta tags, then we'll discuss exactly how they are used in more depth:

In the example above, you can see the beginning of the page's "head" area as noted by the <HEAD> tag -- it ends at the portion shown as </HEAD>.

Meta tags go in between the "opening" and "closing" HEAD tags. Shown in the example is a TITLE tag, then a META DESCRIPTION tag, then a META KEYWORDS tag. Let's talk about what these do.

The Title Tag

The HTML title tag isn't really a meta tag, but it's worth discussing in relation to them. Whatever text you place in the title tag (between the <TITLE> and </TITLE> portions as shown in the example) will appear in the reverse bar of someone's browser when they view the web page. For instance, within the title tag of this page that you are reading is this text:

How To Use HTML Meta Tags

If you look at the reverse bar in your browser, then you should see that text being used, similar to this:

Some browsers also supplement whatever you put in the title tag by adding their own name, as you can see Microsoft's Internet Explorer doing in the picture above.

The title tag is also used as the words to describe your page when someone adds it to their "Favorites" or "Bookmarks" lists. For instance, if you added this page to your Favorites in Internet Explorer, it would show up like this:

How did that little Search Engine Watch logo also show up? Everyone always asks. The article below provides more help:

Creating Your Own Favicon.ico Icon For IE5
Web Developer's Journal, March 7, 2000
http://www.webdevelopersjournal.com/articles/favicon.html

But what about search engines! The title tag is crucial for them. The text you use in the title tag is one of the most important factors in how a search engine may decide to rank your web page (see the Search Engine Placement Tips section for more details). In addition, all major crawlers will use the text of your title tag as the text they use for the title of your page in your listings.

For example, this is how Teoma lists the page you are reading:

You can see that the text "How To Use HTML Meta Tags" is used as the hyperlinked title of this page's listed in Teoma's results.

In review, think about the key terms you'd like your page to be found for in crawler-based search engines, then incorporate those terms into your title tag in a short, descriptive fashion. That text will then be used as your title in crawler-based search engines, as well as the title in bookmarks and in browser reverse bars.
The Meta Description Tag

The meta description tag allows you to influence the description of your page in the crawlers that support the tag (these are listed on the Search Engine Features page).

Look back at the example of a meta tag. See the first meta tag shown, the one that says "name=description"? That's the meta description tag. The text you want to be shown as your description goes between the quotation marks after the "content=" portion of the tag (generally, 200 to 250 characters may be indexed, though only a smaller portion of this amount may be displayed).

For this page you are reading, I would like it described in a search engine's listings like this:

This tutorial explains how to use HTML meta tags, with links
to meta tag generators and builders. From SearchEngineWatch.com,
a guide to search engine submission and registration.

Will this happen? Not with every search engine. For example, Google ignores the meta description tag and instead will automatically generate its own description for this page. Others may support it partially. For instance, let's see again how this page is listed in Teoma:

You can see that the first portion of the page's description comes from the meta description tag, then there's an ellipse (.), and the remaining portion is drawn from the body copy of the page itself.

In review, it is worthwhile to use the meta description tag for your pages, because it gives you some degree of control with various crawlers. An easy way to do this often is to take the first sentence or two of body copy from your web page and use that for the meta description content.
The Meta Keywords Tag

The meta keywords tag allows you to provide additional text for crawler-based search engines to index along with your body copy. How does this help you? Well, for most major crawlers, it doesn't. That's because most crawlers now ignore the tag. The few supporting it can be found on the Search Engine Features page).

The meta keywords tag is sometimes useful as a way to reinforce the terms you think a page is important for ON THE FEW CRAWLERS THAT SUPPORT IT. For instance, if you had a page about stamp collecting -- AND you say the words stamp collecting at various places in your body copy -- then mentioning the words "stamp collecting" in the meta keywords tag MIGHT help boost your page a bit higher for those words.

Remember, if you don't use the words "stamp collecting" on the page at all, then just adding them to the meta keywords tag is extremely unlikely to help the page do well for the term. The text in the meta keywords tag, FOR THE FEW CRAWLERS THAT SUPPORT IT, works in conjunction with the text in your body copy.

The meta keyword tag is also sometimes useful as a way to help your page come up for synonyms or unusual words that don't appear on the page itself. For instance, let's say you had a page all about the "Penny Black" stamp. You never actually say the word "collecting" on this page. By having the word in your meta keywords tag, then you may help increase the odds of coming up if someone searched for "penny black stamp collecting." Of course you would greater increase the odds if you just used the word "collecting" in the body copy of the page itself.

Here's another example. Let's say you have a page about horseback riding, and you've written your page using "horseback" as a single word. You realize that some people may instead search for "horse back riding," with "horse back" in their searches being two separate words. If you listed these words separately in your meta keywords tag, THEN MAYBE FOR THE FEW CRAWLERS THAT SUPPORT IT, your page might rank better for "horse back" riding. Sadly, the best way to ensure this would be to write your pages using both "horseback riding" and "horse back riding" in the text -- or perhaps on some of your pages, use the single word version and on others, the two word version.

I'm using all these capital letters on purpose. Far too many people new to search engine optimization obsess with the meta keywords tag. FEW crawlers support it. For those that do, it MIGHT! MAYBE! PERHAPS! POSSIBLY! BUT WITH NO GUARANTEE! help improve the ranking of your page. It also may very well do nothing for your page at all. In fact, repeat a particular word too often in a meta keywords tag and you could actually harm your page's chances of ranking well. Because of this, I strongly suggest that those new to search engine optimization not even worry about the tag at all.

Even those who are experienced in search engine optimization may decide it is no longer worth using the tags. Search Engine Watch doesn't. Any meta keywords tags you find in the site were written in the past, when the keywords tag was more important. There's no harm in leaving up existing tags you may have written, but going forward, writing new tags probably isn't worth the trouble. The articles below explore this in more detail:

Death Of A Meta Tag
The Search Engine Report, Oct. 1, 2002

Meta Tags Revisited
The Search Engine Report, Dec. 5, 2002

Still want to use the meta keywords tag? OK. Look back at the opening example. See the second meta tag shown, the one that says "name=keywords"? That's the meta keywords tag. The keywords you want associated with your page go between the quotation marks after the "content=" portion of the tag.

Inktomi says that you should include up to 25 words or phrases, with each word or phrase separated by commas. More advice from Inktomi can be found on its Content Policy FAQ.

FYI, in the past, when the tag was supported by other search engines, they generally indexed up to 1,000 characters of text and commas were not required.
Meta Robots Tag

One other meta tag worth mentioning is the robots tag. This lets you specify that a particular page should NOT be indexed by a search engine. To keep spiders out, simply add this text between your head tags on each page you don't want indexed. The format is shown below (click on the picture if you want to copy and past the HTML for your own use):

You do NOT need to use variations of the meta robots tag to help your pages get indexed. They are unnecessary. By default, a crawler will try to index all your web pages and will try to follow links from one page to another.

Most major search engines support the meta robots tag. However, the robots.txt convention of blocking indexing is more efficient, as you don't need to add tags to each and every page. See the Search Engines Features page for more about the robots.txt file. If you use do a robots.txt file to block indexing, there is no need to also use meta robots tags.

The meta robots tag also has some extensions offered by particular search engines to prevent indexing of multimedia content. The article below talks about this in more depth and provides some links to help files. Search Engine Watch members should follow the link from the article to the members-only edition for extended help on the subject.

Image Search Faces Renewed Legal Challenge
The Search Engine Report, August 22, 2001

Other Meta Tags

There are many other meta tags that exist beyond those explored in this article. For example, if you were to view the source code of this web page, you would find "author," "channel" and "date" meta tags. These mean nothing to web-wide crawlers such as Google. They are specifically for an internal search engine used by Search Engine Watch to index its own content.

There are also "Dublin Core" meta tags. The intent is that these can be used for both "internal" search engines and web-wide ones. However, no major web-wide search engine supports these tags. More about them can be found below:

* Dublin Core Metadata Initiative
* Dublin Core - Tagging the Web for better search and retrieval
WebReference.com, Nov. 5, 2000

How about the meta revisit tag? This tag is not recognized by the major search engines as a method of telling them how often to automatically return. They have never supported it.
In Conclusion

Overall, just remember this. Of all the meta tags you may see out there:

* Meta Robots: This tag enjoys full support, but you only need it if you DO NOT want your pages indexed.

* Meta Description: This tag enjoys much support, and it is well worth using.

* Meta Keywords: This tag is only supported by some major crawlers and probably isn't worth the time to implement.

* Meta Everything Else: Any other meta tag you see is ignored by the major crawlers, though they may be used by specialized search engines.

More Resources

At the bottom of this page are more resources about meta tags, including tutorials and meta tag building applications. But first.

If you've been following the "Next" buttons to read the numbered sections of the Search Engine Submission Tips guide in order, you've now reached the last page. Congratulations!

There's still more information you might find helpful, however. Please review the rest of the articles on the SEM Basics section for additional assistance with search engine marketing issues.

In addition, do consider becoming a Search Engine Watch member, for access to even more information on search engine marketing issues.

Now, here are those additional meta tag resources and articles.

For Website Designing and Development
Web Development hyderabad
eMail : varadesigns@yahoo.com
phone : +91 9676739333

Source : http://searchenginewatch.com/2167931

How to Draw with HTML 5 Canvas

2010-09-02T23:10:00.000-07:00

Among the set of goodies in the HTML 5 specification is Canvas which is a way to programmatically draw using JavaScript.

We’ll explore the ins and outs of Canvas in this article, demonstrating what is possible with examples and links.

Why Do You Need Canvas?
Canvas can be used to represent something visually in your browser. For example:

» Simple diagrams
» Fancy user interfaces
» Animations
» Charts and graphs
» Embedded drawing applications
» Working around CSS limitations

In basic terms it’s a very simple pixel-based drawing API, but used in the right way it can be the building block for some clever stuff.

What Tools Are at Your disposal?

Drawing tools

» Rectangles
» Arcs
» Paths and line drawing
» Bezier and quadratic curves
» Effects

Fills and strokes

» Shadows
» Linear and radial gradients
» Alpha transparency
» Compositing
» Transformations

» Scaling
» Rotation
» Translation
» Transformation matrix

Getting data in and out

» Loading external images by URL, other canvases or data URI
» Retrieving a PNG representation of the current canvas as a data URI

The excellent Canvas cheat sheet is a great reference of the commands available.

Getting Started

To use Canvas, you’ll need two things

» A Canvas tag in the HTML to place the drawing canvas
» JavaScript to do the drawing

The Canvas tag is basically an img tag without any data. You specify a width and a height for the drawing area. Instead of an alt attribute, you can enclose HTML within the canvas tag itself for alternative content.

Example of a Canvas tag:

<canvas id="myDrawing" width="200" height="200">
<p>Your browser doesn't support canvas.</p>
</canvas>

With a Canvas element in the HTML, we’ll add the JavaScript. We need to reference the Canvas element, check the browser is Canvas-compatible and create a drawing context:

var drawingCanvas = document.getElementById('myDrawing');

// Check the element is in the DOM and the browser supports canvas
if(drawingCanvas.getContext) {
// Initaliase a 2-dimensional drawing context
var context = drawingCanvas.getContext('2d');

//Canvas commands go here

}

Checking for the getContext() method on a canvas DOM object is the standard way of determining canvas compatibility.

The context variable now references a Canvas context and can be drawn on.

Basic Drawing
So, let’s get started with an example to demonstrate the basics. We’re going to draw a smiley face, similar to the one on the Acid2 reference rendering.

If we think about the face as a set of basic shapes, we have:

1. A circle, with a black stroke and yellow fill for the face.
2 circles with a black stroke and white fill and with an inner circle of filled green for the eyes.
3. A curve for the smile.
4. A diamond for the nose.

Let’s start by creating the round face:

// Create the yellow face
context.strokeStyle = "#000000";
context.fillStyle = "#FFFF00";
context.beginPath();
context.arc(100,100,50,0,Math.PI*2,true);
context.closePath();
context.stroke();
context.fill();

You can see from the above that we start by defining some colours for the stroke and fill, then we create a circle (an arc with a radius of 50 and rotated through the angles of 0 to 2*Pi radians). Finally, we apply the stroke and fill that has been defined previously.

This process of setting styles, drawing to co-ordinates and dimensions and finally applying a fill or stroke is at the heart of Canvas drawing. When we add the other face elements in, we get:

Download the full source code of the smiley face example

Effects and Transformations

Let’s see how we can manipulate an existing image in canvas. We can load external images using the drawImage() method:

context.drawImage(imgObj, XPos, YPos, Width, Height);

Here’s the image we’re going to play with:

We’re going to give the image a red frame. For this we’ll use a rectangle and fill it with a radial gradient to give it a bit of texture.

//Create a radial gradient.
var gradient = context.createRadialGradient(90,63,30,90,63,90);
gradient.addColorStop(0, '#FF0000');
gradient.addColorStop(1, '#660000');

//Create radial gradient box for picture frame;
context.fillStyle = gradient;
context.fillRect(15,0,160,140);

//Load the image object in JS, then apply to canvas onload
var myImage = new Image();
myImage.onload = function() {
context.drawImage(myImage, 30, 15, 130, 110);
}
myImage.src = "cocktail.jpg";

To make our portrait look like it’s hung on a wall, we’ll add a drop shadow and rotate the image slightly so it looks at a slight angle.

A drop shadow will need to be applied to the frame.

//Create a drop shadow
context.shadowOffsetX = 10;
context.shadowOffsetY = 10;
context.shadowBlur = 10;
context.shadowColor = "black";

Download the full source code of the portrait example

To rotate the canvas, we use the rotate() method which takes a value in radians to rotate the canvas by. This only applies rotation to subsequent drawing to the canvas, so make sure you’ve put this in the right place in your code.

//Rotate picture
context.rotate(0.05);

This is what the finished frame looks like:

Download the full source code of the portrait example

Source : http://thinkvitamin.com/dev/html-5-dev/how-to-draw-with-html-5-canvas/

For Website Designing and Development
Web designer Hyderabad
eMail : varadesigns@yahoo.com
phone : +91 9676739333

Absolute Positioning Inside Relative Positioning

2010-08-31T22:56:00.000-07:00

For Website Designing and Development
Web designer Hyderabad
eMail : varadesigns@yahoo.com
phone : +91 9676739333

A page element with relative positioning gives you the control to absolutely position children elements inside of it.

To some, this is obvious. To others, this may be one of those CSS “Ah-ha!” Moments. I remember it being a big deal for me when I first “got it”.

Here is a visual:

The relative positioning on the parent is the big deal here. Look what would happen if you forgot that:

Might not look like a big deal in this small example, but it really is a significant change. What is happening is the absolutely positioned elements are positioning themselves in relation to the body element instead of their direct parent. So if the browser window grows, that one in the bottom left is going to stick with the browser window, not hang back inside like his well behaved brother from the first image.

Once you “wrap” your head around this concept (rim-shot) you will find little uses for it all over the place, and start noticing examples of other places using it. It’s like when you learn a new word and then you start hearing it everywhere. Yeah.

Source : http://css-tricks.com/absolute-positioning-inside-relative-positioning/

Six points: how to turn more of your website visitors into customers

2010-08-25T05:38:00.000-07:00

For Website Designing and Development
Web designer Hyderabad
eMail : varadesigns@yahoo.com
phone : +91 9676739333

Your website will only cost you money if your website visitors don't become customers of your company. For that reason, it is important that you get the basics right.

conversion optimization

Check the following six points to find out if your website turns enough visitors into customers:

1. What is your website about and what's in it for the visitor?

You have only a few seconds to keep a visitor on your page. If the visitor is not convinced within seconds that your site is worth reading, he'll go away.

Clearly tell your website visitors which problem your product solves and why your solution is better than other solutions. This piece of information should be presented as prominently as possible.

2. Is your website trustworthy?

Tell your visitors who you are and don't hide your address. If possible, show customer testimonials. Show your website visitors that you are a real company and that you can be trusted.

Are you a member of an industry organization? Has your company received awards? Tell your website visitors!

3. Does your website look professional?

Another way to create trust is to use a professional website design. Avoid clutter and extreme colors. Use a clear design that makes it easy to read your web pages.

If your website displays ads, consider if they distract your website visitors too much from the real content. Your website visitors might also wonder why your site shows ads for other companies.

4. Make it as easy as possible for your website visitors

Tell your website visitors what you want them to do: "Download the free demo", "Create a free account", "Download the free white paper", "Subscribe to our newsletter", etc.

Focus on a single task. Don't ask the customer to subscribe to your newsletter or to download the demo or to request more information. Focus on a single task and tell the visitor in great detail why it would be good for the customer to complete that task. Of course, you can use different tasks on different pages of your site.

Add user instructions to every task. The less your website visitors have to think about how to complete the task, the better.

5. Make it a risk-free experience for your customers

Emphasize your respect of privacy and remove unnecessary fields from your sign-up forms. Avoid registration forms or make the forms as short as possible. The more fields a form has, the less people will fill it out.

Offer money back guarantees and other guarantees that show your website visitors that it is risk-free to complete a task on your website. Always deliver on your promises!

6. Give search engines what they want while pleasing your website visitors

The title and the major tag line on your web page should contain the main selling proposition of your website and one or two good keywords.

When a searches sees your website in the search results, the title will show the searcher that the he has found a good match. The content on your web page should confirm and clarify this with more detail.

For Website Designing and Development
Web Development hyderabad
eMail : varadesigns@yahoo.com
phone : +91 9676739333

Combining Web Design Business With Web Hosting Can Generate More Income For Web Designers

2010-08-23T06:11:00.001-07:00

For Website Designing and Development
web designing in Hyderabad
eMail : varadesigns@yahoo.com
phone : +91 9676739333

Web designers and developers are the foundation of the Internet. If you are skilled in web design or web development you can make a growing income on the Internet. The secret to making money with your web design and development skills is to include web hosting in your web design or web development quotes or standard packages.

You can add $50 a month to your income, hosting your client sites with more ease. You don't need to get a dedicated server and you don't need to worry about trying to compete with web hosting companies. What most people think is just getting a website up. They contact the web designers first, without really knowing that there are web designers and web hosts. Terms with "web designer"get more searches per day than terms with "hosting". People are looking for web designers to get their sites on the Internet.

Web designers and developers can incorporate the sale of hosting into their web development and design projects. As a web designer you can bill your customers for the hosting fees within the design and then host the account for a year or on a month to month basis. You will be surprised at how much extra income you can generate from your web design customers.

Providing hosting for your web design clients will give you greater assurance that your customers will come back to you to make changes or update their site. This allows you to keep generating income from your work and customer base. Let's look at some numbers, and how billing for hosting on top of your web design work can make you some serious money. Let's assume you get paid $500 - $1000+ for a site design. If you charge your client for hosting as well you could generate up to $50 extra per site, per month in hosting fees. You could make up to $1100 to $1600 per site, per year instead of just $500 or $1000 per site. With 100 clients this could equate to $110,000 or $160,000 per year instead of $50,000 - $100,000 per year. On top of this, remember your client is more likely to come back to you to update and maintain your site which means more money for you, for easy work.

With a little effort and focus you could generate a very healthy income in your web design business. With tools like Joomla, WordPress and other highly customizable content management systems you can make the hard work incredibly efficient so you can focus solely on the design. Right now there are a myriad of powerful web applications, content management systems and shopping carts you can quickly install in your reseller web hosting account and produce a design for very quickly. There are also a myriad of ready to run, specialist applications written in ASP, ASP.Net and PHP that you can bolt on to your customers site, customize the design for and really impress your them. With these easily installable web applications you can very quickly impress your customers and raise the value of your web design fees - and the fact that they are specialist customized web applications you have put together, your web design customer will be happy to pay your hosting fees.

For your design business you don't need anything fancy, you don't need dedicated servers or specialists billing or server management systems. You can utilize the cost efficiencies of shared hosting to maximize your profit. One way to do it and a lot of designers do this, is get a new shared hosting account for each site they design and charge the customer more than they pay.

The better way to do it and really maximize your profit is to get a reseller hosting account where you can host all your customer sites in the one hosting account. This works out much cheaper than getting a separate account for each customer site. A good reseller account will give you far more room to move and even greater cost effectiveness which means even more profit and less effort.

Getting up and running with a good reseller hosting account is easy and incredibly affordable. For just a few hundred dollars per year you can host 50 or more sites. A quick search on reseller hosting will give you plenty to choose from. In our experience Windows hosting reseller packages are a good idea as a Windows reseller hosting account will give you the freedom and choice to run ASP, ASP.Net as well as PHP sites with MySQL or SQL Server databases. Linux hosting is incredibly efficient and gives you some of the cheap hosting options available but does not support ASP or ASP.Net applications. For an extra few dollars a month you can get Windows hosting and dramatically increase your options for your web design customers from a wider array of available web applications and freely available code in ASP and ASP.Net.

With Windows hosting you can use all your favorite web design tools and you'll have the vast resources of Microsoft development products like Visual Studio at your disposal. As a reseller looking at Windows hosting accounts make sure the host offers Multiple IIS sites and not just unlimited domains. To properly host multiple sites on Windows each site needs to have it's own entry in IIS (Internet Information Server - the Windows web server). Many hosts say unlimited domains and what they really mean is running unlimited domains on one site. All you get with unlimited domains on one site, is your multiple domains show the same site or requires you to write code to detect the domain and redirect to a directory. This is not a great way to run your customer sites.

With each site having it's own entry IIS means you can have separate application settings, assign it to different application pools and maintain separate log files. This means you can have more control, more flexibility and produce a much better solution for your client. Being able to put your customer sites in separate application pools means that if one of your customer sites get's busy or some crazy bug causes a problem it will isolate it to just that site and you wont end up with all your customers screaming at you that their sites are down.

After 12 years working on the internet. Through booms, through busts, good times and bad times web designers and developers quietly rule the web. Businesses of all sizes look for web designers first and in our experience they really don't want to know too much about hosting. As a designer you can save your clients from the complexity and confusion of hosting and make money from it. To make money from hosting your client work you really don't need to leap out and set yourself up as a web hosting provider with billing systems, hosting plans and support systems and processes. Start off by hosting all your sites in one reseller hosting package and you'll be surprised at just how much extra money you can make for very little effort. The best thing of all you can keep your focus on why you became a web designer - designing web sites!

Article Source: http://EzineArticles.com/?expert=Dolson_Ifegwu

Tips for Web Design that Crosses Cultures

2010-08-18T00:43:00.000-07:00

The internet has the potential to put a global audience at your fingertips, but there’s far more to reaching across cultural divides than simply putting your website out there and waiting for people to visit it. There are issues to do with language, design and SEO that all need to be addressed before your website becomes truly accessible ‘world-wide’. Thankfully, though, there are a number of simple tricks you can apply that will make it all a less daunting process.

For Website Designing and Development
Web design services hyderabad
eMail : varadesigns@yahoo.com
phone : +91 9676739333

Translate your content

This is perhaps the most obvious but also the most important tip. English is arguably the most commonly used language internationally, but it still serves as a native tongue for only about 20% of the world’s population. Clearly, an English-only website will be inaccessible to a huge percentage of your potential online audience of 1.8 billion people.

There are various ways to translate your content and the method you choose may reflect budget and time constraints. The easiest way is to add a translation widget such as Google Translate or Babelfish to your site, allowing visitors to translate text to the language of their choice. Remember that any text embedded in Flash files won’t be translated – which is (yet another) a good argument against using too much Flash.

If you’re confident in using inline functions, you can build inline translation code into the site using Ajax, in connection with geolocation, to facilitate a smooth immersive translation process that directs the visitor to the correct language version, as determined by where their ISP is hosted.

If you do use machine translation, try to make your original content as simple and direct as possible and avoid specific cultural references, as these will invariably not translate well.

If budget allows, having your copy professionally translated is the optimum choice. Using a native speaker from the target market will ensure that meaning and nuances will carry over to your translated site and any linguistic or cultural mistakes can be avoided.

Use horizontal navigation bars

Not all languages read from left to right like English. Scripts such as Arabic and Hebrew read from right to left. While CSS makes it easy to flip a vertical navigation bar (which would normally be located on the left-hand side for a left-to-right language) and script direction from one side to the other, using a horizontal bar located across the top of the page will add a sense of continuity and cohesive design to localized versions of your site.

Use Unicode UTF-8

Unicode UTF-8 is the ideal character encoding tool. Compatible with over 90 different written languages or scripts, it’s also supported by all the major browsers. Even if you see no need for a localized site in Arabic or Simplified Chinese right now, using UTF-8 will give you the flexibility to create one in the future and it also incorporates all the additional characters from extended Latin alphabets (such as the German Ä, Ö, Ü and ß).

Bear in mind that some scripts and languages will take up more space than others to convey the same information and this may affect your page design.

Use appropriate colours

The use of colours can enhance a site’s visual appeal and help convey a theme or emotion, but some colours have different connotations in different cultures. White, for example, can signify marriage in the west but is associated with death and mourning in much of the east.

Tailor your design to the market

Some cultures (such as Japan and China) can be defined as ‘high context’ cultures. These cultures have a tendency to draw information from context and situation. ‘Low context’ cultures (including Germany, Scandinavia and North America) tend to look for explicitly worded and expressed information. In terms of website design, this means that sites with a more visual and immersive feel may be better received in high context cultures and sites with concise, clear layouts and text will appeal more to low context cultures. As an example, take a look at Nokia’s clearly structured and information-heavy German site, with prices and products listed on the front page, and compare it to the more visually oriented Chinese version.

Localize your SEO

There’s little point having a beautifully designed series of websites which are accessible to a range of different cultures if nobody can find them. SEO keywords can vary tremendously from location to location so don’t just translate your keywords directly. A little research may reveal that colloquialisms, alternative terms or even misspellings are more commonly used in your new target market. Research keywords not only on the local versions of search giants like Google but also on any major local competitors such as Baidu (the leading search engine in China).

Source : http://css-tricks.com/cross-culture-design/

Expanding Images using HTML5′s contenteditable tabindex

2010-08-12T23:03:00.000-07:00

HTML5 has a new attribute, contenteditable, which can be applied to any element which allows it to be edited directly in the browser window. Think of text input with a predefined value, but it can literally be any element. Form elements like text inputs support the :focus pseudo class, which allow us to style those elements when they are clicked upon or otherwise navigated to. Giving an element the contenteditable attribute means it also now supports the :focus pseudo class, which opens up some interesting possibilities!

We’ll exploit this little trick to make an expanding image (like a lightbox without the overlay) right within some content.

UPDATE: Even better, you can give attributes a tabindex attribute, like you would a form element, which allow allows :focus without the editability. This article has been updated to go that route instead.

For Website Designing and Development
Web designing packages hyderabad
eMail : varadesigns@yahoo.com
phone : +91 9676739333

HTML5 Markup

HTML5 has nice elements for including captioned images.

Jump!

We just give the figure element tabindex, so that it can be in focus.

Give each subsequent figure a tabindex value one higher and the images will be able to be tabbed through nicely from the keyboard!
The Images

The images will be “full size”.

This means they will be scaled down for regular display on the page, and scaled up when we do our magical CSS expanding. Potentially a waste of bandwidth for the browsers that don’t support this. The tradeoff is your call.

The CSS

Normal display:

figure {
width: 120px;
float: left;
margin: 0 20px 0 0;
background: white;
border: 10px solid white;
-webkit-box-shadow: 0 3px 10px #ccc;
-moz-box-shadow: 0 3px 10px #ccc;
-webkit-transform: rotate(5deg);
-moz-transform: rotate(5deg);
-webkit-transition: all 0.7s ease;
-moz-transition: all 1s ease;
position: relative;
}

figcaption {
text-align: center;
display: block;
font-size: 12px;
font-style: italic;
}

figure img {
width: 100%; /* Scale down */
}

The :focus part of this isn’t CSS3, the but shadows, transforms, and transitions are. The hover state will rotate the image a bit, and the :focus style (when the image is clicked on), will expand it, rotate it again, and make sure it’s on top with z-index.

figure:hover {
-webkit-transform: rotate(-1deg); -moz-transform: rotate(1deg);
-webkit-box-shadow: 0 3px 10px #666; -moz-box-shadow: 0 3px 10px #666;
}

figure:focus {
outline: none;
-webkit-transform: rotate(-3deg) scale(2.5); -moz-transform: rotate(-3deg) scale(2.5);
-webkit-box-shadow: 0 3px 10px #666; -moz-box-shadow: 0 3px 10px #666;
z-index: 9999;
}

Browser Compatibility

The HTML5 contenteditable attribute is supported in Firefox 3.6+, Safari 4+, Chrome, and Opera (10.6 only tested). Note that the attribute will cascade down to all child elements. In our demo, having the image and figure caption be editable doesn’t make much sense, so we can turn it off individually on them.

Jump!

Opera respects the child elements not being editable, but still runs the spellchecker on them and will red-underline words it finds misspelled which can be a bit weird.

Our demo also relies upon transforms to “work” though, which are only supported in current WebKit browsers and Firefox 4+. Firefox 3.6 supports the transform but not the transition.

The fallback is that the images just don’t expand though, which is of course no big deal.

Source : http://css-tricks.com/expanding-images-html5/

How to Make a Mobile Compatible Website

2010-08-08T23:08:00.001-07:00

The mobile website design is the most promising platform for several consumer driven companies. The number of mobile phone users in the world is more than 2.4 billion and out of that nearly 30% of users surf the internet on a regular basis. This is the primary reason for the increasing popularity of mobile web development in fact, many people predicts that the internet browsing will be leap over the usage of the internet browsing on the desktop. A large number of WAP mobile users browse the internet on mobiles but are often faced with the difficulty of improper display and loading of the website.

For Website Designing and Development
Hyderabad web design companies
eMail : varadesigns@yahoo.com
phone : +91 9676739333

A mobile website involves special designing and development procedures. Here are some of the points that you need to bear in mind while making mobile web site.

The most primary requirement that one needs to understand is that the web browsing on the computer and the mobile phone have huge difference. Therefore, you need to design a special website so that your customers can have a better accessibility of your website on the mobile phone. For this websites must be set on W3C.

One of the things to avoid for making good mobile website design is to not use tables in the layout as this will not look good on the mobiles. CSS gives maximum compatibility there the mobile web site made on CSS layout is better.

A mobile website can be made better with the usage of XML or XHTML coding and the character encoding set being UTF-8.

Always take into consideration that the mobile phones are available in different sizes with various sizes of screens as well. Make sure that your design is such that it works on most of the screen sizes.

The maximum size of mobile website page is 20 kilobytes and therefore it is better to fit all the content including pictures in that size. This also makes it a challenge for you to include all the important information about your business and products is presented on top the page itself.

Most of all, take care that you design your website such that it is worth the money that the mobile users are spending for surfing your website.

Article Source: http://EzineArticles.com/?expert=Mark_Spenser

2010 Flex Review

2010-08-04T22:38:00.000-07:00

The 2010 Flex from the Ford group will gain a new telescopic steering wheel and more powerful engine. The 2010 Flex comes in the four-door body style and will share most of the design features with the Ford's Edge crossover sport utility vehicle.

The 2010 Ford Flex will be offered in three different trim models - base SE, top line Limited and mid-level SEL. All the models of Flex will be offered in front wheel drive. The next generation Flex will have the maximum seating capacity of 7 passengers. The 3.5 liter V-6 engine will be standard on all the Flex models tat can produce power up to 262 hp, while the Limited and SEL models will be equipped with the 3.5 liter turbocharged engine that can deliver power up to 355 hp. Both the engines will be paired with the six-speed automatic transmission.

The specific features that are expected to be provided in the 2010 Flex model include gear assist function for the transmission, steering wheel mounted shift paddles, self parking feature and electric power steering with pull drift compensation. The maximum towing capacity of the next generation model will be 450 lbs.

The features that will be provided in the 2010 Flex model include refrigerated center console, rear view camera, voice activated navigation system with weather updates and real time traffic updates and power liftgate. The other features that are expected to be provided in the 2010 Flex model include climate control, cup holders, cockpit integrated display, door locks, power mirrors and windows, grocery bag hooks in cargo area, message center with trip computer and leather shift knob.

For Website Designing and Development
web designing packages hyderabad
eMail : varadesigns@yahoo.com
phone : +91 9247457705

Article Source: http://EzineArticles.com/?expert=Geof_Ryan

Benefits of Using RIA on Websites & How to Find a Good Flex Developer

2010-08-03T02:08:00.000-07:00

This article explains - in laymen's terms - what Flex is, what it's used for, where you can see samples and how you go about getting a Rich Internet Application built in Flex to put on your website.

What is Flex?

If you visit lots of websites, it's very likely you've seen a Flex application without realizing it. They play in the regular Adobe Flash Player so you would think you're looking at a very impressive, interactive Flash application.

Adobe Flex is in fact just a framework for creating highly engaging and interactive website applications that play in the Flash Player and that work consistently on ALL major browsers, desktops and operating systems.

Recap - Flex applications:

* Are Rich Internet Applications (RIAs) that are highly engaging & interactive
* Play automatically in Adobe Flash Player installed on almost all computers
* Work consistently on ALL major browsers, operating systems and desktops

What is Flex used for?

Flex is used to build highly interactive, expressive website applications using and visualizing data.

Examples include:

* Data visualization applications that pull data from multiple back-end sources and display it in a visually attractive and impressive format
* Product configuration applications that help customers select or customize products and features online through a series of visual steps
* Self-service applications that guide customers or employees through multiple-step processes such as changing contact details online
* Data collection applications for rich online forms including data validation mechanisms, providing a dynamic user experience.

You can see some Flex samples (showcase) by following the links at the bottom of this article.

Benefits of using Flex on your website

Here are some reasons for deciding to put a Flex application on your website:

* To have a very robust application that attractively visualizes complex data sets
* To engage your users or visitors and let them feel empowered
* Flex is the technology of the future - it shows your organisation is modern
* It works on all major platforms and users don't need to install anything
* Audio and video can be integrated, allowing even greater interaction
* Data synchronization allows real-time data push from back-end to application

Developing a Flex application

Free open source Flex software is available but many serious developers like to use Adobe Flex Builder software for quick, professional development and maintenance of applications.

If you don't have a Flex development expert in your team, outsourcing to an offshore specialist Flex developer may be the solution.

How to find a good Flex developer

A good offshore Adobe Flex expert can build your professional Flex application for a fraction of the time and cost you would spend doing it yourself. Just Google "Flex outsourcing service", "expert Flex developers" or something similar to find a listing of Flex developers.

When selecting your offshore Flex developer, make sure they are specialized in Adobe Flex, check out samples of Flex applications they have built and read and understand their terms and conditions.

Some Flex developers, such as Busycode Inc, ONLY focus on Flex development so you know they are experts in Flex.

They don't even ask you to pay anything until they have started the development and you're happy with where it's going, so it's a no-risk solution if you need a Flex application.

For Website Designing and Development
Web Development in hyderabad
eMail : varadesigns@yahoo.com
phone : +91 9247457705

Source : http://ezinearticles.com/?Benefits-of-Using-RIA-on-Websites-and-How-to-Find-a-Good-Flex-Developer&id=1747896

Is Web Design Ruining Your SEO Efforts - 5 Things NOT to Do!

2010-07-27T06:15:00.000-07:00

Search Engine Optimization is often thought of as a set of tips & techniques that, if done right, can shoot up your website ranking in search results and get it to the top! This is only half-truth though.

The process of optimizing a website starts right from the time you think about building a website. Yeah... contrary to popular belief, SEO is not something that follows website launch. Rather it is what you need to base your design process on. And just like there are best practices to optimize your website, there are also other stuff that can potentially have a negative influence on your SEO efforts.

So just as much you need to do the right things, you also need to make sure you don't do the wrong things:

Here are some design elements that you absolutely must NOT apply:

Drop Down Navigation or Mouse-Over Menus

This was a rage till recent past! Drop down menus not only saves real estate on a page but is a great way to arrange the navigation elements cleanly... Not to mention the sleek drop-down boxes that add to the visual appeal! However, when it comes to search engine optimization, drop down navigation drops down the value. Search engine crawlers cant fill out forms even if there's just one pull-down. So, they cant get to those pages... least of all index the contents.

So make sure you have an alternate means of navigating those pages so that search engine crawlers can get there. You can include text links in the footer of your web pages or use image links or an image map. Also, chuck JavaScript and use AJAX or divs to get the same drop down and ensure search engine appeal at the same time.

Flash or JavaScript for Primary Navigation

Even though search engine crawlers have come off age and become smarter at indexing Flash contents, I don't think its worth the risk. If your primary navigation needs Flash, Java or JavaScript to function, that puts a big question mark on whether search engine crawlers will parse through or not. Remember, search engine crawlers have a limited ability to deal with Flash, Java and Javascript. So any links that you put there have a good enough chances of not being seen by the search spiders.

A more reliable option is to count on semantically marked up HTML. You get what you want on your navigation pathway and search engine crawlers get what they come for.

Fully Flash Website

Graphic artists and ardent designers would swear by Flash but when it comes search engine appeal, its better to mellow down your 'flashy' instincts. If you want to score well in Google SERPs, then you have to create what is called search-friendly design. And as mentioned earlier, inspite of the increasing Flash-consciousness of search engine spiders, they still have a preference for plain text.

Keep the main textual elements of the page out of Flash along with all the page titles and section headings. And if at all (despite all the red signals) you have to use Flash, make sure you have an alternate text version within div tags. Also, don't forget to use SWFObject, a standards-friendly method to embed Flash content.

Frames for Design

For one, Google clearly dissuades the use of frames as they tend to cause problems with search engines, bookmarks, emailing links etc. In fact, it can be a nightmare to scroll through a website that has frames. Since part of the page moves while others stay stationary, it gets pretty difficult to follow where to read and where to scroll. Moreover, not all browsers support frames so you can lose a considerable amount of audience. Worse of all frames create additional maintenance and server load.

So... really.. You are better off without it!

Pop Up Boxes

Pop-ups rely on JavaScript! And this is a roadblock for search engine crawlers just hate. Not only does the content within pop-ups not get indexed but they are a nuisance for website visitors. No wonder most people have installed pop-up blockers. And in case you dint know, Google toolbar and Yahoo Companion toolbar have built-in pop-up blockers

Article Source: http://EzineArticles.com/?expert=Kabir_Bedi

HTML Declaration

2010-07-26T00:28:00.000-07:00

Definition and Usage

The doctype declaration should be the very first thing in an HTML document, before the <html> tag.

The doctype declaration is not an HTML tag; it is an instruction to the web browser about what version of the markup language the page is written in.

The doctype declaration refers to a Document Type Definition (DTD). The DTD specifies the rules for the markup language, so that the browsers can render the content correctly.

HTML/XHTML Elements and Valid DTDs

Doctypes Available in the W3C Recommendations
HTML 4.01 Strict

This DTD contains all HTML elements and attributes, but does NOT INCLUDE presentational or deprecated elements (like font). Framesets are not allowed.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

HTML 4.01 Transitional

This DTD contains all HTML elements and attributes, INCLUDING presentational and deprecated elements (like font). Framesets are not allowed.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

HTML 4.01 Frameset

This DTD is equal to HTML 4.01 Transitional, but allows the use of frameset content.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

----------------------------------

XHTML 1.0 Strict

This DTD contains all HTML elements and attributes, but does NOT INCLUDE presentational or deprecated elements (like font). Framesets are not allowed. The markup must also be written as well-formed XML.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

XHTML 1.0 Transitional

This DTD contains all HTML elements and attributes, INCLUDING presentational and deprecated elements (like font). Framesets are not allowed. The markup must also be written as well-formed XML.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

XHTML 1.0 Frameset

This DTD is equal to XHTML 1.0 Transitional, but allows the use of frameset content.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

-----------------------------------

XHTML 1.1

This DTD is equal to XHTML 1.0 Strict, but allows you to add modules (for example to provide ruby support for East-Asian languages).

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"<

Source : http://www.w3schools.com

What Beautiful HTML Code Looks Like

2010-07-26T00:18:00.000-07:00

I originally wrote this over two years ago. It was getting a little long in the tooth, especially now that HTML5 has come along and made HTML far more beautiful than even XHTML 1.1 was. So I updated it!

I can’t help but view source on every nice looking website I see. It’s like if you had x-ray glasses that allowed you to see any person you ever saw in their underwear at will. How could you not? It’s just so tempting to see if a beautiful website is built with beautiful code as well, or if its beauty if only skin-deep. Code? Beautiful? Sure. After all, Code is Poetry. This is just HTML, so it can’t be quite as intricate and elegant as a dynamic language, but it still bears the brush strokes of its creator.

It gets me to thinking, what makes beautiful code? In HTML, it comes down to craftsmanship. Let’s take a look at some markup written they way markup should be written and see how beautiful it can be.

It’s big enough to print out and tape up inside your locker to impress your friends. Well, it might be a bit of an awkward size. I’ll make the PSD available in case you want to alter it.

* HTML5 – HTML5 and it’s new elements make for the most beautiful HTML yet.
* DOCTYPE – HTML5 has the best DOCTYPE ever
* Indentation – Code is indented to show parent/child relationships and emphasize hierarchy.
* Charset – Declared as first thing in the head, before any content.
* Title – Title of the site is simple and clean. Purpose of page is first, a separator is used, and ends with title of the site.
* CSS – Only one single stylesheet is used (media types declared inside stylesheet), and only served to good browsers. IE 6 and below are served a universal stylesheet.
* Body – ID applied to body to allow for unique page styling without any additional markup.
* JavaScript – jQuery (the most beautiful JavaScript library) is served from Google. Only a single JavaScript file is loaded. Both scripts are referenced at the bottom of the page.
* File Paths – Site resources use relative file paths for efficiency. Content file paths are absolute, assuming content is syndicated.
* Image Attributes – Images include alternate text, mostly for visually impaired uses but also for validation. Height and width applied for rendering efficiency.
* Main Content First – The main content of the page comes after basic identity and navigation but before any ancillary content like sidebar material.
* Appropriate Descriptive Block-Level Elements – Header, Nav, Section, Article, Aside… all appropriately describe the content they contain better than the divs of old.
* Hierarchy – Title tags are reserved for real content, and follow a clear hierarchy.
* Appropriate Descriptive Tags – Lists are marked up as lists, depending on the needs of the list: unordered, ordered, and the underused definition list.
* Common Content Included – Things common across multiple pages are inserted via server side includes (via whatever method, language, or CMS that works for you)
* Semantic Classes – Beyond appropriate element names, classes and IDs are semantic: they describe without specifying. (e.g. “col” is much better than “left”)
* Classes – Are used any time similar styling needs to be applied to multiple elements.
* IDs – Are used any time an element appears only once on the page and cannot be targeted reasonably any other way.
* Dynamic Elements – Things that need to be dynamic, are dynamic.
* Characters Encoded – If it’s a special character, it’s encoded.
* Free From Styling – Nothing on the page applies styling or even implies what the styling might be. Everything on the page is either a required site resource, content, or describing content.
* Comments – Comments are included for things that may not be immediately obvious upon reviewing the code.
* Valid – The code should adhere to W3C guidelines. Tags are closed, required attributes used, nothing deprecated, etc.

http://css-tricks.com/what-beautiful-html-code-looks-like/

Understanding border-image

2010-07-26T00:05:00.000-07:00

The new CSS3 property border-image is a little tricky, but it can allow you to create flexible boxes with custom borders (or drop shadows, if that’s your thing) with a single div and a single image. In this article I explain how the border-image shorthand property works in today’s browsers.

The basic idea

The border-image shorthand property has 3 parts:

border-image: url(border-image.png) 25% repeat;

Essentially, these allow you to specify:

1. An image to use as the border
2. Where to slice that image, dividing the image into 9 sections
3. How the browser should apply those sections to the edges of your element

The pertinent details

Let’s look at each part of the process in a little more detail. The first part is easy, and is familiar from the background-image property. For demonstration purposes I’ll use this image, which is 100px x 100px:

Slicing your image

The second part can have from one to four values, much like the border-width property, and they are specified in the same order: top, right, bottom, left. You can use percentages or pixels. Strangely, the percentages require the “%”, while pixels should be listed without the “px”:

border-image: url(my-image.gif) 25% 30% 10% 20% repeat;
border-image: url(my-image.gif) 25 30 10 20 repeat;

In this case, since my image is 100px x 100px, the two rules above are equivalent – they slice the image in the same places. I’ve added some dimensions on my image to demonstrate:

Repeat, Round, Stretch

border-image will always place the corner sections of your image into the corresponding corners of your element box, but the third part of the shorthand rule tells the browser how to treat the middle sections of your image — the ones that will go along the edges of your element. Repeat (repeat, or tile, the image) and stretch (stretch, or scale, the image) are pretty self-explanatory. Round means tile the image but only so that a whole number of tiles fit, and otherwise scale the image. Right now, Safari and Chrome interpret round as repeat. There can be up to two values: one for the top and bottom edges of the element, and one for the left and right. Here’s an example with the top/bottom value set to repeat, and the left/right value set to stretch:

#example-one {
border-width:25px 30px 10px 20px;
-moz-border-image:url("border-image.png") 25 30 10 20 repeat stretch;
-webkit-border-image:url("border-image.png") 25 30 10 20 repeat stretch;
border-image:url("border-image.png") 25 30 10 20 repeat stretch;
}

Border-width

border-image won’t do anything if you don’t specify a width for your border. For browsers that understand border-image, your image slices will be scaled to the specified width. If you use the border shorthand property, it provides a nice fallback for browsers that don’t:

#example-two {
border:50px double orange;
-moz-border-image:url("border-image.png") 25 30 10 20 repeat;
-webkit-border-image:url("border-image.png") 25 30 10 20 repeat;
border-image:url("border-image.png") 25 30 10 20 repeat;
}

Or you can specify each width individually (in this example I’ve specified widths such that the image slices aren’t scaled at all):

#example-three {
border-color:orange;
border-style:double;
border-width:25px 30px 10px 20px;
-moz-border-image:url("border-image.png") 25 30 10 20 repeat;
-webkit-border-image:url("border-image.png") 25 30 10 20 repeat;
border-image:url("border-image.png") 25 30 10 20 repeat;
}

Using a plain border at the same widths as your border-image won’t always be ideal, however, so you may want to use conditional stylesheets to give IE some different border styles altogether.

Source : http://css-tricks.com/understanding-border-image/#more-6883

Web on the Cell and Importance of XHTML

2010-07-23T02:31:00.001-07:00

Cellphones are the new face of the web. Getting the Internet into cell phones proved a smart idea and today the number of users that browse websites on phones has risen considerably. Thanks to technology that now we can access the net with that little thing on our palms. The prime reason for the Internet over Cellphone popularity is the wireless mobility that it offers. All we need is an Internet connection (offered by both service provider and cell phone manufacturer) and the World Wide Web is in our hands.

XHTML plays an important role here. While coding any website, the programmers keep the website compatibility in mind. There is however a special XHTML language version for cellphones called XHTML-MP (Mobile Profile). However, many phones that have built-in browsers go just fine with XHTML alone. Systematized, hand written, table-less XHTML coding perfectly supports the browsers at cell phones.

Earlier, WML was the primary markup language for mobile web. Well that was way back. Today, XHTML is preferred over WML and works fine with cell phones.

So while doing XHTML, compatibility issue is not the only concern for browsers in PC or laptop. It also occurs for browsers in cell phones. But this again would depend on the target audience. For instance, if you are an online jewelery vendor, chances are high that your target audience uses 3G phones that have in-built browsers. This defines the need for pixel perfect website designing, adhering to all the XHTML rules.

This doesn't mean that a large scaled business needs professional XHTML and a medium scaled doesn't. Businesses are always long-term. What seems today a small scaled business enterprise might become a medium scaled business tomorrow and a large scaled business the day after. This would certainly change your target audience from an economically stable to a high-class privileged group. Professional XHTML thus becomes mandatory for all business websites that intend to stay in the market for long.

Thus, as long as there is web on the cell (the journey has just begun, and yet to go miles ahead), the need of XHTML cannot be negated.

For Website Designing and Development Services
Web Development in India
eMail : varadesigns@yahoo.com
phone : +91 9247457705

Article Source: http://EzineArticles.com/?expert=Manish_Rawat

XHTML Web Design - Top 10 Benefits

2010-07-23T02:30:00.001-07:00

If you are still using HTML in your web design, consider transferring it to XHTML as it is the wave of the future.

As new browsers are developed they will be using XHTML more and more because it is compatible with a wider range of devices.

What is XHTML?

XHTML is a combination of HTML and XML (Extensible Markup Language). XHTML consists of all the elements in HTML 4.01 combined with the syntax of XML.

Top 10 Benefits of Using XHTML in Web Design

1. Clean code

All XHTML tags must have closing tags and be nested correctly. This generates cleaner code.

2. Search engine spiders

Because XHTML documents have cleaner code they can more easily be spidered by the search engines.

3. Faster loading

Web pages that don't contain errors and have clean code will load faster in all browsers.

4. Reduce bandwidth costs

Lean XHTML documents mean you will use less bandwidth and therefore reduce costs particularly if your web site has 1000s of pages.

5. Backward compatible

XHTML documents are backward compatible with older, non-XHTML compliant web browsers.

Instead of sloppy HTML tags, your pages will now contain XML tags that are always properly closed and nested correctly.

6. Increased interoperability.

Unlike old-style HTML pages, valid, well-formed XHTML documents can easily be "transported" to wireless devices, Braille readers and other specialized web environments.

7. Greater accessibility

Because XHTML pages follow strict rules and avoid non-standard markup, they are more accessible than HTML pages.

8. New developments

All new developments will be in XML (of which XHTML is an application).

9. Integration

XHTML has the ability to cleanly integrate HTML with other XML applications.

10. CSS.

XHTML works in conjunction with CSS to create web pages that can easily be updated.

Conclusion:

By making the switch to XHTML for your future web designs, you will not only get into the habit of writing cleaner code, but if combined with CSS create designs that load faster and are more search engine friendly.

For Website Designing and Development Services
Web Development in India
eMail : varadesigns@yahoo.com
phone : +91 9247457705

Article Source: http://EzineArticles.com/?expert=Herman_Drost

XHTML Equals to Browser Compatibility

2010-07-23T02:29:00.000-07:00

XHTML is the big in-thing in web designing these days. It is the fastest growing trend that has now become a highly sought after service. So what is XHTML, and how does it guarantees browser compatibility? Let us study it in some detail.

Plato once said, necessity is the mother of all inventions. HTML, which was once a popular source code, is now overshadowed by XHTML, i.e., Extensible Hypertext Markup Language. Earlier there were few web browsers. But as different web browsers have also marked the industry with its advent today, it becomes important to please all of them (as you don't know which browser the end-user uses). XHTML allows the site to divide the content from its appearance through CSS (Cascading Style Sheet). This makes the layout equally appealing and compressed for all web browsers.

Web has crossed its comprehensible boundaries. It started with being on our system desktop, shifted to laptop screens, and has now reached our cell phones and Personal Digital Assistants. Hence it not only becomes important, but mandatory to do valid XHTML Coding for cross browser compatibility. This takes us to the question of 'Valid XHTML'.

If there is valid XHTML, is there any invalid XHTML as well? What is valid, and how could one guess whether a particular coding is really valid or not?

There are many websites that display the "VALID XHTML" tags in the form of images, text and/or banners. This means that they conform to the W3C's (World Wide Web Consortium) coding standards. To ensure that valid XHTML remains valid, W3C, an international standards organization, has laid out few rules for XHTML coding. Designers follow these rules/guidelines while coding XHTML. Valid XHTML, allow me to compare it, is just like White hat SEO- it pays you the long way. Just like grey hat or black hat SEO can be done easily, but doesn't pay you for long, invalid XHTML can't reap you benefits for long.

So if the XHTML service provider tries to play smart by displaying "Valid XHTML" in its website, without mentioning the "W3C standards", you might want to check its credibility again. An XHTML provider, who has met all W3C standards, would flaunt about it!

For Website Designing and Development Services
Web Development in India
eMail : varadesigns@yahoo.com
phone : +91 9247457705

Article Source: http://EzineArticles.com/?expert=Manish_Rawat

Keys to Building a Successful Small Business Website

2010-07-23T02:28:00.001-07:00

A small business website serves the primary function of providing information about the business, the products, and the services. The purpose of creating such a site is to attract visitors, create inquiries or leads, and generate more business. A small business website should be able to market the products and services over the Internet and create a sense of need in readers so as to achieve greater conversion rates. So what are the keys to building a good small business website?

* Quality content is of utmost importance. No matter how attractive a site looks, it is ultimately the content that will hook people and keep them coming back. After all, when you recommend a site to a friend, do you do it merely because the site looks good or because the information available is helpful, useful, and interesting? To ensure the online success of a site, it is extremely important to have unique and fresh content. You can try blogs, or can update content at least once every week. Remember that search engines are not too fond of stale sites either and if you have not added new content in a long time, it is bound to reflect in the form of poor search engine rankings.

* Reciprocal link exchange is a great way of directing visitors to your site. It basically means that you share links with other sites to ensure mutual traffic. Reciprocal linking constitutes an important part of search engine optimization. As a website owner, you can submit your site to various reciprocal link exchange directories so that even if a visitor is on a different site, he/ she can get directed to your site. This considerably increases chances of greater sales. In addition, reciprocal link exchanging influences better ranking in the search engines.

* It is important to pay attention to the site's structure. If it has flashy graphics, too many advertisements and pop-ups, or loud music, chances are that visitors will get distracted and leave the site. You should also ensure that your site is easily navigable. This plays a crucial role in the success of your online business because unless visitors are able to locate what they are searching for, the entire point of having an online presence is defeated.

There is a lot more creating a small business website. To get expert advice and help, visit onlybusiness.com.

For Website Designing and Development Services
Web Development in India
eMail : varadesigns@yahoo.com
phone : +91 9247457705

Article Source: http://EzineArticles.com/?expert=Linda_Garcia

Tips for Web Design that Crosses Cultures

2010-07-19T22:23:00.000-07:00

The internet has the potential to put a global audience at your fingertips, but there’s far more to reaching across cultural divides than simply putting your website out there and waiting for people to visit it. There are issues to do with language, design and SEO that all need to be addressed before your website becomes truly accessible ‘world-wide’. Thankfully, though, there are a number of simple tricks you can apply that will make it all a less daunting process.

Translate your content

This is perhaps the most obvious but also the most important tip. English is arguably the most commonly used language internationally, but it still serves as a native tongue for only about 20% of the world’s population. Clearly, an English-only website will be inaccessible to a huge percentage of your potential online audience of 1.8 billion people.

There are various ways to translate your content and the method you choose may reflect budget and time constraints. The easiest way is to add a translation widget such as Google Translate or Babelfish to your site, allowing visitors to translate text to the language of their choice. Remember that any text embedded in Flash files won’t be translated – which is (yet another) a good argument against using too much Flash.

If you’re confident in using inline functions, you can build inline translation code into the site using Ajax, in connection with geolocation, to facilitate a smooth immersive translation process that directs the visitor to the correct language version, as determined by where their ISP is hosted.

If you do use machine translation, try to make your original content as simple and direct as possible and avoid specific cultural references, as these will invariably not translate well.

If budget allows, having your copy professionally translated is the optimum choice. Using a native speaker from the target market will ensure that meaning and nuances will carry over to your translated site and any linguistic or cultural mistakes can be avoided.

Use horizontal navigation bars

Not all languages read from left to right like English. Scripts such as Arabic and Hebrew read from right to left. While CSS makes it easy to flip a vertical navigation bar (which would normally be located on the left-hand side for a left-to-right language) and script direction from one side to the other, using a horizontal bar located across the top of the page will add a sense of continuity and cohesive design to localized versions of your site.

Use Unicode UTF-8

Unicode UTF-8 is the ideal character encoding tool. Compatible with over 90 different written languages or scripts, it’s also supported by all the major browsers. Even if you see no need for a localized site in Arabic or Simplified Chinese right now, using UTF-8 will give you the flexibility to create one in the future and it also incorporates all the additional characters from extended Latin alphabets (such as the German Ä, Ö, Ü and ß).

Bear in mind that some scripts and languages will take up more space than others to convey the same information and this may affect your page design.

Use appropriate colours

The use of colours can enhance a site’s visual appeal and help convey a theme or emotion, but some colours have different connotations in different cultures. White, for example, can signify marriage in the west but is associated with death and mourning in much of the east.

Tailor your design to the market

Some cultures (such as Japan and China) can be defined as ‘high context’ cultures. These cultures have a tendency to draw information from context and situation. ‘Low context’ cultures (including Germany, Scandinavia and North America) tend to look for explicitly worded and expressed information. In terms of website design, this means that sites with a more visual and immersive feel may be better received in high context cultures and sites with concise, clear layouts and text will appeal more to low context cultures. As an example, take a look at Nokia’s clearly structured and information-heavy German site, with prices and products listed on the front page, and compare it to the more visually oriented Chinese version.

Localize your SEO

There’s little point having a beautifully designed series of websites which are accessible to a range of different cultures if nobody can find them. SEO keywords can vary tremendously from location to location so don’t just translate your keywords directly. A little research may reveal that colloquialisms, alternative terms or even misspellings are more commonly used in your new target market. Research keywords not only on the local versions of search giants like Google but also on any major local competitors such as Baidu (the leading search engine in China).

For Website Designing and Development Services
Web Development in India
eMail : varadesigns@yahoo.com
phone : +91 9247457705
Source : http://css-tricks.com/cross-culture-design/

Present Trends in PSD to HTML & XHTML Conversion Services

2010-07-19T05:26:00.001-07:00

Have you ever wondered the outcome of such a major boost in the the web industry? Such a flooded demand for the PSD to HTML/XHTML/CSS conversion service providers for all your business needs have catered the scope of a wide variety of service providers in this arena who can actually try and provide the best possible services they can at affordable prices.

To be able to meet the business requirements, and that too, when we are living in the world of globalisation, outsourcing these services serves a lot of purpose. To be able to bait more and more customers and come up with the most effective conversion results in terms of the traffic your site is able to draw, the various business organisations hunting out for these conversion service providers.

And, if we see the other way round, the importance of such conversions is that you get a chance to fit in to the particular set of service. You get a chance wherein you can actually focus on to the popular design format. A well professional set up is capable to focus on to converting your PSDs to XHTML or HTML.

To be able to turn your dream online business venture into a reality wherein, with the help of these web design and development agencies, you add a new touch to your site, which is able to live in this cut-throat we world. Slicing these PSD files and converting them into clean, semantic and hand-coded coding into HTML/XHTML/CSS codes so that your website does not get lost in the crowd. Since, the need for these service providers is increasing day by day, and in turn, the number of these service providers as well. The web industry is loaded with the local as well as the option of outsourcing these services from the global market.

Not only this, but most of the web design and the development companies comes as a complete package, and caters to the need of the various business enterprises. And, there is no denial to the fact that they offer the best possible services at cost competitive prices because of the growing competition the market is witnessing in the current market scenario where each and every individual seek out for the ways to enter in to the world of Internet and enjoy the fruits.

For Website Designing and Development Services
Web Development in India
eMail : varadesigns@yahoo.com
phone : +91 9247457705

Article Source: http://EzineArticles.com/?expert=Manish_Chauhan

HTML 5 Tag Reference

2010-07-15T00:13:00.000-07:00

<article> Specifies an article
<aside> Specifies content aside from the page content
<audio> Specifies sound content
<bb> Specifies a user agent command
<canvas> Define graphics
<command> Specifies a command
<datagrid> Specifies data in a tree-list
<datalist> Specifies an "autocomplete" dropdown list
<details> Specifies details of an element
<dialog> Specifies a dialog (conversation)
<embed> Specifies external application or interactive content
<eventsource> Specifies a target for events sent by a server
<figure> Specifies a group of media content, and their caption
<footer> Specifies a footer for a section or page
<header> Specifies a header for a section or page
<mark> Specifies marked text
<meter> Specifies measurement within a predefined range
<nav> Specifies navigation links
<output> Specifies some types of output
<progress> Specifies progress of a task of any kind
<ruby> Specifies a ruby annotation (used in East Asian typography)
<rp> Used for the benefit of browsers that don't support ruby annotations NEW
<rt> Specifies the ruby text component of a ruby annotation.
<section> Specifies a section
<source> Specifies media resources
<time> Specifies a date/time
<video> Specifies a video

For Website Designing and Development Services
Web Development in India
eMail : varadesigns@yahoo.com
phone : +91 9247457705

Source : http://www.w3schools.com/html5/html5_reference.asp

Advantages Of Tableless Websites

2010-07-14T03:12:00.000-07:00

HTML was originally designed as a semantic markup language intended for sharing scientific documents and research papers online. However, as the Internet expanded from the academic and research world into the mainstream in the mid 1990s, and became more media oriented, graphic designers sought ways to control the visual appearance of the Web pages presented to end users. To this end, tables and spacers have been used to create and maintain page layout.

Problems then started to arise from the use of these techniques. As many webpages are build with tables nested within tables, this resulted in large HTML documents which use more bandwidth than documents with simpler formatting. With slower performance, the internet slowly begun to decline and the Web development industry shrank. Because of this, several UI development was carried out by coders with greater knowledge of good coding practice. It was around this time that many became critical of messy coding practices and the idea of tableless design began to grow.

Cascading Style Sheets (CSS) were developed to improve the separation between design and content, and move back towards a semantic organization of content on the Web. According to popular Web design outsourcing Philippiness companies, the term "tableless design” implies the use of CSS to position HTML elements on the page but it should be noted that tables and CSS are not mutually exclusive. Many experienced HTML coders use CSS to manipulate tables frequently.

Advantages

There are several advantages through the use of tableless websites, these includes:

Accessibility

As a result of the separation of design (CSS) and structure (HTML), it is also possible to provide different layouts for different devices, e.g. handhelds, mobile phones, etc. According to different Web design outsourcing Philippiness companies, it is also possible to specify a different style sheet for print, e.g. to hide or modify the appearance of advertisements or navigation elements that are irrelevant and a nuisance in the printable version of the page.

Maintainability

In tableless layout using CSS, virtually all of the layout information resides in one place: the CSS document. Because the layout information is centralized, these changes can be made quickly and globally by default. The HTML files themselves do not, usually, need to be adjusted when making layout changes. If they do, it is usually to add class-tags to specific markup elements or to change the grouping of various sections with respect to one another.

Bandwidth Efficient

Clever implementation of tableless design can produce web pages with fewer HTML tags thus reducing page download times. According to web design consultants and Web design outsourcing Philippiness companies, using external style sheets to position page elements means more mark up language may be cached and further reduce download times for subsequent pages using the same resources.

For Website Designing and Development Services
CSS Website Designing India
eMail : varadesigns@yahoo.com
phone : +91 9247457705

Article Directory: http://www.articledashboard.com

Why A Professional Logo Design is Valuable to a Small Business

2010-07-13T00:56:00.000-07:00

Why A Professional Logo Design is Valuable to a Small Business Imagine doing business without your most important tool: a computer, your knowledge, your personal assistant, or the telephone. You sit, unable to work. Without that tool, your company's future success would be in danger. And the same is true of any company functioning without a professional logo design.

Logos as Identification

The importance of logos may be traced back to the industrial revolution. Images on crates and boxes helped differentiate between mass-produced goods. That's why you can tell Morton® Salt, for example, from other salt packages at a glance. And if you're going to advertise, don't bother—not until you have a professionally designed logo that will be instantly recognizable. You could do more harm than good.

Logos for Professionalism

Would you want to do business with unprofessional company? Neither would your clients. A custom logo can give a five-person service firm an air of professionalism that is equal to that of a thousand-person company—and when you are competing in a global market, a professional image is essential.

Logos for Brand Identity

With a professional, custom logo, you can build a brand and go beyond simple advertising. You can use viral marketing with related products that promote your brand as a lifestyle.

Many companies think of themselves as brand-marketing companies. Starbucks® and Tommy Hilfiger® are two examples. In Tommy Hilfiger's case, all product manufacturing is hired out. What makes Hilfiger clothing instantly identifiable is the trademark red and white logo prominently displayed by Hilfiger customers. AT Starbucks®, coffee, music, clothing, and more other products build the Starbucks® brand.

It's Your Logo

You would not conduct business without your most important tool, nor should you conduct business without a professional logo that identifies your company. We live in what has been termed a "branded world": consumers purchase products based on brand reputation, and even promote brands by wearing logos on their clothing. Is your logo worthy of being worn on a customer's chest? If not, it may be time for professional logo design.

Designated trademarks and brands are the property of their respective owners. The brands listed in this article do not sponsor, affiliate, or endorse the products or services described herein. Morton Salt is a registered trademark of Morton International, Inc. Tommy Hilfiger is a registered trademark of Tommy Hilfiger Licensing, Inc. Starbucks is a registered trademark of Starbucks U. S. Brands. LLC.

What Does Your Logo Say About You

In the marketing world, a lot of attention is given to the concept of “image”, both on an individual product level and for a corporation as a whole. Researchers know the perception of a product or service can be vastly different from actuality. Business owners are faced with the difficult task of communicating to their consumers exactly what benefits they will derive from using their product or service vs. the competition’s offering.

One way businesses do this is through their logo, or their corporate identity. Part of a logo’s impact comes from repetition, the very act of seeing a familiar symbol on a continual basis. Every company, every branded product or service needs a logo for this purpose.

Because logos are everywhere, it is essential for a logo to have meaning; to present to the subconscious mind of the consumer a message about the corporation and/or the product it represents.

Of all the factors that comprise corporate image , the most significant one is that of integrity. Integrity, in itself, has components: honesty, loyalty, determination, strength, completeness, dependability.

Another element that is important for a corporate or product image is value; the consumer must perceive that they will be receiving something of worth for their money.

Leadership is another factor; it connotes a knowledge of the marketplace and the ability to conduct business in such a manner that others in the field acknowledge this company’s worth.

Innovation is another important component of image. Businesses want to be seen as creative, knowledgeable and able to meet consumer needs with the newest and best products and services.

To build such an image through logo design requires the use of all of the tools a graphic artist has in his armory: fonts, color, placement, size, pictures and design motifs. Logo designers know that some images require a sense of movement in the logo design; some need the strength of heavy block lettering; logos for products for infants, for example, would be best served with soft pastels and lines that are rhythmic and flowing rather than having sharp angles.

Any entrepreneur seeking a logo for his company or product should first choose the elements he or she wants to present as a communicator of the corporate image.

Knowing the relative weight of each factor, a logo designer can then create a logo that catches the public eye and imagination, sends a subliminal message about your company’s image and indelibly imprints the logo in the consumer’s memory.

There are four options for actually getting the design work done. From a freelancer, an ad agency, from an online logo design specialist like LogoWorks, or by doing it yourself. All have benefits and drawbacks, but for most small businesses hiring a freelancer or using an on-line company are the most effective and affordable methods.

Article Source : http://www.logodesign.com/logo-design-article-display/1/Why-A-Professional-Logo-Design-is-Valuable-to-a-Small-Business-/

Online Logo Creation - Makes Perfect Sense!

2010-07-11T01:15:00.000-07:00

There are several things which you need to take into consideration while designing a website. It's the designing of the website that plays a significant part when you are exactly trying to make a fine site that will not only attract more visitors but also drive more revenue for your business. When you are looking for some of the most important aspect of your website, you will surely come across the logo creation task that seems to be more important than the others involved in the whole assignment. Logo creation is a job that can make you feel always great about your business. Logo creation can always make you feel better about the announcement of online business, especially when you are trying to draw quick brand recognition.

In order to create an effective logo for your website, you can hire professionals involved in this venture. But the charges from a professional seem to be high most of the time. At the same time it will take more time for creating the right kind of logo for your website. It may take several approval modes to finalize a good logo for your online business. If you are not keen enough to do such hassling task, then its time to opt for the online logo creation. It's the most vital task that you can accomplish quickly and at the same time you can keep the right hold on your business.

Online logo creation is all about making the business logo in less time, and at the same time you can find out the perfect logo for your online business. There are several websites that are offering free online logo creation facility for web visitors. You can opt for these sites and can select the right kind of logo for your purpose. There is not a better method to get the ideas than research for what already has come & gone before. You may take a close look at all logo successes as well as failures throughout the history. They are all documented on internet and from looking at the history, you may get very good idea what to do & what you can stay away from.

Hire someone who knows the stuff - In case, you cannot come-up with the ideas on your own, next best thing is hiring someone to do that for you. Naturally, you would like to get someone who not just understands the design but understands the business. We have established what the logo is for and it is to get the people to recognize at an instant.

Article Source: http://EzineArticles.com/?expert=Julian_Wood

What is XHTML ?

2010-07-08T22:39:00.000-07:00

XHTML is almost identical to HTML 4.01 with only few differences. This is a cleaner and more strict version of HTML 4.01. If you already know HTML then you need to give littel attention to learn this latest variant of HTML.

XHTML stands for EXtensible HyperText Markup Language and is the next step in the evolution of the Internet. The XHTML 1.0 is the first document type in the XHTML family.

XHTML was developed by the W3C to help web developers make the transition from HTML to XML. By migrating to XHTML today, web developers can enter the XML world with all of its attendant benefits, while still remaining confident in their content's backward and future compatibility.

Developers who migrate their content to XHTML 1.0 will realize the following benefits:

1. XHTML documents are XML conforming. As such, they are readily viewed, edited, and validated with standard XML tools.

2. XHTML documents can be written to operate better than they did before in existing browsers as well as in new browsers.

3. XHTML documents can utilize applications like scripts and applets that rely upon either the HTML Document Object Model or the XML Document Object Model.

Why XHTML ?

XHTML has a more strict syntax rules in comparison of HTML. XHTML gives you a more consistent, well structured format so that your webpages can be easily parsed and processed by present and future web browsers. It also makes your website more easy to maintain, edit, convert and format in the long run.

Since XHTML is an official standard of the World Wide Web Consortium (W3C), your website will more likely will be more compatible to more browsers and will be rendered more accurately. XHTML combines strength of HTML and XML and XHTML pages can be rendered by all XML enabled devices.

XHTML defines a quality standard for your webpages, if you follows that then your web pages will be counted quality web pages and W3C certifies those pages with their quality stamp.

Web developers and web browser designers are constantly discovering new ways to express their ideas through new markup languages. In XML, it is relatively easy to introduce new elements or additional element attributes. The XHTML family is designed to accommodate these extensions through XHTML modules and techniques for developing new XHTML-conforming modules. These modules will permit the combination of existing and new feature sets when developing content and when designing new user agents.

Basic Understanding:

Before we proceed further, lets have a quick view on what are HTML, XML and SGML.
1. What is HTML ?
This is an SGML (Standard Generalized Markup Language) application conforming to International Standard ISO 8879. HTML is widely regarded as the standard publishing language of the World Wide Web.

2. What is SGML ?
This is a language for describing markup languages, particularly those used in electronic document exchange, document management, and document publishing. HTML is an example of a language defined in SGML.

3. What is XML ?
XML is the shorthand name for Extensible Markup Language. XML is a markup language much like HTML and was designed to describe data. XML tags are not predefined. You must define your own tags according to your needs.

Adding Video to Your Website

2010-07-07T23:12:00.000-07:00

Before you add any video to your web page, it's important to understand that videos can take up a lot of web page space (file size) and bandwidth. Every time someone clicks to view the video they will be taking up some of your allocated bandwidth.

Be sure to check with your web host if you're not sure how much you are provided. If you're paying a monthly fee for web hosting, you could exceed your limits and be charged an extra fee if enough people view your video file.

Uploading the Video

First you must upload/save your video to your web server. You may want to create a folder called "video" and save it there. So the path to your video will be something like http://yoursite.com/video/movie.avi.

Embedding the Video

One thing you should keep in mind is that every web browser treats videos differently. What may work in one browser, may not work in another. So you should use both old and new HTML embed tags. (<object> and <embed>). See the sample code below:

<object width="420" height="360"
classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B"
codebase="http://www.apple.com/qtactivex/qtplugin.cab">
<param name="src" value="movie.mpeg" />
<param name="controller" value="true" />
<param name="autoplay" value="false" />

<embed src="movie.mpeg" width="420" height="360"
autoplay="true"
controller="true"
pluginspage="http://www.apple.com/quicktime/download/">
</embed>
</object>

* Be sure your width and height attributes match the size of your video. The variables above are just examples. You may want to add a few pixels to allow for the player controls.
* The movie.avi is the path to your movie file. You may have to edit the path if your movie is stored in a different folder. If you're not sure, use the complete path http://yoursite.com/video/movie.avi, for example.
* The controller attribute displays the video controls.
* The autoplay attribute tells the browser to play (or not play) the video when the page loads. True means it will play automatically, false means the user will need to click the Play button.
* The pluginspace tag will prompt the user to download quicktime if they do not already have it.

You'll have to modify the above HTML code slightly to fit your website's configuration.

Replace musicfile.wav with the name of the music file you chose to upload to your web server. The code above also assumes you've saved the file in the same location of your homepage (index.html). If you save the file inside a folder on your root then you'd have to change the path slightly.

Let's say you want to load the song on your homepage (page name is index.html). You save the song file to a folder called "music" located off your root/main directory. Then the code you insert in your index.html page would look like something this:

<embed src="/music/musicfile.wav" autostart="true" loop="false">

This is telling the browser to look for the song file at...
http://www.yoursite.com/music/musicfile.wav

If you're not comfortable with using relative paths in your code, then you can use the absolute (complete) path to your music file. For example, your code may look something like

<embed src="http://www.yoursite.com/music/musicfile.wav" autostart="true" loop="false" hidden="true">

Notice the full URL to the music file is listed in the code rather than starting with /music/....

Music File Attributes

After the path to your music file, you'll see a couple of attributes:

The autostart attribute tells the song file how to begin. If you have this set to "true", the song file will begin playing automatically when the page loads. If you put in "false", the sound file will not start automatically and the visitor will have to start the song by using their embedded media player.

The loop attribute tells the song how many times to play. If you have this set to "true" then it will play over and over again automatically. If you have it set to "false" it will play once and stop.

The hidden attribute tells the browser whether or not to hide the media player. It's not a good idea to leave this value at "true" unless you know for sure your visitors don't want to stop the music.

You don't want your music to annoy them to the point they leave because they can't figure out how to turn the music off.

Adjusting the Size of The Media Player

You can customize the look of the embedded/default media player on your visitor's PC by adding a width and height attribute to the code. Be careful as you adjust the size of the player because you can distort it.

<embed src="/music/musicfile.wav" autostart="true" loop="false" width="350" height="200">

Once you have your music file uploaded and coding inserted into your web page, your background music should play when your browser loads. Enjoy!

For Website Designing and Development
CSS Website Designing Hyderabad
eMail : varadesigns@yahoo.com
phone : +91 9247457705

Source : http://www.2createawebsite.com/enhance/adding-video.html

Using Cascading Style Sheets to Create Your Website

2010-07-06T23:32:00.001-07:00

Cascading style sheets is the newest and best way to develop a web site. The pages are built better they are easier to maintain and the all around experience is just greatly improved for both the developer and the end user.

Of course with new technology must come new training. Hitting the books back at school may not be an option, especially if building a web site is not really business related but more of a past time activity. Take heart you can still learn the inside information that you need to know to make the best of this great knew way to design web pages.

Cascading style sheets tutorial can easily get you on your way to using CSS layouts and templates.

Where to Find the Tutorials

The best place to find the tutorials for CSS is online. There are plenty of websites that offer this tutorial for free. Many of the websites that offer CSS layouts and templates will also offer the tutorials for proper use.

In many cases if you are not a business and you will not be building your site for profit you can find all the information you need or want right online. You can find e books for purchase online that can be downloaded to your computer and printed out or simply read online.

If taking or looking at a tutorial online is just not for you, there are books that are dedicated to the CSS systems that provide cascading style sheets tutorial. You can purchase the books online, from traditional book stores or get a free loaner from the library.

A lot of folks simply prefer to attend a more formal type class. Many community colleges offer cascading style sheets tutorial classes that maybe only run for one or two days. You usually will not only get some one on one instruction but you will also get a book out of the deal.

Is It worth It?

Is it worth investing the time in a tutorial for using CSS, the answer is a resounding yes. Although the system is pretty easy to use, really understanding what you are doing will really pay off in time and in a reduction in frustration.

You can find free tutorials so the only thing you are investing is your time. Learning something new that will make life easier is always worth the effort.

For Website Designing and Development
Affordable website designing Hyderabad
eMail : varadesigns@yahoo.com
phone : +91 9247457705

Article Source: http://EzineArticles.com/?expert=Chuck_Chass

Mobile Web Design

2010-07-04T23:06:00.000-07:00

Mobile web design involves the development of Internet-connected applications for viewing on a mobile device such as a smartphone or tablet PC that are connected to the Internet via a wireless network. This design today still suffers from usability and interoperability problems. Usability problems are difficult due to the small physical size of the mobile phone form factors. Interoperability issues arise from the platform fragmentation of mobile devices, mobile operating systems and mobile browsers. These are two of the toughest challenges when doing web design for the mobile web.

Going forward, the distinction between the mobile web and native mobile applications is predicted to become increasingly blurred, as mobile browsers gain direct access to the hardware of mobile devices and the performance of browser-based applications improve. Persistent storage and access to sophisticated graphics user interface functions may further reduce the need for the development of platform-specific application and web designs.

In order to help web designers, the development of standards are being implemented to improve the usability, interoperability and accessibility problems. The W3C Mobile Web Initiative is a new initiative set up by the W3C to develop best strategies and practices. The purpose of the initiative is to make developing web applications for mobile devices more reliable and accessible.

The W3C has published guidelines for mobile web design and is actively addressing the problem of device diversity by establishing a technology to support a repository of device descriptions. They are also developing a validating scheme to assess the readiness of content designed for the mobile web through its mobileOK scheme. This will help web designers to quickly determine if their content is web-ready.

The registry for.mobi, the mTLD, has released a free testing tool called the MobiReady Report to analyze the mobile readiness of a particular web design. It will perform a free page analysis and provides a Mobi Ready score. This helps web designers determine if their website is mobile ready using industry best practices and standards.

Interested industry groups are exploring and documenting other standards for mobile web design for the purpose of education and training. One such project is the Standards for M-Learning Project.

For Website Designing and Development
Website Designing in Hyderabad
eMail : varadesigns@yahoo.com
phone : +91 9247457705

Article Source: http://EzineArticles.com/?expert=Claire_Jarrett

Tableless Web Design

2010-07-04T23:05:00.000-07:00

Tableless web design, also called tableless web layout, is a method of designing web pages without using HTML tables for page layout. Instead of using HTML tables, style sheet languages are used to arrange the different elements of text on a web page. One of the most common style sheet languages is Cascading Style Sheets, or CSS.

W3C introduced CSS in December of 1996 in order to improve web accessibility and to also make HTML code semantic instead of presentational. HTML was originally designed as a semantic markup language that was intended for sharing research papers and documents online. As the internet became more mainstream, graphic designers looked for ways to control the visual appearance of the web pages that they designed. This caused a number of problems as tables were nested within tables that created really large HTML web pages. CSS was introduced to solve this problem.

Tableless web design using CSS has a number of advantages over tabled web design. One of the advantages is in accessibility. With the number of different devices now accessing the internet, web content can be made accessible to users operating a wide variety of devices from desktops, to mobile phones to PDAs. Screen readers and braille devices have fewer problems with tableless design because they follow a logical structure.

Another advantage with tableless web design is bandwidth savings. Tableless web design creates web pages with fewer HTML tags used purely to position content. This results in pages that become smaller to download. The style philosophy implies that all the instructions for layout and positioning are to be moved into external style sheets. With the basic capabilities of HTTP, since the style rarely changes and apply in common to many web pages, they will be cached and reused after they are first downloaded. This results in a further reduction of bandwidth use and download times.

Lastly, maintainability is also improved with the use of tableless web design. When maintaining a website, frequent changes are often necessary. Under table-based web design, the layout is actually part of the HTML itself. Changing the positional layout of elements on a whole site may require a great deal of effort. In tableless layout using CSS, virtually all of the layout information resides in one place - the CSS document.

For Website Designing and Development
Website Designer at Hyderabad
eMail : varadesigns@yahoo.com
phone : +91 9247457705

Article Source: http://EzineArticles.com/?expert=Claire_Jarrett

Checking Web Design Changes in All Possible Browsers

2010-07-04T23:02:00.000-07:00

I was looking at one local web designer's portfolio a while ago. I noticed that a lot of his websites looked fine in Firefox, but not in Internet Explorer. He was obviously testing only in that browser. Then suddenly the situation reversed as newer sites looked fine in Internet Explorer, but not Firefox.

And there is also a local fancy dress shop who's website you must look at in Internet Explorer, because the images of the costumes do not show in Firefox. Seriously, and these examples are genuine, this is a major problem as many customers will just see the problems, fail to navigate the website and move on.

What do we need to do?

So what do you need to do? Well the answer is very simple. Install the latest versions of Internet Explorer, Firefox and Chrome onto your computer and check that the website works in all of them and make the necessary changes to get them displaying correctly.

But, this is not enough. My own website statistics that I have accumulated from the visitors to several websites last month show that although these three browsers will only cover about 72% of visitors. You need to be also testing in older versions of browsers, especially Internet Explorer. If you can also test your website on the 2 previous versions of Internet Explorer then you are covering over 90% of website visitors. But for this, you need old versions of the browsers installed on other machines. Not always that easy, but with 20% of visitors using the 2 old versions of Internet Explorer, a necessary task.

Is this enough? There was one last well represented browser in my statistics and that was Safari, for the Mac. Thankfully there is a PC version of this as well that seems to perform the same on both the PC and the Apple Mac.

How do we do this?

Now I am not saying that this is easy, but to get the best from your website you probably need at least three PCs - with current, previous and older versions of the browsers installed on each. For more extensive testing, each should also have a different screen size, from 1024 pixels wide right up to 1600 pixels wide.

Are your visitors the same?

How would you know for yourself whether these figures are accurate for you? Well, I would doubt that another website would exactly match my experiences. More technically targeted websites probably get more technical people, who are more likely to use Firefox and up to date browsers. On the other hand, certain niches of websites are more likely to attract people on older browsers who are not maintaining the security through updates.

There is a simple answer and this also shows you if you need to test on other browser than those listed above. You install a tracking system such as Google Analytics and every quarter or 6 months, review the browsers that your visitors have been using and check that you are testing the experience on the popular browsers. Also look at your bounce rates by browsers and if any are particularly high, that could indicate that there is a problem with that browser.

Moving forward

The big problem we have is that there are new versions of browsers being issued all of the time and we just cannot keep up to date with every change. Instead, we should cover the vast majority of users and watch for trends developing in our traffic.

For Website Designing and Development
Website Designing Services Hyderabad
eMail : varadesigns@yahoo.com
phone : +91 9247457705

Article Source: http://EzineArticles.com/?expert=Keith_Lunt

Design Usability and Graphics Compression

2010-07-01T23:08:00.000-07:00

The first thing that we should know about the two most popular Internet Browsers, Netscape Navigator and Internet Explorer, is that they don't display web pages in the same way.

To make matters even more confusing, neither do PC or Mac computers display images the same way. In short, images created on a Mac appear much darker on a PC, and images created on a PC appear much lighter on a Mac. Pixel size differences (72 pixels per inch on a Mac and 96 pixels per inch on a PC at 640x480) make font sizes vastly different.

So, there has got to be ways around these differences, right?

Right.... To an extent. What we'll cover in this article are a couple of tips to make sure that your pages are displaying nicely regardless of the system or browser, and to help your pages download as quickly as possible no matter what they're being viewed on.

Step One: Compress the Graphics
Before we do anything else, we have to make sure that our graphics have been optimized for the web.

Most graphic programs have an option under file called "Save for Web". Once you have created the graphic you need, made sure you like it exactly as it is, and are ready to upload it for your website take a minute to open this original, great graphic in your software and click this option.

When you click Save for Web, you should be able to preview the end result before actually saving. In Photoshop, you will be given this option and a "slider" that lets you move from maximum to low quality when saving as a JPEG. As you move between qualities, you will notice that the file size drops or increases. Look even closer, and you will see a spot that shows approximately how much time it will take to download that graphic on various connection speeds.

The actual method for optimizing your graphics will vary according to the graphics software you are using. The end result is the same - you NEED NEED NEED to take a minute and create the highest-quality vs. lowest file size image that you can.

The two main Internet graphic formats, JPEG and GIF, have some compression built in. There are major differences between the two formats, as we'll see, and there are always ways of compressing that image down just a bit more to squeeze as much time out of it as you can.

JPEG
Is a loose compression method. In other words, to save space it just throws away parts of an image. The JPEG algorithm first divides the image into squares (you can see these squares on badly compressed JPEGs - commonly called "pixellating"). Then it uses a math equation called Discrete Cosine Transformation to turn the square of data into a set of curves that go together to make up the image. Depending on how much you want to compress the image the algorithm throws away the less significant part of the data (the smaller curves) which adds less to the overall "shape" of the image. This means that, unlike a GIF, you get a say in how much you want to compress an image by. However, the loose compression method can generate unwanted effects such as false color and blockiness.

Here are two examples of JPG's using different compressions.

GIF
Stands for Graphics Interchange Format. It's a loss-less method of compression. This means when the program that creates a GIF squashes the original image down, it takes care not to lose any data. It uses a simple substitution method of compression.

The maximum compression available with a GIF depends on the amount of repetition there is in an image. A flat colour will compress well sometimes even down to one tenth of the original file size while a complex, non-repetitive image will fare worse, perhaps only saving 20% or so.

One problem with GIFs is that they are limited to a palette of 256 colors or less. Also, because you have no control on the compression amount, download speeds will greatly vary when using a GIF. Personally, I recommend using GIFs only when you need them for animation and relying on the flexibility of a JPEG for anything else.

ANTI-ALIASING
Anti-aliasing is a technique used to make curved edges appear smooth on a computer screen.

It's mostly used with large font lettering but can be used with graphics also. The effect is achieved by using intermediary colors at the borders, which obscure the hard edges.

Anti-aliasing is a clever way of getting around the low resolution of computer screens and making your text appear as smooth as if they'd just come from a glossy magazine.

When using text in a graphic or using a graphic to replace text always anti-alias the text. In Photoshop, you are given this option right in your toolbar - just tick the checkbox.

More information on Anti-Aliasing will be available in a separate tutorial.

Step Two: Take a look or Two
Since there is such a big difference between platforms and browsers, make sure that you "test-drive" your graphics - and layout in general, for that matter - before you decide that you're "done". Try to view your site in as many different browsers as you can get your hands on, and then take a look at it on a different platform - If you use a PC, see how the other half surfs on a Mac, and visa versa.

Another step you should take to help reduce download speeds on your page is to use the Height and Width tags on your images. WYSIWYG Editors will usually do this for you. If you do your html by hand, make sure that there is a height and width specified for every image on your page.

Finally, the more that you recycle the images you use throughout your site, the better the visitor's experience will be. Once an image is in the browser cache, the
browser will not download it again. This means that if you use the exact same navigation bar image for ten separate pages, the browser will only download it once.

For Website Designing and Development
Website Designing Hyderabad
eMail : varadesigns@yahoo.com
phone : +91 9247457705

Source : http://www.webdesign.org/web-design-basics/website-usability/design-usability-and-graphics-compression.6072.html

Mobile Web Design: Tips and Best Practices

2010-06-30T19:55:00.000-07:00

Mobile Web Design Trends For 2009

Web designers know that the industry involves plenty of change, and continuous adaption and development of skills is required in order to stay up to date. In the past few years, one of the biggest areas of change has been the amount of Internet users who are accessing websites via phones and mobile devices. As a result, Web designers have a growing need to be educated in this area and ready to design websites that accommodate this audience.

Because designing websites for mobile devices brings some unique situations and challenges into play, the subject requires a strategic approach from the designer and developer. In this article, we’ll look at the subject as a whole, including current trends, challenges, tips and a showcase of mobile websites. Plenty of helpful resources and articles are also linked to throughout the post, so if you’re interested in learning more about designing for mobiles, you should have plenty of information at your fingertips.

1. Simple options

One of the most intriguing things about mobile websites is the scaled-down options that are available to visitors. The mobile home page of Digg, for example, contains only 10 simple headlines and links, a log-in link and a few very basic navigation options. When it comes to mobile websites, simplicity is key. Because of the lack of space on the screen and Internet connections that are often slower, it’s important for visitors to have access to what is most crucial, and as little else as possible.

2. White space

White space is an important part of any design, and it’s something that’s usually a challenge in Web design because there is a desire to get as much as possible in front of the visitor. White space becomes even more of a necessity in mobile design because the typical screen size is so much smaller. A jumbled website would be very user-unfriendly and very difficult to pull off in the mobile environment.

As you browse through the websites shown in the gallery further down in this article or in real-world scenarios on your own mobile device, you’ll find that many websites include ample white space, especially the ones that are helpful and easy to use.

3. Lack of images

As high-speed Internet connections have become more common in recent years, designers have been able to take more liberties with things like bandwidth-hogging video and images. The average visitor on a desktop or laptop wants to see a visually engaging website, and, as a result, images are heavily used. However, when it comes to mobile design, excessive use of images often does more harm than good.

There is a great variety of speeds of mobile Internet connections and of pricing plans for access. Visitors are more likely to be slowed down or concerned with use of their resources when they’re on a mobile. Additionally, the size of the screens can make many images difficult to see and content harder to read. For these reasons, it’s very common to see minimal use of images in mobile Web design.

In an age of crowded pages, the simplicity of mobile websites can be refreshing. What’s important is there, and what is most likely excess gets cut out. The simple options that a user has can make a mobile website much more usable than it would be otherwise, as long as the options allow for actions the visitor wants to take.

As a growing number of mobile users move to smart phones with larger screens and better connection speeds, more opportunity exists to use images. However, because there is still a large percentage of users who are not using these devices, many mobile websites still avoid images when possible.

4. Sub-domains instead of .mobi or separate domains

When the .mobi top-level domain (TLD) first became available, a lot of buzz surrounded the news. While some websites use .mobi for mobile versions of their websites, it is currently more common to see companies use a sub-domain or a separate folder on their primary domain. There are multiple issues a company must consider when making this decision, but one of the major benefits of using a sub-domain is that it keeps everything on one domain, rather than spreading things out and potentially confusing visitors.

You’ll commonly see mobile versions of websites at such addresses as mobile.example.com, m.example.com, example.com/mobile, example.com/m and other ones along these lines. Some actual examples are m.twitter.com, mobile.washingtonpost.com and netflix.com/mobile/. Of course, there are exceptions to this trend, but as you look at the mobile versions of major websites, you will see more sub-domains than .mobi TLDs.

5. Prioritized content

Because of the simplicity of these pages and the general lack of many options, the content displayed is highly prioritized. One thing you may find surprising when viewing mobile websites is how much of the content is prioritized for the visitor. Of course, all websites should be user-focused, but because most websites are run commercially for business purposes, there are often elements that aren’t necessarily important to visitors, such as banner ads. While advertisements have largely become an accepted part of the Internet, most mobile websites are ad-free. The content available on a mobile website is typically of the highest priority to the average mobile visitor, not the company, although in the end the company benefits by having a more usable website.

You can see an example by looking at the mobile version of The Onion. Like most news websites, TheOnion.com does have ads with its stories (although many are internal ads). The mobile version, however, is ad-free.

Another example of prioritized content and simple options can be seen on Best Buy’s mobile website. The only options here are for a product search and store locator (a phone number is also listed to allow customers to place orders). The logic here is that visitors who are accessing the website on a mobile device are probably on the go and probably have something very specific in mind. Maybe they’re looking for a store close to their current location to buy a product. It’s less likely that a mobile visitor would be interested in simply browsing the website, so the most important options for this visitor are presented, with nothing else to get in the way.

For Website Designing and Development
web designing in hyderabad
eMail : varadesigns@yahoo.com
phone : +91 9247457705

Common Challenges in Designing for Mobiles

Of course, Web design for mobile devices brings its own unique set of challenges that designers must overcome to create a successful mobile website. If you’ve attempted to design for mobiles, these were probably some of your most significant challenges.

1. Variety of screen sizes

Although Web designers are used to dealing with varying screen sizes and the resulting issues, mobile design presents this challenge in a bit of a different way than dealing with different-sized desktop monitors. Most designers are comfortable with the challenges that arise from various screen resolutions on desktop monitors, but if you haven’t worked with mobile design before, it can be something yet more complicated that you need to overcome.

Because mobile technology is always changing, screen sizes are changing, too. Fortunately for designers, modern mobile devices typically have bigger screens and higher resolutions than those of a few years ago, but of course those older phones are still in use.

While we’re on the topic of mobile screen sizes, there are two excellent articles from April of 2008 at Sender 11: Mobile Screen Size Trends and More on Mobile Screen Size Trends. The results of the study behind these articles show that 240 x 320 (a.k.a. QVGA) should be the standard for mobile development. Many newer mobiles and smart phones have larger screens, but smaller ones are largely a thing of the past.

The graph below shows the findings of the report, which is close to a year old at this point. With the rise in popularity of the iPhone and its competitors, the most recent numbers most likely favor larger screens even more.

2. Lack of understanding

One of the biggest challenges that many designers face is just the intimidation of dealing with a new aspect of design. If you haven’t considered mobile browsers and visitors in your previous design work, it’s most likely not something you feel comfortable doing without some research. Because mobile browsers behave somewhat differently than desktop browsers and because the environment of its users is not the same, the designer needs to gain some understanding and familiarity. Through the information and resources presented in this article, you can easily get started with a general understanding of the mobile Web, if you don’t already have experience.

3. Rapid change

Like any other technology, rapid change is a constant. Of course, Web designers need to stay on top of the industry in general, and the mobile Web is no different. As technology and trends continue to change, the mobile Web will evolve accordingly. The challenge of change isn’t really anything new to designers; the mobile Web just presents another area in which designers need to stay up to date.
4. Testing challenges

One of the most significant challenges in designing for mobiles is the wide variety of phones in use. While designing for desktops brings its own testing challenges, with its various browsers and screen resolutions, there are more dependable ways of testing these items at the moment. On the mobile Web, however, many of your visitors will likely be accessing your website in an environment that you were not specifically able to test.

There are, of course, some things you can do so that a mobile website is tested as well as possible. To start with, the simplicity of mobile websites in a way makes the testing process easier because there is less that can go wrong. With a careful design and some well-planned testing, it’s possible to be fairly certain that a website will be displayed properly and, more importantly, usable on the vast majority of mobile devices.

At the end of this article, you’ll find links to a number of helpful resources for testing, but we’d like to point out a few here as well. First, the Web Developer Toolbar has some very useful features for testing a website for mobile users. Because CSS and images may not be enabled when a mobile visitor is on your website, you can use the toolbar to disable both and see how the website will appear. While this does not exactly replicate the experience of visiting the website in a mobile browser, it can help identify potential problems in the way content and navigation is displayed.

Another helpful testing resource is the Opera browser. In the Opera toolbar, go to “View” and select “Small Screen.” This will display the website in a very narrow window, similar to what would be used on a mobile device. Additionally, you can use the Opera WebDev Toolbar to view an unstyled page by clicking on “Display.” By viewing the page in the small screen with CSS turned off, you can get an idea of how mobile visitors may experience the website. The screenshot below shows the Smashing Magazine front page unstyled in the small window.

5. Deciding on what is essential

If websites are to contain only what is most essential, the website owner or designer will have to determine accurately what content is most important. This may seem pretty simple, but taking a website that’s loaded with content, images and maybe even video, and weeding it down to just the essentials can be quite a challenge. Another aspect to this issue that must be considered is the status of the average mobile visitor. What are they doing? Why are they accessing the website at that time? What are they likely and unlikely to have any interest in? Keep in mind that the goals of mobile visitors are often vastly different than those of visitors sitting at a desk.

Considerations for Mobile Design

Now that we’ve looked at some of the current trends and challenges in designing for mobiles, let’s examine some specific issues that should be considered by designers during the process.

1. Clean, semantic markup

The best thing you can do to lay a solid foundation for a usable mobile website is to incorporate clean and semantic markup. What you may be able to get away with on a traditional website may cause significant problems on a mobile website. Clean markup will help ensure that the browser is capable of properly displaying the website, and it will help give visitors a pleasant experience, with no unnecessary difficulties.

2. Separation of content and presentation with CSS

Alongside clean, semantic markup is the need for the separation of content and presentation. Mobile visitors are much more likely than desktop visitors to see a website with images and CSS disabled. The most important thing for these visitors is to be able to access the content and links: presentation is secondary. A website that uses clean, valid markup, with CSS to separate the presentation from the content, is off to a great start as a mobile website.

3. Alt tags

Because it’s likely that some visitors will not be able to see images on the website (or will choose to disable them), alt tags are extremely important for usability purposes. Of course, alt tags should be used anyway, but it’s even more critical for mobile visitors.

4. Labeling form fields

Like alt tags, form field labels help make a website much more usable for mobile visitors. Imagine trying to use a form without knowing what is supposed to go where. Simple details like alt tags and form field labels can make a big difference this way.

5. Use of headings

With inconsistent and often limited styling of text on mobile browsers, headings become more significant. Mobile browsers are less likely to style text exactly how you would like it to be, but h1, h2, h3 and other such tags generally help make certain text stand out and build the structure of the page from a visitor’s perspective.

6. Avoid floats if possible

Even if a mobile browser correctly displays a website that uses floats for layout, it’s unlikely the website will look good on a small screen. Usually the website will be more usable and look less awkward without floats altogether and with content simply stacked up.

7. Reduce margins and padding

Most likely, your mobile website should have smaller margins and padding than your main website has for traditional visitors. Of course, this depends partly on how much of a margin and padding your website currently has, but very large amounts can make the layout awkward.

8. Pay attention to navigation

Most websites have a primary navigation menu very high on the page. This is helpful on mobile websites as well, but generally, mobile navigation options are scaled down. Provide only the most relevant links, and, if possible, give visitors an easy way to access the other navigation items.

9. Consider Color Contrast

Because mobile screens may not have the same appearance as desktop or laptop monitors, make sure the background and text colors provide adequate contrast so that the content can be read easily.

Sitepoint’s Designing for the Mobile Web

In March of last year, Sitepoint published an article, Designing for the Mobile Web, by Brian Suda, that provides an excellent point of reference on the subject. In the article, Brian breaks down the process of designing for mobiles in seven understandable and digestible steps. The article is useful enough to restate the main points here.

1. Don’t Mix Up Your Markup
For most websites, we can ignore WML and make use of the markup language with which we’re probably much more familiar: XHTML.

2. Know Your Phones
We must cater not only to different screen sizes and resolutions, but to different shapes. From short and long rectangles to tall and skinny ones to perfect squares, the mobile world contains a rich tapestry of variation that almost makes you want to pull your hair out!

3. Target the Right Customers
Traditional website customers are most likely sitting at a desk facing a large monitor that has a decent resolution. Visitors who are browsing your mobile website are unlikely to be in the same circumstances. They may be waiting in line, riding on the train or bus, running to the departure gate or lost in an unfamiliar town late at night and trying to get somewhere.

4. Publish the Bare Minimum
While the concept of having only one website, and simply styling it differently depending on the medium the visitor is using, is popular with many standardistas, a separate mobile website is required to deliver an optimized experience for mobile users.

5. Choose a Great Domain Name
When deciding on a domain name for a mobile website, the colleagues and companies I’ve worked with have always used a sub-domain. Creating a sub-domain is the easiest of the options to set up (you already own the domain), it’s the cheapest option (there’s no need to register the .mobi), and it means you avoid having to spend hours tweaking the server (and potentially messing up normal traffic).

6. Validate Your Markup
Mobile browsers are much less forgiving than desktop browsers. A browser running on a mobile device generally doesn’t have the luxury of a 2 GHz processor and 100 MB of disk space. Therefore, you must check, validate and recheck your markup, time and time again.

7. Test, Test, TEST!
Testing your website with a Web browser on a desktop computer can get you only so far in terms of simulating the mobile experience. There are many elements of mobile device usage that can’t be replicated accurately in this way.

Brian’s article is an excellent starting point for those who are new to designing for mobile devices, and it’s also a great resource to have handy down the road when you want to check your work to make sure you’re doing things the right way.

For Website Designing and Development
website designers Hyderabad
eMail : varadesigns@yahoo.com
phone : +91 9247457705

Article Source : http://www.smashingmagazine.com/2009/01/13/mobile-web-design-trends-2009/

Website Logos

2010-06-29T21:45:00.000-07:00

Are you looking for logo designers who will design logos for your business or website? People do a lot of logo design jobs as freelancers. There are many websites offering opportunities for people to work online. If you visit a company website, what will you look at first, or what comes in your sight? When I visit some site, I sure will see the top header, the design and the layout of the website and where is the company logo? Many people look for ease of use, many look for the design, many people look for the functionality of the website and many people almost all of them do get their eyes on the company's logo on the website. It will help the visitors remember your website. So it is important to develop and design some of the most stunning logos for your website, for that you might need some tips, I hope these are helpful.

Well some people think that logo design is just an art work, well they need to correct their views about logo design. It is not just a design; it is the representation of the company. It has to be perfect, if it were some just simple art work its importance would have been "zero". You need to make your logo perfect, which will help identify your company. Use the following tips, these tips are also followed by the experts who do logo design jobs as freelancers:

1. Use of vectors
Well, do not just create jpeg logos; it might not be helpful in the future when you will be changing your logo. Vector designs make the logos variant.

2. Avoid using more than 2 or 3 fonts
In the logo do not use three or four types of font styles. There are thousands fonts available, but you need to select the one that is according to your business. you can create a two font logo, that will be catchy due to its eye-catching contrast.

3. Make it easily readable
Make sure your logo is "readable". By readable I mean that the audience should get the message and remember you. If you use a lot of fonts and styles the visitors will not even bother reading it.

4. Avoid adding photos
In logos there is no place for pictures, it is not the header of your website, it is just a company logo. So avoid the use of pictures.

5. Upside-down
Well it might not appeal to you but, try creating a logo that is just good even if turned upside down.

6. Avoid using and following current trends
Trends are not there for always, your website is! So do not follow the current trends. The design must be perfect that can stay even when the new trends come.
Professionals who do logo design jobs even as freelancers take care of all the above factors.

For Website Designing and Development
website designing hyderabad
eMail : varadesigns@yahoo.com
phone : +91 9247457705

For more articles and resources about Website Logos and Jobs visit: Logo Design Jobs.

Article Source: http://EzineArticles.com/?expert=Alberty_Jone_James

Why a Company Redesigns a Website

2010-06-29T21:43:00.000-07:00

There are important reasons why a company changes its website's design. It is not just about redesigning because you just feel there is a need to do so. It should be a result of careful site assessment and planning. Any unplanned site fixing could result to not so good most especially when it comes to SEO.

Here are some factors why redesign websites:

When it does not deliver its purpose.

When you have an e-commerce website your main goal is to sell products. Your desire is to generate more sales with your website. If your website does not anymore make sales, a redesign could be a big help. Check your website ROI and assess whether there's a need for website upgrade.

When your company changes business theme

There may be times that your company has to change its business theme. A business theme pertains to an idea in which a company wants to be recognized. A company distributing wheelchairs may wish to sell more products related to health. Thus, a change in business theme is most likely to occur. From wheelchair products to medical supplies. Should this changes happen, your website should also be redesigned accordingly.

Websites are upgraded with technology (browser)

Internet browsers are upgraded from time to time. Your website should catch up with the changes in this technology. There should be no problem when it comes to browser compatibility. Upgrade and redesign can help you on that.

Content, images, graphics should not be static

The Internet is a fast-paced environment. Every now and then changes happen to online resources. So must your website. Your site content should be redesigned into an upgraded version. Content, images and graphics should be the latest.

A good web development company should not only give you a quality website design. It should also highlight the importance of redesign and how it affects in realizing your main goal - profit.

For Website Designing and Development
Website Designing Hyderabad
eMail : varadesigns@yahoo.com
phone : +91 9247457705

Article Source: http://EzineArticles.com/?expert=Danny_Shawn_White

Mobile Website Design

2010-06-27T23:54:00.000-07:00

More than 25% of mobile phone owners around the world have browsed the Internet via a mobile handset. Market research agencies are speculating that mobile web browsing might become the next dominant Internet platform. For many consumer-driven companies this means that having a WAP friendly website will be a necessity rather than a nice-to-have.

Google, Microsoft and Yahoo! have recognised the potential of this market and are making great efforts to promote mobile commerce to users and advertisers. Most famous brands like Coca-Cola, MTV and Nike now have a mobile portal featuring content designed specifically for handheld devices. Most importantly, though, operators have reduced tariffs and introduced flat-rate plans. This means that an increasing number of your potential customers are using their mobiles to find local businesses, content providers, games and more!

WAP Friendly Mobile Websites

Over 80% of adults and 60% of teens in the UK own mobile phones, and at least 28% of these users have browsed the Internet from their phones. However, a disproportionately low number of consumer-focused websites actually work on WAP enabled handsets.

In order for a site to work on a wireless handset, it must adhere to most website accessibility design guidelines, as set out by the W3C. Mobile handsets use WAP technology to browse the Internet. Because of limited screen size, many WAP browsers strip out CSS, and show text in a method similar to how a search engine spider renders a site.

Principles of Mobile Web Design

1. Websites using tables for layout will not render well on mobile handsets. The site must use CSS for layout

2. The site must be coded using either XHTML or XML

3. Character encoding should be UTF-8

4. Bear in mind different screen sizes of mobile users. The largest screen size available is probably 640 x 480, whereas the average is closer to 120 pixels

5. The most important information of your site must be right at the top of the page as it can be very time-consuming for browsers to read through

6. Text entry can be quite difficult. Users prefer to select values from a list of choices, such as radio buttons or lists

7. Images should be jpeg or gif

8. Always provide a 'back' button or link, since many phones don't include a back button

9. The maximum total page size recommended is 20 kilobytes

10. Remember that your users are paying a lot of money to access your site, so make sure it is definitely worth their money!

Is Your Website WAP Friendly?

A number of online resources provide mobile phone simulations, which enable you to view your website as it appears on standard mobile phone screens. Some of them are listed below:

* Google Mobile Proxy
* Palm OS Emulator - Download
* Windows 2003 based Pocket PC Emulator - Download
* Windows 2003 SE Smartphone Emulator - Download

If your website does not render correctly for mobile phone browsers, you should seriously consider modifying your site to attract the growing population of mobile web savvy users that search, browse, book and buy services and products from their mobile phones. AccuraCast Mobile Search Marketing can help you design and code a WAP friendly website. Contact us on 0800 019 6813 if you would like to target the growing population of mobile Internet users.

Other articles to read:

* Website visitors affect Google search results
* Google search result snippets

SEO Weekly

For Website Designing and Development
web designer in hyderabad
eMail : varadesigns@yahoo.com
phone : +91 9247457705

Source : http://www.accuracast.com/seo-weekly/mobile-web.php

Create Your Own Website - Dream Weaver Learning Methods

2010-06-26T23:50:00.000-07:00

You need to collect much information about the Dreamweaver learning methods to help you finding the best way, so you will understand it quickly. The most common way to find the methods is through the online tutorials. There are many websites offer a tutorial about the Dreamweaver learning process, include the tips and online consultation.

Besides the online tutorials, you should have a book, especially if you are really a beginner. Depend on the version of Dreamweaver you want to learn, you are strongly to choose the appropriate book, so it will not give any difficult. If you choose a different version book with your program, you will find any differences between the book and the software. Usually, there are some terms could be different to use and the function of a certain button.

For some tips of the methods, you can use the built-in tutorials as well as you can explore your own skill. Everyone has own methods on learning process, especially to the Dreamweaver learning. However, this could be ideal ways for most people. You can also need to use the guide and help section that you can find in the program.

To accelerate your Dreamweaver learning, you can join a seminar where you can find the experts. From the seminars, you will be able to find the latest versions that will absolutely make you up to date. It is not only will tell you the new versions but help to get an in depth looked along with the innovative tools.

Besides seminar, you may want to join user groups and attend to Dreamweaver events. You can find several user groups and association events on the official Dreamweaver sites. By following those events, you will easily get a video pod casts with tips and tricks inside it designed by the experts. Although, it is usually provided for the advanced users and professionals, but it is good to know the newest information.

Know more how to create your own website use dreamweaver learning methods in Dreamweaver Learning System, or you can visit db-dp.com.

For Website Designing and Development
Web design Hyderabad
eMail : varadesigns@yahoo.com
phone : +91 9247457705

Article Source: http://EzineArticles.com/?expert=Zack_Karepmu

Elements of Well-Designed Websites

2010-06-26T23:42:00.000-07:00

A good web site design gives an array of benefits for your business. It is not just about all the graphics and content; colors and functions. More than that, good design web sites work so that your company is well-presented in the corporate environment. A good web site serves as your business alter ego. Your website serves as a mirror for your business. Therefore, it is really important to have a good web site design.

So what are the elements of a well-designed websites?

A website ideal for business, according to experts, should possess both appearance and functionality. Appearance helps create good impression even at a first glance. Functionality helps deliver what users want.

When it comes to 'website look' and 'functionality' you should look at the following areas:

Graphics - see to it that graphics appropriately represents your business. For instance, when it comes to color, blue is said to be a corporate color, green is for environment advocacy.

Images - studies have shown that websites having images are more appealing to readers than pages of plain text. Add appropriate images on your site that best represent your products or service.

Navigation - a well-designed website is easy to navigate. Studies suggest that visitors easily get irritated when they are directed to pages they do not want. Much more when they are landed to 404 (error). Providing a site-map page is a great help for easy navigation. Pages should also be properly organized to avoid canonical problems.

Link - aside from it's bad for search engine optimization, problems on links should be avoided because they drive away potential clients. Avoid sending your visitors to dead pages (404). It is bad for your online reputation.

Alt tags, metas - you should also be working for alt tags for optimization of images you use. Aside from that, optimizing your metas (keywords, description) also helps for search engine spiders easy crawling of pages.

The tasks above are not that complicated and can be done by most of website owners. You may want to try it too. But if you don't want to do it by yourself, you can hire a professional web designer. You can even outsource web design tasks at prices you can afford.

Danny White has been writing for web content for years. He loves to share useful ideas about SEO, Web Design and Development and other Internet marketing tips. He is a member of a web development company that runs the following websites: http://updatemywebsite.org; http://fixwebsite.org/

For Website Designing and Development contact
web designing in hyderabad
eMail : varadesigns@yahoo.com
phone : +91 9247457705

Article Source: http://EzineArticles.com/?expert=Danny_Shawn_White

Choosing the Right CMS For You

2010-06-26T23:31:00.000-07:00

I often overhear programmers and computer nerds (term of endearment) debating about which content management system (CMS) is best for an ecommerce project. So, I decided to talk to each of the programmers in our office to get to the bottom of the debate and declare a winner based on my research.

So, here is what we uncovered.

Drupal

Drupal lovers love Drupal... it's really as simple as that. It seems they have so much love for it, that they just can't bring themselves to like anything else. They love the way it supports SSL, multimedia, document management, user management, permission features and much more. The documentation is second-to-none and the add-ons make using it a no-brainer. Possibly the most important aspect - according to one programmer - is that the product manager is easy to use and update. I am not sure if I agree with that, however.

Magento

The newest CMS among the big boys is Magento. It is one of most search engine friendly ecommerce systems and is very robust. While it still needs work, it has many advantages including a high-end shopping cart that provides an extremely professional looking interface. The biggest knock against Magento was that it wasn't content management friendly, but their 1.4 update has an editor. However, the opinions were mixed on just how good the editor is.

Joomla

Joomla was also mentioned as a solid CMS for ecommerce websites. Ease of use was one of the key benefits, which should make life easier for non-technical individuals. Extensions are always being improved and Joomla sites generally upload faster than some of their competitors. The big drawback was that it wasn't as robust as the others, but that was a minor complaint.

Now for the million dollar question... which one is the best for ecommerce? Honestly, it sounds like all of them have their strengths and weaknesses, so it really depends on the client and project. Our in-house computer nerds (ahem, programmers) are experts at developing the above CMS sites along with ExpressionEngine, WordPress and X-Cart.

Established in 2004, TheeDesign Studio is a full-service web design and interactive marketing agency headquartered in Raleigh, NC. Our team specializes in creating business-class websites that incorporate content management, search engine optimization, internet marketing, ecommerce and cutting-edge programming. We take great pride in doing all of our work in-house and providing our clients with world class customer support as our success is directly tied to theirs. For more information, please call (877) 341-8901 or visit http://www.TheeDesign.com.

For Website Designing and Development
web designer in hyderabad
eMail : varadesigns@yahoo.com
phone : +91 9247457705

Article Source: http://EzineArticles.com/?expert=Katie_Morrison

DIV Based Layout with CSS

2010-06-24T22:51:00.000-07:00

Most Web page designers use a table-based layout to achieve a coherent and consistent look. There's a different way to achieve the same look. Using CSS and DIV tags reduces markup code, speeds up page downloads, separates content from its visual presentation, and brings your code closer to Web standards compliance--all while making your website more appealing to search engine spiders. Alejandro Gervasio explains how it's done, with copious examples.

Introduction

We see it every day. As we surf the huge network of the Web, we are able to appreciate several page layouts through different websites. They run the gamut from classical but highly effective two and three-column designs, to those exotic and certainly uncommon designs which seem not to fall into a specific category.

For many years, Web designers have been sticking firmly to table-based layouts, achieving coherent and consistent looks by the use of complex table nesting techniques, gif spacers and other well-known design processes. Currently, table layout still continues to have a strong presence on the Web, since it provides wide cross-browser compatibility. Tables are pretty well supported elements for browsers, and that’s an extremely powerful reason to use them for Web page layouts. But this strong compatibility comes with an extra cost. Most of the time, nested tables introduce lots of additional markup, and increase file size, download times and server requests when using graphics as spacers, even if they are cached later.

Extra HTML pushes the important content farther down in the source code, making it less likely that a search spider will give Web pages a high relevance score for the keywords. With the use of CSS and DIV tags, we can achieve the same table-based layout effects, reduce our markup code noticeably, get faster page downloads, and separate content from its visual presentation. We are getting closer to standards-compliant code, and our Web pages are more appealing to search engine spiders.

Now, is everything good about CSS? No, unfortunately. The major drawback with CSS is that browsers don’t display reliably some CSS rules because most of them are not completely compliant with Web standards. Still, the advantages of using CSS and DIV tags for page layout are numerous, and certainly are appealing to many Web designers, as modern browsers add more reliable support.

With the pros and cons in our hands, let’s see the basics of how table design works.

DIV Based Layout with CSS - The table-based approach

One of the most common page layouts using tables is easy to do with the ALIGN attribute. This is a left-hand navigation bar with a larger content section, directly to the right of it, building only two tables.

Here is the code:

<table align=”left” width=”20%” height=”100%”>
<tr>
<td valign=”top”>Navigation links are placed here</td>
</tr>
</table>

<table align=”right” width=”80%” height=”100%”>
<tr>
<td valign=”top”>Main content is placed here</td>
</tr>
</table>

We build this simple two-column layout, placing the tables as mentioned above: one is located to the left and the other is located to the right. The ALIGN attribute helps us to turn complex tables into simpler ones.

We can use this technique with nested tables too, to keep our layout easier to maintain and display, while it’s still quite appealing to search engines spiders.

A note about this: the attributes ALIGN, WIDTH and HEIGHT are deprecated elements in HTML 4.01 (they are marked for deletion in future versions), but they aren’t likely to disappear any time soon. Currently, all browsers recognize these attributes.

From this point on, we could attach an external style sheet that contains all the proper style declarations for each table, continuing to improve the code like this:

<table id=”content” width=”80%” align=”right” height=”100%”>
<tr>
<td valign=”top”>Main content is placed here</td>
</tr>
</table>

<table id=”leftnavigation” width=”20%” height=”100%”>
<tr>
<td valign=”top”>Navigation Links are placed here</td>
</tr>
</table>

The layout is the same as before, but note the ID attribute for each table. Assigning ID contextual selectors from an external style sheet allow us to build the visual appearance for data contained into each table.

So far, this is a simple sample for table-based layout. It can be easily expanded to more complex layouts, adding nested tables techniques and so. However, I would strongly recommend using DIV tags and CSS for page layout, as we shall see in a moment. Trust me.

DIV Based Layout with CSS - The mighty DIV tag

According to the O’Reilly HTML Reference, “the DIV element gives structure and context to any block-level content in the document. Each DIV element becomes a generic block-level container for all content within the required start and end tags.” As we can see, the DIV tag is a powerful generic element well suited for being used as a container within our Web page. This turns it into a good candidate for creating sections or divisions (hence "DIV") of Web documents.

The concept is very intuitive. Instead of using tables as layout elements, we are going to take advantage of DIVS as excellent content containers to build our page layout. In conjunction with several CSS declarations, DIVS based layout are pretty easy to get.

Before we explain any further, two general categories used for Web page design must be clearly differentiated: “fixed” and “liquid" design. When referring to “fixed” design, we are talking about a Web page that has “fixed” dimensions. Widths (and optionally, heights) for each container element are assigned normally in pixels.

The final result of this approach is that Web pages are displayed with a determined “fixed” size, and they don’t “expand” to cover all the space in the computer monitor. Many “big” websites currently use this technique for achieving a consistent look and size across several user screen resolutions.

On the other hand, Web pages built over a “liquid” design principle will display as “elastic” documents, expanding as needed according to different monitor resolutions. Normally, dimensions for any container element are expressed in a percentage. “Liquid design,” when used properly, looks much more professional and takes one step further the definition that conceives a Web page as an “elastic” element, not a desktop document.

With all of these basic concepts out of the way, we will see different approaches for page layouts, depending on whether we follow a “fixed” design or a “liquid” design pattern.

DIV Based Layout with CSS - Fixed layout design with fixed boxes

Now, it’s time to build a basic two-column layout with fixed sizes.

Here is the code for styling our DIVS:


</style>

The HTML code is the following:

<div id="header">Header Section</div>
<div id="leftcol">Left Section</div>
<div id="content">Content Section</div>
<div id="rightcol">Right Section</div>
<div id="footer">Footer Section</div>

Here is the complete code:

<html>
<head>
<title>THREE-COLUMN FIXED LAYOUT WITH FIXED BOXES</title>
<style type="text/css">

</style>
</head>
<body>
<div id="header">Header Section</div>
<div id="leftcol">Left Section</div>
<div id="content">Content Section</div>
<div id="rightcol">Right Section</div>
<div id="footer">Footer Section</div>
</body>
</html>

Here is the visual output:

As stated above, with minor modifications to the code, we can easily add another column to our existing layout, keeping widths and heights expressed in pixels. These simple examples show clearly that once we have defined our general layout, we are able to add more DIVS into the main containers or other elements, building more complex layouts with little or no effort. In a moment, we’ll see another interesting approach for styling DIVS: floating boxes.

DIV Based Layout with CSS - Fixed layout design with floating boxes

Since we have developed a couple of examples giving absolute positions to each DIV, the next step is building the same schema, this time using the “float” property. Originally, the float property was not intended for building Web page layouts. It’s commonly used to make text float around images or similar page structures. Possible values for float are: left (element floats to left), right (element floats to the right), none (element doesn’t float), and inherit (element inherits from its parent). However, we can apply this property to our DIVS, and get the same effect as with fixed boxes. Let’s see how it works:

<style type="text/css">

</style>

The corresponding HTML is like this:

<div id="header">Header Section</div>
<div id="leftcol">Left Section</div>
<div id="content">Content Section</div>
<div id="footer">Footer Section</div>

Again, we present the complete code:

<html>
<head>
<title>TWO-COLUMN FIXED LAYOUT WITH FLOATING BOXES</title>
<style type="text/css">

</style>
</head>
<body>
<div id="header">Header Section</div>
<div id="leftcol">Left Section</div>
<div id="content">Content Section</div>
<div id="footer">Footer Section</div>
</body>
</html>

There is something really interesting going on. We have applied the float property to the “leftcol” DIV, making it float to the left. Then, we made the content DIV float to the left too, sticking the two boxes to each other. The same layout effect has been achieved, making the boxes float. Please note, all absolute position declarations were removed, as well as top and left coordinates properties, so the whole file size has been decreased.

Finally, as to making our footer display correctly, we have “cleared” the float properties previously declared. Pretty good, isn’t it? The visual output is almost identical to that achieved with fixed boxes.

DIV Based Layout with CSS - Adding a right column

As you can guess, with minor additions, we can add a right column to our layout:

<style type="text/css">

</style>

The HTML code is the following:

<div id="header">Header Section</div>
<div id="leftcol">Left Section</div>
<div id="content">Content Section</div>
<div id="rightcol">Left Section</div>
<div id="footer">Footer Section</div>

And, the compete code is listed below:

<html>
<head>
<title>THREE-COLUMN FIXED LAYOUT WITH FLOATING BOXES</title>
<style type="text/css">

</style>
</head>
<body>
<div id="header">Header Section</div>
<div id="leftcol">Left Section</div>
<div id="content">Content Section</div>
<div id="rightcol">Left Section</div>
<div id="footer">Footer Section</div>
</body>
</html>

The visual output is almost the same as for fixed boxes:

In this case, the same principle has been applied to make our DIVS float to left. Since the left section floats to the left, so does the content section and the right section. Actually, all of they are sticking to the left, achieving the desired result. Again, this technique saves code as compared to using fixed boxes.

Lastly, but not least, will see the “Holy Grail” for page layouts: “liquid” design with floating boxes. Let’s go there now.

DIV Based Layout with CSS - Liquid design with floating boxes

Any well-designed Web page must flow properly, expanding the visual content to fit at any screen resolution. The professional look is evident, and extremely elegant, when it’s reached. However, as with everything in life, it has some limitations. These include many user screen options, monitor resolutions, different hardware and so on. Keeping in mind these conditions, “liquid” design is still the definitive way to go for truly professional websites.

Since we are talking about this issue, let’s see some code to get our “liquid” effect done.

<style type="text/css">

</style>

And the HTML code is the following:

<div id="header">Header Section</div>
<div id="leftcol">Left Section</div>
<div id="content">Content Section</div>
<div id="footer">Footer Section</div>

The complete code is listed below:

<html>
<head>
<title>TWO-COLUMN LIQUID LAYOUT WITH FLOATING BOXES</title>
<style type="text/css">

</style>
</head>
<body>
<div id="header">Header Section</div>
<div id="leftcol">Left Section</div>
<div id="content">Content Section</div>
<div id="footer">Footer Section</div>
</body>
</html>

As we see in our new developed layout, there are many noteworthy things to explain in detail. All of the DIVS containers' widths are expressed in percentages, so they will expand to fit the whole screen space. For the sake of this example, we have declared heights in pixels for our DIVS. This is a bad practice! When applied to real world design, DIVS heights will expand accordingly to the content included in them. Sure, this is a well-known subject for experienced designers, but it could be a very important issue to be considered for beginners.

Back to the code, we make our “leftcol” DIV float to the left, and its width is set to 19%. The “content” DIV is floated to the right and its width is set to 80%, covering the remaining space. Header and footer sections widths are set to 100%.

Visual representation for the output is appreciated in the following image:

As depicted above, the containers will expand to fill the screen, filling the complete space, and exposing a very consistent look for different screen resolutions.

DIV Based Layout with CSS - Three-column liquid layout with floating boxes

Finally, we’ll build a three-column liquid layout with floating boxes. Without a doubt, this is the most used layout model on the Web.

Here is the code:

<style type="text/css">

</style>

The HTML code is as follows:

<div id="header">Header Section</div>
<div id="leftcol">Left Section</div>
<div id="rightcol">Right Section</div>
<div id="content">Content Section</div>
<div id="footer">Footer Section</div>

The complete code is listed below:

<html>
<head>
<title>THREE-COLUMN LIQUID LAYOUT WITH FLOATING BOXES</title>
<style type="text/css">

</style>
</head>
<body>
<div id="header">Header Section</div>
<div id="leftcol">Left Section</div>
<div id="rightcol">Right Section</div>
<div id="content">Content Section</div>
<div id="footer">Footer Section</div>
</body>
</html>

The corresponding visual representation is shown below:

Let’s explain in detail the code for this layout. As in the previous example, we make our “leftcol” DIV float to left and its width is set to 20%. Our “content” DIV is floated to left and its width is set to 59%, while our recently added “rightcol” DIV is floated to the right, and its width is set to 20% too. Header and Footer DIVS are kept to the same width of 100%.

Finally, we have reached our main goal, having a Web page layout that expands nicely, filling the whole screen space flawlessly. The “elastic” concept is well deserved here.

One final consideration is worth noting: since DIVS containers will expand down as we insert more elements into them, sooner or later, we will end up with different heights for each column of the Web page. How can we make them have the same heights? With a little bit of JavaScript, we can achieve the desired result. That will be considered as homework, since it’s out of the scope of this article.

Wrapping Up

As seen on the examples presented here, DIV layout with CSS is a very powerful technique, well-suited to face different design approaches and styles, and a big improvement for our background as Web designers. Web pages are faster to download, avoid useless markup, look more appealing to search engines, and keep us closer to Web standards. There is a lot to gain in migrating from table-based to div-based layout. Just give it a try. Good luck!

DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware.

Source : http://www.devarticles.com/c/a/Web-Style-Sheets/DIV-Based-Layout-with-CSS/

For Website Designing Services hyderabad
Contact : +91 9247457705
email : varadesigns@yahoo.com