Alice without CSS
The power of CSS in modern web design
The broken aspects of this page are intentional.
Introduction | Example Text | Discussion | Navigation Issues
Introduction
This page is a companion to Alice with CSS.
- These pages are intended to be studied together.
- Content on both pages are identical except for this introdutory section.
- The only difference is one has CSS enabled, the other doesn't.
This page should have opened in a new tab — separate from Alice with CSS.
- If you've disabled JavaScript, you'll need to use your browser's back button to return since the navigation is dependent upon CSS to display correctly.
Thumbnails of both pages are shown below (before these thumbnails were added). Notice the massive difference CSS makes!
CSS Information REMOVED on this Version
You've no double noticed the stark contrast in how this page is laid out and that much of the colour is gone from this page compared to the page you just came from. In fact, I'm sure you're thinking something has gone wrong!
The CSS has been REMOVED from this page (otherwise the content is identical except for some distinctive wording in this introductory section including the dotted border).
See the discussion for an explanation.
Alice’s Adventures in Wonderland
This extract from Alice's Adventures in Wonderland demonstrates an example of how CSS markup can enhance the display to make reading a page easier.
“You can‘t think how glad I am to see you again, you dear old thing!” said the Duchess, as she tucked her arm affectionately into Alice’s, and they walked off together.
Alice was very glad to find her in such a pleasant temper, and thought to herself that perhaps it was only the pepper that had made her so savage when they met in the kitchen.
“When I’m a Duchess,” she said to herself, (not in a very hopeful tone though), “I won’t have any pepper in my kitchen at all. Soup does very well without—Maybe it’s always pepper that makes people hot-tempered,” she went on, very much pleased at having found out a new kind of rule, “and vinegar that makes them sour—and chamomile that makes them bitter—and—and barley-sugar and such things that make children sweet-tempered. I only wish people knew that: then they wouldn't be so stingy about it, you know—”
She had quite forgotten the Duchess by this time, and was a little startled when she heard her voice close to her ear. “You’re thinking about something, my dear, and that makes you forget to talk. I can’t tell you just now what the moral of that is, but I shall remember it in a bit.”
“Perhaps it hasn’t one,” Alice ventured to remark.
“Tut, tut, child!” said the Duchess. “Everything’s got a moral, if only you can find it.” And she squeezed herself up closer to Alice’s side as she spoke.
Alice did not much like keeping so close to her: first, because the Duchess was very ugly; and secondly, because she was exactly the right height to rest her chin upon Alice’s shoulder, and it was an uncomfortably sharp chin. However, she did not like to be rude, so she bore it as well as she could.
“The game’s going on rather better now,” she said, by way of keeping up the conversation a little.
“’Tis so,” said the Duchess: “and the moral of that is—‘Oh, ’tis love, ’tis love, that makes the world go round!’”
“Somebody said,” Alice whispered, “that it’s done by everybody minding their own business!”
“Ah, well! It means much the same thing,” said the Duchess, digging her sharp little chin into Alice’s shoulder as she added, “and the moral of that is—‘Take care of the sense, and the sounds will take care of themselves.’”
This text was adapted from the Project Gutenberg version of Alice's Adventures in Wonderland, Chapter IX.
Discussion
This discussion section will be easier to read on the Alice with CSS page.
“Alice with CSS” displays the same content as “Alice without CSS” but the missing CSS file won't allow the page to display properly.
This page gives you an example of the power of CSS in both the layout of a page and in the aesthetics of page colour, etc. The information is unchanged, but the presentation is clearly superior when CSS is used.
Content is Separated from Layout
CSS is used to separate the layout from the content.
Tables for Layout Confusing
Traditionally, many web designers used “invisible” tables to place sections of the page where they want. This method lacks accessibility and editing content is more difficult.
If you then use tables to represent headers, navigational areas, etc. this can be confusing because the logical flow of the data is disrupted as you try to layout content within the page.
Table layouts also don't adapt well to display properly in the narrow screens of mobile devices.
Accessibility
Because tables are laid out in the following format:
<table>
<tr>
<td>Row 1, Column 1</td>
<td>Row 1, Column 2</td>
<td>Row 1, Column 3</td>
</tr>
<tr>
<td>Row 2, Column 1</td>
<td>Row 2, Column 2</td>
<td>Row 2, Column 3</td>
</tr>
</table>
the content makes sense if it is used to present standard tabular data, as was intended by the designers of HTML.
For example, if you were to present the following table:
Day of Week | Open | Closed | Total |
---|---|---|---|
Friday | 12 | 48 | 60 |
Saturday | 20 | 40 | 60 |
Sunday | 46 | 14 | 60 |
The person could probably discern that the days were getting progressively warmer and/or there were more people home during the three days recorded in the table.
CSS Can Modify Content
CSS can easily modify content depending upon the size of the screen:
- With CSS enabled, this page will collapse into a single column and the menu will be replaced with a adapted mobile menu.
- Without CSS this page will display in a single column even if there is room to display the sidebar.
Faster Load Times
Traditional table layouts greatly increase the size of a page, adding to the time required to download and fully display the page in the site visitor's browser.
By moving the layout to an separate external CSS file (shared between all the pages on the site) it doesn't need to be loaded each time you open a new page.
If a feature on a particular page requires extra CSS, you can place it inline on that page. If the site visitor doesn't land on that page, the extra CSS never needs to be loaded.
Editing Content Easier
Replacing the layout HTML with CSS removes most of the HTML normally used for layout. Page edits are much easier and cleaner.
HTML attributes like font (e.g., Arial or Trebuchet MS), colour, size, etc. only need to be described once in the CSS, not within every line like traditional HTML sites. This greatly reduces page load time.
You can then make site-wide changes by altering a simple element in the CSS file.
You won't have to search and replace all the HTML references to Arial if the client decides they prefer Trebuchet MS. Just make the adjustment in the site's CSS to make a site-wide change. This may involve redefining a few elements, but that is much easier than altering every single paragraph and heading.
Presentation Enhanced by CSS
The information is unchanged, but the presentation is clearly superior when CSS is added.
The natural layout of page elements makes it relatively easy to read in Alice without CSS — at least compared to traditional sites — but I'd rather view it with the CSS enabled. Wouldn't you?