Better Control and Cost Savings with Style Sheets
Recently, ElektroPost, the company behind the Content Manamement System EPiServer, asked me to write an article to be part of their Expert Panel in their Usability section. It’s targeted at project managers, editors and web developers who don’t work full-time with web interfaces. The article is titled Better Control and Cost Savings with Style Sheets (Swedish version), and I’ve also decided to publish the full article below to take comments. A big thankya to Henrik Box and Jeroen Mulder for reading my first drafts and giving me valuable feedback. Also, a thank you to ElektroPost for professional proofreading.
Here goes:
When the Web first became available to the public, everything was in the markup language HTML: the content, the presentation and the interaction. Since then, we’ve seen the advent of content management systems, which offer editors the possibility to publish content on the Web without any previous coding knowledge. The content they produce is saved in a database and then dynamically generated into its corresponding page.
All this has helped the Web to grow enormously, but it has often resulted in controlled chaos. Many Web sites had to be rebuilt from scratch as soon as any changes were to be introduced or if any new Web browser was released. How can we change that scenario?
The next step now is to make sure that you separate your content from your design and the way you want your pages to look. Style sheets, also known as Cascading Style Sheets (CSS), have been around for some time, but their usage has grown most rapidly during the last two years. The general recommended approach to producing a Web site is to collect all visual presentation in one or several style sheets. For instance, there you specify:
- all the colors that are used,
- which font should be used, and if it should be scalable to cater to people with various sight disabilities,
- images used for design purposes,
- boundaries and placement of all elements used.
So What Are the Biggest Selling Points?
The style sheet is the central place where you control the look and feel of every page on your Web site. This leads to a consistency that greatly improves the usability for the end user. What this also means is that you don’t need to update every page if you want to change something in the layout; this is done in one place and it affects every page. This is one of the major reasons you should never apply things like padding, margins, widths, etc. in the HTML, as it results in you having to go through all the files to make any updates.
It is also a way to gain better control of how to adapt the layout to cover for different screen resolutions and different sizes of the end user’s Web browser window.
When it comes to increasing the performance of your Web site, you should be aware of the fact that the style sheet files get cached in the visitor’s Web browser. This means that they will only need to download it for the first page they visit on your Web site. From there on, the only data that will be sent to them for the following pages they visit is the HTML code. This is one of the really good reasons to move all the presentation from the HTML file.
This means, for an ordinary Web site, that by using style sheets, it is possible to save 25% in the data that needs to be sent to the visitor for their first page visit, and then up to 50% for the pages after that.
A good example of how to totally redesign an entire Web site through style sheets is css Zen Garden, where the HTML code is the same for every page, and the only thing changed is the style sheet file.
What Should You Keep in Mind?
The power of using style sheets for your layouts should be combined with semantically correct HTML code in your templates and correct elements in your content. The usage of heading elements for headings, paragraph elements for paragraphs of text and list elements for different listings such as menus etc., will result in:
- Pages that are more accessible to everyone.
- Better search-engine ranking by making it easier for them for understand the weight of the text you’ve used in your pages, and by not having an
unnecessary clutter of presentational code mixed with the content. - Easier maintenance of page templates and page content by focusing solely on the content, instead of having to think of the presentation as well.
Conclusion
By using style sheets you will gain better control, achieve easier maintenance and increase performance while saving bandwidth. Together with correct semantic code, you will also reach a better search-engine ranking and automatically increase your Web site’s accessibility.
Glad I could help. Sorry for nitpicking so much though 😉
Nice done,nice to see that CMS companies has starting to open their eyes on webstandards. They have noticed that there is a lot of money in this.
That looked good, to the point and not too long. 😉
Jeroen,
Once agan, thanks. Nitpicking's usually good. 🙂
Jens, Mats,
Thanks! More and more focus has been put on the interface development through such things as <acronym title="Search Engine Optimization">SEO</acronym>, accessibility and cost savings. About time, if you ask me.
Hurra hurra! I hope that it also has effects on new episerver releases. Did you have any chance to discuss that with them?
Hej
EpiServer om nÃ¥got är väl INTE nÃ¥got man förknippar med tillgänglighet?? Den är väl sÃ¥ lÃ¥ngt ifrÃ¥n tillgänglighet man kan komma?? Testa till exempel att stänga av javascript pÃ¥ deras hemsida. Kolla source-koden de har – de använder inline onevent attribut pÃ¥ sina taggar och en massa "document.write('');" För ett halvÃ¥r sedan sÃ¥ fungerade inte ens deras hemsida i firefox! (skickade ett mail till dem om det dÃ¥) Deras hemsida är uppbyggd med smÃ¥ bilder som används till att sätta layouten pÃ¥ plats. Pix-bilder eller bilder som även användes när tabeller användes. Riktigt dÃ¥lig kodning alltsÃ¥. De tar sjukt höga priser för att leverera sin server ocksÃ¥, men det är bara en liten punkt bredvid förstÃ¥s, en halv miljon kostade det för kommunen…
Jag snackade med en teknikansvarig i en kommun som hade köpt deras server. Detta är ett citat från korrespondensen, och är förmodligen något som snubbarna på episerver hade haft som sälj-argument:
"När det gäller EPiServers egen webbplats och att den inte funkar i Mozilla får du framföra det till dem. EPiServer följer standard för IE 4.0 vilket man kan ha olika åsikter om."
Det är ju sÃ¥ att man kan skratta. Och inte svarade episerver pÃ¥ mitt mail heller. Om du beblandar dig med dem sÃ¥ sjunker direkt din trovärdighet inom xhtml+css+accessibility+osv-kretsar…
Men kanske även en blind höna kan finna ett korn?
Bevis på mina påståenden
http://haf.se/images/content/epiServerAndAccessib… http://haf.se/images/content/epiServerAndAccessib…
…och till er utvecklare som jobbar med episerver som förmodligen ocksÃ¥ läser det här: Om ni struntar i att svara pÃ¥ "jobbiga" mail eller är för fega för att göra det sÃ¥ fÃ¥r ni räkna med att ert företag utsätts för negativ kritik!
Kristin,
Thanks! We'll see about the future, it's a work in progress.
Henrik,
First, I'd really appreciate if you were to write your comments in English, since many of my visitors are non-Swedish speakers. For those who aren't, here's a summary of Henrik's comments:
Henrik states that EPiServer is, by far, something that isn't associated with accessibility, and that they for their own web site use a lot of inline events, <code>document.write</code> JavaScripts, using one-pixel-sized images for layouts purposes etc. He also mentions high prices and how different municipalities have had problems from the lack of accessbility concerns in their product.
He links to some screen dumps of the EPiServer web site and exclaims that their web developers will have to face this kind of criticism if they ignore or are too cowardous to answer e-mails regarding this.
Another thing Henrik says is that if I mix with ElektroPost, I will lose credibility in <acronym title="eXtensible HyperText Markup Language">XHTML</acronym>/<acronym title="Cascading Style Sheets">CSS</acronym>/accessibility-circles, but he rounds it off with that maybe even a blind hen can find a grain of corn.
Let me rebut to this:
I've had some talks with some of the people from EPiServer, and they are aware that this part haven't got enough focus. But I think it honours them that they acknowledge this, and that they have discussions with people within this field. It shows that they do want to improve, but everything can't just become perfect overnight.
When it comes to my part in this:
First, I've never stated that EPiServer's web site nor their templates are perfectly valid and accessible. My article is about an approach to web development and style sheets, and it could have just as likely been published on any other Content Management System company's web site. The goal of my article, as well as the other ones there in their Expert Panel, is to affect the project managers, editors and web developers who will work the product to take these things into consideration.
If that makes you think I'm a sell-out, I'm sorry to hear that. But I think that if we truly want large companies that affect our every-day life to get better, maybe we should just stop bitching about it, and instead try to help them achieve that if the opportunity arises. I guess this is similar to WaSP's collaboration with Microsoft to improve their products; we try to make things better and raise awareness, instead of just complaining.
Robert:
Keep up the good work! One day your efforts WILL make a change!
Henrik:
I must say that I just don't get your attitude…
If a company asks an expert for help and the expert accepts he/she losed credability?!
On the contrary you SHOULD credit Robert for helping them and their developers to get on the right track!
It's true that many EPiServer websites isn't very accessible due to EPiServers built in (old) templates, but how will this change if they don't ask the ones who knows how things should be done? Is EPiServer forever doomed to hatered from you?
// 🙂 Kalle
Kalle,
Thank you for the kind words!
I'm just saying that if the electropost guys really mean what they're talking about they should at least answer an e-mail…
It's good that this debate is taken to the "big company", sure, but it seems like talking about css in the context of a company that seemingly doesn't seem to care about it, is just out of place.
Did the ElectroPost company contact you about writing accessible code in their server, or about writing an article to use as a sales-pitch? Unless they also consulted you about code/practises etc, but only made you write that article, it seems to be obvious that it's just another sales-pitch and nothing else.
And no, of course they're not. It's just that they promise a lot without sticking to it, it seems like. And the talk about "old templates" is just bull, since they're not using "old templates" for their own homepage, are they?
Clarification: my last paragraph is an answer to your last question.
Henrik,
That I agree with you about, but that's really up to them to answer to.
The article, to me, is a way to reach out to their customers, to help them understand what it takes to create a good web site. Nothing more, nothing less.
I've also had talks with ElektroPost about their templates, amongst other things, so our contact isn't just about the article. You should also know that I fight for getting a better web, by making it more accessible, semantic and standards-compliant.
But we can't expect it to happen all at once; I'm grateful for our first initial contact and that ElektroPost are aware of the criticism that has been raised. Then, only the future can tell what path they will choose.
Sarah and Linus,
Thank you for your response, and thank you for the compliment.
Firstly, we are aware of the accessibility problems of our Web site. Every EPiServer Web site, even episerver.com, customizes its own set of templates. Obviously, at the time of making the episerver.com templates, accessibility was not given the importance it should have been. At the moment we are focusing our accessibility efforts on the EPiServer product and its sample templates. This will benefit all customers using EPiServer, and not just the visitors of our Web site. I hope you agree with this prioritization.
Secondly, the usability section of our Web site is not intended as a sales pitch. It is intended as a service to all our customers and other Web editors, no matter which CMS they are using. We feel that usability and accessibility are important issues, and we therefore want to help Web editors learn more about it. Before launching the usability section on our Web, we suspected that we would receive criticism for not providing it on an entirely accessible Web site. But we felt it was more important to help Web editors learn about this than having the perfect Web site ourselves.
Thirdly, Robert Nyman’s involvement as an article author was a result of a meeting about how to improve EPiServer as a product from an accessibility point of view. Being someone with great knowledge in this field, we invited Robert to participate in our Expert Panel. This doesn't mean Robert is happy with the accessibility of EPiServer today. Hopefully, his feedback will help in improving EPiServer in this sense.
Finally, the EPiServer team has had accessibility on the agenda for the last two years. Accessibility is incorporated in the development process of new features. We do, however, have older features that were implemented without considering accessibility. We continuously work to improve these to make EPiServer a product with high accessibility. Nevertheless, our aim is to provide a product with high usability and functionality, so it’s always a question of priorities.
PS. We’re sorry to hear you (Henrik) didn’t receive an answer to your feedback e-mail regarding episerver.com. We receive hundreds of e-mails every day, and your message might have been lost or overlooked somewhere. However, you should know that we take great effort in answering feedback. DS.