Why Bother With CSS (Help me out!)?
I've spent most of the last week "learning" CSS. You can't help but pick some up if you work on web apps all the time, but I'd done a pretty good job to date of not actually learning how to build a site using CSS the "right" way. After all, I knew that if I learnt CSS I'd get stuck fixing templates for my design partners (for which I don't get paid), so to date ignorance was a profitable policy! The problem I've always had with CSS is selling the benefits enough to justify us spending a little more time on each project to do the markup right.
Firstly, it seems to me the more I play with it that just like well architected code, if you have well designed CSS for one site it is much easier to use that as a basis for additional sites and that it only takes longer to do a site in CSS if you don't really know how to code CSS properly. Most of the problems we've had in the past with markup has been rookie mistakes from our suppliers like having an absolute positioned sidebar and wondering why the footer lays over it unless a hack is used or the well known problems with the difference between IE and everyone elses box model.
That said, imagine you're selling a website to a small business owner who runs a chain of three sporting goods stores or the marketing manager at a legal or accounting firm with 10-50 professional staff. They've got a $15,000-$25,000 budget (depending on the project) for consulting, design, data entry, programming, testing, deployment and support of a fairly rich site with a number of custom objects and a decent chunk of custom programming. The good news is that you know you can provide them with maintainable, semantically valid, accessible and highly usable markup, but it's gonna cost (for a site with a site wide screen template, a site wide print template than then maybe twelve custom screen templates for displaying lists, details, forms and reports for various different objects) at least a few hundred dollars more - I'd say probably $1,000-$2,000 all in (total cost - not additional).
From the owner/marketing manager, the question comes up, "what's in it for me"? "Why should we bother doing this?" What is a response that would make them happily open their wallet wide to do the site right?
To date I've focused on:
- Search Engine Optimization - By moving presentation based code out of the HTML, by replacing image navigation with text and by putting the page title and content at the top of the page, it will help the site when being indexed for relevance on the keywords in the site content.
- Accessibility - By creating semantically valid markup and using the right tags in the right way, the site will typically be easier for visitors using alternate interfaces such as screen readers. By defining text size using em's or percentages, those with poor vision will be able to easily up the font size to better read the marketing messages.
- Maintainable - Over time as you want to make changes to the look and feel of the site, well designed CSS will be quicker and easier to maintain than a site with large amounts of obscure presentation markup mixed in with the content.
Assuming the company doesn't do any business with the government, what are the other benefits that CSS provides? I find that for some clients, the potential SEO benefits are enough to get them to pull the trigger, but for those that for whatever reason don't care about SEO, the accessibility and maintainability stories are often "nice but not worth paying for" on the basis that they don't have many customers using screen readers and they seldom tweak the look and feel of the site (preferring a complete redesign every 3-4 years instead).
Any Thoughts?!
Also, if you like to make site-wide changes such as seasonal colors, it is far easier to edit one style sheet than however many layout pages and tables you would need to edit otherwise.
Finally, the geek in me gets really happy when running the w3c validator returns a "green light" for my code.
Better user experience: Typically, Structural HTML/CSS sites are about 50-60% smaller than their tabled based counterparts and 25-30% smaller than their (we are going to do this in HTML/CSS but with a tabled layout paradigm) cousins. This results in a faster download to the client. If you are moving from a tabled layout to a pure Structural HTML/CSS site, the site itself loads much faster since browsers don't show a table until its been closed. So a user gets the site quicker.
Cost Savings - bandwidth: Smaller pages equal less bandwith per. So a user isn't going to get choked by paying for more bandwidth or having to buy servers as often to keep up with demand.
Cost Savings - maintenance. A structural HTML site is easier to maintain period. Its easier to see what you are dealing with than a tabled layout (or the HTML table paradigm cousin).
Check out my presentation from CFUNITED. (CSS: The Basics). It talks a lot about this, includin g sample page that I converted. http://shayna.com/docs/CSSBackToBasics.zip
In addition to the stuff that you mentioned, there are also some other benefits. A couple that I came up with are performance and compatibility.
Using external CSS and divs instead of tables, means that there is less data to send, less data to parse, thus resulting is quicker load times. This could mean more conversions (sales).
As for compatibility, "proper" (emphasis on proper) CSS allows for a more uniform display across different browsers. This is becoming increasingly important as IE is losing its dominance in the market. Again, could result in higher conversion rate.
As for how to present this to your owner/marketing manager, my personal recommendation would be to present it from a dollars and cents standpoint. I.e. if you have 100 visitors a day, and you covert 50% of those hits (which is probably extremely high), and 25% of your total traffic uses something other than IE, then by not being standards compliant, the company loses out on 12.5 sales a day (100 visitors * .25 *.5). And if you make$10 on each sale, that equals $125 a day in potential lost revenue. This means that in 16 days, you have lost $2000 because you were not standards compliant. Obviously, you should replace this with more accurate numbers to your situation, but this should get the point across.
Many thanks for the comment! Some very good points, and thanks for the link to your slides - I keep meaning to check out your materials as I hear great things about them. Will make sure to check the preso out tonight.
Thanks again!
Depending on where you are and who the site is being built for, there may be legal requirements to make the site accessible.
This used templates to generate nice XHTML and CSS for styling.
The system was about 75% re-usable - often clients wanted slightly different ways of cataloguing products or dealing with options like size, colour, etc. This took the time.
Having used CSS, it was often very quick to change the style of the entire site and as it was fairly robust, shifting the layout of the menu's, shopping cart, main content, etc. was mostly painless - I tend to work in a conservative way - going for extra boxes rather than hacking the box model so it was very cross browser compatible from the outset...
Overall, CSS saved money, time & sanity and hopefully the next system I roll will be even better.
Sometimes it is an absolute pain in the backside, but when you have full control of the design & build process, it can be a joy to use.
Good point - thanks!
So while your clients might say they don't need it, they might and not know it.
I have heard that too. Sandra made a comment about that during her presentation on accessibility at CFUnited. Like a business that is not wheelchair accessible, or does not have handicap parking spaces. Same idea. Good point!
Sad to say a dose of FUD is often just what it takes to push someone over the edge once you've exhausted the positive reasons :->
At this time, the only areas that the ADA MIGHT cover if the target suit goes against them is for companies that sell their items in "Bricks and Mortor" buildings as well as online. (Its going to be interesting for Amazon though since they aren't covered, but they run the Target website.)
Its still the right thing to do and should be done, but if you are a mom and pop setup only selling on the internet, there isn't a need to worry right now. (It could happen in time though).
Having said that, the disabled population accounts for 15-30% of Americans. Thats a whole lot of people that could be turned away from your website. And they do have some disposable income that isn't going into your pockets.
There is also a ruling in the UK that makes it a law that any website that is available and does business in the UK does come under their disability laws and needs to be made accessible. And yes a US company has been sued and lost in UK court. So if your company does business in foreign countries, you might come under their laws as well.
I think it's not just about getting sued, but the whole package:
It's cheaper, faster, more maintainable, more accessible, has the benefit of being the right thing to do vis-a-vis the disabled, and if you don't move this way you could possibly be sued.
Plus this is the future. It's not a question of if your sites will move this way, it's a question of when.
Whole lotta upside, not a whole lotta downside.
Thanks everyone!
Another benefit I'd add to that list is lightweight and interchangeability. By taking the presentation out of your content file size is reduced and the CSS is cached enhancing performance. Also stylesheets can easily be swapped in and out with JavaScript or based on media type. No more print pages, let CSS handle it for you! Need specific CSS for handheld devices? Then create a new CSS document to set styles whenever a handheld device is viewing the site.
Out of curiosity what books on CSS have you been reading? Or have you only been reading online materials? I'd be more than happy to make some book suggestions. How are you enjoying the book I gave you?
Nice comparison to MVC - thanks! (Hope you had a good time in NYC?)
I read two books - the Bulletproof one you provided and the first edition of "CSS Anthology: 101 Essential Tips, Tricks & Hacks ". I'm also looking to read Designing with Web Standards by Jeffrey Zeldman. Any other suggestions for the latest best practices?
I'm also checking out Smashing Magazine, Subtraction (Knoi Vinh's blog) and A List Apart - all of which seem to have great content online - any other blogs/sites you'd recommend?
Web Standards Solutions (by Dan Cederholm)
CSS Mastery: Advanced Web Standards Solutions (by Andy Budd)
DOM Scripting (by Jeremy Keith)
Those are just 3 names of a bunch you should be familiar with. They are celebrities in the web standards world. You not getting those books is not an option. You have been warned. :) Thanks Peter I had a great time in NYC. When I'm there next we should hang out again for dinner. My best friend had a lot of fun as well. The sushi/tapas were great.
This past year, I've had the lovely pleasure of rewriting our administrative portal (for internal and clients). I made it a challenge to really nail down css/xhtml and try to keep this as efficient as possible. I use table for tabular data only and any one-off/weird forms layouts that the designers insist we make.
Honestly, at first, I didn't see a difference between the two sites until a co-worker got his hands on it. He had to repurpose the portal for another client and without touching a single CFM page, he was able to change the entire look and feel of the website by modifying the CSS file and a single template (a shell). I've never seen that before. He completely changed the entire look/feel of the website until it no looked like what I had started with.
Months later, I've seen at least 5-6 different iterations of the admin and it's all the same codebase behind the scene. The upgrade was well worth the cost it took me to develop. If there's a CFC with a bug, it gets replaced on all our existing sites that uses the new admin. There's been very little "functional" bugs. I have noticed a speed boost as well.
So, if you're the kind of a company that needs to redeploy and redevelop, the payoff doesn't seem worth it, but trust me when I say it is as it's immediately noticeable. If you're not the reploy and redevelop type of business, then... the cost in savings becomes apparent over time in bandwidth fees as you're paying less due to smaller and more efficient xhtml/css coding.
Try thinking about how CSS solves some issues without the aid of a programming language.
media="print" is very powerful for hiding certain sections.
But I wonder if CSS will be replaced very quickly. It looks almost like assembler language programming in my opinion.
http://css-lessons.ucoz.com/css-layer-properties.h...