Web Design Tips: Converting an Older Table-Based Email Template To CSS

Many email templates were developed using older table-based layouts that "break" easily and are very complicated to maintain.

Tables in HTML are fantastic for displaying tabular data. But as a layout tool they interfere with some dynamic and rich media elements, cause accessibility challenges, hog bandwidth, create maintenance issues, and are more fragile than CSS layouts. And for all of these reasons, it is time to update your broadcast email templates.

In this edition of Web Design Tips, I'll quickly show you how to convert a broadcast email template from a table-based layout to a fast and lovely CSS layout.

Handle With Care: Table-Based Layouts Break Easily

I have a confession to make. One of Practical eCommerce's email templates (our supplement) broke. It was not a huge issue, but a few horizontal rules got out of place. The problem had to do with the template' s table-layout.

Read More Article...

Web Design Tips: Rounded Borders in CSS

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

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

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

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

Read More Article...

Which is the Best Browser Supporting CSS ?

Today both Netscape and Microsoft have agreed to implement CSS in their respective browsers and this means that Web authors who want to use CSS have to know

which CSS elements they can and can’t use, as well as the significant differencesin the way adopted CSS elements behave in both browsers.

Both use only a subset of the complete specification as laid out by the W3C. Since both companiesare members of the W3C, however, they will adopt the full set of CSS elements over time - at least that is the hope. CSS1 (and CSS2) will only be useful to Web authors if they are widely adopted and fully implemented by browser manufacturers. If they are not, CSS could easily disappear. There is a precedent for this: the official HTML 3.0 specification was widely ignored by browser manufacturers.

The piecemeal way in which Netscape Navigator and Internet Explorer have adopted CSS elements is holding CSS back from wider adoption within the Web authoring community. In many cases, CSS elements that are supported in Internet Explorer are not supported in Netscape Navigator, or they are not supported in either browser. Sometimes only certain values of a CSS element are supported, or they only work when associated with certain HTML tags. There are even cases where a CSS element has been adopted for use within a beta (or “preview”) version of a browser and then later dropped in the next beta release - presumably an oversight, but not exactly something to inspire confidence in CSS for a Web author.

Read More Article...

10 Tips on designing a fast loading web site

Tips and tricks on effective web design

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

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

We learnt these tips while building our web site. We've enjoyed sharing them with you and hope that you found them useful.

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

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

Designing for IE - Design for Firefox First

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

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

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

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

Standards-Based Web Design Is Best

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

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

Read More Article...

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

Designing for IE - Design for Firefox First

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

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

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

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

Standards-Based Web Design Is Best

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

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

Read More Article...

How to Design My Web Site With CSS

Web design has come a long way in the past few years, and the good old standby of tables is no longer the accepted way to layout a web site. Though the look is still desired, browsers are more often not reading tables--or worse--they are reading them incorrectly. It is better to use Cascading Style Sheets (CSS). Almost any web site can be adapted to the 3 column site, which is the one we lay out in this article. You can then add a navigation bar and other items simply by defining them and their placement on the page. Read on to learn how to lay out a 3 column page in CSS.

1. Open a text editor document and save it as mystyle.css.
   
   
2. Set the margin and padding of the body element with the following code. Because some browsers do not default to zero, they must be physically set. Color must also be set for the same basic reason that not all browsers default to white. What follows is the CSS code for the beginning of the page: html,body{margin:0;padding:0;background:#FFF}.
   
   
3. Next, set the size for the body text. The code for this example is: body{font: 76% arial,sans-serif}.
   
   
4. The next command sets the paragraph margin: p{margin:0 10px 10px}.
   
   
5. The next command will give the page its container or main section, inside of which you put all of the other pieces of your page.This example uses the following code: div#container{width:1024px;height:1800px;margin:0 auto}.
   
   
6. On the left hand side of the navigation bar, add a division. The code is as follows: div#navigation{float:left;width:250px;height:100%}.
   
   
7. Now let's define the content section of the page. This is the middle section of the page where you add your main content: div#content{float:left;width:700px;height:1500px}.
   
   
8. For the right hand column, you add code similar to this: div#extra{float:right;width:250px;height:1500px}.
   
   
9. Adding headers and footers are handled in the same manner. The footer code for this page would be div#footer{clear:all;width:1020px;height:300px}. Add a header to the page that allows for your logo. The code for this header is: div#header h1{height:80px;line-height:80px;margin:0;
   padding-left:10px;background: #EEE;color: #79B30B}.
   
   
10. Within the CSS file you should also define your header fonts. They are denoted as h1{color:#ff0000;height:80px;line-height:80px;}; h2 through h6 can also be defined (this code defines the color as well as the height of the font).
    
    
11. Save this document and reference it in your html document to pull the styles into your website.
    

Tips & Warnings

• CSS will make changing things such as colors and fonts on all pages easy and quick.
  
  
• If you are working with a purchased template, you will have been furnished with a style sheet that you can modify.
  
  
• All code above is sample code. Modify the code to fit your unique web site dimensions. That is, things such as colors, heights and widths will be different based on your own preferences.
  
  
• If you are modifying a style sheet versus building from scratch, make a backup copy of the original before editing
  

Source : http://www.ehow.com/

Search Engine Friendly Pages

There is no point in building a website unless there are visitors coming in. A major source of traffic for most sites on the Internet is search engines like Google, Yahoo!, MSN, Altavista and so on. Hence, by designing a search engine friendly site, you will be able to rank easily in search engines and obtain more visitors.

Major search engines use programs called crawlers or robots to index websites to list on their search result pages. They follow links to a page, reads the content of the page and record it in their own database, pulling up the listing as people search for it.

If you want to make your site indexed easily, you should avoid using frames on your website. Frames will only confuse search engine robots and they might even abandon your site because of that. Moreover, frames make it difficult for users to bookmark a specific page on your site without using long, complicated scripts.

Do not present important information in Flash movies or in images. Search engine robots can only read text on your source code so if you present important words in Flash movies and images rather than textual form, your search engine ranking will be affected dramatically.

Use meta tags accordingly on each and every page of your site so that search engine robots know at first glance what that particular page is about and whether or not to index it. By using meta tags, you are making the search engine robot's job easier so they will crawl and index your site more frequently.

Stop using wrong HTML tags like to style your page. Use CSS (Cascading Style Sheets) instead because they are more effective and efficient. By using CSS, you can eliminate redundant HTML tags and make your pages much lighter and faster to load.

Source : http://www.selfseo.com/

W3C Tackles Web Typography with CSS 3

Whether it’s the Web API Working Group publishing a Working Draft of “Progress Events 1.0 or the CSS Working Group defining the syntax for using namespaces in CSS, have no doubt that the World Wide Web Consortium (W3C) has been hard at work trying to keep our dear web world in line.

About a month ago in an attempt to finalize the standards for the features of CSS 3 — the third version of Cascading Style Sheets — Jason Cranford Teague, a member of the W3C CSS Working Group and perhaps most notably the Director of Web Design for AOL Global Programming, posted an article on his blog covering the specifications for CSS Fonts and CSS Web Fonts and in the same quill stroke called for input from the design community.

The Difference: CSS Fonts vs. CSS Web Fonts

According to Teague, the difference between the two is as :

CSS Fonts

The CSS Fonts module defines how type is displayed on the page — which font is used, its size, and how it is styled (bold, italics, small-caps, etc). Font styles effect how the individual glyphs (what’s a glyph?) are displayed whereas text styles, such as underline, are applied evenly across all glyphs.

Read More Article...

Web Page Layouts Shouldn't Use Tables

I've been focusing on CSS positioning and creating tableless (and frameless) layouts, but maybe you don't really understand why you want to do this. After all, there are still people using browsers that don't reliably support these types of layouts. Plus, they can be harder to build, and most HTML editors don't yet support them. But there are still many reasons to learn how to write CSS layouts.

Valid XHTML

This is the number one reason to use CSS for layout. If you use tables for layout, you are writing invalid XHTML. Tables are only valid in XHTML when displaying tabular data. For example, the data in the accompanying image is something that might be created from a spreadsheet or database. It is "tabular data" and should be displayed in a table.

Using CSS to position and layout your pages is the only valid way to get the designs you used to use tables to create.

Read More Article...