by D. Sproul | July 6th, 2009
How can your company save time and money just by the way a website is designed? Very easily: Use external CSS files. This will save your company money, of which we could all use more these days.
Embedded Website Styles
Website pages used to be designed with internal styles. The font size, color, font family (i.e. Arial), and attributes like bold or italic all used to be listed embedded in part of the HTML code. Changes to the main body font, size or link style meant that each page had to be opened in software, edited, saved, and re-uploaded to the server. This took a lot of time (=money).
External Style Files (CSS)
Today websites are designed with a link to one or two external style files that end in the suffix “.css”. The second CSS file could be or mobile use, for instance, or to change the look of the website just for fun.
CSS stands for “Cascading Style Sheet.” It means that some styles are inherited from overarching ones above them. The main font family in the “body” style can modify the whole website except for certain specified areas, for instance. Areas like “main body” or “footer” can be designated with certain attributes: placement, background color, etc.
Now imagine designing all of your web pages with links to an external CSS file: changing a sidebar from the left to the right, the font for the entire website, or the background color could take less than twenty minutes, regardless of the number of website pages. Ahh… a smaller website bill, happy boss. Gooood.
Lower Server Time
External CSS files also cut down server time for loading web pages. The CSS file is loaded one time when the visitor first arrives at your company’s website. When they visit the next fifty web pages, the CSS file is already there. It doesn’t load again. This cuts down server time (=money). Again: happy boss (probably you). Gooood.
Dirty HTML Code vs. Clean Code
When using internal styles embedded in the web page, the font family and size, color and alignment used to be repeated over and over again for each different paragraph or section. Even on one webpage this can add up to a lot more code, which translates into memory and server time. Now consider having hundreds of company web pages.
Old Code:
(Note the repeat of the font face, left alignment, font size twice. ( ) used instead of < >.)
(p class=”MsoNormal” align=”left”)(b)(font face=”Verdana” size=”2″)
(br)
Welcome! (/font)(/b)(/p)
(p class=”MsoNormal” align=”left”)(font face=”Verdana” size=”2″)
New from Frontiera: A better way to organize… (/p)
New Code:
(class=”bodytext_area”)
(h1)Rutgers Industries Offers More(/h1)
(p)Worldwide distribution of your products requires more than… (/p)
In the new code, the font family, size and aligment don’t have to be repeated again and again for each paragraph (p) nor header (h1) code on every web page. The section is designated “bodytext_area” style: all of the styling info sits in the external CSS file, and is loaded once, regardless of how many webpages there are on the website.
Tabs Necessary in HTML Code?
It is very helpful when the web page code (HTML) is organized using tabs. It makes it very easy to see the sections. Sometimes, though, the sections can involve so many tabs that the code is literally one screen width off the to the right. Some people are even questioning this pracice, since it can lead to hundreds or even thousands of extra, useless formatting. This formatting is behind the scenes of how your web page looks, and has no affect on it. It adds to the web pages’ loading times, and so server time.
Screen Readers:
Exernal CSS and less cluttered HTML code can greatly help anyone using a screen reader: disabled, blind, hard of sight, etc. Apparently the screen reader voices all of that code, and makes the visitor wade through header, body and table HTML code before even getting to the main content. This is especially a problem with nested tables: tables within tables just to format the web page. Andrew and Shafer write in their book HTML Utopia: Designing Without Tables Using CSS that it can take thirty seconds for a screen reader to wade through all of that extra information. Imagine the frustration of waiting that long for every web page!
Mobile Use with CSS
Instead of having a separate website for your mobile phone customers, it is possible to just adapt the CSS. Code (on the server, I believe) can detect whether the visitor is using a mobile device, and automatically switch to a mobile-version style sheet. The mobile CSS file could arrange the body text to a narrower width, insert photos under the text, instead of to the side, for instance. It could change the links to show up better in sunshine, possible changing from gray body text to larger, black underlined text. The code could also detect what type of mobile device: iPhones seem to work fine on normal webpages, so you wouldn’t switch that visitor’s CSS file. They could use the normal web page’s CSS.
Now I’m sure you can see the advantages of using external CSS for your company’s website. Site-wide changes are much easier and faster. Visitors using screen readers will arrive faster at your content. Your customers will be happy with faster-loading web pages. And this technology makes it easier to adapt content to mobile phones. All in all, it’s win-win-win.
