White Papers Quick Selection:
Why CSS is Important
Why your website should be designed
using Cascading Style Sheets (CSS)
By Al Morel
Is your website ready to be viewed on devices like this?
This is Apple’s new iPhone that is going to be available this summer. The iPhone, and other devices that will be created to compete with this, will be able to do several things. It is a phone, camera, music device, GPS system and most importantly for this discussion, a web browser. (To find out more about the iPhone, follow this link to a CBS News profile: iPhone video)
Introduction
Recently, I was running around Boston trying to rent some equipment. I needed vendor contact information to bring up a company website on my cellphone. Well, I tried, but that company had a website that would not display on the phone. I ended up going to a company that did.
You may think this is a little “geeky” but just consider a couple of things. Think how tethered people are to their cell phones. Think about the innovation that is going to happen to phones and other like devices with the advent of products like Apple’s iPhone. The future of the internet is not just on PCs, it’s going to be all around us in a multitude of devices and “old school” web pages cannot cut it. Today over 20 million people are already accessing the internet on a regular basis from their cell phones. That number is going to go up dramatically.
As a businessperson, you probably could care less about CSS. Business is about increasing revenues and decreasing expenses. It’s getting more customers, and it’s retaining and maximizing those that you do. And for a small to medium size business, that’s about it.
Who cares what type of saw the carpenter uses when he builds something for you? Well, the carpenter does, if he’s worth his salt. And you should too if the contractor comes in to start your new kitchen with a rusty old hand saw to cut the wood. We have this new thing called electricity!
CSS is generally being hyped by web design firms that, coincidentally, are able to use CSS, like it’s some type of be all and end all for all the internet’s challenges. It’s not, but there are many compelling reasons why now using this tool now makes a whole lot of sense.
Here’s a huge hint as to how the market will be moving. Microsoft will be discontinuing the king of all table making software, FrontPage. FrontPage will be replaced by a couple of different products that will be able to create, you guessed it, CSS.
Simply put, if your website is not utilizing CSS, you are probably not positioned for the future of the internet.
Purpose
This article is targeted for the business owner or manager who has the task of building or redesigning a website and wants to know why they should consider using CSS as the basis building block of the design. There may be a little “techno-babble” but this is an attempt to distill some of the issues in picking a design format for a website into something that makes sense to the lay businessperson.
It’s also a gentle nudge for the web designer who has not upgraded their skills to be able to create pages using CSS.
What Exactly is CSS?
Cascading Style Sheets, CSS, is a way to design web pages that separates the content of the website from the layout into two files. Each page on the site references back to the CSS file to get guidance as to where everything on the page goes. There are many advantages to this but the most compelling one is that the whole site’s style and layout, font, colors, etc. can we changed just by changing the one CSS file. As you can guess, this can be very time and cost effective when updating or revising a site. But, there’s much more!
What other ways can websites be built?
There are basically 3 design formats that websites are built in today:
- Using FRAMES: Less and less for lots of reasons.
- Using TABLES: Many sites are still being built using tables.
- Using CSS: A little harder to learn but has great advantages.
The Advantages of CSS
- Your website is accessible in more places.
Cell phones, PDAs, Televisions, GPS Systems, Public Kiosks, Gaming Consoles, Hand-held gaming consoles - these are only some of platforms that are going to display websites in the future. CSS can already to that. - CSS is the internet standard for the future.
The World Wide Web Consortium, W3C, which is the standard creatror for the internet, says so! You may be surprised to learn that the world wide web was not invented by Al Gore but by someone named Tim Berners-Lee while he was at MIT. To find out more about the W3C, visit their website that is listed at the end of this article. - Your website is easier to change and update.
As I mentioned before, CSS makes it very easy to change the style of a document. For example, perhaps you wanted to add a menu item to your navigation bar. This would be labor intensive in a table based design, because each page would have to be changed dramatically. By utilizing CSS, all you have to do is add a simple menu item that is automatically formatted by the CSS file. - Your website will be smaller in file size.
When you separate the layout and styles from the content of the page, the actual webpage is much smaller. The CSS file actually downloads only once by the browser and is re-used on each page. This cuts the overall bandwidth used on your server and the site downloads much quicker for your visitors. On the internet, quicker is always better! This is especially important for devices like cell phones, where there is generally a slower connection speed. - It helps with Search Engine Optimization
Search engines send out robots to read pages on the internet. They then categorize the information on your page and then use a formula for categorizing your information. Typically, they put more importance on information at the top of the page. In the case of table-based pages, the contents of the navigation or menu bar will show up first on each page. When you use CSS, that information can be moved to the bottom of the page so the search engine will be looking at your content and keywords rather than information for the navigation/menu items, thus putting more emphasis on the content of your page, which is what you want. - Accessibility
Pages that are built in CSS make it easier to get to the contents of pages. A great example of this would be a person that has a visual disability who is using a screen reader to interpret the page. There are many more issues dealing with accessibility. Suffice to say that CSS has a leg up on this issue. There are going to be more regulations on accessibility issues in the future. Why wouldn’t you make your site more accessible to all if you could? - Consistency throughout the site
The positioning and layout of the various graphic elements, menus and navigation can be completely consistent across the whole website. One CSS file determines the look for the whole site. - More flexibility of appearance
When you use CSS, you can actually allow the user to change the appearance to suit their specific needs. A great example of this is allowing the viewer to increase the size of the type on the page with a click of a button. Have you ever gone to a site where the type was so small it was unreadable? (You may be aware that this happens more and more as you get older!) - More attractive layouts
Using Frames and Tables for website design has serious limitations when it comes to layout. OK, you can have 6 different levels of headings and 6 different sizes of fonts. You can also work with alignment and do some work-arounds to hide some of the shortcomings of the page layout capabilities. However, it's a far cry from some of the layout & design that we see created in print such as magazines and other printed materials. Properly done, CSS helps us achieve such layouts.
Why aren't more designers using CSS?
OK, I’ll admit, there’s a learning curve and it’s hard to get it to look right in the beginning. It’s a little different than designing in tables. There’s nothing untoward about a little personal and professional development. I know many web designers who are doing beautiful work but have not upgraded their skills. Their clients are going to suffer when they have to redesign their entire site in the very near future.
Resources
There are lots of books and websites on CSS. Our favorite book on CSS here at Commareus is Dave Shea’s book. We consider it the primer for CSS information.
The Zen of CSS Design: Visual Enlightenment for the Web
by Dave Shea
CSS Websites:
CSS Zen Garden. csszengarden.com
This is Dave Shea’s corollary website for the book above.
Holy CSS Zeldamn! dezwozhere.com/links.html
Andrew Fernandez has put together this comprehensive CSS resource page.
Digital Web Magazine CSS Articles: digital-web.com/topics/css
Web Design from Scratch CSS Page webdesignfromscratch.com/css.cfm
Other Websites of Interest
A list apart -“For people who make websites” alistapart.com
A List Apart Magazine explores design with a special focus on web standards and best practices.
The Web Standards Project webstandards.org/
A grassroots organization to promote web standards.
The World Wide Web Consortium, W3C: w3.org
Commareus Website Links: commareus.com/links.html
Lots of great links on CSS, design, and other web topics
About the Author
Al Morel is the operations maganer at CommAREus, a company that specializes in Flash animation, video integration, and CSS website design for advertising agencies and web developers. Al is a graduate of the Digital Multimedia and Web Design Program at Clark University and has a B.S. from the University of Massachusetts at Amherst. His email is: al@commareus.com
