PSD to HTML conversion guide: Time saving tips and best practices

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?

PSD to HTML - identify building blocks

 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.

ALSO READ  Apache Cordova Android stuck in Device is Ready screen


2. Choose a CSS framework

Bootstrap, Bulma and Spectre framework logos

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

CSS preprocessors to speed up PSD to HTML conversion process.

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.

Webpack, Gulp and Grunt - Task runners

For instance, you can use image-webpack-loader to compress image assets in your project. Use the UglifyJS plugin to minify or perform other javascript optimizations. Use s3-plugin-webpack to the upload static assets to Amazon S3 buckets. Use postcss-loader to add vendor prefixes to your CSS properties and values.

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.

ALSO READ  How to create a Bootstrap Form Wizard with Validation


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.

Sketch to HTML : Typhography

This will help you avoid the hassle of re-writing styles for text inside each individual components.


6. Identify identical elements

Identifying identical components while developing HTML

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.

ALSO READ  How to create a Bootstrap Form Wizard with Validation

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

Leave a Reply