All visual differences are the result of the CSS. It means that you never need to change the code in any HTML markup. You only need to modify the external CSS file and the design and outlook will be totally different. This is the concept of CSS skinning.
This blog is also build with the same technique. You may try to click on the links below to see what it will change:
Style 1 Style 2 Style 3
Style 4 Style 5 Style 6
How to do that?
To build a skinnable website, you should have at least some basic understanding of CSS and XHTML. After that you need to create at least the following CSS files for your website:
1) Base CSS with simple structure
2) Advanced CSS with final structure
3) Skin CSS
5) Printer Friendly CSS
What are the benefits?
Since we have both the base CSS and advanced CSS, this is good for forward and backward compatibility. By using separated CSS files, modification on website style becomes easier and faster. We can also save our bandwidth, because the CSS files are cached.
Here are some useful references that help you to create skinnable website with CSS:
Last week we have talked about the importance of:
- knowing who your target people are
- knowing what their needs are
- knowing how you can satisfy their needs
Today we are going to start another topic. That is how we can make our website be more attractive.
There are many factors to be considered while designing a site. Let us discuss the major points step by step:
Build It for Speed
It is the truth that a lot of audiences will only pay attention to your site for about 10-30 seconds. To capture their attention, you must minimize your loading time by keeping graphics small. Try to use flash, animation, audio or any streaming video as few as possible.
Navigation should be Simple
Most audiences do not have the patience to navigate through the whole website to find what they are looking for. Making the navigation simple and smooth can easily guide them. Try your best to reduce all your layer of pages to be reachable within 3 clicks.
Consistency is the key
Always keep your site consistent in look, feel and design. Use constant colors, fonts, text size, typography and style and your audiences will feel that your site is professional.
In contrast, inconsistent design may disturb your audiences or they may think that they have gone to another site.
Make your site interactive
To make your site more interactive, you can trying adding feedback form as well as email form that allow your audiences to send you questions or comments. Keeping communication with your audiences will turn them into loyal customers.
Before we start the topic on creating a web project, we should firstly know why we need to build the website and what we want to show in the website. In other word, we need to analyzing our industry and understanding our audience. We called this stage or process Discover.
As we know that different audiences have different needs when they are searching for a website, we cannot build a website without any goal. Then, how can we meet the audiences' needs?
It is very hard for a website to meet all audiences' needs. That's why we need to fully understand the objective of our website. This is a process in a web projects called Define.
We only need to focus the audiences that interest our website topic. Therefore, it's better to provides only the information related to our website objective. For example, if you are building a journey website and you also add some contents related to pop singer. It is too confused. You are not recommended to do so unless your website is mixture site without major topic. Otherwise, you should better separate it into different sites or domains. Remember, identify our audiences and understand their needs is important.
The brief above is just the Discover and Define process for us to learn all we can about a projects before we start. Besides the discover process, we will also cover the other processes in the coming newsletters. They are Structure, Design and Prototype, Build and Test, Launch, Evaluate and Maintain.