IE6 calculate double padding with same float in container.
For Ex.
If we have a div with class name "main" with float left.
div.main{
float : left;
padding-left : 20px;
}
in ie6 it always calculate 40 left padding . so be careful with padding in ie6.
Thank You
Sunday, 11 July 2010
Monday, 7 June 2010
IE6 css tips and css problem
Trying to get CSS-based websites to look the same across all browsers can often be difficult. Many of the problems however lie with Internet Explorer implementing CSS commands differently to other, more standards compliant browsers. All is not lost, however, as many of the differences you see across browsers are caused by the same Internet Explorer CSS issues.
If You want to define some property for same class or id for different browsers
1.) For IE6 write :- * html id/class name
.wrapper{ /// run for all browser
width : 500px;
}
ex: * html .wrapper{ // this code run for only ie6 for wrapper class
width: 200px;
}
form this tips we can adjust all property . so enjoy and best of luck
If You want to define some property for same class or id for different browsers
1.) For IE6 write :- * html id/class name
.wrapper{ /// run for all browser
width : 500px;
}
ex: * html .wrapper{ // this code run for only ie6 for wrapper class
width: 200px;
}
form this tips we can adjust all property . so enjoy and best of luck
Saturday, 27 February 2010
CSS Layouts
Abstract
The Challenge: Replicate WebRef's front page using CSS. The Solution: CSS and lots of iterations.
Rogelio Lizaolo improves on Kwon Ekstrom's CSS version of WebRef's tabled home page. Months in the making, the final design successfully duplicates WebRef's layout without the use of tables. Numerous bugs were discovered in Netscape and Internet Explorer in how they handle CSS, and we found some elegant workarounds to these and other problems. What follows is a step by step CSS layout tutorial that shows how we got to the final design.
Introduction
In "Evolution of a Home Page" Andy King threw down the gauntlet, challenging readers to duplicate WebRef's tabled (and fabled) home page in CSS. Kwon Ekstrom came up with a solution, that worked in a number of browsers. After investigating his solution, I found a few problems with his design, and thought I'd try and improve on it. Andy, Kwon, and I went back and forth over a number of months tweaking and improving my design. What follows is a step-by-step account of my attempt to duplicate WebRef's table-like layout using CSS, while avoiding some of the bugs and problems found in other implementations.
The ultimate goal is to create a CSS layout that exactly resembles the WebReference.com layout made with tables and also behaves well with small window sizes and large fonts.
The target browsers are all the generation five and greater browsers, for both Windows and Macintosh platforms. We are also looking to use the same style rules for all of these browsers. This constraint makes the task more difficult and the final code larger and more complex than it would be for a browser with good compliance to CSS level 2, like Netscape 6. Thus, we cannot use those features that aren't supported for all browsers and sometimes the necessary workarounds to solve bugs or other problems yield a not so straightforward use of CSS.
The WebReference home page circa Spring 2001 has six big blocks that hold and organize the content (using three main tables to lay out the page):
The Challenge: Replicate WebRef's front page using CSS. The Solution: CSS and lots of iterations.
The Layout Challenge
- A top navigation bar with five text links and a search form.
- An advertisement block that holds a banner.
- A left navigation bar that holds the WebReference logo and text links.
- A right navigation bar that holds text links organized as the structure of the site.
- A main content area that holds the most recent articles and resources in the site.
- A colored box inside the main area that holds the "Tip of the day"
Can this complex layout be replicated using only CSS? Yes indeed! Read on to find out how. Disregarding the top navigation bar, the advertisement block and the "Tip of the day" we have a three column layout. We can ensure that the middle column is going to be the one with more content, and therefore, the height of the document will be dictated by this block, and the three columns should be the same size vertically. Notice that there is a white gap that separates the left column from the main content area and another one that does the same for the right column. These separators have the same width (9 pixels) as the margins around the table to the edge of the browser window.
Tuesday, 2 February 2010
Web Designing Tips
Useful Tips for Effective Web Design
Here are some essential web design tips that every web site should follow. Design your web site by following these tips and I guarantee that visitors will have a great first impression of your site.
Fast Loading web site designs - This is the number 1 tip that every web designer should follow. You might design a web site that looks fantastic but few people are going to see it if it takes a long time to load. Your designs should be optimized for the web and should not take more than 15 seconds to load. Remember, you might have a great design but very few people are going to see it if it takes a long time to load. Click here to for 10 tips to fast-loading web pages.
Clear Navigation - Once a visitor has come to your site you need to make them go through your site. To do this you need to have clear navigation. Make sure all your important links are at prominent places. Preferably right on top - that's usually where a visitor first looks. Make use of menus on the right and the left. Try to link to as many pages of your site. Let your information be accessible from all parts of the site. You never know what a visitor may be interested in. Try to also use the footer for your important links. Click here for navigation tips.
All Resolutions - Today, there are computers with all kinds of resolution. They range from 640 x 480 to 1024 x 768 and go even higher. Your job is to design your site for all these resolutions. The best way to do this is to design your site in terms of percentage and not pixels. Click here to learn how to design websites for all screen resolutions.
Browser Compatibility - Make sure your site is browser compatible. Your web site should look good in Netscape as well as in Internet Explorer. Don't stop designing your site as soon as you find that it looks great on IE. Usually Netscape gives some problems, especially when you try doing complicated HTML designs. But don't give up too soon, usually with patience these problems can be easily fixed.
Readable and professional looking fonts - Don't ask me how many times I've clicked out of a site just because the font is in Comic Sans and the color is a bright pink or green. Just by looking at the font you feel that the site is not a professional site. Don't use Comic Sans and other fancy fonts that may not be available on most computers. If the font you use is not available in a visitors computer the web site will use the default font of your computer which is much worse. So try to keep to common and professional web fonts. The fonts that I always stick to are Arial and Verdana.
Minimize the use of images - I believe that sometimes simple designs are the most effective for the web. Keep your site simple but neat. Don't clutter your page with big, bulky images that take ages to load. Instead use tables creatively and design eye - catching icons that will draw a visitor's attention to a particular section of your site. Tip - Visitors are usually more interested in content than in design.
Use of white space - Try not to clutter up your page with too many images, backgrounds and colorful fonts. Again use the Keep It Simple principle by minimizing the use of graphics and using a lot of white space. White space gives a sense of spaciousness and overall neatness to a site. Notice the white space in our site.
Check for broken links - Always check for broken links within a site before uploading it to your web server. In Dreamweaver you can check for broken links by right clicking on any file in the Site Files Window and then clicking on Check links - Entire Site. If you don't have this facility you need to upload your site and then check it using online tools like Net Mechanic.
Monday, 1 February 2010
Vector Resources for Designers
BittBox (http://www.bittbox.com)
Vecteezy (http://www.vecteezy.com/)
Go Medias Arsenal (http://www.gomedia.us/ )
Blog.Spoon Graphics (http://www.blog.spoongraphics.co.uk/)
Wednesday, 27 January 2010
Free Web Recourses….
Tips For Sending Valid E-mails From Websites
E-mails are one of the key elements of a website/web application. They are used in contact forms, sign-ups, notifications, newsletters, etc.
It is a common experience that sometimes e-mails sent from websites go to the junk folders or never reach.
Although it is not always possible to detect the reasons for this, there are several things that we can do to minimize the risk. Here they are:
Send E-mails Through A Valid E-mail Server With Authentication
This is the most important one which you may be automatically offering all the tips below.
It is mostly a good idea to send website e-mails through the e-mail server that will require authentication rather than the web server's SMTP server. Servers that are specifically set to send e-mails generally have Reverse DNS & SPF records, support greylisting ,etc.
Every scripting language offers methods to send e-mails with authentication.
On the other hand, sometimes, using e-mail servers are not enough as you may need to send lots of e-mails but the hosting provider may be applying limits, etc. In such cases, if you'll be sending e-mails through your web server, make sure to check these all:
Reverse DNS (rDNS)
As every domain resolves to an IP address, optionally, IPs can resolve to domain names which is called reverse DNS.
Many spammers use non-existing or dynamic e-mails without reverse DNS records. E-mail servers generally check if the sender IP has a reverse DNS record or not.
How to add reverse DNS records?: reverse resolving uses the pointer DNS record type (PTR record) which you should be asking your hosting provider to create it
SPF Records
Sender Policy Framework is being used by more & more e-mail providers everyday (Gmail, Hotmail & Yahoo uses it) as a criteria to detect if a message is spam or not.
It simply allows the owner of a domain to specify their mail sending policy, (like which mail servers they use to send mail from their domain).
SPF records are DNS TXT records which an online setup wizard can help you creating it (you'll need to create new DNS records).
Using A SMTP Server That Supports Greylisting
A very powerful spam prevention method used by mail servers is called greylisting.
When you send an e-mail, the server receiving it can say to your SMTP server: "send it to me again in x minutes" which is mostly not supported by the methods spammers use.
So, you need a smart SMTP server who can understand this command (IIS SMTP can not) that will re-send the e-mails when requested.
No Bulk Mailing
Both the SMTP server you'll be sending e-mails & the servers that will receive them generally have rules to define an IP/e-mail as spammer who sends x number of mails in y seconds.
So, if you have a large userbase to send e-mail, it will be a good idea to send them in intervals.
No Sending Of E-mails In Alphabetical Order
Again, if you'll be sending e-mails to a large userbase, don't send them in alphabetical order of e-mails as mail servers can mark them as a dictionary attack.
Check If The Server IP Is Blacklisted
Blacklists are systems, that are used by most of the e-mail service providers, that has bot or human e-mail accounts which analyze the common e-mail traffic & can blacklist IPs according to e-mails sent from them.
The server you're using to send e-mails can be shared by many other users. And, a spam that is sent by anyone on that server can lead to a "blocking" by e-mail blacklists which will damage the communication of every account on it.
How to make the beautiful link?
The most simple way to freshen your design - to change appearance of links.
Changes of styles will borrow all some seconds, but the result for certain is pleasant to visitors of your site. Below I shall result some examples of styles for links.
1. Color, underlining is the most habitual for us a kind of links on the majority of sites. Color allocates the link from the usual text, and the link will let know underlining{emphasis} to users, what is it.
a {color: #0000ff; text-decoration:underline;}
2. Color, without underlining - underlining is not always obligatory, sometimes it is enough to allocate the link with color to not distract attention of the user from reading article, forcing him to pass under links.
a {color:#0000ff; text-decoration:none;}
3. The fat text, underlining - if at you minimal
a {font-weight:bold; text-decoration:underline;}
4. A fine font, underlining - small letters one more good way to allocate your link. And underlining to the user, what is it the link, and uneasy unusually allocated text besides will let know.
a {font-variant:small-caps; text-decoration:underline;}
5. Underlining by strokes - we have got used, that the link is underlined by a continuous line. Underlining by strokes will give to our link unusual style and users
a {border-bottom: #000000 1px dashed; text-decoration:none;}
6. The color background, underlining - Allocation of the link by the text more habitually, than allocation of a background of the link, therefore such effect will by all means draw attention of the user and will noticeably update design. And as
a {background:#a6d4ff; border-bottom:#99c4d5 1px solid; text-decoration:none;}
Effects at prompting on the link as are important, as well as, for example,
Here some advice, what effects is better to apply:
1. Removal/addition of underlining - the most habitual and effective way of the indication of the active link.
2. Change of color - is better to change color for more contrast that the difference in change of color from one on another was appreciable. Also it is possible to change and color of a background.
Tuesday, 26 January 2010
Why we use Css ?
1. The content is separated from the design Because you are able to create a separate Stylesheet and link it to all your webdocuments, you have great control over how your website looks. So if you want to change a certain aspect of your page, you only need to alter one file: your Stylesheet! This Of course, generates some great flexibility. This flexibility is not available when your website is using tables for layout, inline font tags or inline defined colors. A single CSS file can contain positioning, layout, font, colors and style information for an entire web site.
2. You site uses less bandwidth and loads faster Because stylesheets are so lightweight, your website will load much faster. The main reason is because you do not need table layouts anymore for the positioning of elements. Since text loads really really fast your website will be visible in a flash. This means that visitors will be happier when surfing your website. They only have to download the Stylesheet once, and it's automatically reused for every page. So the only thing that needs to be loaded is the actual content. On average a website will load five to ten times faster if it makes use of cascading style sheets.
3. Your website will automatically gain better search engine results With CSS you can position any element, anywhere you want. So if your menu is at the bottom of your HTML document, you can bring it up using absolute positioning. The reason this is useful is to make sure the search engine spiders pick up the main content first. Another advantage you automatically gain is that your HTML code is much cleaner. So the search engine spider will not have to separate the junk code from the real content. So make sure you put your logo text and your menu at the bottom of your HTML document at put it at the top using CSS!
4. CSS is compatible with newer browsers Because more and more browsers are used other than Internet Explorer on a Windows machine, you need to be sure that your website is accessible by all major and newer browsers. By using webstandards, defined by the w3c, you are making sure your content is viewable in the future. Because there are so many browsers these days, it is impossible to test your website in all these browsers on different configurations. Coding to standards is then the only practical solution.
5. CSS can be used to display the same content on different media. Because you are able to define different stylesheets for different media you have great flexibility in presenting your content. The printer for example, is a medium on itself. If someone prints out your website, you will be able to modify the look of it. Add an extra black and white logo, remove the advertisements and change the colors to black and white values. It's all done easily by using cascading stylesheets. And the best thing is, visitors do not even have to know you created a new Stylesheet especially for the printer. Stylesheets can also be created specifically for PDA's and such. As you will understand, this adds some great flexibility to the presentation of your web document. Conclusion Cascading Style Sheets are created to make things easier. It gives you great control of your website and makes your visitors happy when they are surfing your website. You are prepared for the future and will gain better search engine results automatically. Start using CSS to its full potential today! It will suit you well.
2. You site uses less bandwidth and loads faster Because stylesheets are so lightweight, your website will load much faster. The main reason is because you do not need table layouts anymore for the positioning of elements. Since text loads really really fast your website will be visible in a flash. This means that visitors will be happier when surfing your website. They only have to download the Stylesheet once, and it's automatically reused for every page. So the only thing that needs to be loaded is the actual content. On average a website will load five to ten times faster if it makes use of cascading style sheets.
3. Your website will automatically gain better search engine results With CSS you can position any element, anywhere you want. So if your menu is at the bottom of your HTML document, you can bring it up using absolute positioning. The reason this is useful is to make sure the search engine spiders pick up the main content first. Another advantage you automatically gain is that your HTML code is much cleaner. So the search engine spider will not have to separate the junk code from the real content. So make sure you put your logo text and your menu at the bottom of your HTML document at put it at the top using CSS!
4. CSS is compatible with newer browsers Because more and more browsers are used other than Internet Explorer on a Windows machine, you need to be sure that your website is accessible by all major and newer browsers. By using webstandards, defined by the w3c, you are making sure your content is viewable in the future. Because there are so many browsers these days, it is impossible to test your website in all these browsers on different configurations. Coding to standards is then the only practical solution.
5. CSS can be used to display the same content on different media. Because you are able to define different stylesheets for different media you have great flexibility in presenting your content. The printer for example, is a medium on itself. If someone prints out your website, you will be able to modify the look of it. Add an extra black and white logo, remove the advertisements and change the colors to black and white values. It's all done easily by using cascading stylesheets. And the best thing is, visitors do not even have to know you created a new Stylesheet especially for the printer. Stylesheets can also be created specifically for PDA's and such. As you will understand, this adds some great flexibility to the presentation of your web document. Conclusion Cascading Style Sheets are created to make things easier. It gives you great control of your website and makes your visitors happy when they are surfing your website. You are prepared for the future and will gain better search engine results automatically. Start using CSS to its full potential today! It will suit you well.
Sunday, 24 January 2010
Friday, 22 January 2010
Div Vs. Table Layout
Table Layout
Over the last several years, developers have moved from table-based website structures to div-based structures. Hey, that’s great. But wait! Do developers know the reasons for moving to div-based structures, and do they know how to? Often it seems that people are moving away from table hell only to wind up in div hell.
This article covers common problems with layout structure in web design. The first part goes through what table and div hells are, including lots of examples. The next section shows how to write cleaner and more readable code. The final part looks at what features await in future. Please join us on this journey from hell to heaven.
You’re in table hell when your website uses tables for design purposes. Tables generally increase the complexity of documents and make them more difficult to maintain. Also, they reduce a website’s flexibility in accommodating different media and design elements, and they limit a website’s functionality.
Ease of use
Using tables to build structure is quite intuitive. We see tabular data every day, and the concept is well known.
And the existence of table attributes makes for a rather flat learning curve because the developer doesn’t have to use a separate style sheet. With divs, the developer must use the style attribute or an external style sheet, because the div tag doesn’t have any attributes attached to it.
Also, tables don’t break when the content is too wide. Columns are not squeezed under other columns as they are in a div-based structure. This adds to the feeling that using tables is safe.
Maintainability
Table contains different tags: the table tag being the wrapper, tr for each row and td for each cell. The thead and tbody tags are not used for structural purposes because they add semantic meaning to the content. For readability, each tag is normally given its own line of code, with indention. With all of these tags for the table, several extra lines of code are added to content. The colspan and rowspan attributes make the code even more complex, and any developer maintaining that page in future has to go through a lot of code to understand its structure.
Flexibility with media
In an ideal world, the same markup would be used for printers, mobile devices, screens and other media. Using tables for structure provides less flexibility in moving columns around and hiding entire columns. Your user may want to put the side column at the bottom or view a printer-friendly version. With tables, this would require a separate page for each media, which means extra costs during development and higher maintenance costs compared to a div-based website that separates content and design.
DIV Layout
Websites in div hell have more div tags than are necessary. This is also known as “divitis.”
The div tag is a block-level element that defines a section within a document. Divs are thus suitable for building the structure of Web pages. The div tag is also used to describe content that cannot be properly described by other more semantic tags. When developers do not understand the semantic meaning of other block-level elements, they often add more div tags than are needed.
Ease of use
Div-based structures have a much steeper learning curve than table-based structures. The developer must know CSS and understand the difference between block-level elements and inline elements, when to use floats and when to use absolute positioning and how to solve browser bugs.
The div element isn’t visual like the table element. Everyone knows what a table looks like, but divs are not as obvious. The good thing about a div, though, is that it’s only one element. It’s not wrapped in a parent element the way td tags are in tables. The container, then, is more flexible and doesn’t have the limitations of its parent tag.
Using a div for structure can make a page more fragile when content is pushing the div to its limit. It can also force columns to fall under each other. But this is usually only true for older browsers (particularly IE6); newer browsers make content flow to the next column.
Dealing with browser bugs can be a little tricky at first, but with experience developers can identify and fix them. Browser support for W3C standards is getting better and better. With the growing popularity of Firefox and Safari and the introduction of Google Chrome, we are seeing a big fight over market share, which inevitably makes for better browsers.
Maintainability
The biggest problem with div tags is that they are used too often. Divs should only be used to build structure and as placeholders for design elements when no other block-level elements can describe the content. The div tag is for logical groupings of elements.
Nesting div tags deeply is a sure path to maintenance hell, and the code will make developers think twice before touching it, simply because it’s so unreadable. True, using descriptive class and structure names makes the code more understandable, but using them for nested div tags is not always easy.
Too many div tags is code smell that content isn’t being described as it should. It means divs are being used when semantic block-level tags would better describe the content; for instance, headings should be wrapped in h1 to h5 tags. Writing semantic code usually reduces the code base; and less divs with floats helps keep browser bugs away.
Over the last several years, developers have moved from table-based website structures to div-based structures. Hey, that’s great. But wait! Do developers know the reasons for moving to div-based structures, and do they know how to? Often it seems that people are moving away from table hell only to wind up in div hell.
This article covers common problems with layout structure in web design. The first part goes through what table and div hells are, including lots of examples. The next section shows how to write cleaner and more readable code. The final part looks at what features await in future. Please join us on this journey from hell to heaven.
You’re in table hell when your website uses tables for design purposes. Tables generally increase the complexity of documents and make them more difficult to maintain. Also, they reduce a website’s flexibility in accommodating different media and design elements, and they limit a website’s functionality.
Ease of use
Using tables to build structure is quite intuitive. We see tabular data every day, and the concept is well known.
And the existence of table attributes makes for a rather flat learning curve because the developer doesn’t have to use a separate style sheet. With divs, the developer must use the style attribute or an external style sheet, because the div tag doesn’t have any attributes attached to it.
Also, tables don’t break when the content is too wide. Columns are not squeezed under other columns as they are in a div-based structure. This adds to the feeling that using tables is safe.
Maintainability
Table contains different tags: the table tag being the wrapper, tr for each row and td for each cell. The thead and tbody tags are not used for structural purposes because they add semantic meaning to the content. For readability, each tag is normally given its own line of code, with indention. With all of these tags for the table, several extra lines of code are added to content. The colspan and rowspan attributes make the code even more complex, and any developer maintaining that page in future has to go through a lot of code to understand its structure.
Flexibility with media
In an ideal world, the same markup would be used for printers, mobile devices, screens and other media. Using tables for structure provides less flexibility in moving columns around and hiding entire columns. Your user may want to put the side column at the bottom or view a printer-friendly version. With tables, this would require a separate page for each media, which means extra costs during development and higher maintenance costs compared to a div-based website that separates content and design.
DIV Layout
Websites in div hell have more div tags than are necessary. This is also known as “divitis.”
The div tag is a block-level element that defines a section within a document. Divs are thus suitable for building the structure of Web pages. The div tag is also used to describe content that cannot be properly described by other more semantic tags. When developers do not understand the semantic meaning of other block-level elements, they often add more div tags than are needed.
Ease of use
Div-based structures have a much steeper learning curve than table-based structures. The developer must know CSS and understand the difference between block-level elements and inline elements, when to use floats and when to use absolute positioning and how to solve browser bugs.
The div element isn’t visual like the table element. Everyone knows what a table looks like, but divs are not as obvious. The good thing about a div, though, is that it’s only one element. It’s not wrapped in a parent element the way td tags are in tables. The container, then, is more flexible and doesn’t have the limitations of its parent tag.
Using a div for structure can make a page more fragile when content is pushing the div to its limit. It can also force columns to fall under each other. But this is usually only true for older browsers (particularly IE6); newer browsers make content flow to the next column.
Dealing with browser bugs can be a little tricky at first, but with experience developers can identify and fix them. Browser support for W3C standards is getting better and better. With the growing popularity of Firefox and Safari and the introduction of Google Chrome, we are seeing a big fight over market share, which inevitably makes for better browsers.
Maintainability
The biggest problem with div tags is that they are used too often. Divs should only be used to build structure and as placeholders for design elements when no other block-level elements can describe the content. The div tag is for logical groupings of elements.
Nesting div tags deeply is a sure path to maintenance hell, and the code will make developers think twice before touching it, simply because it’s so unreadable. True, using descriptive class and structure names makes the code more understandable, but using them for nested div tags is not always easy.
Too many div tags is code smell that content isn’t being described as it should. It means divs are being used when semantic block-level tags would better describe the content; for instance, headings should be wrapped in h1 to h5 tags. Writing semantic code usually reduces the code base; and less divs with floats helps keep browser bugs away.
Wednesday, 20 January 2010
How to Create Great HTML Emails with CSS
HTML emails are widely used for all kinds of professional correspondence. Beyond email newsletters they're used for all sorts of application-generated messages, such as receipts and confirmations. Styled messages have lots of appeal for marketers, designers and consumers -- but for coders, it's a real headache to create them properly.
Creating an HTML email that looks right to every reader is a job that makes cross-browser testing look easy. What can go wrong? After reaching its final destination, an email could be read using any of a number of standalone email clients (such as Outlook, AOL, and Eudora), and even more Web-based clients (Yahoo, Hotmail, and Gmail to name a few). Each of these email clients displays your HTML email message a little bit differently, so ensuring that your message displays correctly can be a daunting task.
How are coders coping with this mess? Some say the only solution is to go retro -- by ditching CSS and using old-school HTML for formatting, but what about serious CSS coders who can't even type a font tag with a straight face? Fortunately, we have options.
Stylesheets that Stick
When you're coding an HTML email with CSS, make sure that you don't use linked CSS files (.css files attached using link or @import). These are the stylesheets most widely ignored by email clients.
CSS style declarations in the head of an HTML document (using style tags) are ignored by some email clients, such as Gmail, so they should be avoided for styles that are key to the email design. I sometimes use a style tag for styles that are "expendable" -- for example, when making all the links green instead of blue isn't crucial, it's a good style to define in a style tag.
The most reliable way to include CSS in an HTML email is to use inline styles. They aren't pretty, but few email clients ignore them. These styles are defined within the HTML tags in the body of the document, like this:
green and arial text
. Using span tags to apply inline styles also works well. Layout Techniques
Most people suggest using table, tr, and td tags for page layout within an HTML email. Tables are the most stable option, especially if you're creating email messages that require a more complicated multi-column layout. Gmail simply removes div tags, and coverage in other clients like Hotmail is spotty. Also, floating div tags don't work in several email clients, so any floating elements can be placed in a table (using
Monday, 18 January 2010
How To Enhance The Usability Of Your Homepage Design
The homepage of your website is the face of your online presence. It is what makes the first impression on online audiences about your company and business. When people type in the URL of your website, they reach your homepage. The homepage, should therefore present a brief introduction about the website and lure visitors to browse further within. The homepage is perhaps the most important page of the website and thus you need to take adequate measures to enhance its usability. Here are some tips to ensure the same.
Include a Crisp and Catchy Tagline
Draft a tagline for your website homepage that informs about the company and business in a simple sentence. When visitors enter the homepage, they should know what the website and the company is all about just by reading the tagline. In fact, by drafting a catchy tagline you can catch the attention of your visitors and make sure they don't forget you.
Draft a Meaningful Title Tag
The title tag of your homepage should have your company name followed by a very brief description of the website. Avoid using words like 'Welcome' or 'The' that just populate the space and do no value addition. Instead, try to include your relevant keywords and phrases in the title tags.
Cluster All Corporate Information
Website visitors generally don't bother reading about the company. However, there are times when they decide to do business with you only after they are convinced about the company. In such scenarios it is important to have good corporate information on the website. Create an About Us page on your website that is dedicated towards informing visitors all about your company and business and provide a link to it from the homepage.
Focus on Key Tasks of the Website
The homepage of your website should act as a guide for visitors and help them find a browsing route. It should provide a clear starting point to do what they want to do i.e. there should be clear links to the main areas of the website where visitors might be interested in going.
Include a Search Box
The search box is indispensable for any website. Internet users are an impatient lot and they love anything that cuts short the action steps. Search boxes enable visitors to search for the exact information that they need by just entering a query instead of browsing through categories to fins what they need. Make sure your search box is at least 25 characters wide so that it accommodates multiple queries.
Offer Snapshots of Inlying Content
The homepage of the website is where you can showcase things and lure visitors to further explore the website. A good idea is to place snapshots or post the topics of important content within your website. Whether it is a recent article or a report that you have on a certain web page, offer a preview on the homepage.
Use Meaningful Design Elements
The homepage of a website is important and should welcome visitors. However, that doesn't mean you can load the page with useless design elements and flash animations that offer no value but only increase the file sizes.
Include a Crisp and Catchy Tagline
Draft a tagline for your website homepage that informs about the company and business in a simple sentence. When visitors enter the homepage, they should know what the website and the company is all about just by reading the tagline. In fact, by drafting a catchy tagline you can catch the attention of your visitors and make sure they don't forget you.
Draft a Meaningful Title Tag
The title tag of your homepage should have your company name followed by a very brief description of the website. Avoid using words like 'Welcome' or 'The' that just populate the space and do no value addition. Instead, try to include your relevant keywords and phrases in the title tags.
Cluster All Corporate Information
Website visitors generally don't bother reading about the company. However, there are times when they decide to do business with you only after they are convinced about the company. In such scenarios it is important to have good corporate information on the website. Create an About Us page on your website that is dedicated towards informing visitors all about your company and business and provide a link to it from the homepage.
Focus on Key Tasks of the Website
The homepage of your website should act as a guide for visitors and help them find a browsing route. It should provide a clear starting point to do what they want to do i.e. there should be clear links to the main areas of the website where visitors might be interested in going.
Include a Search Box
The search box is indispensable for any website. Internet users are an impatient lot and they love anything that cuts short the action steps. Search boxes enable visitors to search for the exact information that they need by just entering a query instead of browsing through categories to fins what they need. Make sure your search box is at least 25 characters wide so that it accommodates multiple queries.
Offer Snapshots of Inlying Content
The homepage of the website is where you can showcase things and lure visitors to further explore the website. A good idea is to place snapshots or post the topics of important content within your website. Whether it is a recent article or a report that you have on a certain web page, offer a preview on the homepage.
Use Meaningful Design Elements
The homepage of a website is important and should welcome visitors. However, that doesn't mean you can load the page with useless design elements and flash animations that offer no value but only increase the file sizes.
Wednesday, 13 January 2010
How to find a good freelancer ?
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.
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.
Monday, 11 January 2010
How to Create a Web Site: A Beginners Guide to Web Site Design
If you want to create your own web site on the Internet, but have no idea where to start, this article will provide you with the exact information you'll need to get started, including what you can expect to pay to get your website up and running. However, before I begin, I'd like to tell you a little bit about myself, and how I got started, so you'll know who you're dealing with.
When I started on line back in 2007, I was completely overwhelmed with the Internet and had absolutely no idea where to start. I knew that I desperately wanted my own Internet business, which would require me to build my own web site, but I was very low on cash and there wasn't much information available to assist me at that time. For this reason, I knew I would have to do everything myself, which included learning how to design my own website.
I spent countless hours on line researching and learning everything I could about the Internet. I went to web sites that I admired and looked at the source code (HTML code that is used to create a web page) so that I could see exactly how that site was made.
The first time I looked at all that HTML code I was completely overwhelmed. I began to feel a bit discouraged thinking maybe I was trying to take on a bit more than I could handle. However, when I began to really look closely at the coding, I began to see how things worked. It really wasn't as difficult as I thought. And the more I looked at the code and began testing different things, the more confident I became. I realized that website design really wasn't hard at all! At that time, I knew I could create a web site.
When I started on line back in 2007, I was completely overwhelmed with the Internet and had absolutely no idea where to start. I knew that I desperately wanted my own Internet business, which would require me to build my own web site, but I was very low on cash and there wasn't much information available to assist me at that time. For this reason, I knew I would have to do everything myself, which included learning how to design my own website.
I spent countless hours on line researching and learning everything I could about the Internet. I went to web sites that I admired and looked at the source code (HTML code that is used to create a web page) so that I could see exactly how that site was made.
The first time I looked at all that HTML code I was completely overwhelmed. I began to feel a bit discouraged thinking maybe I was trying to take on a bit more than I could handle. However, when I began to really look closely at the coding, I began to see how things worked. It really wasn't as difficult as I thought. And the more I looked at the code and began testing different things, the more confident I became. I realized that website design really wasn't hard at all! At that time, I knew I could create a web site.
Subscribe to:
Posts (Atom)
