RudiBela Business Solutions » CSS

Best practices

Sasa Bogdanovic — Sat, 13 Feb 2010 00:59:41 +0000

Before writing semantically correct (X)HTML and CSS code, you should think of separation of content, presentation and behavior. Reasons for this are numerous. Although it is possible to have all (X)HTML, CSS and JavaScript code in every web page you are serving, long time ago it has been adopted as best practice to separate these.

Best practices

While HTML is necessary in order to have any content of the page, CSS is used to style the content and present it in a shape different from how the browser shows it by default. Without JavaScript all you have is a static web page in which there is no interaction between the user and the page.

The separation should be done in the following way

content is in the main .html file
presentation is in external .css file
interaction is in external .js file

External files are referenced from within the main .html file.

As main reasons for separation I list the following:

Performance – external .css and .js files will be cached by the browser after the first load, dramatically decreasing loading times of subsequent pages where those files are referenced, thus improving the user experience.
Management – you know where to look for and place code, each layer for its own purpose.
Maintenance – all the code is in one central location, applying all presentation and interaction code to all the web pages within a web site. If you need to change anything in the code, it is done in one central place.
Reusability – the css and js code can be easily referenced and reused across the entire web site.

Without separation, the logic of css and js files would need to be rewritten in each and every page, hence multiplying work by many times. Any change in such a case becomes a nightmare.

To get a picture of what I was talking about, there is no better example that CSS Zen Garden, a web site where different designs for the same content are presented. This is done only by modifying the style sheets in .css files.

What’s in it for me?

If you are Internet user, you will have better experience as the pages would load much faster compared to the case without separation.

If you are a web developer, you have the chance to keep your sanity.

If you are a business owner, by making sure that your website is running with content, presentation and interaction separated ensures no leaking of bandwidth from the web server, less burden on the server, more satisfied customers (visitors of the website), easier management and maintenance of the website. All in all, it means higher return on investment (ROI).

If you are interested in further reading about separation of HTML/XHTML, CSS and JavaScript, explore the following articles:

The Three Layers of Web Design
Separating behavior and structure

Semantically Correct Code

Sasa Bogdanovic — Sat, 13 Feb 2010 00:40:34 +0000

Quite often semantic aspect of web design and development is neglected, either because of not even thinking about it or because of wrong impression that there is no time to cater for semantics when working under pressure of meeting the project deadlines. In either case, it is not an excuse. Time has come to change the mindset.

Semantically correct code

Writing semantically correct code is nothing more than common sense. All that there is about HTML code semantics is that each element in a web page should have an HTML element corresponding to its meaning that would correspond to its content and purpose.

The recommendations for writing semantically rich code are quite easy to follow. For example, different types of headings in the page context should be wrapped within header HTML tags,

–

. For paragraphs of text, paragraph element
should be used to wrap its content. If you are creating any kind of list items, list tags (
,
,
, etc) should be used, and so on. Quite easy, isn’t it?

To picture this, see the two examples of HTML code below.

An example of semantically poor code:

`This is the title`

`This is the smart paragraph saying it is a paragraph within div tag which is semantically poor.`

`Link 1`
`Link 2`
`Link 3`

An example of semantically rich code:

`This is the title`

`This is the smart paragraph saying it is a paragraph within p tag, which is semantically rich.`

`Link 1`

`Link 2`

`Link 3`

Even in this simple example it is obvious that the latter case is more readable, meaning it will be much easier to maintain, style, upgrade, whatever… Needless to say search engine optimization of the page will benefit as well since semantic code will help search engines understand the pages better and index your site optimally.

If you are an old-school web developer, you probably wander where are the tables. Well I got news for you. Tables should not be used for laying out header, footer, sidebar and so on. If you need to present some data in a tabular format, that’s where tables come in.

Finally, your semantically coded page definitely will not appear the same across different browsers. For example, in Internet Explorer 6
header element will appear bigger than in Firefox or Internet Explorer 7 will show text within
tags look like it is bolded. This is not due to the semantics, but because of different implementations of HTML elements in browsers. The way to fix this is not to change the code, but to use CSS to accomplish a design that will show the same in any browser.

What’s in it for me?

If are an Internet user, you benefit by visiting a website which will not limit you which browser to use.

If you are the web designer and/or developer, writing semantic code will make your life much easier and work much more interesting. It is really much easier when presentation is logically structured and you can understand and visualize the structure of the page even without any styling but just by laying out the markup.

If you are a business owner, getting a semantically written website ensures a solution which will be

easier to manage and maintain

cheaper in long terms

independent of the developer who created it

more search engine friendly, thus bringing in more visitors, potentially turning them into customers.

In any case, if you are interested in further reading on this topic, here are some good articles:

The Meaning of Semantics
Writing Semantic HTML
The semantic Code
Semantic code: What? Why? How?
Semantics, HTML, XHTML, and Structure

Valid (X)HTML and CSS code

Sasa Bogdanovic — Sat, 13 Feb 2010 00:27:51 +0000

When creating a new web page, the first thing to do is to define a doctype. What is a doctype? It is a declaration of layout mode that is activated within the browser when it renders the page. Therefore, having a valid HTML/XHTML and CSS code means that the way web page is written complies with layout mode declared in doctype. In other words, by declaring a doctype and writing compliant (X)HTML and CSS code means that you create a page that you say you do. If that is the case, all browsers will render the page in the same way.

On the other side, if web page does not validate against the declared doctype, the way it will be displayed in any browser can be unpredictable as it will then depend on error-handling mechanisms which vary a lot from browser to browser.

It is like having an ID card, but being someone else. Yes, it is that bad.
There are a number of online services and extensions for different web browser that perform validation. Once your web page is ready, before putting it online, it should be validated. Some of the most popular ones are:

It is very probable that validation will reveal errors and highlight potential layout problems the developer did not expect to find. Once it becomes a habit, producing valid code leads to a faster development and is a foundation for easy management and maintenance.

What’s in it for me?

If you are just surfing the internet, go ahead and use these tools. It is good to know where you are.

If you are a web developer and you want to know more about doctypes, you might get more details by following :

If you are a business owner thinking about hiring a web development company to make or redesign your website, do a research before you make an agreement. Visit the websites of your potential service providers. Normally you will find web design portfolios. Do your homework. Visit the websites they have created and make sure they are HTML/XHTML and CSS valid. Consider hiring only those that are compliant. Believe me, it will save you a lot of trouble (time + money) in future.

Web Standards

Sasa Bogdanovic — Sat, 13 Feb 2010 00:18:38 +0000

If you are a tech savvy user and you surf the Internet following web design and development related topics, you must have heard about Web Standards.

So what is all the fuss about? In short, it is a set of recommendations and guidelines put by W3C organization to browser vendors aiming to get a browser independent process of web design and development and user experience.

Designing with web standards

One of the founders of Web Standards movement is Jeffrey Zeldman. His famous book Designing with Web Standards has recently been released in its 3rd Edition. It played a big role in putting web standards in focus of web development community.

Browser wars

Microsoft and Netscape were fighting for the browser market share by introducing more and more proprietary features of their products, Internet Explorer and Netscape Navigator, thus almost making half of the web inaccessible for users, depending on the browser they were using.

W3C brings together the architects of major modern browsers, as well as independent web designers and developers renowned for their web standards advocacy. Each time a new set of recommendations is issued, it is a result of a hard work done by people involved to reach consensus. This is not always done at the pace the web designers’ and developers’ community expects, so a number of other organizations have been founded trying to make themselves influential enough to drive browser vendors in the same direction. Some of them are What WG and WSG (Web Standards Group)

In general, Web Standards apply to:

Valid HTML/XHTML and CSS code
Semantically correct code
Separation of content (HTML/XHTML), presentation (CSS) and behavior (JavaScript)
Accessibility

I will cover each area in more details in my future posts, so stay tuned.

What’s in it for me?

If you are an Internet consumer, then for you this issue is probably transparent and maybe this is the first time you meet Web Standards. Well, you should care. Internet belongs to you! Just like any tangible product, if it is not usable for the end user, it better not be.

If you are a web developer and/or designer, you should be aware what Web Standards are. If you are not, maybe it is time to look for another job where they will educate you? Or even better, you can regularly read our blog.
If you are a business owner and your website is an important part of your operations and branding, you should care too! Your standards compliant website will be easier to maintain and manage. It will have increased usability, making your business more exposed. It will be not only user friendly but it will also be more search engine friendly. If the users feel comfortable while shopping on your site, they will come again. All in all, your return on investment will be increased. Which is why you are doing business anyway.