Web Design Tips: Mobilizing Your Site Using CSS

With a second style sheet and minor changes to a page's HTML, many online stores can offer an excellent mobile shopping experience without creating a second web page or registering a mobile specific domain.

Mobile Internet use is on the rise. And online merchants presumably want to provide customers with the best possible shopping experience. It is for these reasons that many leading ecommerce sites have begun to offer either mobile specific pages (typically a subdomain) or mobile specific styles.

In this "Web Design Tips," I am going to make some suggestions about whether you should build a separate, mobile specific website, and provide a quick example of how you might transform your CSS to create a more mobile-friendly version of your current page.
Should You Build a Separate Mobile Site?

The answer can be either yes or no. Personally, I believe that mobile Internet devices and mobile handsets will soon be as capable of rendering web pages as well as laptops and desktops do now, so that registering a .mobi domain or even building a separate site could be a waste of time.

A better solution might be to redesign your current site so that it is easy to render on multiple platforms. In fact, developing websites that easily migrate among platforms (mobile, desktop, RSS, or more) was the one of the main reasons that CSS was created. Good website design will largely separate content from layout and appearance.

If you do decide that the best way to serve mobile customers is with a mobile-specific site, I will encourage you to use a subdomain rather than a .mobi domain. For example the URL might be http://m.yoursite.com rather than http://yoursite.mobi.

Read More Article...

Web Design Tips: Cufón is a Fast Font Replacement Solution

An easy-to-implement JavaScript called Cufón allows web designers to quickly embed visually interesting fonts on their web pages, opening up new opportunities for typographical design elements.

Every medium has constraints. For print, there are things like size, ink density, and paper quality. For video, even the best available HDTV only musters up about 2.1 megapixel resolution (HD 1080p is 1920 pixels by 1080 pixels). On the Internet, those constraints can be things like bandwidth, screen size, or—today's topic—fonts.

Every computer has some number of fonts installed. The most common of these are generally referred to as "web safe," meaning you can be pretty sure that if you specify one of these common fonts in your CSS or HTML, the person who visits your page will see the font face you defined. But this can be limiting. What if you want a custom font that almost no one will have installed?

In this "Web Design Tips," I am going to describe one possible way to do font replacement, and show you how to implement it with Cufón.

Read More Article...

Web Design Tips: Basic CSS for Headers

How your site looks matters. Even subtle improvements—like using fonts or colors that compliment your theme—can have a positive effect on how consumers rate the trustworthiness of your store.

According to a 2003 Stanford University study of 2,440 people, 46.2 percent of online shoppers gauge the credibility of an ecommerce site by how professional and eye-pleasing the site looks. In fact, rightly or wrongly, appearance is even more important to shoppers than the presence of a security banner promoting hacker or credit card safety.

In this edition of Web Design Tips, a recurring Practical Ecommerce feature, I will show you the ins and outs of basic header formatting using a cascading style sheet (CSS) and HTML. This feature is aimed at HTML and CSS novices who have very little design experience.

Read More Article...

Useful tips for writing efficient CSS

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

px for font sizes

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

CSS declarations on one line

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

Blocking the Styles

I do pretty much the same thing: first element declarations, next global classes, and finally the layout containers and sections.

Read More Article...

Web Shop Design: Using Flash Effectively

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

Flash: The Good and Bad

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

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

Read More Article...

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...

Website Design Tips - How To Reduce Website Load Time

An important aspect of website design is to reduce web page load time to the lowest possible. A slim trim website design is in some ways like an attractive athletic woman, so let us call this article "A website weight loss programme" that will help you make your web pages load much faster.

Why is it so important to reduce website load time?

A website has global reach but Internet connection speeds in various countries are not the same. A lot of dial-ups and slow broadband connections still exist. Recently published research has revealed that unless massive amounts are spent on improving Internet infrastructure, the average global connection speed may show a dip by 2010. Even for those who do have high-speed connections, the total number of relevant websites on the Internet is growing fast. This directly translates into less time spent by the viewer per web page. Generally speaking, patience is a rare commodity in today's world of reducing resource-to-consumption ratios. Do you want to neglect a large proportion of potential worldwide customers just because your web page load time is slow? If not, then follow the steps below to reduce website load time.

Women usually work on trimming the hips, shaping legs and removing cellulites in various places. Similarly, I have classified below "website weight loss programme" into three 'broad' categories: Graphics, Code and Other Factors. Please note that you should meticulously follow as many steps as you can to take the redundant fat out of your website design and reduce "website loading time" to a bare minimum.

WEBSITE WEIGHT LOSS PROGRAMME

A. TRIM the Graphics (Slim hips:-)

1. Avoid Graphic Heavy or Complicated Web Design
   
   Website designs that use many images (especially those with special effects) generally take a long time to load. What if a good looking website keeps loosing valuable visitors just because its web pages take too much loading time? Try to be discrete and use less number of images / graphics while maintaining the look and impact of the website design. Remember that text links are easily read by search engines and load faster than graphic buttons. Sometimes it is also possible to move large images from an important page to a section like "Gallery" to reduce web page load time.
   
   
2. Use Only Optimized Images
   
   Optimize each image in editing software like Photoshop. There are different image formats like GIF, JPEG, PNG, TIFF etc., so try to save images in the appropriate format. As a rule-of-thumb, GIF is more suitable for uniform color images and JPEG for real world scenes. GIF saved at 256 colors should be reduced (as much as possible) to 128, 64 or 32 colors without comprising image quality. To reduce website load time JPEGs should be saved in the lowest quality possible without spoiling picture impact. You can also use PNG if you are sure that your users are using newer browsers.
   
   
3. Specify Image Dimensions
   
   While inserting images in HTML always mention height and width attributes. This helps the web browser to know the image size before loading it. The browser will then reserve the area for the images while rest of the web page design continues to load, thereby reducing website loading time. Do not use the height and width tags for image size reduction.
   
   
4. Pre-load Your Images
   
   You can pre-load some heavy images of the next pages (that can be reached by clicking on links within the current page) by defining them at the footer of the current web page. For example, img src="nextimage" height ="1" width="1" inserts a 1x1 pixel image in the footer that is read by the browser when the code above it has been read. Thereafter, while your visitor is viewing your main page, images of the next page will continue to download to the viewer's PC in the background and will reduce subsequent web page load times. This is not recommended for direct Adwords landing pages because Google has recently announced that high web page load time will negatively impact the landing page quality score.
   
   
5. Optimize Flash Files
   
   Animating important stuff can make an impact on the visitor. If possible, avoid animated GIF images in website designs; instead use Flash with discretion. Always use optimized flash files. There are so many ways to reduce Flash loading time that I will be covering this in a separate article.

B. TRIM the Code (Shapely legs ;-)

1. Remove Useless Code:
   
   While using an HTML generator, some extra or empty tags get inserted in the code, for e.g. breaking spaces, block quotes, unnecessary extra space, blank lines etc. Even if you hand-code HTML, always manually check your website design code and remove the empty or unnecessary HTML tags. Use appropriate DOCTYPE and close all HTML markup elements. The browser will then have less work to do matching elements. Clean coding of a web page will not only reduce website load time but also increases your text-to-code ratio and search engine spiders do not have to spend time deciphering irrelevant stuff.
   
   
2. Use of Shorthand External CSS
   
   CSS helps make your website design code compact as well as clean and its proper usage helps reduce website loading time. Define common font styles, images etc. (used in a set of web pages) in one single external CSS. By doing this, you will not have to insert the same tags again and again on different pages - just call the CSS and apply that particular class. With all your repetitive stuff defined in the CSS file, the browser won't have to read each single tag all over again. Always use External CSS file and remember to remove extra, unused styles from it.
   
   Use smaller class names and shorthand CSS instead of putting each CSS attribute in its own line.
   
   For example:
   
   "body{
   
   background: url("image.jpg");
   
   background-color: #cccccc;
   
   background-repeat: repeat-x;
   
   }"
   
   Above code can be written as below when using shorthand CSS:
   
   "body {
   
   background: #cccccc url('image.jpg') repeat-x;
   
   }"
   
   A properly created small external CSS file will substantially reduce website load time.
   
   
3. Use External JavaScript
   
   If you must use JavaScript, merge small common JavaScript files into a single external file and then (for newer browsers) you may compress it. This will reduce website loading time and you don't have to write the script on each web page - the web browser has this file in its cache and won't have to download it each time another web page loads.
   
   
4. For Table Based Website Design
   
   Avoid unnecessary nested and full-page tables. If you insert a table inside another table, it increases web page load time because the browser has to read the content located in the innermost table. Avoid unnecessary nested tables, instead divide your page into different sections like header, body, footer etc. according to your layout and use a different table for each section. Your browser will be able to load your web page a bit faster.
   
   
5. Use Table-less Website Designs
   
   Every time when a website is opened, the browser has to first scan tables and then load the content of the page which increases the website loading time. Using CSS and DIV tags you can avoid tables altogether and reduce website loading time substantially.

C. OTHER factors that reduce website load time (remove the cellulites:-)

1. Host on a high-end server with fast connectivity to decrease website loading time.
2. If you have a database driven website, it is faster and more secure to place your content on one server and your database on another. Consider SSI for common page elements, AJAX for page refreshes and Jar compressed files that load faster into the temp.
3. Avoid background music files and if it is very necessary to use them then use highly compressed music file formats. Avoid having much stuff on your website loading from other websites and reduce the number of HTTP requests.
4. Adding a slash at the end of a link like domain.com/contact informs the server that this is a directory page and it does not have to waste time working out what kind of file exists at that address.
5. Using fewer redirects, Iframes, PhP and database queries also helps reduce website loading time.

If you have followed the above website weight loss programme and made your website design slim and trim, you will be thrilled every time you see its performance. Remember that quality websites offer a lot of fresh content. When you add new pages, do not forget to apply the above tips to reduce website load time.

Article written by Rajiv Kakar of Centaurhosting.com (Website Design Company India) actively engaged in SEO Services, Web Designing and Web Hosting. He recommends visiting their Web designing Delhi Studio for more information on website design processes.

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

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...

New tool could make web development simpler

Having a web presence is a must these days but developing that presence is not easy, especially if you are starting from square one. A new tool from Fresh Tilled Soil could make the process simpler. Rapid Web Prototyping gives developers guides to use while developing HTML/CSS web pages, speeding up the process.

According to the company, websites have been developed in as little as three weeks; most, however, take between four and six weeks to complete. If you've checked in with other web development companies, you know this is quite a bit quicker than other options.

Here is how it works: developers begin by creating the user interface. By polling consumers about what works, which areas need more information and which areas are ready to go, marketers can be more certain that the website will be user-friendly once it goes live. From the customer phase, developers actually begin developing the full site.

Read More Article...