March 2007

Summary - Here are some points to be kept in mind while designing a website that easy to browse through and serves its ultimate purpose of providing information. Legibility.

Content is the king, this is not to be forgotten ever! Any user coming to your website is there to get some information. If that information is hard to get, user will leave your website and go to Google to find out an alternate source.

Legibility of text is one of the most important things to be kept in mind. Selection of appropriate font-size and keeping adequate contract between text and background are too things that should always be kept in mind while making a website template.

Some researchers even claim that restricting font size by using CSS (where the design specifies a fixed font size value) is another thing that irritates users who like to customize the font size as per their visibility preferences.

Always keeping target user segment in mind while deciding the font-size.

Standardize navigation

* Always distinguish hyperlinked text from normal body text. Don’t forget to differentiate visited and unvisited links. * Include some of the key information-carrying terms in the anchor text itself to explain what users will find at the other end of the link. This will also aid in search engine optimization (SEO). * Try to avoid opening pages in new windows. A lot of PC owners have their pop-ups blocked, while the ones who don’t, feel lost when a new window opens.

Use of Media Elements

Flash and other media elements such as video, MP3 etc. should be used only when there is a need. Flash can be used to emphasize key information or better still to demonstrate some functionality. The latest version of Flash has amazing features to add functionality to a website.

So, the idea is to use media elements sensible and if-and-when required. Despite such good intentions, most of the Flash that Web users encounter each day is bad Flash with no purpose beyond annoying people. The one bright point is that splash screens and Flash intros are almost extinct. They are so bad that even the most clueless Web designers won’t recommend them, even though a few (even more clueless) clients continue to request them.

Browser compatibility

This must be the most annoying task for a web designer. Although a lot of browser incompatibility issues have been taken care in past 2-3 years, but even now we see some minor disagreements between the leading web browsers.

You like it or not, web users choose to browse web on the browser of their choice. So rather than turning them away just because they use a different platform, it is a must to design a website that performs reasonable alike on major web browsers (IE and Firefox for sure)

Form Pages

Try to keep your forms short and to the point. Big forms, featuring too many unnecessary questions and options tend to irritate a user. Try top cut all the questions that are really not needed. For example, do you really to know the first and last names in separate text boxes? Get your website analyzed for FREE to know what additional functionalities can be added to it. If you already know what functionality the web site requires, request a FREE quote now to get a detailed proposal.

About the Author
Vikas Malhotra is an established Internet marketing consultant having helped over 1000 businesses increase their visibility and sales online. He is an online branding expert with experience in design & development, affiliate marketing, online media planning, buying and also search engine marketing. To learn more, visit www.technology.mosaic-service.com.

Share This

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

What is Cross Browser Compatibility?

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

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

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

So what is a web designer to do?

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

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

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

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

HTML Editors

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

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

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

* Marquees - you can use a JavaScript scroller to create a similar effect that will work in the most common browsers. * bgsound tag - this is IE specific. * Page Transitions - this is IE specific. * Front Page generated Style sheets - this is IE specific and can have unexpected results or crash other browsers. * Front Page generated DHTML - it is better to use JavaScript to create the effects you want since it is more likely to be cross browser compatible. * Hover Buttons - this is IE specific and has been know to crash browsers including older versions of IE. You can use JavaScript, flash or CSS to get similar effects.

Other HTML Editors - the rest of the HTML editors will fall somewhere between Dreamweaver and FrontPage in cross browser compatibility. You just have to test the code your HTML editor generates.

CSS Style Sheets

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

Flash

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

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

Graphic Links

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

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

About the Author
Warren Baker is an Internet business consultant for WebDesigners123. WebDesigners123 connects the Freelance Web Designer with Webmasters who need their services.

Share This

Cascading Stylesheets become more and more important in today’s webdesign.

But before you decide to get started using CSS you should know why CSS is so important and what its advantages are.

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.

About the Author
Hilco van der Meer is an expert on Cascading Style Sheets. He is known as the creator of the “How To Master CSS” course.

This course discusses CSS in a fun and easy way. Apart from the book, he also created CSS training videos for the course. The course can be found at:http://www.HowToMasterCSS.com

Share This

These instructions pertain to Dreamweaver 4, although other versions would likely have similar instructions.

When you edit a CSS stylesheet that controls the text in your CSS template document, you instantly reformat all of the text controlled by that CSS stylesheet. Your edits affect all the documents linked to the style sheet.

To edit an external CSS style sheet:

• Open any document that is linked to the external CSS style sheet that you want to change.
• Do one of the following: Choose “Window > CSS Styles”, or click “CSS styles” in the Launcher.
• In the CSS Styles panel, right-click (Windows) or Control-click (Macintosh) and choose the Edit Style Sheet from the pull-down menu.
• Choose “Text > CSS Styles > Edit Style Sheet”.
• In the Edit Style Sheet dialog box, select the name of the external style sheet and click Edit. A second Edit Style Sheet dialog box displays the styles in the external style sheet. Select the style you want to edit.
• Edit the style however you wish.
  Click Save when you have finished editing styles.

Want to be able to run a small simple website and not have to spend anytime studying CSS and HTML and design software. . Our Cascading Style Sheets templates customization package is only $349.99 includes customizing (CSS version) site name, adding your logo, changing links, basic contact form page, and up to 5 other pages of content. Up loading and testing of site to your server also included. Note that the $62 price of the template is not included.

Learn more

Share This