XHTML 1.0 is a reformulation of HTML 4.0. What this really means is that learning XHTML is basically the same as learning HTML. The main difference is a few simple rules - as XHTML is more strict than standard HTML.
1. Stricter adherence to the HTML specification
Many browsers are very lax in how they interpret HTML. This leads to incongruities in how the pages are displayed, and XHTML doesn't allow that. The best way to correct this is to use an XHTML validator such as HTML Tidy.
2. Write well formed documents
What this generally means is avoiding overlapping elements. The following nested code is acceptable: p Paragraph em. emphasized ./em ./p because the tag is opened and closed within the p tag. However, this is not allowed: because the em tag overlaps the p tag.
3. Write tags and attributes in lowercase
XHTML is a case-sensitive markup language, so LI and li are potentially two different elements.
4. End tags are required
In HTML, some tags which actually contain elements do not require the end tag.
The most common of these is the p tag. XHTML requires that the /p tag be used. For singleton tags, such as br you should include a trailing slash in the tag itself, e.g. br /
5. Attributes must be quoted and include values
What this means is that non-quoted attributes such as are invalid. And attributes which used to stand alone, must now be written as name="value" pairs. For example: br noshade="noshade"
This article describes in simple terms, practical and effective tactics used to optimize your website. Following these suggestions, will result in a more enjoyable visitors experience and traffic. At the end of this article there is a Reference and Resources section where you can find supportive information and services related to each topic.
Compatibility With Web Browsers
It isn't a surprised for website owners, webmasters and others who are involved in their websites optimization, to see how different the web pages are displayed in various web browsers or between different web browsers version.
Displaying differences it's the result of how the various available web browsers (Mozilla Firefox, Internet Explorer, Netscape, etc.), or their versions, handle HTML code, HTML errors or computer screen resolution used.
Title and Meta Tags
Meta tags are information inserted into the [HEAD][/HEAD] section of the HTML code of any web page. There are many type of meta tags. We will be considering only two of them and the [TITLE] tag.
From the visitor's point of view, the only tag visible within the head section is the title tag, which is not a meta tag itself, but a stand alone tag found in the head section of the web page. Think of the title tag as the subject of an email message.
Two of the most important meta tags are the keyword and description tags which are invisible to the visitor's eyes but should be also included if you want your page information (title and description) to be properly displayed on the search engine result page (SERP) listing.
In the early days of the Internet, one could influence the search result by including keywords within the meta keyword and meta description tags you wanted the search engine (SE) to classify your page for, today you cannot influence the result of the SE by just adding desirable keywords anymore.
Keyword tag should contain between 5 and 10 keywords that appear on the body of your page. You should never include keywords in the tag that do not appear on that page.
The Importance of ALT Tags
Many web surfer and visually challenged people browse the Internet with the image viewing option of their web browser turn off or using text readers respectively. When one of these surfer visits your site containing lot of images, they won't be able to read the content of your pages if the images do not contain the ALT="your image description" tags.
Browser Safe Color Palettes
Computer platforms handle color differently, and the web browser limits colors significantly. In order to move through the digital world with consistency, the web page designer must be well aware of this fact.
While in the real world all colors are the result of some subtractive combination of three primaries colors: red, yellow, and blue. In the digital world all colors are the result of additive color synthesis or combination of three primary colors: red, green, and blue, referred to as RGB for short.
RGB values are derived from a method that numerically determines how much red, green, and blue make up the color in question. Each color contains a percentage of red, green, and blue.
If colors outside the safe palette are used, many web site visitors will see the color the computer has available instead of the color you have called for.
Check For Broken Links
Broken links are links that lead to nowhere, and clicking on the link will show you a 404 error code page. It is said that about 5% to 7% of all links on the Internet are broken.
A site that contains broken links, including missing links to images, gives a very bad impression to potential visitors and it is a frequent cause of lost visitors.
Check Web Pages Load Time
Many Web surfers today browse the Internet through a high speed broadband connection, but a significant percentage of those Web surfers still use slow speed dial up connection to access the Web.
Surfers are known for having a very short attention span and will leave your site before the page finishes loading. Generally speaking, the maximum accepted time for a page to load is about 10 seconds, and it is recommended that your page to be around 25Kb in size.
Decreasing the loading time of a web page can be easily achieved by both, compressing or shrinking the size of your images, and reducing the size of your HTML code.
HTML Code Optimizer
An HTML Optimizer removes all blank spaces in your HTML code, and this is another way to make your page load faster. The result is shorter downloading time. Pages will be shown in a client's browser in exactly the same way, but the file size will be smaller.
Make sure that the HTML optimizer you use does not compress embedded script codes within your page, which might be rendered unusable if they get optimized this way.
BORDER, HEIGHT and WIDTH Attributes
The attributes used with the [IMG] tag to specify an image width and height are the WIDTH and HEIGHT attributes indicating the exact size of your image in pixels. The other attribute that influences the way an image is rendered on the user's screen is the BORDER attribute, which should be set to zero if you don't want your hyperlinked image to show a blue border around it.
One interesting advantage to adding the height and width attributes to an image tag is that when you do specify the image size for all of your images, browsers take a lot less time to render your page. To find out the width and height of an image, just open it with any image editor and look for its property.
Validate Your HTML Code
Just as texts in a natural language can include spelling or grammar errors, documents using markup languages like HTML may, for numerous reasons, not be following these rules. The process of verifying whether a Web document actually follows the rules for the language it uses is called validation.
Different browsers, or versions of the same browser, will make different guesses about the same illegal code; even worse, if your HTML code is really bad, the browser could get confused and produce a mangled display mess, or even crash. Validating your HTML will help ensure that it displays properly on most browsers.
Just when you thought that you have the coolest website design in the World Wide Web, you just realize that everything has been wrong all along. You're not ranking well in search engines, and you're not driving the right kind of traffic from your target market. Simply put, your products and services are not availed, and you're not gaining the profit you've wanted.
Top 5 Website Design Mistakes People Do
It doesn't mean that because you're practically good in layout and art, you're already a master with regards to website design. Hence, if you want to make sure that you can hit the target, take note of the following mistakes in website design:
1. Your website isn't just compatible with a lot of Website browsers. One of the foremost reasons why your website design doesn't click at all is because it won't show up with majority of Internet browsers. Keep in mind that there are many types that can be utilized by Internet users. Classic examples include Mozilla Firefox, Internet Explorer, Opera, and Crazy Browser. Thus, it only means that if you want to make sure that you can reach out to as many potential customers as possible, your website should show up in all of them. Before you upload your website, do some testing first so you can already correct possible problems.
2. You are simply using too much Flash. There seems to be a wrong notion when it comes to websites. A lot of website designers these days believe that one of the best ways to the heart of their target market is to incorporate a lot of Flash and other animated images into their site. Though they never fail to capture the initial fancy of anyone, these techniques have their own drawbacks. First, they can slow down the download time of your web page, which, unfortunately, can make Internet users impatient. Second, search engine spiders read texts, not images. Hence, it becomes harder for you to get indexed when you use a lot of Flash.
3. Fonts are not friendly to Internet users. Besides the overall layout of your web pages, you also have to take into consideration the font that you are going to use. The usual mistake in website design is using very small fonts, which makes content very inconvenient for Internet users to read. Sometimes they are frozen, which means you cannot adjust their sizes. You should ensure that your font is readable by complementing them with the background. According to studies, the best combination is using yellow texts over dark background.
4. Content doesn't match the theme of the website. Surprisingly, there are website designers who are making website content their second priority. They are very difficult to scan, they are too long with no proper white spaces, and that they seem to be forced to fit in just one page. The bottom line is Internet users are finding it truly difficult to get the information that they truly need.
5. web pages are not search-engine friendly. If you're not taking care of your headline tags, not adding meta tags in each of your web pages, or if you've been stuffing a lot of keywords in your websites, then you will surely not gain the favor of search engines.
An element whose function is of a button has been created using JavaScript or another scripting language. The user's expectations regarding how a control should look are being met by making the control look just like a button.
The following example of code accomplishes the task:
| a.widget {font: caption;} |
By using this method, the font of any a element with a class of widget is set to be of the same style, weight, size and family as the text from the captioned controls, such as the button.
There are six system font keywords in CSS2:
- Status bar. This keyword defines the font styles which are used for the text in window status bars.
- Menu. This keyword is used to set the font style for the drop-down menus and the actual menu list fonts.
- Icon. The fonts used for the labels of the operating system's icons (the ones used for the files and folders for example) are set using this keyword.
- Caption. The caption command in CSS defines the fonts used for the controls (buttons and drop-downs).
- Message-box. This is used to define the fonts used for dialog boxes.
- Small-caption. This keyword defines the font styles used for labeling small captioned notes.
These values can be used only together with the font property. They are also their own form of shorthand. Lets take as an example a computer where the operating system show the icon labels as 10 pixels Geneva, without any other effects such as bolding, italics or small caps.
Because CSS is pretty unique in this resort and working with these settings is a bit more difficult than usual because a simple value as font can hold a whole array of other values.
One may want to use the font style as icon labels. But not also that, but the programmer may want for he font to appear bold, even if the icon labels are not set to bold on the user's computer.
By writing the code as:
| body {font: icon; font-weight: bold;} |
The user agent sets the body element's font to be exactly like the icon labels with the first declaration. After that, the weight of that font is modified with the second. The bolding would be lost if the order of those operations were reversed, the font's declaration value would override the fonts value from the second command.
A particularity of CSS is that it won't let the programmer fix a generic font family. Usually the recommendation is for the author to write something similar to this next code line Geneva, sans-serif; if the browser found on the client's computer does not support the font selected.
In this case it is not required anymore. If the same font used to display anything on the computer will be extracted by the user agent, it will be available for the client's browser.
There can be cases when that particular font is not at all available or the user agent cannot determine it in any way. In these situations, the user agent can take a guess at using the most appropriate set of fonts. If the caption font is determined, the font used for small-caption will be the same as the first one, while reducing its size. And in the situations the font cannot be determined by any means, it is up to the user agent to use its default font.
CSS 2 aids the programmer if he desires to reuse the colors which are already specified in the user's operating system. It does this by defining a series of system color keywords. Wherever a value is allowed, any of these values can be used. It is thus possible to match the color of the user's desktop with the background color of a certain element; this is done through this code:
| div#test {background-color: Background;} |
Also, the system's default text and background color can be attributed to a document by using this line:
| body {color: WindowText; background: Window;} |
Despite the fact that there are in total 28 color keywords, CSS does not define them individually. Generic (and thus very short) descriptions of each keyword are used instead. The most important of the 28 keywords are presented in the list which follows. There are cases when there is a direct analog with the options present in the "Appearance" tab in Windows and these cases will be noted accordingly.
These keywords are:
- ActiveCaption. This setting controls the color of the caption of the current active window (this is also the first color in the "Active Title Bar").
- ActiveBorder. This way the color applied to the outside border of the active window is set (this is also the first color option in "Active Windows Border").
- AppWorkspace. This keyword controls the background color used in software that support multiple documents; this is the case with the color found behind the open documents in Microsoft Word (this is the first color from the "Application Background" setting).
- ButtonText. The ButtonText defines the color which can be attributed to push buttons (it is the font color option in "3D Objects" setting).
- ButtonShadow. This attribute allows for setting the color for three dimensional elements.
- ButtonHighlight. When three dimensional display elements are displayed, this keyword defines the highlight color on the edges of the specific element that is faced opposing the virtual light source. For example this will be the color of the right and bottom edges of the three dimensional element if the virtual light sources comes from the upper left part.
- CaptionText. Through this keyword programmers can set the caption's color, the size box's, and of the symbol in a scrollbar arrow box. (this is the first color in "Active Title Bar").
- GrayText. This value is used on the grayed text, or the text which is disabled.
- Highlight. This option can let one set the color of the items selected in a control.
- Menu. The color found in a menu's background cat be set using this value (it is also the first color in the "Menu" setting).
- MenuText. This sets the color of the text in menus.
- InfoText. This is the color which is found in tool tips (the same as the font color in "ToolTip").
- Scrollbar. The scrollbar's gray are is defined this way.
- WindowText. The text's color in windows is set this way (the font color in the "Window" menu).
- WindowFrame .The frame of the window will have the same color as set by this keyword.
- Window. The same as the first color in "Window" and it sets the color found in the background of a window.
- ThreeDFace. The color of three dimensional elements will be defined like this.
- ThreeDShadow. The dark aspect of the shadow of three dimensional display elements.
CSS uses the case-insensitive setting for the system color keywords, but it is advisable to use the aspect presented above (mixed capitalization) in order to make the color names more readable.
So, what is CSS? It can control the design of your entire web site. Yeah, it can. If you know how to use it. And you should! Because it's so much easier to change the color of your background one single time, instead of one time for every page in your web site.
Since this is only a quick introduction to CSS I will only explain the basics of how to set the properties of different tags, styles and so on.
It's important to know the prefixes of the different things you can control in a sheet.
With standard HTML tags like html, body, p, h1 etc. you just type the name of the tag as shown in the image below. Styles you have created yourself always start with a dot( . ). And finally, id or names of div tags etc start with a #.
After the name of the tag or style is where you set the properties. Like font size, color and so on. But remember! These properties have to be placed inside two curly braces. First an opening curly brace, then a closing one.
To set a property, find the name of the property you want to set (ex: font style). Then type "font-family" on a new line as shown below and follow with a colon ( : ). Then set the font you want to use. Ex: "Arial, Helvetica, sans-serif". Then follow with a semicolon ( ; ). If you want to add a new property, just repeat the process on a new line.
Take a look at the examples:
So how do you use it? Create a new html file in Dreamweaver 8 (CTRL+N). In the "Properties" tab, in the "Style" drop down menu, select "Attach Style Sheet". Then find your css file and select "Add as: Link" and then "Ok".
Write a few words in your html document and highlight them. In the "Properties" tab, in the "Style" drop down menu, select the style you just created.
And that's basically it. If you want to learn more, please visit the forums and ask around.
Create a new HTML file in Macromedia Dreamweaver 8 (Ctrl+N).
Then create a new CSS file by following the same steps as above, just make sure you select "CSS" instead of "HTML". Then save the two newly created files in the same folder. For example "my website". Save the HTML file as index.html and the CSS file as css.css.
The first thing we want to do, is to set the padding and the margins on the index site to 0. This is done using the CSS file we just created. Open your CSS file.
On line 3, type the same as I've done.
Now, go back to your html page and import your stylesheet.
Then switch to code view.
Inside the body tags, write this:
This will be the main container of the page.
Then, inside the newly created div tag, create another one. Like this:
Then, underneath the header div, still inside the main-wrap, write three more divs.
You should also fill the div tags with some placeholder text like this:
If you return to the design view, you will see four of your div tags. This is because you filled them with text. Empty div tags will be 0px in height if you don't set the height using CSS.
It doesn't really look like a web site yet. But after some work in the CSS sheet we will get closer to a full site.
Open your CSS sheet.
On a new line, type:
This will set the width of the main-wrap div to 800px. The margin property is set to auto. This will center the div tag.
If you go back to the html page, you can see the changes we made.
It should look like this:
Go back to your CSS sheet and write this:
That's how you set up your divs for a site. If you have any questions ask in the forums, we are there to help you!
A Website Content Management System is simple terms allows you to update your website without the assistance of a web designer / developer. Initially you will require the assistance of a web developer to create the Website Content Management System for you business, but after this process is complete you should have the ability to add new pages, add images, update text information, change your meta tag data and re-structure your website navigation if required. Many other functions (features) can be added to your Content Management Systems but these function (features) will be determined by your development specification (requirements).
A Website Content Management System is useful only if you are going to update your website on a frequent basis or require more control over the information on your website. You will also be saving cost in the long term as you will not be reliant on a web developer / designer to update your website on your behalf. In the sort term Website Content management Systems are more expensive than standard plain html based websites but the advantage to you is the ability to grow your website yourself. Most ecommerce solution use some type of Content management Systems for example giving you the ability to add new categories and products to your ecommerce store. Content Management Systems can be used in website development in many different ways and are not secluded to ecommerce stores.
Website Content management Systems also give you the ability to identify administrators and set content management roles, in simple terms you can give specific privileges to different members of staff within your organisation and restrict members of staff from specific Content Management functions which do not apply to their role.
In some cases your Website Content management Systems can have the ability to archive information. Creating an archive system is an effective way of retaining information for internal or external reference. A good example would be a portfolio of clients which you have worked with, once your client project is complete, you can add informative information to an archive system allowing internal or external users to view this information, enabling a user to see what you have completed within the remits of your business.
A Content Management Systems normally consists of a user website, a database to store information and a secure control panel allowing to you update the information on the database. Content from the database is used to compile the information displayed on your website. The information on the database is accessed or manipulated using a programming language. In simple terms you are updating the database and your website is displaying content from the database to form your website pages. This type of system is also know as a three tier website application:
Data Tier - This is where your website information is stored. Application Tier - This is where information is processed. Client Tier - This is where information is displayed.
There are many different technologies available which enable a Website Content management System to be created. The most cost effective solution is a combination of the following technologies:
Mysql Database - An open source database application Linux Server - An open source operating system PHP Programming - An open source programming language
You can find hundreds and thousands of websites on the internet using the above technologies. There are many alternatives to the above technologies such as Microsoft based technologies, but these tend to be more expensive to maintain and develop.
It is recommend before you commission a web development company to create a Website Content Management System, you first find out what technologies the web development company will be using and if these technologies are cost effective.
A lot of clients ask why they need their 'already working perfectly well' website validated. Below is a brief guide to try and answer this in a clear and simple way.
Firstly we should explain what is meant by a validated website.
Put simply, validation is the act of writing and designing a website in as 'clean' a way as possible and testing it against industry standards. It makes use of cascading style sheets (CSS) to format the page layout and text and also cleans up any 'loose coding' which could otherwise cause problems.
For a further description we refer to an excerpt from the wc3 website as they are the last word when it comes to validation!
Validation is a process of checking your documents against a formal Standard, such as those published by the World Wide Web Consortium (W3C) for HTML and XML-derived Web document types. It serves a similar purpose to spell checking and proofreading for grammar and syntax, but is much more precise and reliable than any of those processes because it is dealing with precisely-specified machine languages, not with nebulously-defined human natural language.
The Benefits of Validating your website.
1. Compatibility
When your website code is not validated you are running the risk of your site displaying unpredictably in different browsers. For example, Internet Explorer is more forgiving and likely to internally fix small amounts of 'loose coding' whereas stricter browsers such as Mozilla Firefox and Safari will display a page as it is coded. Validation makes the code uniform and means you will not have an unprofessional and unpredictable looking website or risk alienating certain users who don't use Internet Explorer!
2. Search Engine Optimisation
A website that is 'clean' is far easier for the search engines (Google, Yahoo etc) to 'read through' and index. The easier they can do this the easier it is for them to find the real meat of your site i.e. the content. The other point to make here is that if your site isn't validated it is possible for search engines to place greater emphasis on the wrong part of your code and your site could therefore be missing out on being found for the most appropriate searches *
3. Accessibility
Validating a site requires the use of many accessibility techniques such as the use of ALT tag on images. Steps such as these make your site more readable for those users who are vision, motor skilled or cognitively impaired. Validation makes the site readable as it allows aids such as screen readers to read through your site correctly. Although validation is not in any way a guarantee that your site is accessible, it is a huge leap towards this and far superior to an unvalidated site.
4. Faster loading
Conventional websites made use of tables and an extensive amount of tags for formatting both the page structure and content. The use of CSS separates the structure from the content and gives the browsers less code to trawl through before they can successfully render the page. Validation also aids the browser in displaying the site faster as there is no 'loose coding' for the browser to get tangled up in or waste time trying to 'fix'.
So where does this leave you?
Firstly you might like to check your current site for validation (see the steps below).
Secondly, decide whether validation is something that you feel you should be concerned with but please bear in mind that you now have a legal obligation to have an accessible website *
Thirdly, enlist the help of a professional SEO company to review your website and carry out necessary alterations. In some cases you may be cheaper having your website completely rebuilt rather than trying to fix the current errors but don't let this put you off. Look upon it as an opportunity to spruce up your existing site and start afresh!
How to validate your website using Validation Tools:
1. Go to the W3C validator website.
2. Type in the URL of your website.
3. Hit the check button.
4. You will be presented with a list of results.
Search Engine Optimization is a method to allow search engines to access your website by honing in on your meta tags. Therefore, you must ensure that your tags are properly worded and placed, i.e., using a specific number of characters for your title, keywords, and description, on every page of your website as this will ultimately increase your traffic flow.
But before all this, you must be aware of that Web Design is an important aspect for SEO. Therefore, you need to design your website in such a way so that it is much more appealing to its visitors than the others out there. After all, Good website designs allure visitors to at least visit through the whole site.
Hence here are some web design tips to make your site look more attractive.
* You must choose carefully, a professional color scheme for your website as it represents your company's image. Stick to two or three complementary colors.
* Try to use images and graphics in your website. This will prove to be highly beneficial for you in case the visitor is not free to read your content but if you can attract them by images then you can convey your important message clearly. This will also help in capturing the visitor's attention and recall your site to visit again and again. But remember, do not over use Flash and other animation tools as this leads to an increase in page's loading time and also looks unprofessional.
* Try to use bullets and numbering to make your content more crisp and lucid. Your visitor might not read every sentence of your content but can read the bulleted points easily.
* You must ensure that your visitors can read the text on the background i.e. if the background is dark always use light color for the writing a text and visa versa.
* You don't need to fill the whole screen with text and graphics instead use the white space effectively, and allow elements to breathe.
* Try to create a simple logo to identity your website. And this very logo explains everything about your business, hence you must take utmost care in not to use more than three colors and not to make it too wide or too tall. Also, have a captivating tag line somewhere with the header, and write an About Us page which describes the uniqueness of your website. These will leave an impression for your visitors to remember your website.
* You must provide a way back to your home page on every single page of your site and give your customer the information they will be looking for and help them find it easily and quickly.
* You must keep your site's navigation consistent. What you do on one page, should be done the same way on the rest of your site's pages. Keep the colors consistent as well.
* You must make sure that your page loads faster. If viewers have to wait for a page to load then they will switch over to somewhere else. It is estimated that if a page doesn't load in 8 seconds you will lose 1/3 of your visitors.
Be aware of these common pitfalls when designing your site:
* The home page does not quickly tell you what the Web site is all about. You should be able to visit the home page of any Web site and figure out what the site is about, what type of products it sells, or what it is advertising within five seconds.
* The poor use of popup windows, splashy advertising, splash pages (pages with neat animations and sound but which you have to watch for five to ten seconds before you are taken to the real Web site), and other Web design features that draw interest away from your Web site, products, and/ or services.
* Poor Web site navigation. This includes broken hyperlinks, hidden navigation, poor wording of navigational links, links that take you to pages with no links, links that take you to the same Web page, and pages with no links back to the home page (always include a link back to the home page so that regardless of where site visitors are, they can find their way back home!).
* Believing that because you have a Web site, you have a marketing campaign or overall marketing and advertising strategy. You need to understand that your Web site is not your marketing strategy. Your Web site is just a part of your overall marketing strategy, depending on your business goals; for example, if you have a successful restaurant but want to advertise and promote your business on the Web. Creating a Web site is great, but if it is not promoted and advertised, no one will ever find it. By passing out business cards with your Web site URL embossed on them, you are using a traditional marketing campaign to promote your Web site. If you offer a downloadable/ printable coupon from your Web site, you are successfully using your Web site as part of your marketing strategy to meet your goal of increased restaurant sales.
* Failure to attain Web site relevance and content updating. There is nothing more dissatisfying to a Web customer than visiting a Web site that is grossly out of date. Incorrect pricing, products no longer available, dated content, and ancient advertising all signify to the Web site visitor that your devotion to your Web site is suffering greatly. Cramming your pages with non-relevant material will detract the visitor from getting the point of your Web site (the five-second rule mentioned earlier).
* Avoid too many text effects. Forget flashing text, reversing text, gymnastics text, or other eye-popping and dizzying effects, which do nothing more than annoy your site visitor. Don't create a "loud" Web site that contain so many blinking, flashing, twirling, and spinning icons, text, or graphics that visitors are overwhelmed by the effects and under-whelmed by the site content.
* Limit the number of graphics on your Web site so that you don't overwhelm your site visitors with "graphics overload." Don't use animated GIF images on your Web site. These were cool ten years ago, but in today's professional environment, they are just another "loud," annoying distraction that site visitors don't want to see.
* Don't use Microsoft's themes (built-in design templates) when creating a Web site with Microsoft FrontPage. While FrontPage is bashed on a regular basis, we stand by the fact that it can be used to design great Web sites.
* Don't incorporate frames into Web site design. The use of frames within a Web site will drive customers away faster than anything!
* DO incorporate the proper Web site design elements to ensure that your Web site is ready to be found by search engines.
There has been a radical change in the web designing to make accessible website design more appealing, fresh and user friendly.
A set of various tools amalgamate the micro content in a new and useful ways. In Web 1.0, a smaller number of people have been writing for a larger number of readers, but with the passage of time, there has been an utter need to fill in gulf of info in a web page, and that is from where the concept of web 2.0 designs has come. As compared to the earlier web designing concepts the new design Web 2.0 strategy puts content as per how people search.
But why this name: 'web 2.0 design'? Many people describe resurgence in the web economy and new level of technological connection between web sites and services by the term "Web 2.0". In a word, today's website design is simple, bold, and elegant that delivers more with less do. Fewer, well-chosen and carefully selected visual elements to create the desired feel are the keys to direct the users' sights straight to the main points of an affordable website design with it the presence of fewer and comprehensive words shape up the site's look and feel properly. So many crucial attributes jointly make this possible in reality. Following are some of the important facets that make website 2.0 design successful.
Simplicity The main purpose of the web 2.0 design is the simplicity and web 2.0 design is simpler than ever. A focused, clean and simple layout is eye soothing that makes today's large and small business web design separate from the previous versions. Lots of unnecessary information is crammed sometimes that are barely relevant to the purpose of a page and will distract attention from the key content and navigation. And off course what we are seeing is the soft information like the first impression about the quality of the company, the sense of how approachable a service provider is, and whether the product we are seeing is right for you. Therefore, in that case our gaze should not be going elsewhere other than the main info. As a result, accessible website design professional ( www.vnsinfo.com.au ) should try concentrating on removing consciously unnecessary components, without sacrificing effectiveness and looking for alternative solutions that attain the same result more simply. Not just to decorate, but to communicate the relevant information with lines, words, shapes, color must be the search areas for a simple and accessible website design. Central Layout In common, the vast majority of sites these days are positioned centrally within the browser window as compared to the full-screen (liquid) or left-aligned / fixed-size layout done a few years ago. Whatever the nature of the sites: Custom website design, Database website design or Ecommerce website design, the web sites look more simple, bold and honest when it sits straight in front & center. We should be economical to use the pixels to a more fervent look. White space here will route our eye view with clear-cut designing sense. A normal prescription is to place your site centrally unless you are not aesthetically opposed to do so. Fewer columns As compared to website design with 3-column, though not sometimes 4-column, today's web design has seen sites with 2 clean columns, and oftentimes 3 also is the mainstream maximum. With fewer columns, we can end up communicating any info more clearly. One recommended step is to use no more than 3 columns. Separate top sections
There is nothing new about making the top of the screen distinct from the rest of the main content. Sites prepared this way actually carry out a distinct approach to the other sites commonly built. It is a good idea to clear the space at the top by placing logo and navigations boldly. Both the main branding and main navigation should be bold and clear. Put the logo on the top left and place main navigation right after it. By the use of bold, solid block of different color or tone and similar other alternatives the top section is made distinct from the rest of the page.
Simple Navigations The site navigation structure must be clear, identifiable as navigation and it should be easy to interpret to the target audience. Clearly written, large and bold navigational links with specified color, tone and shape apart from the rest of the content is the look out for every web designer. In a way, navigation should be clearly distinguishable from non-navigation. Bold logos The first impression a web site instills is 'who we are?', and that can be achievable by a clear, Strong, bold company logo. Now a day the company logo has been bigger and highlighted, incorporating the brand image, attitude and tone of voice. A good and brief logo that has a visual impact and that is recognizable and distinctive represents your brand's personality and qualities on first viewing. Bigger Text Compared to older-style sites lots of web sites today have big text. Making fonts bigger will make the site usable to the viewers. However, making all the fonts bigger is sometimes destructive to the normal designing approach. Simply use a base font size for your website, and make all other fonts relative to that one (e.g. font-size: 115%). This will make your website still cool looking. Inside a CSS file define your font-relevant settings and as usual: one font per web page is fine. Never use more than 3 different font-sizes.
Bold Text Introductions
Many sites lead with strong all-text headline descriptions. Off course there can be headlines about the services, but sometime graphical representation is worth mentioning, giving much relevance to the look and feel of the site as a whole. When it is required to use the bold text introduction, please use that on a simple background to convey the message.
Strong and Intense Colors Color always plays a vital role to enhance the importance of any specific area. In a creative website design ( www.websites4u.com.au ) also it has a different role when, you have a simple, stripped-out design. Here we can use color that is strong and bright and that draws the eyes to the items you want the visitor to notice. Simply, use them to divide the page into clear sections, and to highlight important elements. So many times we find that our attention drawn away from the real content for the confusing use of intense color outside the main page area. If color is used to attract the eye, the eyes get confused and the site will be chaotic and confusing. Therefore, remember to use color sparingly. Rich surfaces The use of subtle 3D effects, sparingly, enhances the qualitative feel of the design. At the same time, it should be kept in mind that, the effects should not be overdone. Plainly avoid trying to make your entire design 3D-realistic, as that is more work and that will increase the page assets size; sometimes a little work goes a long way.
Gradients In case of the areas that would otherwise be flat color or tone, gradients soften them. Drop-shadows, the inner-glows and spectacular highlights we see on glass- or plastic-style buttons are there to soften any surface. Reflections Reflections sometimes make the site design clean, simple and rich. The illusion of reflection on gradients is of 2 kinds: Highlights on shiny surface and shiny table effect! Some patterns, in this case, are very popular: realistic effects of water droplets, glass beads, shiny plastic buttons etc. Cute icons The use of Icons to say thousand words plays an important role in Web 2.0 design. Today we use fewer, better icons that carry more meaning. In comparison to the past website designs when there was a trend to use icons more, today we use clear text more extensively, and are less ready to litter a page with icons. In lots of the cases, a simple word is more effective. Icons, when used, should be easily identifiable and carry a clear meaning.
E-commerce is a cut throat business. You have to arm yourself with the proper know-how and the tools to make your site a cut above the rest. Each day, more and more sites are clambering to optimize their rankings in websites and if you lose your guard, you may just get trampled on and be left in the abyss filled with so many failed e-commerce sites.
Search Engine Optimization or SEO is a term widely used today by many e-commerce sites. For the past few years and the next ten years or so, search engines would be the most widely used internet tool to find the sites that they need to go to or the product or information they need.
Most people that use search engines use only the ten top search results in the first page. Making it to the first page, more so to the top three is a barometer of a sites success in search engine optimization. You will get a higher ratio of probability in being clicked on when you rank high. The more traffic for your site, the more business you rake in.
But, it is essential to grab a hold of that spot or make your ranking even better. As I aforementioned, each day is a new day for all e-commerce sites to make them selves rank higher using search engine optimization. It is imperative to make your site better and better everyday.
So just what is search engine optimization and do you have to use it? The answer to why you have to use it is an easy one. You need search engine optimization to be number one, or maybe at least make your site income generating.
With search engine optimization you can get the benefit of generating a high traffic volume. Let's just say you get only a turn out of successful sales with 10 to 20 percent of your traffic. If you get a hundred hits or more a day, you get a good turn out of sales already. If you get only twenty to ten hits a day, you only get one or two if not any at all.
So once again, what is search engine optimization? Search engine optimization is utilizing tools and methods in making your site top ranking in the results of search engines. Getting yourself in the first page and better yet in the top half of the page will ensure that your site will generate public awareness of your site's existence and subsequently generate more traffic, traffic that could lead to potential income and business.
Search engine optimization requires a lot of work to be fully realized. There are many aspects you have to change in your site or add as well to get search engine optimization. These will include getting lots of information about the keyword phrases that are popular in regards to your sites niche or theme.
You may also need to rewrite your sites contents so that you could get the right keyword phrases in your site without making it too commercial but light and informative. There are certain rules and guidelines to be followed with making your site's content applicable and conducive to search engine optimization.
You will also need to collaborate with many other sites so that you could get link exchanges and page transfers. The more inbound and outbound traffics generated by sites among others are one of the components search engines uses to rank sites.
Try to search the internet for many useful help. Tips, guidelines and methods for search engine optimization are plenty to be found. Read many articles that can help you optimize your site in search engine results. The more knowledge and information you gather the better. This will all help you in getting those high rankings. This may require a little time and effort in your part but the benefits will be astounding.
If you can part with some money, there are many sites in the internet that can help you in search engine optimization. There are many sites that help in tracking keyword phrases that can help your site. There are also some content writers that have lots of experience in making good keyword laden content for your sites that have good quality.
Act now and see the benefits garner with search engine optimization. All of these will result to better traffic and more business for your site and company.
Understanding color management
No device in a publishing system is capable of reproducing the full range of colors viewable to the human eye. Each device operates within a specific color space which can produce a certain range, or gamut, of colors.
Color model determines the relationship between values, and the color space define the absolute meaning of those values as colors. Some color models have a fixed color space (such as Lab) because they relate directly to the way humans perceive color. These models are described as being device-independent. Other color models (RGB, HSL, HSB, CMYK, and so forth) can have many different color spaces. Because these models vary with each associated color space or device, they are described as being device-dependent.
Because of these varying color spaces, colors can shift in appearance as you transfer documents between different devices. Color variations can result from differences in image sources (scanners and software produce art using different color spaces); brands of computer monitors; the way software applications define color; print media (newsprint paper reproduces a smaller gamut than magazine-quality paper); and other natural variations, such as manufacturing differences in monitors or monitor age.
What is a color management system?
Color-matching problems result from various devices and software using different color spaces. One solution is to have a system that interprets and translates color accurately between devices. A color management system (CMS) compares the color space in which color was created to the color space in which the same color will be output,and makes the necessary adjustments to represent the color as consistently as possible among different devices.
A color management system translates colors with the help of color profiles. A profile is a mathematical description of a device's color space. For example, a scanner profile tells a color management system how your scanner “sees” colors. Adobe applications use ICC profiles, a format defined by the International Color Consortium (ICC) as a cross-platform standard.
Because no single color-translation method is ideal for all types of graphics, a color management system provide a choice of rendering intents, or translation methods, so that you can apply a method appropriate to a particular graphical element. For example, a color translation method that preserves correct relationships among colors in a wildlife photograph may alter the colors in a logo containing flat tints of color.
Note: Don't confuse color management with color correction. A color management system won't correct an image that was saved with tonal or color balance problems. It provides an environment where you can evaluate images reliably in the context of your final output.
Do you need color management?
Without a color management system, your color specifications are device-dependent. You might not need color management if your production process is tightly controlled for one medium only. For example, you or your prepare service provider can tailor CMYK images and specify color values for a known, specific set of printing conditions.
The value of color management increases when you have more variables in your production process. Color management is recommended if you anticipate reusing color graphics for print and online media, using various kinds of devices within a single medium (such as different printing presses), or if you manage multiple workstations.
You will benefit from a color management system if you need to accomplish any of the following:
- Get predictable and consistent color output on multiple output devices including color separations, your desktop printer, and your monitor. Color management is especially useful for adjusting color for devices with a relatively limited gamut, such as a four-color process printing press.
- Accurately soft-proof (preview) a color document on your monitor by making it simulate a specific output device. (Soft-proofing is subject to the limitations of monitor display, such as room lighting conditions.)
- Accurately evaluate and consistently incorporate color graphics from many different sources if they also use color management, and even in some cases if they don't.
- Send color documents to different output devices and media without having to manually adjust colors in documents or original graphics. This is valuable when creating images that will eventually be used both in print and online.
- Print color correctly to an unknown color output device; for example, you could store a document online for consistently reproducible on-demand color printing anywhere in the world.
Creating a viewing environment for color management
Your work environment influences how you see color on your monitor and on printed output. For best results, control the colors and light in your work environment by doing the following:
- View your documents in an environment that provides a consistent light level and color temperature. For example, the color characteristics of sunlight change throughout the day and alter the way colors appear on your screen, so keep shades closed or work in a windowless room. To eliminate the blue-green cast from fluorescent lighting, you can install D50 (5000˚ Kelvin) lighting. You can also view printed documents using a D50 lightbox.
- View your document in a room with neutral-colored walls and ceiling. A room's color can affect the perception of both monitor color and printed color. The best color for a viewing room is polychromatic gray. Also, the color of your clothing reflecting off the glass of your monitor may affect the appearance of colors on-screen.
- Remove colorful background patterns on your monitor desktop. Busy or bright patterns surrounding a document interfere with accurate color perception. Set your desktop to display neutral grays only.
- View document proofs in the real-world conditions under which your audience will see the final piece. For example, you might want to see how a house wares catalog looks under the incandescent light bulbs used in homes, or view an office furniture catalog under the fluorescent lighting used in offices. However, always make final color judgments under the lighting conditions specified by the legal requirements for contract proofs in your country.
A website is basically a marketing tool, representing the companies, products and services it is also a reflection of the companies personality, ideologies and philosophies. It is definitely a heavy burden to carry for a mere website, but it dose. Huge corporations spend millions of dollars to determine the perfect color for the branding and packaging of their product. This is due to the fact that the perfect blend of colors increases the profitability of their product. The same rule applies to the designing of your website.
Color impacts your user on many psychological and physiological levels. Your site's color scheme can have a dramatic impact, either positive or negative on your potential success. Color is an important element of website designing. In Website designing of color is as critical as the design of graphics and layout.
Color and its Effects on Website Designing
Once a visitor has come to your site you have around 8 to 10 seconds to visually appeal to the user and turn them into customers. Since Color affects our feeling, perceptions, and interactions, you can use colors to feel a user feel welcome, comfortable, relaxed, and secure. Before choosing the colors of your website it is important to get a basic understanding of color and its effects.
Warm colors
Warm colors are based on yellows, oranges, browns, yellow-greens, and orange-reds, colors. Warm colors have a tendency to be aggressive and exciting, so it's best to apply them in small doses. Intermediary colors Purples and greens are intermediary colors that are either warm or cool, depending on amount of red or yellow they have in ratio to blue. If the color contains less blue then it is leaning towards a warm hue, and if it has more blue then it is more towards the cool side.
Cool colors
Cool colors are based on blues, greens, pinks, purples, blue-greens, magentas, and blue-reds. Cool colors tend to be soothing, calming colors and can be used in large amounts.
Neutral Colors
Neutral Colors include white, black, gray and colors that contain a large amount of gray. Neutral colors are great for back-grounds and for enhancing the effect of warm colors.
Multi-color
Multi-colored sites have the lowest visitation time, as a combination of warm and cool colors confuses the user. It will often make the site seem cluttered and ambiguous. So it is best to choose a couple of colors and stick to them.
Color Harmony
Too much color can be disturbing and chaotic, whereas too little can be boring. It is best to use a balance. So it's best to Use only a few different colors on a page. Avoid using an excessive amount of colors, blend and use warm and cool colors.
Computer Color Display
Computer monitors display colors using different amounts of red, green, and blue, these are called RGB color. This is an additive form of color, because red, green, and blue light in equal amounts "add" up to white light. All other colors are formed on screen by mixing the amounts of the RGB color. Since RGB color is completely different from the way colors are set in print, it has to be used differently.
Web Color
A common problem on the web is that color often does not reproduce correctly in Websites. The reason is related to bit-depth, a color may be beyond the range of the viewing display setting. Alternative colors may be reproduced, or color shifting may happen. Even if a visitor's system is capable of displaying a color, technical features like hardware age to Gamma control may cause color distortion. Such problems not only cause aesthetic problems but ay also result in visitor retention issues. Given today's technology, color management in the Web can be taxing. Browser-safe palette The browser-safe palette of 216 colors gives consistent and conventional results across the Mac OS, UNIX, and Windows platforms. Even though computers today can render millions of colors, you should use browser-safe palette if you think your website will be viewed from a 256 color computer, which can be the general case. It'll be more effective if you limit the color palette to 2 or 3 major colors with shade variations, as it is visually more appealing. Plus limited colors means smaller file sizes and faster loading.
Text Colors
Be exceptionally careful when setting text and background colors, Readability must be preserved at all costs. If the text is light colored then the background has to be dark and vice a versa. White and black always make a good combination, and red and blue are useful for highlighting. Try to avoid using the combination of black as a back ground with warm color text, as it might be great clarity wise but has a tendency to make visitors nauseous.
Color Chart
When dealing with international visitors, it's easy to get messed up by the meaning of color.
Blue represents peace, tranquility, calm, stability, Harmony, unity, trust, confidence. In China, blue is associated with immortality. In Colombia, blue is associated with soap. In India blue is the color of Krishna in the Middle East blue is a protective color.
Black represents power, sophistication, formality, elegance, anonymity, unhappiness wealth, mystery, fear, evil also. In USA black is for mourning.
Green represents nature, health, good luck, renewal, youth, vigor, spring, generosity, fertility, jealousy. In India green is the color of Islam. In Ireland green has religious significance (Catholic).In some tropical countries green is associated with danger.
Orange represents energy, balance, warmth, enthusiasm, vibrancy, flamboyancy.
In Ireland orange has religious significance (Protestant). Purple represents royalty, spirituality, nobility, ceremony, mystery, transformation, wisdom, enlightenment.
Red represents love, danger, desire, speed, strength, violence, anger, and blood. In China red symbolizes celebration and luck, used in many cultural ceremonies that range from funerals to weddings. In India red is the color of purity (used in wedding outfits).
White represents purity, simplicity, cleanliness, peace, humility, innocence youth, birth, good, and marriage. In Japan, white carnations signify death. In eastern cultures white symbolizes coldness and sterility. In USA it signifies virginity.
Yellow represents joy, happiness, optimism, idealism, imagination, hope, sunshine, and cowardliness. In Asia yellow is sacred, and imperial.
Colors are a powerful tool, it's the first! The first impression of your site, so keep in mind the above points when deciding on the color scheme of your site.
It's the right time to go global. Whether you are a global business giant or a local enterprise, you need to make your presence strongly felt in the virtual world. Your success depends to a large extent how your profile and portray your business with the right target audience. And your presence must be at once global in aspiration and local in essence.
Web design denotes the designing and graphical production of contents in a web site form, appearing on net. The language of designing used in most of these cases are, HTML, CSS, XHTML, java etc. Designing a web site is collection, accumulation, arrangement and presentation of important information in a fascinating and attractive manner. A web site basically contains various web pages providing different sections of information about the company, individuals, products and services are that sold.
Creating a web site is not tough job. Creating a good one is of course another matter. To create a web site which has quality information and also has high ranking in all Search listings is a definite challenge. This is where one needs the perfect combination of quality web design and specialized expertise of the virtual business world.
A quality web design does not only mean to get a workable site registered, but it is a 24 hours', 365 days' and an unfaltering time's tool for marketing, advertising, sales and promotion. A quality web design places much importance on structure, visual appeal, corporate identity and user-friendly interactivity.
Normally, for a good design idea one needs to start from a theme or central idea about how the pages would appear, or how the contents would present. Around this central idea, the web site is built at different stages. The central concept pertains to the web design through text, images, graphical representations, feedbacks, flash, animation, e-commerce, sounds, custom graphics and other form of interactive multimedia representations.
A quality web design starts from defining the purpose of the site, identifying the audience, researching and finalizing the content. On the technical designing aspect, the process starts with knowing the compatibility and restrictions, planning documentation, choosing the software and selecting the technical facilities, and finally designing the site.
To launch your web site, you need to go a step further. You need to select your network service provider, your server, and your domain name. Then you need to register your domain name with and host the site with a reliable server.
However, this is just the beginning. You have just made a space for yourself over the World Wide Web. Now you need to announce your presence. You need to opt for online advertising and marketing. You need to tie up with major search engines to list your website on their search results. To go a step further, you can even create a search engine optimized site to receive personalized ranking reports and frequent updates. Your site is incomplete without good content so make sure that your content complements the design that you have worked out for your site.
"Every constant thing in life needs "Change"". Same is the case with your website every time a user logs on he expects to see something new, we at Planet Web Solutions change things for better, making things professional and elegant look. We do this by cascading style sheets (CSS), flash strips, and templates. Technically, Website redesign can be addressed as a renovation, an opportunity to focus on what is best in it and changing to excellent and concenterating on things that need an improvement, according to the user requirements.
Posts
