4 ms·
Hi Nailer! Good call, although I would disagree with the "objectively better" :-) I'd recommend using a semantic layout when you have an "application website"
by 3oheme 12y ago
Hi Nailer!
Good call, although I would disagree with the "objectively better" :-)
I'd recommend using a semantic layout when you have an "application website", like gmail, github or twitter. The layout is strong, and the content needs to lay within each layout block. For this specific design problem, I think that the semantic layout is a good design pattern.
But sometimes the problem is different. Sometimes you have a more "editorial" approach, where you need some specific layout (this is a good example: http://stackoverflow.com/questions/24060704/achieving-a-complex-grid-in-bootstrap http://stackoverflow.com/questions/24060704/achieving-a-comp...). Trying to define that grid semantically is nearly impossible! And the problem get worse when that grid doesn't repeat anymore, and the next one is slightly different :-(. In this circumstances, I'd suggest using an explicit grid system.
There's a myth in web development that says: "If you have a good semantic markup, you can achieve any design layout with CSS". This is absolutely false! This kind of myth usually comes from backend developers after seeing csszengarden. Sometimes you need to add some html tags like divs (that are harmless, as they don't have any semantic weight). Don't touching the html will mean going under a CSS hell with hacks and cross browser issues.
Does this sound like bullshit? What are your thoughts?
Cheers!
- nailer 12y agoIt doesn't necessarily have to be semantic, but your visual styling should be in your style sheet. I'd do the following to achieve http://i.stack.imgur.com/cuCY0.png http://i.stack.imgur.com/cuCY0.png (assuming box model border box): .story-large { width: 50%; @include scut-ratio-box; } .story-small { width: 25%; @include scut-ratio-box; } etc. I actually did something similar in production creating the Microsoft Surface 2 launch site in 2013: http://mikemaccana.com/images/work/screenshots/uncompromise-2.png http://mikemaccana.com/images/work/screenshots/uncompromise-...