Page 1 of 1

Semantic web design

Posted: Sat Jun 13, 2009 9:45 pm
by allspiritseve
OK this is a semi rant, but here goes: <rant>as I'm working on my company's CMS and trying to figure out how to give our clients the best product we can give them, I'm starting to wonder if semantics doesn't just apply to HTML, but also to the actual design/presentation.

In working with the CMS, I am looking for patterns on well-designed web pages, so that I can offer a solution that works for 90% of those patterns. To start with a generic one, a given page often revolves around header text and body text. In order to provide the capability to out clients to create a page like this without knowing HTML, we give them a text box and a textarea.

Here's where I think semantics comes in: what color/size/weight should that header be? Semantically, it's probably the second most important text on the page, after the site name (which probably should be an h1 tag). Thus, in order to be semantically correct I would use an h2 or h3 tag.

For a designer, though, the color/size/weight (and thus semantics) derives from the placement on the page and in relation to what's on the page. From a pure design perspective, that makes sense, given that the content on each page changes and thus the design should change to accommodate it. But trying to achieve that level of customization for dynamic content using a CMS is aggravating, if not near impossible. My stylesheets are riddled with hacks to get individual pages to render to match the mockups. Is this a necessary evil when applying designs for dynamic content? Or, as I like to describe it, is web design an entirely different medium (akin to writing a song vs. painting a picture) that has its own idiosyncrasies that require a different approach than what is used for print design?

In my perfect world, a designer would design websites based on the semantics of the site as a whole. To start, they would choose a style for 3-4 semantically different headers, and then reuse these across the WHOLE site without fail. Thus, I can give every semantic h2 an h2 page, and without fail, the entire site will render correctly. The more things like this a designer does, the less hacking I need to do, the simpler my stylesheets and HTML become, and the easier my job is.

I hope I'm not coming across as lazy. I truly appreciate the designer's role in a website and I don't want to make their job any harder. I feel like there's more at stake than time in these types of scenarios, though. Standards across sites means better usability, better accessibility, better search engine optimization, is easier to maintain and is easier for the user to read (studies have shown that more variety between pages increases the cognitive load of the user, thus making it more difficult to get to the content that they are looking for). In my opinion, the design is subordinate to the content in 99% of cases (though you could argue for the other 1%, the design IS the content-- and I'm referring to sites that are meant to highlight a designer or graphic artist's capabilities).

</rant>... thoughts?

Re: Semantic web design

Posted: Sun Jun 14, 2009 10:33 am
by Weirdan
I have yet to met any decent Web designers in my professional life. Over here designers are usually trained for print medium and just don't understand browser limitations. I wish they were given a learning assignment to implement a fairly basic design in html + css with the following restrictions: no images allowed, semantic html only, compatibility with current browsers required, fluid layout. Something like csszendgarden, but without all those non-semantic divs zengarden's page has.

Re: Semantic web design

Posted: Sun Jun 14, 2009 5:14 pm
by allspiritseve
Weirdan wrote:I have yet to met any decent Web designers in my professional life. Over here designers are usually trained for print medium and just don't understand browser limitations. I wish they were given a learning assignment to implement a fairly basic design in html + css with the following restrictions: no images allowed, semantic html only, compatibility with current browsers required, fluid layout. Something like csszendgarden, but without all those non-semantic divs zengarden's page has.
The designer we have at my company is excellent, I have no complaints (he's even ok with a little PHP). The problem is when we contract with print designers or design firms who have no concept of what is truly important in a website. As much as I would love to make a CMS that suits their needs, I think there are more important things that need to be taken into consideration. It's not even at a code level-- sure, most of them would run away screaming before I could get them to edit HTML, but the actual design of the site requires a different approach because it is truly a different medium than print.

Re: Semantic web design

Posted: Sat Sep 12, 2009 9:12 am
by Eran
Print and web are very different mediums, and most print designers have a hard time making the transition. There are two general types of print design - content print (ie, newspaper) and graphic print (ie, advertisement, posters etc). Web design mixes both organically and also adds elements that do no exist in print design - navigation and interactions.

Having said that, good web designers are rare as much as good print designers are rare. There are plenty of bad print designers, and when they make the transition to web design they don't suddenly get better - most probably, they produce even worse results since they are working with a medium they don't understand and have experience with.

Re: Semantic web design

Posted: Wed Sep 30, 2009 2:09 am
by matthijs
I'm not sure what your problem is exactly. Is it dealing with bad print/web designers, getting your cms to work the way you want or knowing how to mark up the content?

As far as I see, the designer of the site will make sure the content is designed in a sensible way, making sure visually headers have a certain contrast, hierarchy, etc. So the title of an article will be larger and have more contrast then the rest so it stands out clearly, for example. Now the coder comes in and marks everything up accordingly. So as you said, the title of the article would get h1 or h2. Subtitles in the content will get h2/h3, etc