A typical web development workflow starts with ideation and goes on to different phases like wire-framing, design, slicing and integration. Fortunately or unfortunately, we are in an in-between era where code generators are in their very nascent stages. For instance, there is a tool called Portship UI that would generate HTML straight from Sketch file.
But wait, how usable will the generate markup be? How can a tool generate meaningful class names? responsiveness? cross browser compatibility? How will it deal with the relationship between elements?
The only answer I could give you at this time would be, “wait for it”. Technology has solved problems harder than this.
Having said that the only thing we can do now is roll up our sleeves and start coding HTML and CSS 🙂
In this article, I will put together a list of tips and hacks to super fast the PSD to HTML slicing process.
1. Identify the building blocks of the design
Break the design down to individual elements. Go to the least granularity. Think about a single nav item and not the group of elements like a nav bar. Consider child elements of a visually compound element and their states too. For example, the main fold area may look so simple in the PSD design. But when you break it down, it might have a search bar with a search input field, a search icon and a button. How will it look when the user starts typing?
How will you plan to mark up for images, background image or <img> tag? Having a mental map of all these at this stage is sufficient and will help you quickly come up with properties when you write stylesheets.
2. Choose a CSS framework
I can hear you say “Bootstrap”. While Bootstrap may be the right choice for most projects, I would still advise you to explore other available frameworks and choose one purely based on the requirements of your web design project. Bulma, for instance, is simpler, modern and more minimal CSS framework in my opinion. Spectre, an emerging framework, has some unique features like flex box grid and animated buttons. Choose wisely.
3. Pick up a CSS preprocessor
Nobody still writes plain CSS. Pick up a preprocessor — Sass, LESS or Stylus. Having a preprocessor will save you a lot of time. Your CSS code will look cleaner and be more manageable. You will get the benefits of using variables and functions (in the form of mixins) in CSS.
4. Set up your build tools to automate repetitive tasks
So now you will obviously be needing build tool like Webpack, Gulp, Grunt or Browserify, at least for the compiling LESS / SASS to CSS. Why not use the same build tool to automate a lot of small but time-consuming and repetitive tasks you will have to do while converting your PSD to HTML.
I have mentioned plugins that I regularly use for Webpack. You can explore and use plugins based on the build tool you decide to use.
5. Standardize typography
Write down every different font size used in the design along with line-heights and font-weights. See if you can map their styles to heading tags h1 — h6 and paragraph tag. If there are some more variants in the design, specify class names for each variant like txt-xs, txt-sm, txt-md, txt-lg and so on.
This will help you avoid the hassle of re-writing styles for text inside each individual components.
6. Identify identical elements
Identify identical elements in the design and write your CSS classes in a way you can reuse the same classes in combination with other classes to achieve variations. For instance, for element A in the image above, you can structure your css in way .card-item will result in element A and .card-item.centered will result in A1.
7. Develop a theme sheet with every unique element
You can develop every unique element in the PSD or Sketch file into an HTML document. When finished this should look like the components page of Bootstrap’s official site, with all the elements in your design arranged in it. This will act as your style guide for future references. Will be very useful if a new developer joins your team or if something needs to be globally changed.
At the end of this step, you will have every element, in all responsive sizes and variations. Then it’s about placing them in the layout as in the design. Remember you can use this sheet to do unit testing, responsiveness testing and cross-browser testing. If something breaks, you can fix it right here, rather than finding it after it’s placed in the actual layout where the fix might take longer time.
This step is opinionated and often considered as “unnecessary effort” by some developers. May be, if you are a developer working for a services company which develops websites for clients, this step may be unnecessary.
8. PSD to HTML conversion doesn’t end here
Putting together all the developed elements in HTML pages as per the original design is the not the end of PSD to HTML process. Host it on a web server. Try loading it from browsers at various internet speeds. Understand performance benchmarks. Optimize HTML and CSS to speed up rendering time. Although there are more ways than one to achieve the same result in CSS, stick to the simpler ways. Did you know display: table is more performance intensive than display:flex? Performance optimization is easier if you do it earlier in your web development workflow.
Writing CSS is super fun. The web development industry has come a long way. I remember