Semantic web design
Posted: Sat Jun 13, 2009 9:45 pm
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?
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?