Tuesday, 30 October 2012

Planning your website

Many people get frustrated when they try to create a web page simply because they don't do any planning. If you jump in and start writing HTML with no plan you may find yourself lost and so will your visitors. Before you start up your computer get out a pencil and some paper. Create a diagram that illustrates how your website will be layed out.

Build your website one page at a time focusing on one topic per page. As you add new content expand your website diagram adding new pages in a logical order. This will make it much easier for you to build your site and for visitors to find their way around. If you follow a plan you will avoid leading viewers to blank pages, dead links or having them run in circles trying to navigate your website.

Don't worry if you think your website is not perfect. No website is ever totally finished. You should always be fine-tuning and updating your content. You should continue to learn web site design from books and other websites. Website construction is an ongoing process. Build - review - add new content - repeat.

http://www.websitedesignbasics.com

The Golden Rule of Website Design

So you might ask "How do I design my website?" The answer is to focus your website on solving a problem. People are on the internet to find answers - create your website to meet that need. Find a niche and provide high-quality, unique content people are looking for.

You can make your website a huge success by focusing on solving users' problems. Take Google for example - their website is an extremely simple, clean design that contains their logo and a box for you to enter what you are searching for - nothing on the webpage distracts the user from the solution they offer. When you visit google's website there is no question who they are and what they do. They are focused on quickly providing the visitor with relevant search results. That is why they have one of the most successful websites ever created.

All other elements of website design are secondary to filling the visitor's need. They will simply click away to the next website looking for a solution if you can't help them.

http://www.websitedesignbasics.com/

Monday, 29 October 2012

Great website design

reat website design is the result of careful thought and planning.

It doesn't matter if you're a beginner creating your first website or if you are an experienced webmaster and it doesn't matter if you build your website using a simple program like notepad or a WYSIWYG HTML editor like Dreamweaver - what makes the difference is your plan. You decide what to include on your website and how to present it. If you spend time thinking about your website's design before you start building it you will create an excellent site that visitors will return to again and again.

Your website has to be quick to load, nice to look at, easy to use and navigate. People will remember if your website was full of useful information or if it was a jumbled maze full of pop-ups, pop-unders and flashing gifs that they could not make any sense out of. Keep this in mind as you create your website.

Saturday, 27 October 2012

Cross Browser Compatibility

There are literally hundreds of web browsers in use around the world. All of them implement the W3C document standards a little differently. Web design company 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. The table below shows their usage as of November 2005.

Browser
% Of Users
Internet Explorer 6 68
Internet Explorer 5 6
Firefox 1 17.5
Firefox 1.5 1.5
Netscape 3
Opera 1.5
Other Browsers 2.5

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.