Friday, August 17, 2007

CSS Website Design

Cascading Style Sheets (or CSS for short) have slowly but surely become a website design standard over the past few years. It was not that many years ago that people used Frames to position their content across their web pages and Tables gradually replaced this. Many low-end website developers are still very comfortable with Tables, as it ‘does what it says on the tin’. However, more and more people are now moving over to CSS, as virtually all the layout options can be achieved using the code.

One major problem with CSS is that not all Web browsers produce the same results and it has not been helped in the past by the various browsers employing their own way of interpreting certain CSS conventions. You can think your CSS design looks OK in the current version of your preferred browser and can then be crestfallen when you view your Web pages in another version that has destroyed the formatting. Therefore, when moving over to CSS, it is important that you use the capabilities that are consistently supported across the entire range of popular browsers. It is interesting that the new version 7 of Microsoft's Internet Explorer has fixed a number of earlier anomalies, but many people are now waking up to the reality that IE7 has in fact caused problems arising from their earlier workarounds!

So why not bother with CSS, if Tables work for you? The principal advantages are as follows:

1. Web page code is generally much easier to follow;

2. The amount of code used to achieve the same result is much less. The general view is that by switching to a CSS layout, the typical page size reduction is between 50 - 60 per cent;

3. Download speeds for CSS pages are generally faster than their Table-driven counterparts. This is because browsers have to read through the table code twice before they are able to display the contents. They do this firstly to figure out the structure and then again to understand the content. It should also be recognised that a Table's contents can only be presented to the screen in one go, whereas CSS content will drop in separately, thereby giving a better user experience. It is also possible to govern the order in which specific screen elements appear, so the user is not distracted by the more bulky and slower to load image files. Furthermore, because all the code involved with CSS page layout is held in one external CSS document and is cached, it is faster than Table layouts that need to be interpreted every time a new page is displayed;

4. It is much easier to edit existing pages and to add new pages, particularly in the area of subtle formatting amendments. For example, you can change the font or colour scheme across an entire website in literally minutes;

5. CSS delivers enhanced accessibility. In recent years the number of people using web browsers on hand-held devices has risen significantly and CSS plays an important function in delivering content to PDA's etc through additional CSS documents. This just isn't possible with Table-driven layouts;

6. CSS is considered to be more Search Engine friendly because they can spider CSS pages quicker. However, it remains to be seen if this has any tangible benefits such as an improvement on the your page ranking.

On the flipside, there are a few disadvantages to CSS web page design you should consider:

1. As compared with Tables, CSS involves a much bigger learning curve;

2. Because of cross browser support issues, the time spent implementing workarounds should not be underestimated;

3. New browser versions can catch website developers napping if you are not careful. You can find that earlier workarounds have been overcome and the look of your website has changed overnight.

Ultimately, your decision on whether or not to move over to see CSS will probably depend on your level of technical capability and the time you're able to devote to understanding CSS layout alternatives.

David Sielicki is Features Editor with Fetcher the UK’s products and services directory. He is also a freelancer with Web Affinity

Quick Web Site Design - 5 Easy Steps to Create More Money In Web Site Design

Web site design may sound like rocket science to you, but it really isn’t. In fact, anyone is capable of doing it, and in today’s business world, it is an essential tool to have at your disposal. Here are 5 easy steps to creating more money through quick web site design.

1. Decide on the focus of the website. Without this step, the rest are useless. You need to know before you begin what the main purpose of your site will be. Then you can commence on quick web site design.

2. Figure out what specific features you want on the web site. Some examples are a shopping cart is it is a merchant website of a password section to protect customer privacy. The more details you have, the better.

3. The next step of quick web site design is writing out your content. It is better to do this before you have everything else set in stone, because then you can make adjustments to fit your content. All successful websites are driven by good content, so spend some time doing this.

4. Make a list of section for the site. This part of quick website design isn’t quite as important as the previous step, but it still matters a lot. You really want to have a well-organized website.

5. The fifth and final step of quick web site design is to build the actual site and evaluate it. You will want to make sure that everything turned out just right and see if it competes well in the industry you are involved in.

Do you want to learn more about how I do it? I have just completed my brand new guide to article marketing success, ‘Your Article Writing and Promotion Guide‘

Download it free here: Secrets of Article Promotion

Sean Mize is a full time internet marketer who has written over 1574 articles in print and 11 published ebooks

Avoid These Fatal Web Site Design Flaws (If You Want A Profitable Site)

Web site design is not rocket science but you have to avoid certain fatal flaws or your site will never get off the ground. You must also sidestep these common design mistakes if you want your web site to reach its fullest potential.

In other words, there are certain vital elements of website design you must get right or it's game over before you even get started. These are the design elements which every successful site possesses, essential components every webmaster must consider when designing a profitable site.

The Right Keywords

Perhaps one of the most deadly design flaws has to do with keywords. Many novice webmasters fail to target the right keywords when designing their sites.

Keywords are the vital lifelines of any well designed web site. Basically, keywords are the exact words or phrases web users type into search engines to find what they're looking for on the Internet.

You must get this right or it may spell disaster for your site. You must target the right keywords and optimize your site for them in all the search engines.

Most SEO experts suggest you have your main keyword phrase in the domain name of your site. This domain name should be directly related to the topic of your site. If you design a site on gaming laptops, then these keywords should be in your domain. All pages on your site should be related to these main keywords.

But first you must make sure your keywords are good searchable keywords, i.e. a large number of people must be searching for these keywords each day in the search engines in order to supply a steady stream of interested visitors or potential customers to your site.

How Do You Find Good Keywords?

There are many free keyword suggestion tools that you can use. All the major Pay-Per-Click programs such as Google Adwords, Yahoo! Marketing (Overture) and MSN Adcenter have keyword suggestion tools.

Many professional online marketers use keyword research software like Keyword Elite but you can also use any free online keyword suggestion tools to see how many searches are made. This is a good site:

http://www.digitalpoint.com/tools/suggestion/

Check and find good keywords related to your site and optimize your site for them. Don't pick the most competitive keywords because first page placement in the search engines will just be too hard to obtain especially for a new site.

Instead pick long tail keyword phrases which have fever searches but you will have a better chance of ranking high for these phrases. These long tail keyword phrases also have much better conversion rates than general (too broad) keywords.

Make sure your targeted keywords are in the title of your page and many experts suggest it should also be in the URL. Simple yet effective design elements which will increase your site's chances of success.

Exterior Links On Your Homepage

Another common design flaw is placing exterior, external links on your main homepage.

Most SEO experts suggest ALL your links on your homepage should be internal links pointing to your own content filled pages on your site. External links should be on a separate 'links page'.

If you want to use affiliate links, create a separate page for each affiliate product or program and link to this page on your site. Place your affiliate ID link and moneymaker on this content filled (reviews, how-to-use, testimonials...) internal page, rather than on your homepage.

To rank high, especially in Google, all your PageRank and visitors should be funneled into your site and not out to some external links. This is extremely important on your homepage - so make sure all or most of your links are internal links.

Simple Effective Navigation

You must design your site with simple effective navigation in mind. Visitors to your site must be able to access and move around your site with ease. Your site should also be fast loading even in this age of high-speed Internet for surfers are the most impatient creatures on the planet!

As a common courtesy, if nothing else, make sure you place a link back to your homepage on each and every page of your site. Instead of just calling it 'home' or 'homepage'; include your domain name or major keywords in this link: 'gaming laptop home'.

Have links to all major areas or topics of your site on each page. Make it easy for your visitors to find what they're looking for on your site.

Include a sitemap which lists all the major pages/content on your site. Make sure a link to your sitemap page is listed on all your webpages, never leave your guests stranded with nowhere to go.

These are just some of the most important design flaws which can spell failure for your site. Avoid them at all costs. So make sure you keep these design elements in mind when you're designing your next site or correcting your present one.

Creating a successful site will be much easier if you overcome these simple, yet all too common, web site design flaws. Give your site a fighting chance at success by sidestepping these mistakes, after all, sites like rockets are meant to soar.

...
The author is a full-time online marketer who has numerous websites, including two sites on Internet marketing. For the latest web marketing tools try: Internet Marketing Tools As for other mistakes in designing your site, especially where the overall look and feel of your site is concerned. Here's a good free PDF Report by Marlon Sanders entitled: 10 Graphic Design Mistakes Copyright © 2007 Titus Hoskins. This article may be freely distributed if this resource box stays attached.

Website Design - Usability In Practice

Adhering to 'better practice' development techniques such as CSS will go a long way to improving your site's usability potential. While not necessarily ensuring a more user-centred design, this will be beneficial to the kind of regular maintenance you may need to perform on your pages.

The great thing about using style sheets in particular is that you don't have to rip out inline tag formatting to tweak how everything looks or behaves. Remember that the production formula for a 100 per cent usable site that will never require any changes certainly hasn't been found as yet, and you'll more than likely want to gradually hone a live design in accordance with user response. CSS will provide much of the flexibility needed this without going all the way back to the drawing board, while also enabling you to explore other avenues of user provision and support.

A popular solution in accessibility circles is to build multiple style sheets into the design of every page so that colours, layouts and text styles can be switched to suit the needs of a diverse audience. This can also be a technique for improving usability, because it gives more choice and control over how the user views the site itself. Rather than focusing merely on making content more legible for disabled visitors, the logical extension of this idea would be to mirror the many usability mechanisms that feature within an Operating System such as Windows.

The desktop metaphor has continued to evolve in a direction that makes the personalisation of a workspace paramount, with menus, interface schemes, wallpapers and icons all able to be tailored independently. This has resulted in an environment that isn't constrained by one universal view, and can be adapted to meet the needs of different workloads, moods, tastes, requirements and abilities. Translating this kind of capability onto the Web may not be the simplest trick in the world, but the potential for letting users configure a design that works best for them shouldn't be overlooked.

Role Playing Games

Anyone familiar with 'user centred design' will know that working with 'personas', of pen portraits of potential users, helps you apply abstract principles of Web usability to a site. Personas are also great for translating accessibility guidelines, because they force you to think about how your target users, including those who are blind or unable to use a mouse, would perform the most common or crucial tasks within your site, such as ~gating a menu or checking out an order. Of course, it's only an approximation of how all people use the Web, but by having these issues in mind when you start building pages, you're less likely to end up with messy 'retrofits' to include further usability or accessibility features.

Holding The Users Hand

Many of the most basic practical design tips are actually the most important when it comes to usability. Apart from developing solutions for the specific expectations of the users you're trying to target, it will be equally important to ensure that nobody gets lost among all the content.

Doing your best to counteract this can range from remembering to give every page an accurate and appropriate title, to carefully modularising everything into more palatable sections. Text heavy content should be presented in a way that pushes the most valuable info to the fore without battling of overwhelming anyone.

Similarly, you'd be surprised how easy it is to lose novice users when pages extend beyond the length of the screen. Many people fail to realise that the browser's scrollbar is there to help gain access to document areas that otherwise would be ignored. Keeping your site real estate compact will therefore help to deliver things in short bursts and will also ensure that important navigational controls are always clearly visible.

Guiding visitors effectively around the site has to be considered a priority, and requires a narrative structure that reassures the user as they go about their business. This needn't demand much from a coding perspective, and can easily be achieved with a good use of headings and a consistent instructional voice. However, more sophisticated aids like dedicated help or FAQ pages will go a long way to raising user confidence if things go awry.

You might also want to consider the implementation of dynamic tools like rollover tips or info dialogs. JavaScript driven layers are perfect for quickly realising these kinds of features, with many online code libraries happy to let you download the listings with no fuss at all. As long as you remember to stick to the established conventions that characterise most of the interfaces your users will be familiar with, it's unlikely your designs will go far wrong.

The Road Ahead

As far as navigation goes, the roots of how well it works should be traceable to the planning put into the original site map. It's here that you should have ironed out any inadequacies in the way page links are structured, before translating it for real. But this isn't to say that errors or oversights won't be made during the practical process.

Take advantage of Dreamweaver's built in checking and reporting tools for analysing link tags, browser support, code syntax and spelling. The last thing any designer wants to do is lose visitors to bad links or find the flow is interrupted by a page loophole that can't be escaped.

In this instance, alternative routes of navigation may prove both beneficial and more troublesome as you increase the site's complexity. Giving visitors a number of different pathways to the same destination is sure to give you a bigger headache, but the impact on usability will be immeasurable. Visitors will appreciate the option of either leaping to the info directly or taking a more roundabout journey when casually surfing.

This is something that a good many commercial sites, and particularly search engines, will do whenever they decide a general revamp is called for. Kelkoo's recent re jig to their pan European domains made a real point of cutting back on the number of pages shoppers would have to traverse to reach the products they wanted. By allowing direct keyword searches, along with general category fishing, multiple results listings and the selection of suggested items from their database, they consciously thought about how best to cater for their market, and have gone some way to improve usability in the process.

Access All Areas

There are still too many misconceptions surrounding Web accessibility. it isn't just a 'disabled thing', it's not simply a question of providing text only alternatives, and most of all it doesn't mean sacrificing the look and feel of your site. if done properly, the result is a site that's easier to maintain, leaner on bandwidth, and will evolve gracefully as the Web itself continues to evolve and widen its scope.

Think of accessibility as the next stage of evolution, reflecting the ever widening reach of the Web and the maturation of browser technology. The online world these days is far more representative of the offline world, and the special circumstances of many users can't be ignored. At the same time, the coalescence of browser standards, especially CSS, means it's possible to create sites that adapt to personal circumstances and preferences.

----
Magnetic Code Website Design is an exponent of usability good practice. See ExpertFound.com, which is an independent review site for an example of their work, including this review of the Fat Loss 4 Idiots software, and this review of the Rocket Spanish package.

Top Ten Fonts for Website Design

The top ten fonts for website design might change in order, but for the most part the fonts that make up this list stay the same due to their popularity. In general, the top ten list includes Arial, Frutiger, Futura, Gills Sans, Helvetica, Lucida, Optima, Palatino, Agfa Rotis, and Univers.

The reason these fonts are so popular is because they are simple and easy to read on computer screens with low resolution. As a result, most of the time fonts that are unique, wild, and distinctive are not used on web pages so as not to distract the reader from what is trying to be said and communicated through the font on the page. Since the website uses content to get the point across, it is prudent to use fonts that are easy to read. If you make it difficult for a visitor to read the content, they will more likely leave than put forth the effort. Consider the following points as well when developing your fonts for your website.

- Big Fonts

This is your web page and likely your livelihood, not a term paper or research project that has a defined style. Because of this, you can use big fonts, bold them, make them stick out and attract the reader. You can drive your point home with larger fonts and they also will be significantly easier for your visitor to read. The object of your website is to present information that is easily seen, read, and found by visitors. So, go ahead and increase the font size even in regular text that is not in a heading or title. Many of your visitors will thank you because they will not have to put on their glasses or strain to read the text. Sometimes bigger is better.

- Sans Serif

If you have no idea about fonts, how they translate to your web page, or how they will affect your visitors and ultimately sales, then you should definitely stick with a san serif font. The reason for this is that these fonts are the most legible and provide the best readability for visitors in a low resolution atmosphere. Don’t take risks with your fonts, go generic and use a sans serif font. Your visitors will thank you for it and your sales will not suffer from it.

- Simple is Safe

Again, don’t let yourself get carried away with your fonts and designs. Instead, keep the thought in mind that simple is safe. If you want to be bold and brazen in your website design then don’t take that route with your fonts. Keep it simple, basic, and easy to read, and you will benefit significantly more than if you try to mix it up.

Michael Turner reveals step-by-step how you can increase search engine traffic in his free 7 part mini-series. Grab it now at http://www.powertraffictactics.com/