Archive for April, 2007
published by Gary in CSS | Website Design
CSS stands for Cascading Style Sheets, and if you are wondering what cascading does here, they have a cascading effect on the web pages they are used on. OK, not a good explanation, but people use the CSS definitions to keep their website design and content separate. Now why would you keep design and content different on a same web page? Good question. And it has a good answer too.
When you separate design from content you can easily change one without affecting the other. You can store all the CSS definitions in an external CSS file (it often has an extension .css). In order to attach a CSS file to a web page you just need to include this single line (let’s assume the name of your file is css-style.css):
<link rel=”stylesheet” type=”text/css” href=”css-style.css” />
All the CSS layout definitions contained inside css-style.css will be applied to your web page. Put this line in the header section (<head></head>) of all your web pages and you’ll have the same style applied to all the pages of your website. This is one big advantage.
Another advantage is that you can have a uniform look across your website with just a couple of lines of CSS definitions. Take for instance this CSS definition:
h1{
font-family:”Book Antiqua”
font-size:18pt;
color: #CC9900;
font-weight:normal;
}
If this definition is included in a CSS file and if that file is attached to all the pages of your website, the text appearing within <h1></h1> will look the same throughout your website. This matters a lot when you have hundreds of pages.
Using CSS for creating your layouts also encourages you to abandon using the deprecated tags like <font></font>.
Further, CSS tremendously reduces the size of your web pages because all the design definitions reside in a separate file. This is good for your bandwidth cost (it becomes to surface once the traffic increases) and even for SEO because you are doing away with most of the formatting clutter.
With new versions of CSS rapidly evolving and with increasing cross-browser compatibility, not creating CSS-based websites can prove to be a real burden, and a big mistake.
published by Gary in SEO | Website Analytics
Web analytics, or your website usage data tells you how many visitors you get per day, per week or per month, how they end up on your website, what they do once they are on your website, and what makes them leave eventually.
By carefully and routinely studying your website usage data you can figure out what pages of your website are favorite among your visitors and what pages need to be changed/improved in order to get more attention. They also tell you what keywords and key phrases people actually use to find your website.
How can web analytics help your SEO efforts?
As I just said above, your web analytics tell you what keywords people are using to arrive at your website. Now, this could be a totally wrong traffic because the keywords being displayed by your web analytics tool might not be the ones you are trying to optimise your website for. So you can re-orient your effort and get your web pages re-written to better search engine optimise for the right keywords.
On the other hand you may also discover some search phrases that are very relevant to your website but somehow you missed optimising your website for them. You can increase traffic for these keywords by further optimising your website for them.
What do they do once they are on your website?
Search engine optimisation doesn’t only mean getting tons of traffic from the search engines; it also means optimising that traffic so that you derive maximum benefit from it. So it’s very important to know what people do once they are on your website. If you notice that there is a page from where people leave your website the most you can make some improvements there. Then there might be some pages people immensely like. You can devise ways to promote your special products on those pages
Where are the inbound links coming from?
Search engines are not the only source of relevant traffic. A lots of traffic might come from those websites that display your links on them. If you notice a high amount of traffic coming from such websites you can strike up partnerships with them to encourage them to put more of your links there. You can even reciprocate.
The web analytics are primarily there to give you a picture of your traffic. By studying the trends and making the needed changes you can optimise the traffic your website gets to a great extent.
published by Gary in CSS | Web Development
With the Internet Explorer not supporting even some of the CSS2.1 features, it’s not a surprise that work on CSS3 has been going on since 1999 and still it’s only the Safari browser that supports some of its stellar features. But it doesn’t mean we cannot CSS3-enable our website designs so that whenever the mainstream browsers catch up with CSS3 coding features, you’re already prepared. Here’s the link where you can test if your browser is CSS3-ready.
Personally, my favorite enhancement is the way we’ll be able to handle the background images. Currently we can use only a single image behind a DIV or an HTML tag. In CSS3, we’ll be able to use 8 images. This will be great if you want to create those famous rounded corner boxes or fancy navigation schemes without having to write tons of inline markup.
Another great feature is the styling of the various hyperlinks. You have many kinds of hyperlinks on your website. There could be URLs, there could be inner links (that belong to your own domain) and there could even be the email links (for instance, mailto:). For example, if you have this code in your CSS3 definitions file:
a[href^=”http:”] {
background: url(img/image-for-external-link.gif) no-repeat right top;
padding-right:15px;
}
All the external links with appear with a different background image. If you want an email icon to appear with your Contact us email link, you can use the following CSS3 definition:
a[href^=”mailto:”] {
background-image: url(img/email-image.gif); no-repeat right;
}
With CSS3 there is no need to use images and increase your page size if you want to display shadow under your text. For instance,
h1 {
text-shadow: 3px 3px 6px #333333;
}
will display shadow under your heading text.
With people accessing websites using all sorts of devices such as TV, PDA, hand-held devices, display panels, and of course computers and laptops, in CSS3 you’ll be able to create “profiles” for different types of media so that your web pages look good everywhere.
Presently, I think the current version CSS has all the features an average website needs to look good as well as be accessible. The problem actually is not with the standard or features, the problem is with incompatibility or non-compliance. A majority of people use Internet Explorer and this is a browser that fails most miserabley when it comes to rendering/supporting the CSS-based designs.
You can read more on the current state of CSS3 Working Group progress.
published by Gary in CSS | SEO | Web Development | Web General | Web Technology | Website Design | Website Standards | Writing for the Web
Although some argue that adhering to strictly validated code is just a way of making things needlessly complex, by the end of the day it makes sense to create validated code for many reasons. I have seen scores of websites getting highly ranked in the search engines despite not having a valid markup and this is an aspect used as a counter point. I don’t see it as a proof of “invalid code works too” but just as a fact that these websites don’t have enough competition to feel the pinch.
Valid code passes the recommendations laid down by the W3C, the body that defines (X)HTML.
The biggest advantage is the SEO factor. Another is browser compatibility. Let’s quickly go through a few benefits of writing validated code for your web pages.
Validated code makes it easier for the search engines to crawl your website
Some people don’t agree with this but a valid code ensures better organisation of content and layout. This tells the search engines where they can find the right information. Valid code keeps the clutter away.
Validated code works in all the browsers
Do you see that irritating message on some websites: “This website looks best in IE” or some browser X? How silly! You are actually declaring to your visitors that you are incapable of writing valid code for your website because valid code makes your website work seamlessly on all major browsers. Valid code not only makes your website suitable for current browsers, it also prepares it for future browsers.
Validated code makes your website accessible to all
You cannot write validated code without incorporating accessibility features into your website. Once your code validates, it automatically makes your website accessible to people with special needs and different abilities.
Validated code makes your website available to various devices
These days people don’t use just the computers. There are scores of other devices that can be used to connect to the Internet to view web pages. A valid code makes your website compatible to almost all handheld and other devices.
In the end, validated code makes your website future-proof
Standards are always defined with an eye on the future and nothing is different for the web designing standards. When you use validated code, you make sure your website will be ready to embrace the new technological changes with ease.
Writing validated code is not as difficult as it seems in the beginning. More than an expertise, it is a matter of habit. Once you start writing validated code, you won’t even notice that you are doing it.
0845 838 7448 
