Search the Community
Showing results for tags 'semantic elements'.
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.