HN user

3oheme

35 karma

User experience consultant — palomoduarte.com

Posts9
Comments9
View on HN

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-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!

I feel that most of the answers in this thread are wrong.

Design patterns, as the wikipedia says, is "a formal way of documenting a solution to a design problem in a particular field of expertise".

So, it's a solution for a specific problem.

The main issue with HTML/CSS is that people tend to think that there's a best approach than can work with every website. But different websites require different HTML/CSS architectures, because they offer different design problems! It's not the same to create a corporate website than an application website (just to name two different problems).

I'll use the layout as an example:

There are different ways to define the layout of a website (call it grid if you want). If I want to create a secondary column, there's the "explicit" way, where I specify that my div will take 1/3rds of the main layout with a ".col-md-4" class (like http://getbootstrap.com/css/#grid does). And there's the "semantic" way, where I create a div with the "sidebar" class, and my CSS will make the div to take 1/3rds (like http://neat.bourbon.io/ does)

None of this two approaches is the best. Each one is a design pattern. And each one will be a better solution for a different problem.

+1 to watching TV with subtitles, and even better repeating out loud the sentences you find more interesting. That way y * It will be easier to remember and * You will improve your pronunciation