Jump to content

Semantic Layout vs Visual Design


DarkxPunk

Recommended Posts

Hello everyone,

I plan for this to be more of an open ended question rather than a specific inquiry about a problem so please discuss.

I am curious about everyones opinions on semantic layout vs visual design, let me explain. With HTML5 we are all using semantic elements to better layout our sites, assist tools like reading lists, screen readers, seo, etc. In simple we are trying to make the web more accessible. In theory this is great but I have come to a bit of a crossroads; what is more important, laying out your html correctly using semantic elements or flowing the elements for visual design. Let me try and give you an example of this conundrum:

Semantic Layout
<header></header>
<nav></nav>
<article>
<h1></h1>
<section>
<h2></h2>
<figure></figure>
<p></p>
</section>
<section>
<h2></h2>
<figure></figure>
<p></p>
</section>
<aside></aside>
<footer></footer>

This layout makes sense based on a semantic layout. The article is the main focus, it is broken up into sections, the h1 opens the article, the h2 opens the section, and the p follows. Makes sense right? But what if you want your design to look like this:

Visual Design
<header></header>
<nav></nav>
<article>
<h1></h1>
<section>
<h2></h2>
<figure></figure>
<p></p>
</section>
<section>
<p></p>
<figure></figure>
<h2></h2>
</section>
<aside></aside>
<footer></footer>

In the design here we have a kind of flipped visual order where, instead of the second section having the title on the left, it would appear on the right. For a semantic layout this is a huge no no, the second section no longer has a h2 to open the p...

Now my first thought when I came to this conundrum was well we have flex box ordering, relative and absolute positioning, why not use the semantic beauty of the proper layout and fix everything in the style sheet? Well anyone who has played enough with web design knows we are only opening a can of worms. Limitations with relative values, device compatibility, visual consistency, etc. This is where I am left, do I design around a semantic layout or around my visual design to make my css cleaner and easier to follow?

Both sides have their benefits and drawbacks, but which is the right way to go? On a purely objective level I would almost argue it must be semantic layout first and fix the rest in CSS (don't be lazy). It sounds great until it is put in practice, when you need to create something adaptive or unique the problem crops back up again. Here is another example:

Say you want a radio list that changes content around the list:

<variable img>
<variable title>
<radio list>
<variable description>

To get the above design we have already broken semantic layout. The image is no longer following the title, but we need that image to the left of the title and description so obviously this makes sense on a purely visual level. This can even get more complicated:

<variable img 1>
<variable img 2>
<variable img 3>
<variable title 1>
<variable title 2>
<variable title 3>
<radio list>
<option1><option2><options3>
</radio list>
<variable description 1>
<variable description 1>
<variable description 1>

What a further semantic nightmare. Try and read something laid out like this in a screen reader or one of those reading list apps. Everything is stacked out of place, it doesn't work semantically. However it does work when you stack the variables with css. Now how do we solve this with a semantic layout?

<variable 1>
<title><img><description>
</variable 1>
<variable 2>
<title><img><description>
</variable 2>
<variable 3>
<title><img><description>
</variable 3>
<radio list>
<option1><option2><options3>
</radio list>

Okay so this is sound, we can have the variables stack and show as the options are selected, works with a screen reader or reading list app. Wait, but now the radio list and images are not in the right place! We have again sacrificed visual design for semantic layout...

At the end of the day, it really is just up to designer preference... Do we want to fight with css to make it look pretty, or do we sacrifice semantic layouts to help accessibility and certain peoples reading preferences. I don't know if there is a right answer, maybe someone has one, maybe someone can convince me. At the moment I almost lean to choosing visual design over semantic layout simply to relieve headaches, but that only gets replaced with the sunken feeling in my gut that I am not doing enough to please customers and apps that need semantic layouts. I hope someone here has some further insight.

Thanks for taking your time with this thought of mine and I hope to hear some feedback.

Link to comment
Share on other sites

I haven't yet encountered a situation where it's impossible to apply CSS to make it look right without altering the semantic order of the elements. In your first example, shifting content to the left or right is not extremely difficult. In your second example with radio buttons, this sounds like a Javascript thing. You just need one image element and one title which are modified by Javascript and they don't need to be embedded with the radio buttons because the radio button label should describe what is changed.

In summary, I don't see a reason not to stick with semantic layout.

Link to comment
Share on other sites

1 hour ago, Ingolme said:

IIn your first example, shifting content to the left or right is not extremely difficult.

Could you explain how you would achieve this while keeping semantic layout? Some ideas I would think is some wonky floats, but my experience with that has entered other limitations such as centering problems.

 

1 hour ago, Ingolme said:

In your second example with radio buttons, this sounds like a Javascript thing. You just need one image element and one title which are modified by Javascript and they don't need to be embedded with the radio buttons because the radio button label should describe what is changed.

You are correct, some of this can be solved using javascript such as the content stacking issue. However this doesn’t solve the transposing issue with the title and image for example. Also if you wanted to keep everything on the page and limit the javescript (as I tend to do) then how could it be solved with a pure css solution? I know how to do it by breaking semantic layout.

You are absolutely correct that there are many solutions without the need of breaking semantic layout, this is why I never used the word impossible. My issue is with what you may have to give up or do extra that can be easily solved with ignoring semantic layout.

I appreciate your feed back and if you have some interesting clean solutions that keeps with semantic layout id love to hear them.

Link to comment
Share on other sites

I always write semantic HTML first and think about styling later. I can't give a definitive solution that applies to every problem, I solve things on a case-by-case basis and that's where experience comes in. The longer you have spent solving problems, the easier it is to come up with solutions to new ones.

I only mentioned Javascript because your example looked like it was already employing Javascript to begin with. if you have the radio buttons there for a different reason than a Javascript-based feature then the solution may be different.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...