Styling Content with and without CSS

[Dcrux]

To say Cascading Style Sheets are primitive is an insult to the stone age. In other words, CSS should become interesting about the time your grandkids are making sites using the CSS 7 standards.

In the meantime we have a couple of options.

Develop a theme
For example a consulting company created a magnificent Flash masthead on the theme of balance, never to mention that theme again in word or deed. When I mentioned they could describe their business practices around the idea of balance, even create value added services with it, they were astonished.

They had literally never thought to do such a thing. This reduced what could have been a coherent business identity to a logo, a color scheme, and a slogan which came off sounding like so much hyperbole. Forget sophisticated strategy, this makes sense simply on the basis of consistency in design ...and still it eluded them. Another company, in the web design field, used stock photograpy of a tree. Why? Why not. There was no attempt to associate the image with anything else on the site.

Separation of style from content indeed. When separation becomes disintegration the theme -- no matter how flawless the asthetic -- becomes "because we can." The tagline is separated from the text. The text is separate from images. Images don't really refer to anything much at all.

To establish a theme, have web site elements build upon eachother by refering to each other. Want balance as a theme, have your business consultancy talk about what's out of balance and how you restore it. Want to use a tree to represent your web design business? Fine ....then relate something about the tree to the web design business.

Forget branding. We're just talking about basic coherency of design here.

Develop a style

Copywriting is still the web’s biggest weakness … Who’s doing a great job of explaining their product or service? Who speaks like a human and not like a computer or a marketing machine?
-- 37Signals


Most people can use the term "content-driven," they just can not execute a content driven site. They start with a CMS package ...then figure out what to do with it. They style the navigation ....far before having anything to navigate to. The end result is a site with impeccable production values, great search engine positioning, but when you click there is no "there" there. No focus. No point of view. These sites all have one theme of purposelessness; content isn't a driver but an excuse for the technologies involved.

When you visit a site with a humanist writing style you immediately sense the mechanical style of most sites. Cornerhost and Tiny Screenfuls are commercial, yet accessible in a way those writing accessibility standards will never comprehend.

Content-driven sites are different. ...They're about content.

Everyone can create a content driven site. You just have to choose the skin, template (http://interllectual.com/coffee/the-content-conundrum) or CMS features (http://techrepublic.com.com/5100-10878_11-1051939.html#). No, wait ...that can't be right. Instead of redesigning try realigning (http://www.alistapart.com/articles/redesignrealign).

Jakob Nielsen’s Alertbox, July 22, 2001: Tagline Blues: What’s the Site About? (http://www.useit.com/alertbox/20010722.html)The most popular web design themes are "me too" and because we can (http://www.flazoom.com/news/walmart_10292001.shtml).

Developing your style (http://www.powa.org/revise/style.html) (of writing)

Developing a Style Guide (http://www.sitepoint.com/article/develop-style-guide-site)

Authentic Voice: Why does voice matter? (http://authenticvoice.typepad.com/authentic_voice/2004/12/why_does_voice_.html)

Tiny Screenfuls (http://www.tinyscreenfuls.com/)

[DrTandem1]

I read your post twice. I did not visit any of the links you supplied at the end of the post. Could you encapsulate what you are trying to say in a sentence or two? Are you trying to say that text is more important than graphics and layout?

[Faglork]

Basically, he talked about "coherence". Not beeing coherent is a major flaw with many websites.

One of his examples was using stock photos. In almost all cases, those "neat" photos are there because "they look good, don't they?" without any direct relation to the text. So the message of the photo and the message of the text do not enhance each other, they may even send contradicting messages.

The idea of a "theme" helps to keep and communicate this coherency.

Could I make it clear?

faglork

[Pahp]

Slow day on the forum? I'm astounded that this post was promoted via mailing list. I'm with Tandem in that I had to do a double take here - why was CSS even mentioned in the title? A more appropriate title would have been "Coherency of Design" and the irrelevant jab at CSS would have been better treated with the Delete key. (I find it interesting that A List Apart is later referred to)

[Dcrux]

The idea that style resides in a control file is an interesting concept with ramifications underlying the post kicking off this thread. The doubletake is fairly understandable from the atomistic view, and is similar to the doubletake I do about every fifth thread about software or code in a content forum.

One of the links in the kickoff post is an article entitled The Content Conundrum (http://interllectual.com/coffee/the-content-conundrum). It sounds like it might be about content, but it's really about a control file.


It may seem like content should come first—that the content should be the driving force behind the project. But in the university web site setting, I am finding that the motivation for these redesigns is often not content-driven.
-- The Content Conundrum


Well, okay ....why? Could it be we've lost the forest for the trees. If so, what is the underlying cause? One of the concepts is that Flash tends to attract a certain developer ...who thinks about sites in a certain way. Could be CSS does the same thing. I can't, for example set the image attribute to that of famous photographer Ansel Adams. Nor can text be set to the style of a Mark Twain, or anyone for that matter. Perhaps a little too much ambition to call it a style sheet, an attribute not unknown in the tech field.

Often the layout and technical choices made will constrain other design decisions. Not "bad" or "good" these influences should be something to be aware of. And if the "style" does not reside in a control file with a particular extension, the question then turns to what will constrain, or change style?

Flash is just a program. CSS is just a file. But the humans who use them do tend towards certain ideas and not others. CSS Zen Garden is an amazing accomplishment, but it is a little one dimensional. If the Flash people did this, it might be called something quite unkind (http://www.suite101.com/article.cfm/7436/67007).

And there seems to be a dearth of alternative opinion or tools. Now there's Flash, but also AJAX. Strangely enough, the AJAX target seems more concerned with end use, even though it could have gone another way. There's an interplay between use and application here -- can't blame the user or the tool in isolation.

Could be CSS in a Content Discussion forum is going to be from a different perspective. A perspective quite different from a structure/code driven approach. That doesn't make it irrelevant or wrong (or right) -- just different.

Could be that isn't a bad thing.

[promarkweb]

Okay...i read this a few times, and I guess I'll take a shot at this. Hope I come across positively.

First, while I agree there are some limitations to CSS. I think that proper practice allows the design of a very solid site, and a site that functions across various mediums. In a new design I'm working on currently, it has changed the site speed, and "look" to a great result.

Second, I thought the whole point of a website was to get your message out. Sell a product, solution, answer, experience, or whatever you might be in the business of promoting. Call me old fashion, but I think that the web world is one that should take the content, and drive the site and navigation with the content, while leaving room for added content and information.

I think that we've missed the fact that some sites, flash, css or html are designed by random people, for random reasons. You've got a medium that allows someone with $10 and a dream the ability to promote whatever they want. So, you get various thoughts for design and content and the mixture.

Every day I see numerous requests for a new site with flash and a flash logo and neat wizbang flash introductions. All for a company promoting telephone systems to businesses.

We've escaped to this world of wizbang, without focusing on the need for relevancy. Who cares if the "Get A Quote" button stands out too much, if it doubles your contact form submission rate? Make it pink with elephants in the background if I can double the number of leads we are getting doing it.

I've noticed that so many people talk about flash, or css, or seo, or sem in their own special piece of the world, like they reside alone. All of these things are a part of the greater cause of sell my product. And as designers, we should be thinking like business partners, and not hopeful future award winners. Hence the reason I have redone a site based on some reviews here. (Which can be seen in the submit your site category under, ruggedlaptops.us)

3. From a style and content mix, I definately think we should be helping our clients build web sites that meet their customers needs. That's it, plain and simple, and nothing more, and nothing less. If Flash is needed great, if not, don't use it. If Javascript is needed, great, if not, don't use it. Simple design, quality message, engage the visitor. That's what we are all shooting for isn't it?

Enough of my rant, everyone have a great day and lets all go out and od on flash! Yeah!!!!!!

[IIxxVADERxxII]

I simply perfer editing w/out css.

XHTML
+
CSS =

: )

[Dcrux]

And as designers, we should be thinking like business partners, and not hopeful future award winners. Hence the reason I have redone a site based on some reviews here. (Which can be seen in the submit your site category under, ruggedlaptops.us)

Very good post. In this example, we talked about an application list for different categories of "ruggedness."

What say I point to a CSS/tables application chart using zebra-shading for readability (http://css.maxdesign.com.au/listamatic2/browser-support.htm).

I see a lot of pink elephant backgrounds, but few pink elephant tests resulting in a case history about some goal and some result. I don't see, for example, direct response CSS tips, or readability CSS tips, just an obscure reference two levels deep.

[tony]

What's the purpose?
Web design and content have to go hand in hand.
Otherwise it's just a cheap commercial for another meaningless piece of crap which has no use.

There will always be bad websites. The only thing you can do is use the ones you like and pass the ones you don't.

Maybe we should wait to see if internet2 gets it right...(that's a joke, son).

[Dcrux]

Seven years after the first American Web site launched, Jeffrey Zeldman and a group of fellow Web developers decided that Microsoft and Netscape were fragmenting the Web into proprietary fiefdoms, with the side effect of forcing developers to code duplicate versions of their sites for a metastasizing population of incompatible browsers.
-- A Web gadfly makes his mark (http://news.com.com/2008-1082-277050.html)


I bet -- were I to do all table-based layouts -- the opinion of the only thing you can do might be different. Were this a code discussion, any number of designers would feel quite free to hold forth on why I'm either behind the times, or worse. The same goes for blink tags in a usability forum.

WPW itself took the step of having a content discussion forum.

There's really no reason not to adopt content-driven websites as thoroughly as standards. Where reasonable arguments are put forth against tables, something similar can be said about pointless content and purposeless designs and redesigns. ALA did this with the "redesign versus realign" article referenced here.

Content driven design gives the designer just as many advantages and opportunities for differentiation as standards based design. And, like standards, it is something we should have been doing anyway.

What Zeldman did was show standards aren't limiting, they free up your time for innovation. What CSS Zen garden did for CSS was destroy the myth CSS couldn't do anything. They didn't go nearly far enough, but these examples show the way. The point is to see the differences and advantages of content-driven design.

[Faglork]

The point is to see the differences and advantages of content-driven design.

We should concentrate on this - describing how content can drive design.

I found a nice article on that:
http://mboffin.com/post.aspx?id=1719

and this little gem:
http://mboffin.com/post.aspx?id=1619
Have a look at the animated gif mentioned in this article.

I see a significant change here. In my experience, most would-be customers want a design preview without giving you any data to work from. This often results in rather "generic" designs, with "Lorem Ipsum"-type texts and stock photos "to make it nice". This is not how it should go.

faglork

[Dcrux]

Think back about the standards movement. No (customer) knew what standards were or why they should want a standards-based design. And so, launched into the standard objections.

With content, it's a similar job, but easier. Standards are an abstract intangible. Content is a business differentiator, and fairly apparent.

One thing I often point out is digital economics. The web reduced money as the chief barrier to competition. Technology favors standardization. These forces fairly drive sites to conformity. The only thing which introduces a competitive advantage is content. Fields like marketing have viable arguments to make on the idea of differentiation, focus and positioning.

And yet both Veen (http://www.veen.com/jeff/archives/000705.html) and Zeldman (http://www.zeldman.com/daily/0605c.shtml) aren't seeing it. ...they are not talking about customer sites, but contests they judge. The minor difference of one stock photograph over another is not what differentiates one customer site from all the others.

Simple to explain to clients: Competition Exists. The hard part is getting site construction to stop happening in a competitive vacuum. Including the client's competitors lends more weight to the designer's recommendations.

Google maps is not a special effect. And while site counters are "bad design" Amazon manages to count what customers care about: readability statistics (http://www.amazon.com/gp/product/sitb-next/0877735263/ref=sbx_txt/002-0710935-9381660?%5Fencoding=UTF8#textstats). Progress indication (like for progressing though a check-out) is another issue. The issue isn't counters being bad design, the issue is what those constructing sites choose to count.

[SPC2]

Maybe I missed something (I only read the initial post once), but I got the impression that Dcrux's message was very short and simple - create websites in which everything is related, where the graphics, tag line, text content, message, etc., all say the same thing, instead of some of them not really saying anything, or saying something different, as is the case with many sites.

Or maybe I read it too simplistically.

[Faglork]

Or maybe I read it too simplistically.

No, but he talked about a way how to achieve this. Many websites get built around a design, whereas the design should get built around the website, so to speak.

"First the content, then the design."

Ask a designer how he "designs" his websites and most likely you hear him/her talk about the programs used in that process, about the technology involved etc. Rarely you will hear about content analysis, psychological aspects etc.

So, basically, the discussion is about a shift in focus.


faglork

[espectations]

Here is what I do when asked to design a site:

1) Who is your target market?
2) What are your products / services or both?
3) Send a copy of your logo for branding purposes.
4) Company profile for credibility purposes.

Using these basic questions (there are some more) you will notice that the look and feel is built around the content - very specific, very targeted.

Maybe we do not build the prettiest sites but our sites get results. And that is what it is all about isn't it???

Fast downloading, easy to read and easy to buy or enquire from web sites.

Just my 2 pence.

[Tim]

Yet again, an excellent post Dcrux! (despite being confusing)

As I see it, design is content. Design that does not reflect/synthesise the textural content devalues it. Credible content is honest, credible design is honest.

CSS is just another designer's tool.

[Dcrux]

For those still confused, let me relate an exchange I had about "Making a Tabbed-nav work."

The client wanted to fit the equivalent of a Russian novel into the tab labels, "Service & Support," "Delivery & Installation," "Everything & Anything." This caused the tabs to jump from one row to two, completely destroying mental mapping of tab to page. It wasn't a CSS question, it was an interaction design mistake. The 'style' was like using mixed metaphors in speech.

This ain't rocket surgery folks -- and it happens all the time.

Of course, the answer was "The client won't let me." Whenever the designer is used as a robot, cut out the intermediate step and get a template.


CSS is just another designer's tool.

A scalpel is just another medical tool. Consult with a surgeon, you may get a different course of action than an oncologist might suggest for the exact same patient and symptoms. The tab metaphor is a fine product of CSS. The mechanics of web site construction do not communicate why tabs work, the clear mental map of tab to page that indicate "this manipulates that."

Of course I suggested a dual-hierarchy alternative (http://www.kalsey.com/tools/csstabs/2) ....the 'designer' wasn't having any of it. They had their square peg selected, and my pointing out the roundness of the hole merely annoyed them. (I suspect the client wasn't the reason in this particular case, merely a convenient excuse).

When someone proposes or constructs something which doesn't work mechanically (bad code), it's clear. When it works on the computer, that's construction. When it works with users in the loop, that's the communication component of design. And when you consider use, you get a different end result.

[weegillis]

After the morning anthem, and in my day, the 'Our Father,' we had the customary 'Show 'n Tell'session. It was not enough to simply 'show;' one was given every encouragement to also 'tell.'

This is a proven teaching method, and a stalwart one, at that, which has survived through generations of elementary education. At the heart of every good story is the very writing, itself. Textfaces were chosen for their cursability more than their appearance or aesthetic value. By first learning to tell something about a thing--an object, a pet, an event, we learned how to distinguish between 'object' and 'subject.' We also learned that a lot can given something of little consequence and vice-versa, just in the telling.

Somewhere along the way, this got metamorphosed to, 'Show, don't tell.' Our past couple of generations have transcended the power of the word to a new height, the power of the visual icon, in an ironic sense, rather iconiclastic non-deference for the real value inherent in the word, oral or written.

What we must bear in mind is that a picture cannot have an opinion. No matter how subjective the reaction to the picture is, the picture is still objective. What this leads to is a blurring of the intent of the picture in its purpose toward communicating an idea. We are wont to associate by our own subjective reasoning. By this oxymoronic 'standard' alone we cannot hope to make anything universally clear to a large audience.

So where does style come in to play? One supposes we must subject ourselves to all manner of aesthetics in a brute force attempt to capture or convey meaning through the use of visual elements, and then trace our 'feelings' back to the objective message in the copy. Is there a correlation? Does subjective overlap or intersect with objective?

Too often, I think, we want to embellish the written word with artifice--we find the words too plainspeak, and therefore feel compelled to add gravity or voracity to the words by shifting our audience's attention to the visual. This is where the blurring occurs. Focus is lost as a result of diversion. But this goes further... It is not enough to enliven the story with pictures, we are just as caught up in the pursuit of the perfect textface, and of adding, or worse, 'creating' meaning just by the stress we place on words through the articiality of 'fonts' and 'decoration.'

To suggest that CSS has anything to do with conveying meaning is akin to saying that the color blue describes the sky. The best meaning (universal) is invariably a direct result of writing style, not of visual composition; of careful diction and phrasing, not of montage.

A web site that looks good, but conveys little else, is about as purposeful as wearing pajamas under a three-piece suit. Are we going out in the world, or are we preparing to retire for the night? Are we preparing our audience to think and reflect, or are we simply hoping to gain support through visually pleasing adornments. Is it 'smoke signals' or 'smoke and mirrors?'

We cannot all write with the same impact as Papa Hemingway, or the same disarming charm of Mark Twain, but the power of the word is there for all to use, not just the poet or scribe. If we put our emphasis into the word, we need little else to get our meaning across. A picture tells what a thousand words might, which is where the real weakness of visual representation reveals itself. Sometimes fifty words is enough, and more aptly, explicit, and to the point. The thousand words in the picture is the root cause of all the blurring.

[Dcrux]

For those still following this thread (all two of you), we're at Marshall McLuhan (http://en.wikipedia.org/wiki/Mcluhan). Is there some relationship between media and message?


....that new technologies (like alphabets, printing presses, and even speech itself) exert a gravitational effect on cognition, which in turn affects social organization: Print technology changes our perceptual habits ("visual homogenizing of experience"), which in turn impacts social interactions ("fosters a mentality that gradually resists all but a... specialist outlook"). According to McLuhan, the advent of print technology contributed to and made possible most of the salient trends in the Modern period in the Western world: individualism, democracy, Protestantism, capitalism and nationalism. For McLuhan, these trends all reverberate with print technology's principle of "segmentation of actions and functions and principle of visual quantification"
-- Wikipedia entry for Marshall McLuhan


Unfortunately, misquotes and misinterpretations are what constitute the bulk of common knowledge about McLuhan. Which gives us one important data point that, for the conscientious, there is no string of text which can't be 'spun' or massaged (http://www.amazon.com/gp/search/ref=br_ss_hs/002-0710935-9381660?search-alias=aps&keywords=medium%20massage).

Are we getting to the point that medium is all? Wasn't that the lesson of the bubble economy? If the decoration assists an animal's survival, is it still decoration? All too often, CSS decoration serves a similar purpose: to distract from the deficits of what is written on the web page. Maybe .SAM is the better extension, short for smoke and mirrors.

[Tim]

All too often, CSS decoration serves a similar purpose: to distract from the deficits of what is written on the web page.
If CSS was just 'decoration', you might have a point but I don't see it like that. These days I'm increasingly using CSS as an alternative to HTML to format my pages. Note I wrote format not design. The design is in my head until I format it using the css tools. If CSS is decoration you might as well say HTML is too. If we go much further down that line of thought we'll be advocating lumps of charcoal for writing or even grunts for communication!

I think your point would be better applied to Flash which I consider to be pure SAM. Perhaps it's the complexity of the medium that dictates how invasive it is? Most Flash sites I see are SAM because the designers are more concerned about showing off their skills, than empathizing with the textural (not just text) content. Whilst their efforts might impress me visually, I may never take in the content. On the other hand I have never knowingly been so distracted by CSS.

I'm intrigued by the notion of hierarchy in website design and alternatives to the pyramidical train of thought but have run out of time (bedtime). I'll be back.