Workflow: From Design to the Browser
October 04, 2015
What is the best way to code a design piece to the browser? Lately, I’ve been questioning myself if the process I use is the proper one or if there are better alternatives. It’s more of a rhetorical question as there are hundreds different ways you can code for the web.
In a nutshell, here is what I do:
1) Modules first
I like to break down the product into modules - kind of divide and conquer approach. A single module lets you focus on one specific functionality of the site that could live on its own and therefore should not be influenced or influence other modules.
2) Be Semantic
Regardless of the design or styles that were applied to this module, I like to think of it as a content container. If there is text, it’s likely to be a
p, if it’s a link I’ll go for
a and so on. This sounds obvious but you’ll be surprised by the amount of unsemantic code is out there. From
button acting like anchors to
display: block. This is just wrong.
3) JS is for interactivity, CSS for styles
4) Auxiliary markup as a last resort
var element = document.createElement(tagName);
In a similar way, elements needed for styling purposes only should be created in CSS using pseudo elements:
What about you? What’s your process? Let me know at @jpedroribeiro.
I’m a Brazilian front-end developer living in London. This website features some of my latest projects and my thoughts on anything web related.
You can find me on Twitter, Instagram, and LinkedIn.