| This 40 message thread spans 2 pages: 40 (  2 ) > > || |
|Three Styles of Web Design|
| 1:40 am on May 25, 2003 (gmt 0)|
As HTML and web browsers grow more sophisitcated, the styles and approaches to web page design have increased. And yet, I've become more and more convinced that each developer has essentially one approach - and all these possible approaches fall into one of three categories. It's very difficult for someone accustomed to one of these approaches to switch to another.
Each approach has its own upside and downside. And obviously I have my own preference. But an effective site can be created with any of these approaches. And the best developers adapt from the strengths of each one.
1. CONTENT centered
--- or the mark-up approach ---
|This style might also be called HTML's native approach. HTML stands for Hypertext Mark-up Langauge. The idea is to begin with content -- a document -- and then add mark-up that allows the content to be displayed cross-browser, cross-platfrom, cross-device. This is vanilla, and it delivers content unambiguously to the end user. |
An uncompromising mark-up approach can result in some very bland web pages, and historically, it has. But with the great browser support now available for CSS, it doesn't need to at all. Very simple mark-up can create a powerful communication, easy to access and easy to understand.
There's no inherent limit on the length of a web page, and the mark-up approach will accommodate any amount of content on one page, long or short -- that's a major advantage over older media which are limited either in time or physical space.
a. Easy on spiders, browsers, and maintenance resources
b. Message is not likely to be overwhelmed by the setting
a. Potential for blocky, graceless pages
b. "Visual brand" may be difficult to communicate
2. DESIGN centered
--- or the print approach ---
|People who were accustomed to print design were very frustrated by early HTML. They wanted to "print" on the screen in the same way that they could print on paper. They wanted the absolute control that a press gives them. |
And so they cleverly bent standard HTML to their will - layout tables, spacer gifs and more. The end result can be quite elegant. It may also be very hard to handle cross-browser, cross-platform and cross-device, as well as making some extreme demands on bandwidth.
Maintenance can also be a real grizzly bear -- and here's the biggest challenge. At its most extreme, when the entire page is forced to fit in one screen with no scrolling, the communication may be sacrificed for sake of appearance. If there's one downfall to much of today's marketing in EVERY medium, it's that advertising often trades clear communication for superfical appearance.
But when this approach succeeds, these print-centric pages are glorious to behold.
Almost any major corporate website
a. Visual brand is directly communicated
b. Easy to relate to for those who don't "get" the web
a. Complex code is hard on spiders, browsers, bandwidth and maintenance
b. Message can be overwhelmed by the setting.
3. APPLICATION centered
--- or the interface approach ---
|One of the big advantages of a web page is its interactivity. Where would the travel or finance industries be on the web without giving their visitors some very nifty, interactive resources. |
But there are some pitfalls here. A web page is not a software program, in that people will not usually invest a lot of learning time. If general visitors must learn too many idiosyncrasies for a given web page, they're not likely to hang around.
So the IT crew may develop a nifty application, but if they try to create the interface in a way that diverges too far from the standards of other web pages, they'll just confuse the user.
In fact, many times the application-centered web site seems to WANT to impress the user with the complexity of the app they've created, rather than making the information delivery as painless and transparent as possible.
Airline and hotel reservation sites
a. Convenient access to dynamic information
b. "WOW" factor.
a. Complex code may confound spiders, browsers
b. Interfaces tend toward the non-standard, hard to learn
People often come to web development from one of three directions: marketing, design or technical. The three styles I've described tend to represent these three pre-dispositions. It's not easy for someone from one of these disciplines to change their foundation approach. But the cross-fertilization that can and should occur among them is my goal.
I'm a marketer by disposition, and I highly prefer the content-centered, document mark-up approach. It's painful for me to work on site that began from one of the other two foundations.
[edited by: tedster at 10:43 pm (utc) on May 27, 2003]
| 1:53 am on May 25, 2003 (gmt 0)|
<<I'm a marketer by disposition, and I highly prefer the content-centered, document mark-up approach. It's painful for me to work on site that began from one of the other two foundations.>>
I came to the web via education rather than marketing, but other than that I have to say "Me too." :)
| 2:34 am on May 25, 2003 (gmt 0)|
Excellent post Tedster!
I'm very much in the content camp, even if I possess designer underpinings. The reason I embrace CSS so heartily is that it allows a content first, design second, scheme without compromising on the design side.
The one segment of the triad you name that most eludes me are the "application" style developers. These individuals are the most foreign to me. I know several and for all the world I don't "get them," though I do "understand them."
They are fascinated with application processes and though they often pose as advocates of simple code, I know the truth: the more complex the routine, the better they like it. Egos are definitely involved here. (yes, yes.. this goes for us all, I know).
The truth is, for all the world, I believe this particular group cares the least about actual content. The "cleverness" of the code is their prize.
My vote re-stated: Content is King!
| 2:47 am on May 25, 2003 (gmt 0)|
I have a feeling that most people here are in the content camp, nudged there by search engine concerns.
But most web designers (the majority of which live outside of WebmasterWorld's city limits) live in the design world.
I really dig it however when designers and content-lubbers intersect and that groovy minimalist stuff pops out.
| 4:53 am on May 25, 2003 (gmt 0)|
Interesting analysis. Thanks!
I think you are right, developers have their 'natural style' they feel comfortable in. However, I think many can operate in other modes as well, when a job requires it. For example, most of WebmasterWorld probably falls into the 'content' division. But you could argue that the person who designed the sticky mail functionality was operating in 'application design' mode. So, what that means is that you can find good examples of 'application design' style of web development out there, which follow the 'Keep It Simple' design mantra.
(Hope I didn't misunderstand the point)
>>"...I really dig it however when designers and content-lubbers intersect ..."
I agree. I'd prefer to have a team including all three types, over a team weighted to one type.
| 5:08 am on May 25, 2003 (gmt 0)|
|...the more complex the routine, the better they like it. Egos are definitely involved here. |
So often a web page really communicates this message: "Hey, we've done something really difficult here. Check out how cool we are." And the actual business purpose of the website is buried.
|But most web designers (the majority of which live outside of WebmasterWorld's city limits) live in the design world. |
Yes, I guess I'm preaching to the choir just a bit here.
My worst experience with a "high-design" appraoch was a corporate site where every single page was supposeed to be just one screenful. Scrolling was supposed to be taboo on any resolution.
I was hired to interview department heads, distill their information, collect any documents they had to contribute -- and then generate the final copy for each page, with a limit of 817 characters per page.
I'm not a novice writer, but the damage that I had to do to their very strong business message was awful -- all in service of that "pretty brochure" approach. And this was a Knowledge Management company with a lot of big name, Fortune 500 clients. You'd a thunk they knowed better.
The amount of effort and conscious attention that goes into an elegantly simple website is easy for the visitor to overlook. And I say, that's as it should be. All they should notice is that they got the information they came for, easily and without hassle.
| 5:55 am on May 25, 2003 (gmt 0)|
|All they should notice is that they got the information they came for, easily and without hassle. |
I was talking to one of the Affiliate Marketing people at PubCon and their emphasis, as far as web design was concerned, was slapping that "BUY HERE!" message everywhere they could get away with.
"Content? No way! It get's in the way of the call to action: "Buy! BUy BUY! You have to get that "BUY" message in front of them because that's the reason they're visiting!"
At first I thought it was over the top, but now I'm seeing that this person was 100% correct: This person had their visitor's need (To Consume) in mind when designing that web site.
(Did that make any sense?)
| 8:35 am on May 25, 2003 (gmt 0)|
The first thing I get people to do is to write out the words they want to have on a few pages of their site.
I see no point in designing flash graphics and layout, to then find that what they want to say doesn't fit the space the "designer" has left for it.
So, write the content, then lay that content out. Yeah, sometimes it has to be split up more, or the order changed, but real content is the starting point.
| 12:49 am on May 26, 2003 (gmt 0)|
I wonder which of these three directions spawned the "DHTML cascading menu" that is now so widely used (or abused, depending on your POV.)
My first guess says it was the technical, application interface centered folks. But they may have been prodded by the content centered folks who were fearful that someone would not find what they need -- and were not sure how to struggle through the creation of a solid Information Architecture.
That reminds me that I may have skipped someone in my three approaches list. The Information/Knowledge management fields have also brought a lot to web development. Library Science majors make great information architects, but they usually need support from the other directions to come out with a really solid page design.
Those information worker disciplines really shine when it comes to choice of labels for the site sections, dividing the content into categories that make intuitive sense, and so on. I see IA as an extremely under-rated discipline right now. It might seem like only a monster site needs a full blown IA study. But even a little vest pocket site can benefit from at least a passing knowledge of Information Architecture.
| 1:41 am on May 26, 2003 (gmt 0)|
|But even a little vest pocket site can benefit from at least a passing knowledge of Information Architecture. |
I'm thinking small sites may even benefit more in the long run. A small site that doesn't consider IA carefully, before starting to build the site, can really have a problem if the site is successfull and consequently grows in size.
Adding content to a poorly planned site, and making it fit in the structure, can be a real pain, not to mention a lot more work than would have been needed with better planning.
| 9:35 pm on May 27, 2003 (gmt 0)|
I recently undertook a complete redesign of my website in the last few weeks, and I was determined to make the site more content focussed using CSS. I drew out about a dozen sketches of potential site layouts that could handle the content stretching down forever, and then identified all the different CSS attributes.
I was then able to recode the site literally in a couple of hours. It was a few more hours to bring the archived content into the new design and I was done.
If you're still living in the print-centric world, I highly recommend moving over to the content-centric design.
| 9:48 pm on May 27, 2003 (gmt 0)|
|each developer has essentially one approach |
Although I agree with the 3 styles, I'm not sure that it is essentially a developer thing. I would say it is more a question of the site's purpose. Most professional web designers/programmers/whatevers will adapt the style to users and what they are going to expect from the site.
So news sites have to be easy to surf and the content is the main (or only) reason to be for such a site.
For airline/hotel reservation, the ease to book is the most important, so it has to be application-centered.
And corporate websites want to market their product and do this just like classical advertising, through the use of emotions, thus design-centered. You will find that corporate websites often have subsections, e.g. the investor relations part, that are more focused on content.
I for myself have worked on sites with those different purposes and have no trouble switching styles.
| 10:10 pm on May 27, 2003 (gmt 0)|
My "main" money maker is definitely a web-based application, so I followed the application approach to the extreme.
I broke a few "rules" along the way, such as using a fixed width table and controlling font sizes, etc.
But the target audience was looking for consistency in an application sense. When I'm competing against a desk-top based application written in VB or C++, I have to look and feel similar, and provide the advantages of internet delivery.
| 11:58 pm on May 27, 2003 (gmt 0)|
I'm definately a designer at heart, though I'm working really hard on putting content first. Actually, I came to CSS because it made the design stuff so much more painless. It had the (welcome) side effect of helping with content.
| 1:37 am on May 28, 2003 (gmt 0)|
Thanks for this analysis...it's very interesting to think about. Would you say that Flash sites fall into the "design-centric" approach? They're kind of like a movie or TV advertisement--coming from a media background, instead of print. Even though Flash can do some neat stuff, when I happen upon a Flash site, I usually leave very quickly. I feel like I'm not in control of my experience anymore.
| 1:42 am on May 28, 2003 (gmt 0)|
The three styles are perfect, nice break down.
I will use your terms in the future to describe different sites to associates.
I feel I kind of fit into all three.
CONTENT centered - What my boss wants
DESIGN centered - this is what I do for fun
APPLICATION centered - I went to school for computer science
Some of my style is what I'm forced to do, some is what I want to do, and some is what I know.
| 2:22 am on May 28, 2003 (gmt 0)|
Would you say that Flash sites fall into the "design-centric" approach? They're kind of like a movie or TV advertisement--coming from a media background, instead of print.
Welcome to WebmasterWorld, Stasia.
That's a good observation. Print is not the only spawning ground for what I called the "design centered" approach. In fact, Flash sites probably fall prey to the pitfalls even more than straight HTML sites.
It seems almost impossible for Flash designers to eliminate the "look what I can do" factor and cut to the chase. And the problems that generates have been well dissected on these forums.
| 2:45 am on May 28, 2003 (gmt 0)|
Martinibuster has gotten it right. For a commercial site, that "Buy" facility has to stand out where it can't be missed.
I've just begun to use some CSS layouts. The advantage is that CSS offers a better means of blending content with that "Buy Now" message. You have the best of both worlds, homage to "Content is King" and effective selling.
Another benefit is that CSS cuts down significantly on code bloat so that sites load really fast, another "must" in the ecommerce game. Jim Wilson (rest his soul) used to call them "speed demons".
I'm a content guy.
BTW, revenue is actually King.
| 4:03 am on May 28, 2003 (gmt 0)|
My educational background is in Rhetoric ("English with an attitude"). Rhetoric is all about convincing the audience to agree with your point of view. "Legal rhetoric" is what lawyers use (to lie?). "Political rhetoric" is what politicians use (to lie?). Rhetoric it isn't about "the truth"; rhetoric is about using language as a tool to achieve one or more objectives. Those objectives are usually to get people to take some kind of action (perhaps "Buy the product"), if only to take a step in the right direction.
For example, if your objective is to build a database of people who visit your site, to be used for whatever reason, consider the following.
Do you remember the old Barney Miller TV show? There was a character everybody called "Wojo." Why? Because his last name was Wojciehowicz -- read it aloud a few times :) If your website can convince Wojo to complete an on-line form, there's a good chance he'll spell his own name correctly. If, on the other hand, it convinces him to pick up a phone and call you (and *you* will have to type his name into the database), you'll need much more time to get to a place where you can provide him with goods, services, your candidate's button, or whatever else you want him to have.
They say, "You can lead a horse to water, but you can't make him drink."
What the Visitor would tell you is, "You can lead me to whatever, just Don't Make Me Think!" (with apologies to Steve Krug for using his web design book's title).
- Know your audience and what will convince them
- Know your goals and how to lead people toward them
- Design to facilitate your Visitor taking the next step (as painlessly and transparently as possible).
Design for usability, clarity, effectiveness of presentation (in language, graphics, etc.). Absolutely create results-oriented design.
*Our* design approach? "Focused Content."
| 7:23 am on May 28, 2003 (gmt 0)|
Not for those of us with totally non-commercial sites it's not!
| 8:48 am on May 28, 2003 (gmt 0)|
I tend to use a blend of all three, depending on the type of site one or other will get favoured.
| 9:16 am on May 28, 2003 (gmt 0)|
Excellent post. I struggle very day to utlise all three although I had not differentiated them so clearly.
I always try to give as much content on any given web page that I can. My firm specialises in publishing so I spend a lot of my time creating web pages that conform to design standards for printed media.(Hurrumph)Thirdly I get to add layer upon layer of increasingly complicated applications to supposedly make our site easier to use.(Double Hurrumph)
Strangely enough we run a pretty successful site and after reading this post would be interesed to hear any comments about the synergy of theses three design ideals being crucial in designing a good web site. I feel it could perhaps be a handicap to success on the web to specialise in one area, even though my personal preference would be to put content above all.
| 9:44 am on May 28, 2003 (gmt 0)|
Thanks Tedster, great post.
I am going to send off a link to a lot of non-forum members.
Yours is a heck of a lot better way of expressing this:
Designers inherently design for designers.
Programmers inherently program for programmers.
Copywriters inherently write for writers.
Basically people think that everyone else sees the world the same way they do. They therefore build the sites they want to see, not what necessarily works for others.
In addition, most designers, programmers etc. have a lot of pride and use sites they are working on to show off their talents to their peers. I know I am guilty of that (the pride bit, not the talent bit ;-).
Experience helps, but doesn't seem to totally mitigate this bias.
I am really just restating what you said, but to add to it, I have found there are people that can mix the best of your 3 worlds. The best of them though only learn their trade by spending a while in each of the following roles: techy/programmer, writer/marketer, a designer AND a customer of the widgets on offer.
When they wield the project manager's whip, everyone tends to see beyond their little silos and work towards the bigger goal of satisfying the end audience and making money (or whatever) from them.
| 9:53 am on May 28, 2003 (gmt 0)|
>>BTW, revenue is actually King.
Wise words ;-)
I come at it from a mixture of content and application. I can't 'design' for love nor money though I make passable attempts at at least simplistic beauty from time to time....
The programmer guys are generally not so content orientated IMO, they see the app, and only the app. Most that I know don't even use CSS much, too busy with the CODE ;)
Me, I'm easy, I can program and I like clean markup so as long as I use color pickers and stuff I get a good run at it....
Thanks for the great post tedster!
| 10:34 am on May 28, 2003 (gmt 0)|
Very good typology, tedster. Thank you.
Whenever I discuss web design with customers I speak about interface design. With this term I try to communicate the most important goals of web / interface design:
- the interface helps users to find relevant content / offers / whatever
- therefore usability of the content presentation (including information architecture) comes first
- other design aspects are secondary
In the same way I try to speak with application developers.
In my experience this interface concept helps a lot to join content, design and application centered approaches.
| 10:57 am on May 28, 2003 (gmt 0)|
But most web designers (the majority of which live outside of WebmasterWorld's city limits) live in the design world.
So where do these people live...maybe we should send out some missionaries to try and convert them, or at least open a dialog. When you're working on a job that's not the time for it.
| 12:05 pm on May 28, 2003 (gmt 0)|
What so many designers often miss is that, in the marketing effort, the most dominent feature of the site has to be the message.
In selling, I don't want anything on the site that can act as a distraction from the visitor's mission which, hopefully, is to make a purchase of the sought after item. Everthing must lead to that result.
So, the ecommerce site, IMO, shouldn't have that "Wow" factor. Its not for the purpose of entertaining. And you don't want to provide distracting links to other pages offering analysis, opinions and the like.
Thus, the design, for these purposes, is nothing more than a container for the message. It needs only to be simple, easily navigable and to load just under the speed of light.
I'm finding that CSS nicely lends itself to these objectives.
| 1:05 pm on May 28, 2003 (gmt 0)|
I am sort of in the middle, I focus on content, but in terms of creating web applications.
But this is an old conversation, clothed in 21st century terms.
It's called form vs function.
Form is great, to make function look more appealing or more useful.
But function always always always comes first.
I have no problem with beautifully design web pages, graphics, css or dhtml. As long it's aim is to enhance the visitors aim of fulfilling some functional need.
Like if they are visiting a store, you present them all the product/category/specials you want, but you don't make it difficult for them, with graphics that take too long to load.
Now function has it's limits, but functionality, has to be understand, and made easy to use, that is where the balance comes in.
| 1:26 pm on May 28, 2003 (gmt 0)|
Nice work Tedster
My son has just started working on a business web page.
His first. He's using Frontpage. That should tell you right
away where his head is. Design. I just bookmarked this
thread so he can read this excellent post. I took his page
and is in the process of converting it to xhtml using CSS
and I showed him that there was hardly any difference
Talking about code bloat. Wow!
Again as was mentioned in this thread, no content, just
images of the equipment which they market.
As for me when I started which was several years ago.
I tried learning html. After I got a feeling of what made
things works, then it was all about content. Today my
pages are not fancy but very informative. My main key
word brings my Index page up at five hundred plus. I
don't think that's all bad considering there are 3,260,000
If I do any two key words I am number one or in the
top twenty in many. I do have a lot of work to do and
am continuing to do so.
All this is, is to say thanks for the post, and I hope this
will open my son's eyes to what content can and
would do for him and his employer's web pages.
| 7:46 pm on May 28, 2003 (gmt 0)|
Excellent thread. I think differentiating how people think about websites is very useful.
I might restate what tedster said like this:
Three different views on what website are *for* come with three different goals of a good website:
1. a website = HTML
* its goal = most compatible with HTML consumers (web browsers, spiders)
2. a website = rich media
* goal = most appealing presentation
3. a website = functional tool
* goal = most functional application
The reality that is setting in, with browsers being what they are and not more, is that the goals of appealing presentation and of functional application are limited by the constraints of web browser compatibility. In other words, if a browser has trouble doing something well with your HTML, it can damage the overall appeal and/or the overall functionality of the website.
Nevertheless, websites can be very compatible with browser and spiders and still be appealing presentations and/or functional applications. But, we are like artisans evolving a craft--some things many people now know work or don't work, and some things are experiments by people pushing into little explored territory.
Another comment about the three views: they all reflect major trends in the development of web technology.
1. the trend towards more markup (CSS, RSS, XML, RDF, semantic web)
2. the trend towards more rich media (Flash, QuickTime, Real and Windows Media, VRML)
3. the trend towards more functional web applications (web services, web integration into desktop tools, more functional web application interfaces like Flash, XUL, Java Webstart, etc.)
| This 40 message thread spans 2 pages: 40 (  2 ) > > |