Styling Content with and without CSS

[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 and Zeldman 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. 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 ....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. 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.

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.