CSS Web Design Basics

So, what is CSS? CSS is the acronym for Cascading Style Sheets. CSS is a simple mechanism for adding style and describing the presentation e.g. fonts, colors, spacing and other aspects of web presentation. Cascading Style Sheets were developed as a means for creating a consistent approach to providing style information for web documents.Most Web authoring tools provide some sort of support for CSS style sheets, such as the ever popular Dreamweaver™.

Using CSS design allows your pages to download more quickly, makes your website much easier to manage, and has numerous web usability, accessibility and search engine optimisation benefits, in fact in order to validate your XHTML pages with the w3c, you are required to use css.

Style sheets have been in use for years. They are the technical specifications for layout, whether print or online. Print designers use style sheets to insure that their designs are printed exactly to specifications. A style sheet for a Web page serves the same purpose, but with the added functionality of also telling the viewing engine how to render the document being viewed.
However, the cascading bit for web page design is the special part. A Web style sheet is intended to cascade through a series of style sheets, like a waterfall. Every Web page is affected by at least one style sheet, even if the Web designer doesn't apply any styles. This style sheet is the user agent style sheet - the default styles that the Web browser will use to display a page if no other instructions are provided. But if the web designer provides other instructions, i.e. specifies a specific link color, the browser needs to know which instructions have priority, the cascade defines the style sheets set by the designers to redefine the color and supersede the web browser's defaults.

Using CSS you will find your web pages will be smaller; increasing your site download time, something that will appeal to your website visitors and, to boot your mark-up will be cleaner, appealing to the all important search engines. Once a site has been created using CSS maintenance of the site becomes much easier, making life simple for the web designer or persons in charge of web maintenance. How? The presentation of an entire web site or web document, for example the color of links, can be changed by altering just one file, greatly reducing the time and money spent on upkeep.
Using CSS your content will be accessible to all browsing devices, incorporating everything from Lynx based systems to mobile phones and PDA’s

When you're first learning to build a Web site, you often don't think much about style sheets, as you're too busy learning to tell a

from a
. But once you've mastered the basics, CSS is a great place to go to make your pages more user friendly and controllable.

The Benefits


By editing a single CSS file, you can make site wide design changes.
CSS lets you output to multiple formats quickly.
CSS lets you use logical names for page elements. You can, for example, give a DIV the name "header", or a H1 the class "headline".
External CSS files are cached by browsers, improving load time.
CSS eliminates the need for lots of confusing code making the web developers lives easier.
CSS lets you do things normal HTML doesn't, for example better font control, absolute positioning.
Practical use of CSS encourages proper HTML structure, which will improve accessibility and search engine placement.
If you want valid XHTML Strict you have to use CSS

Summary


CSS design represents a much more powerful way to lay out websites, using CSS design in yor web applications allows your pages to download more quickly, makes your website much easier to manage, and has numerous web usability, accessibility and search engine optimisation benefits.

How to build Search Engine Friendly Web Pages

Many web site designers still do not design the websites the build to work effectively for the search engines. This is a huge mistake. Why? Because they miss out on attracting lots of visitors to their client’s sites, visitors they can attract for free by designing a search engine friendly site that promotes high ‘organic’ listings. You may have spent a great deal of your marketing budget on your delightfully designed web, however you find your self needing to use pay-per-click advertising to attract visitors! This is because your website does not rank well enough organically, i.e. your sites search engine optimisation (SEO) does not promote your website well enough to display on the first pages of search engines.


We have put together some helpful tips on what you and your web design firm should be doing to help your sites SEO, tips you should be implementing from the start of your web project:


1. Keywords - Research highly targeted keywords. You should be before you ask your designer to create your website. Use a keyword research tool to research the most popular applicable to your industry. These keyword research tools will show how many people have searched for that particular keyword over the last 12 months. You should aim to create a list of around 100 keywords and phrases that you can include within your web pages.

2. Content – You should aim to create your web copy so that is keyword rich, i.e. you should include between 3 – 8 of your chosen keywords per 100 lines of text. Most importantly is to include a paragraph of up to 500 words of text for the top of each page within your site. This strategy is favoured among search engines and should help you in the log term aim for good, organic based SEO.

3. Meta tags – Optimisation of certain Meta tags within the code of your website can aid SEO, although not as much as it used to do. The most significant meta tags are the title and description and to a lesser extent, the keyword Meta tags. Include your keywords within each of these Meta tags. The title tag should be a short sentence of no more than 80 characters. The description should be no more than 150. Your keyword tag should include the most frequently used keywords contained within your web pages.

4. Heading Tags – These tags separate each section of your web page with headings and subheadings. You should include keyword phrases in these tags, in particular in the H1 – H3 tags as these are given most weight by search engines. You should also make a point of giving your websites images a title tag, this is achieved by using the alt image tag. In the alt image tag add a brief description of the image using some of your most important keywords, helping with SEO. The alt tag helps visitors to read the description if they can't see the image and allows screen readers to convey what the site is showing for the visually impaired.

5. Inbound links - web sites that link to yours raise your link popularity, especially those from ‘authority’ sites i.e. high ranking websites. Search for web sites that are compatible with yours and have a PR 4 or more.

6. Cascading Style Sheets (CSS) – your web designer should be using these. CSS helps to implement a clean design throughout your web site. CSS helps you to easily update your whole site by changing on or two elements in the CSS sheet. CSS also help you to create a XHTML valid website, favoured among search engines.

7. Place any script code into external files – if you use javascript for menus/linking it will create code between the header tags, pushing down the text that search, engines would spider first. Placing the script code in an external file reduces the code to just one line. The tips above will help you to develop a search engine friendly web site, but do not expect instant results. SEO is a long term marketing strategy that will, if carried out in the correct way, greatly benefit your websites chances of attracting targeted traffic.

Web Design with PPC

With so many companies vying for business on the internet today, maintaining a competitive edge requires your businesses website to be on the first page of the most frequently used search engines, these ‘top’ search engines include Google, MSN, AltaVista and Lycos. To be truly at the forefront of competitiveness on these engines your website is required to be in the top four or five listings on the first page. Achieving this first page ranking takes search engine optimization (SEO), submission to all major search engines, dedication and above all patience, if you can manage the above, you increase your chances of assuring the very best search engine listings
It would seem, if you ask the majority of web designers and webmasters, that the most converted position within the search engines is the number one position on Google (although you can achieve a great deal of success without Google!): This is something that most web designers, SEO specialists and web administrators try to achieve.

However, in their pursuit of the Holy Grail, many webmasters, SEO specialists and administrators do not take the time to find the best keywords to achieve the position. The failure to recognise their most valuable keywords creates further implications, especially if they are running pay per click (PPC) campaigns as part of a search engine optimisation drive.

A recent study into PPC trends suggests that it may not be profitable to occupy the first positions for one to two word keywords phrases. The most profitable positions in the paid ranks for shorter keywords were actually found to be the fifth and the sixth positions on the first pages of the search engine. The websites whose main profit generating keywords, consisting of three to four words, were most profitable when the website was listed in second or third positions.
How can that be?

The reason for this is that one to two word keywords can be very general in what they are advertising. Companies are choosing these short keywords because they think that they are the most relevant to their website, meaning that they think these short keywords are what their customers are using to find them amongst the hundreds of websites offering similar services. If you are using shorter keyword phrases the chances are you will be one of many using the same keyword phrase, this helps to drive up the prices of the keyword per bid, costing you more per click, leading to a very expensive PPC Campaign.

Furthermore, short general keywords do not attract targeted visitors: targeted visitors are the kind you want visiting your site. This is because if they are specifically looking for a service you are supplying, they are more likely to make a purchase. For example, a general search maybe somebody entering photography in a search engine: they might be looking for a camera, or they might be searching for photographic images. Either way they might not be searching for a product you have, but if you show in the listings they will still click on your link – costing you money each time.



This all means that general one to two word keywords are expensive and the visitors that you receive to your site using these short keywords are not targeted to your site. In comparison keywords or more specifically keyword phrases (typically three to four words in length) generate targeted traffic. They do this by purposely picking out the services or products you have and provide a precise ‘keyword phrase’ that a customer looking for your services is likely to type into the search engine. Therefore keyword phrases have less competition and cost less on average than short phrases. In addition, fewer webmasters bid on keyword phrases.
You will lose a lot of time and money if you optimise your web pages for the wrong keywords. Take some time to find the best keywords for your website and then optimise your pages for keywords that deliver targeted visitors and buyers.
Visit us at www.optimassolutions.co.uk

The key to good web design

The key to good web design

The objective of any reputable, proficient web designer is to create an aesthetically pleasing, easily accessible and navigable website which has the clients best business interests included from the start of the project. The web site should convey trust; it should inform the website user that the webmaster is trustworthy and that the website can be used safely, therefore the website will convince the visitor to either; register with the site and make a purchase if the site is ecommerce enabled and/or make an enquiry if the website is offering a service.

A good web design is easy to achieve – if you choose the correct web designer. The web designer you choose should be able to demonstrate good graphic design capabilities, be able to create instinctive site navigation by developing the site with the user in mind and be able to optimise the website for good initial search engine results as part of the design. This can be achieved through developing a clear logical site layout, site structure and a clear internal linking strategy.

The following suggestions offer some precious web design guidelines.

Site Navigation


Prepare your site navigation before designing the site, a clean-cut and uniform navigation system is a must to prevent cluttering up the site with forgotten links. Site navigation should be well thought out, as well as being simple and intuitive; this is quite often overlooked by website designers. Remember the three click rule: Research has shown if a visitor cannot access the information they want within three clicks, they will leave the site. Every area of your website should be reachable within three clicks from anywhere else on the site. If you use anything other than simple text links, make sure to test your navigation in all the major browsers.

Maintain a site map to help people and Search Engines robots (SE’s) find, and index in the case of SE’s, what they are looking for with ease. It is worth while remembering that navigation should be flexible enough to accommodate additional links in case you will be adding pages periodically. Link Check: Test all site links and navigation to be certain that they are valid. Nothing chases a visitor off faster than broken links. Be sure to specify link colors otherwise the user’s browser defaults will determine what color the links are which can make them unreadable.

Use keyword ‘anchor text’ for your links, this will help you with site optimisation, I also recommend using absolute links;

(,

As opposed to relative links;

().

Cross Browser Compatibility

There are many variants of browsers in use, and of these browsers there are many different versions being used, many users do not necessary take the time to upgrade to the latest versions. A good website will be required to render properly in all. Your website won’t be much use if it works well in Internet Explorer but is all over the place when viewed in firefox! It is also worth while remembering that the user may well be using a MAC, a Linux, a PDA and a mobile phone as well as the good old PC. As a guide you will need your website to work, and work well in;

Microsoft Internet Explorer (all versions)
Netscape
Firefox
Opera
Safari


Web Standards Compliant

In order for you website to reach its full potential, the most fundamental web technologies must be compatible with one another and allow any hardware and software used to access the website to work together. When a web site or web page is described as complying with web standards, it usually means that the site or page has valid or nearly valid HTML, CSS and JavaScript. The HTML should also meet accessibility guidelines.

Web Images

Remember the three click rule I mentioned? There is also the 10 second rule; Web surfers are increasingly intolerant of delays and research has show that most people will click away if a webpage takes longer than 10 seconds to load. Your websites images should be optimised i.e. their file sizes should be compressed as small in size as possible, without sacrificing picture quality. Your images should also be optimised to for keywords, the ALT tag should be used so people with graphics turned off and those using hand held devices know what the image is supposed to be, i.e. name your logo ‘logo’!

Frames

Avoid using frames, frames can easily confuse readers who wish to print material on a page or bookmark a page for later reference or navigate using the browser's "Forward" and "Back" buttons. Screen space also becomes an issue with frames; if you use frames to divide the browser screen, you will force many readers to scroll both horizontally and vertically to see the full contents of each frame.

The current consensus among Web design and usability experts is that frames should be used only in the rare instances when their limited advantages clearly outweigh the many problems they can cause.

Web Content

Content is king! Not just plenty of it mind, your content needs to be informative and keyword rich. You want the visitor to see you as a valuable information resource. People use the internet to find information. Whether you are selling a product or service you must provide valuable information to the visitor or they will click away and find a website that gives them what they what they want. Good content within your site will help your page rank, search engine placement and inbound links – if you a proven to proved good quality content , the likelihood is other sites will want to link to yours.

Summary

Good Web design is a combination of common sense, good website structure and internal linking, oh and a good designer is a must. Your site should be attractive and easy to use and most importantly, your website should provide a simple and easy navigational system to aid the user’s experience.

Author: optimassolutions.co.uk

Web Design Liverpool

Meta tags unravelled

Meta tags first appeared and where used in web designs in the 1990s. Meta tags where initially created in order to make sense of the increasing number of web pages listed on search engines. However the popularity of Meta tags quickly began to shrink. The reason? Unethical webmasters.

Some of the more unscrupulous webmasters began abusing the keyword Meta Tag, overloading this tag with unrelated and sometimes immoral keywords, for example someone operating a pornographic website would enter keywords unrelated to their industry in order for their site to appear for totally unrelated searches, this in particular caused outrage when juvenile and underage children where exposed to adult material when searching for totally unrelated subjects.

Obviously this was wrong and one by one, the major search engines discontinued the use of Meta tags as part of their main website indexing criteria. Google disregarded Meta tags altogether, however several search engines that still read Meta tags, giving some weight to the argument that they play a part in the placement of your website within search engines, (Google will still look at your description tag).

There are still a few Meta tags that add value to your website, and I believe they are still worth spending a small amount of time on to get right. The Meta tags that are worth getting correct I will describe in detail in this article, however in brief some of the more worthwhile tags that are of use and can prove to be good for website organisation are;

Meta Content Type - Declares the character set, Always use this tag along with the DTD declaration format from the World Wide Web Consortium. Failure to do so may cause display problems. For example, this tag helps properly display the page.

Meta Author Tag - declares the author of the webpage or website, this tag is optional. This tag can be of use to track the content author for the website, especially if there is more than one web author. This tag has no bearing for your search engine ranking, but it is known as a “standard” Meta Tag.

Meta Copyright - To include copyright, trademark, patent or other information pertaining to intellectual property (shouldn't use this instead of a copyright notice that is visible on the Web page)

Meta Content Language – Used to declare the language of the document.

Meta Description – Gives a description of the web page that appears under the title of the ‘serps’ (search engine results page) for your website. This tag consists of a short, plain language description of the document, usually 20-25 words or less, anymore and the crawler making its way through your site will stop indexing the tag.

Meta Keywords- Many website owners or web designers tend to leave this tag out nowadays believing it to have no relevance to page rank or search engine listing. However I believe this tag still has some relevance no matter how small.

meta name="keywords" content="web design, website design, etc"

The following Meta tags provide information to the web server, web crawlers or robots and web browsers that visit web site or web page - the browsers and servers can take action based on the Meta tags and content within.

Meta cache-control - Control how your pages are cached. The options you have are: public - allows the page to be cached; private - the page may only be cached in private caches; no-cache - the page should never be cached; no-store - the page may be cached but not archived.

Meta expires - If the content of your page has an expiration date, you can specify this in your meta data. This is most often used by servers and browsers that cache content. If the content is expired, they will load the page from the server rather than the cache.

Meta Pragma No Cache – Developed and used to prevent visitors from seeing a cached version of a specific page. This tag forces the browser to pull information from the server each time the page is viewed.

Meta robots – Created to control search engine robots on a per-page basis. This tag tells the Web robots whether they are allowed to index and archive this Web page. You can include any or all of the following keywords to control what the robots do. The robots can do anything on the page; none - robots can do nothing; index - robots should include this page in the index; noindex - robots should not include this page in the index; follow - robots should follow the links on this page; nofollow - robots should not follow links on this page.

Author: optimassolutions.co.uk

web design liverpool