Our team at Code My Views has worked on web projects for a long time, over 15 years! We started in back when slicing images from a PSD for backgrounds was still a thing and now do everything from PSD to HTML conversion services to full stack web and mobile applications.
Have a PSD (or Illustrator, Sketch) files ready to be coded in pixel perfect HTML?
Front end development is exponentially more difficult than it was even five years ago, with new code requirements, design standards, and the introduction mobile and responsive web. We’ve converted nearly 3,000 pages in the last year alone, and we’d like to share some of the tips we’ve established from our own experience designing and coding front end development for our customers around the world.
This complete step by step guide to converting PSD to HTML is completely free to share with friends and colleagues.
Tip: For any front end project, it’s not required at all to have a Photoshop file or any design file for that matter. What’s most important is that you have some rough wireframe or idea of what the content and layout will be on each page you are building. We will help you take it from there.
For the sake of this tutorial, we will be working off this Photoshop file.
You could be tempted to use software that promises to automate the process. There are several sites online that offer to convert PSD to HTML through automation apps. The problem with these tools is that you can’t provide a truly custom HTML/CSS code using software automation, and these tools don’t always provide the pixel-perfect conversion that can be done through hand-coded interaction with the PSD file and the converted file. Unless you’re good with fixing bugs and know how to write front-end code, conversion software could be more hassle than it’s worth.
Go ahead, try one out: http://www.webbsy.com/
That isn’t to say that automated conversions don’t have a place in the front end development world. Some site owners benefit from these tools. For some examples, you can use automation software for:
In other words, if the goal of the site is to sit on a hosted, template site, then using conversion software could be beneficial. For any other site, the design needs its own personal touch from a designer.
Just like any other job, you need the right tools to get started. You can search the Internet and find numerous utilities, tools, and automation software. Luckily, we’ve tried quite a few of them over the years, so we can narrow it down for you. Nothing is worse than building a site with cumbersome, clunky tools that don’t really do what you need them to do.
Here are the tools we suggest you download and purchase before you get started on a PSD to HTML conversion.
Front-end development frameworks are so hot right now. These frameworks can make front end development must easier without starting from scratch. That doesn’t mean you need to tie yourself to a specific framework for every project. Choosing no framework is just as acceptable as long as you know how to work without one.
The question you should ask yourself is if you want to use a framework. If you’re not used to the one you choose, then you need to learn how to work with it as you code, which increases the time frame for the project. Most frameworks reduce the amount of code for a page, but they can add some complexity to your project if you aren’t familiar with their syntax and the framework’s “way” of doing things.
If you decide to tie yourself to a framework, you might as well go for the best. We’ve worked with a few frameworks, but we find the following two to be the better choices.
Whether you choose Bootstrap or Foundation, you can’t really go wrong either way. Both of them will give you the responsive design and grid system you need for development.
Before you even perform the conversion, you need to determine the layout. You have four main layouts to choose from.
You might notice that Fluid and Responsive web design sounds similar. They are alike, but Responsive is much more useful for targeting mobile devices. Fluid is used more for different browser sizes in desktop apps. Responsive design uses CSS media queries to change the size and location of elements when the screen size changes. Fluid design moves elements around when the screen size changes, but the elements still take the same width and height percentages regardless of the screen size. The result is that Fluid designs don’t always shift elements in a user friendly way on the screen, so it’s better to stick with responsive for mobile designs.
Fixed is a much easier layout to use, but as we mentioned the layout does not shift depending on the screen size. These layouts force users to scroll if the screen is too small and large screens show a lot of white space when the layout is too small.
In any PSD file, you have images that you need, like background images for the header, or other things that can’t be replicated with CSS. This is the starting point for your conversion. Take your PSD file and cut out the images that can’t be re-created using standard CSS exporting tools. Export these assets to PNG or whatever file format you feel is necessary.
It used to be that you needed to cut out shadows and carefully place them next to your images, but remember that CSS3 has shadow effects. You just need the images, and CSS3 can do the rest of the shadowing.
A good designer knows that one page can be divided up into multiple sections. To keep your designs uniform and easily laid out in terms of HTML code, you should write the HTML sections from top to bottom. HTML5 has made sectioning your code much more efficient.
Header: The very top part of the page is the header. It usually contains the logo and any main menu items that lay horizontally at the top of the page. It also contains a separation line between the header and the main content.
Hero: Not every page has a hero section. This section is a large area at the top that makes a particular image or offer stand out from the rest of the page. It’s located just underneath the header section.
Slideshow: Some site owners prefer a slideshow at the top of the page. You code this section next since it also includes a list of images that slide across the page.
Content: This section is the main text area that contains all of the content including text, images, buttons, and basically any components that make up the dynamic meat of the site.
Footer: The footer section is at the bottom of the page. It usually contains contact information, some links to content such as a blog or about page, and any social media links for the business when you are building marketing pages.
Once you create your HTML sections, you must review it for syntax accuracy. Nothing is worse than building out a site only to find the main HTML is missing a closing tag. It can take hours to troubleshoot a minor syntax error in HTML, but it can cause major usability issues for your users. Take the time now to review the code for any errors.
To help speed up code review, use an HTML validator.
If you’re not an expert in HTML coding, you can read some in-depth tutorials. Here are two links that can get you started.
Now that you have your HTML shell, it’s time to add some styling with CSS. If you’re using a framework such as Bootstrap, you might already have a bit of styling set up, but it’s time to add your own designer personal touches to the code.
A CSS tutorial is a guide in itself, so we’ll link you to a few places where you can learn CSS.
You might even go with a CSS compiler, also called preprocessors. Just like front end frameworks, you have numerous options as well. However, the three main preprocessors are SASS, LESS, and Stylus.
Preprocessors in CSS are similar as those used in interpreted languages such as PHP and the older Classic ASP language. Preprocessors have several benefits, but one of the most notable is that you can use variables. Traditionally, CSS didn’t allow you to use variables.
The one limitation to using a preprocessor is that your project is then tied directly to that preprocessor without an option. Your whole team must use it, which means if no one knows how to use it, everyone needs to learn.
Personally, we prefer SCSS and Bootstrap. SCSS is a preprocessor created in Ruby that generates CSS. We covered Bootstrap. It lets you quickly set up a layout template that’s fully responsive without any effort on your part.
Whatever framework you choose, just remember that you’ll need to use it for the lifetime of your application. Ripping out a framework to change to another is a major code overhaul and can take months to complete, so make sure you choose the right one that you can easily learn (if you don’t know it already), has all the options you need to complete the project, and doesn’t create any major hurdles for usability and experience. Spending time up-front to make sure you account for long term maintenance will save you a lot of headache in the end.
There are several sites on the market that test your PSD to HTML code for full responsive functionality and support. Sites such as MobileTest.me and Google’s Developer Tools give you ways to automate testing, but you should only use these tools for smaller projects where there aren’t many components. In other words, you should QA your designs for larger enterprise projects before writing a line of code.
You can’t buy every smartphone and tablet on the market, but you can use certain strategies to ensure that the design works well for a majority of devices. You should at least have access to one of the smallest screens you support, and preferably the latest iPhone as these are the most widely used devices. This ensures that your layout works on the smallest resolution and the newest phones. You then want to test on gradually larger screens until you meet tablet size. Don’t forget desktops, but chances are that you have a desktop on hand to test with.
You can also do initial testing with emulators. Both iOS and Android have emulators that you can work with that let you view your application in the actual size of the screen. These shouldn’t be the only effort you put into QA, but it’s a good start. Remember though, emulators do not do a great job of replicating mobile touch events and other mobile-specific functionality, so you always should be testing on real devices.
The issue you’ll eventually run into is that there are dozens of screen sizes to cater to. You can’t possibly purchase them all as a freelancer. When you work with your clients, prioritize the devices you’ll support. Prioritize the screen sizes and even the brands you’ll support. If the app takes off, the client can support other devices as well. If an operating system is not widely used (like Windows phone) consider not supporting it unless there are specific requirements to do so.
Design takes a lot of practice before you create an efficient process. After our first thousand or so PSD to HTML conversions, we noticed that we could speed up the process by using Gulp and SCSS. You’ll need to familiarize yourself with the Gulp system before you implement it, but it’s worth the effort when you are able to efficiently implement it into your designs.
Gulp is built on Node.js, so you first need to download the Node.js library. You can download an installer for Linux, Mac, or Windows here.
Once Node.js is configured, you can move on to installing and configuring Gulp. Wherever you’ve installed Node, type the following into your favorite command line utility.
npm install -g gulp
Gulp itself doesn’t do much without plugins. SCSS is a plugin for Gulp. Once Gulp is installed, run the following command line statement.
npm install gulp-sass --save-dev
After these commands, you’re ready to go.
Any designer or developer knows this scenario when coding PSD to HTML: load a page into each browser, find bugs, change some code, and then reload the code into each browser again. Coding is a lot of trial and error. Quality assurance runs numerous tests on your code, and then the trial and error process starts again.
The whole process of local testing and bug fixes is tedious, and now that front end design relies heavily on browser compatibility. The designer and coder are forced to load new versions of their code continuously. This adds a lot of time on the whole project coding and QA processes.
BrowserSync can save your coding day. Imagine no more manual refreshing. Just change your code, and BrowserSync automatically refreshes the new version of your code in each browser. The new CSS and JS are automatically injected into the refreshed page, so it saves you a ton of time.
BrowserSync mirrors your code across all browsers, which is also helpful when you test mobile compatibility. CSS and JS are especially delicate in the mobile market. A few pixels off in a design and you can have a usability issue on a particular device.
BrowserSync also uses Node.js, so you need to install this library to get started. Use the following command line to install the tool.
npm install browser-sync –g
After you’ve installed it, you need to start it to hook it to your site’s browser events. Type the following command into your command line (make sure the command line is pointing to the directory that contains your project):
browser-sync start --server --files "*.html, css/*.css"
The above statement starts BrowserSync on your server for all files with the HTML and CSS extensions. You can also specify a server location using an IP address and a port number.
Years ago, designers and developers only needed to worry about two browsers: Internet Explorer and Firefox. Google launched Chrome, and it added one more to the pile. Now, there are numerous no-name browsers on the market, and you always have a group of customers who want to cater to these browsers. Not only are there personal preferences, but you also need to account for mobile browsers, which usually have their own style requirements. It can be a huge hassle for front end developers, especially when the site relies mostly on client-side scripting.
The first step is to gather some statistics for the site. This is the responsibility of the site owner, but it can help narrow down browser support to the ones that are used by visitors. For instance, Google Analytics gives the site owner a list of browsers used to view the site. If “No Name Browser” isn’t even in the list, then it’s too time consuming and isn’t financially worth the effort to support this browser. This step saves the customer money, and then it saves the designer some development and testing time.
We gathered some basic tips to help maximize efficiency in your cross browsing QA efforts.
Front end developers coding PSD to HTML need a design eye to catch those small flaws that others wouldn’t be able to catch. If you don’t catch them, your users will. It’s difficult to catch small bugs and issues when you designed and coded the site. It’s even more difficult when you coded and designed the site and you’ve looked at it for several hours a day.
The design eye doesn’t always come naturally, but some of the design processes can be learned through training and practice. It’s important to practice what you’ve learned to hone your craft. Practice will help you develop the design eye. Even networking with designers help you build your skill set and become a better designer.
If you’ve gone through this whole step by step PSD to HTML manual, you have a good foundation for your project. We still have a few tips for you as you dive into the world of PSD to HTML conversions.
Maybe you’re a developer who doesn’t have a design eye, or maybe you just don’t want to convert your PSD file to HTML. That’s what Code My Views is here for! We’ve converted thousands of files, and we created this guide because we’ve gone through the trials and tribulations required to provide the perfect process.
We’re confident in our services, but we also want our customers to have choices. Here are a few other PSD to HTML services you can choose from.
We hope you enjoyed this super, in-depth post on converting PSD to HTML! It should save you time on your next design project or help you get started with the process.
These PSD to HTML conversions are exponentially harder than a few years ago because they must be cross-browser and cross-device compatible….and also seamlessly responsive.
If you ever need any help with your conversions, we have a global team with engineers in our offices in Austin, Texas and San Francisco, California who can team up with your own designers to create a picture-perfect layout for your design conversions. Just hand us a file, and in as little as 2 days we hand you a fully functional version that’s been tested across all platforms and devices.