The internet has a large reservoir of PSD to HTML tutorials. Together with these online tutorials are thousands of companies that accept PSDs and convert them into webpages, for roughly $100 USD.
Google shows up results exceeding 48 million for a “PSD to HTML” search query. No denying, it’s popular but is it the finest way of making websites?
You must be wondering that what gives me the right to proclaim it dead and challenge its authority on making websites. I wish I could put my answers in a sweet little tweet, but the dilemma requires a more detailed explanation. Let’s begin.
What is PSD to HTML?
- Design a mockup in Photoshop of your website precisely and accurately how you want to see it on the internet.
- Export the illustrations in your mockup to the web using the Slice tool.
- Write HTML and CSS that decodes the illustrations moved from Photoshop.
But, wait. Don’t start coding just yet. You would tumble upon your work halfway if you don’t have a crystal clear idea of what the final product should look like. It’s safer and easier to tweak things and experiment all you want in Photoshop rather than changing up things after ‘exporting’ it to HTML.
The easy slicing or exporting from PSD to HTML makes it viable for creating team workflows. The designer builds the complete website on Photoshop and then passes it onto the web developers. This workflow results in a well-thought, well-designed website with very few bugs.
Did PSD to HTML ever work?
PSD to HTML was the in thing in website development a few years back and rightly so for the following two reasons:
- First reason being image assets. Browsers have only recently become compatible to the various flashy features of modern CSS. Now these features can be added to the high-fidelity mockup and coded later. This saves time and effort on behalf of the HTML coders.
- Secondly, and majorly, PSD to HTML made web available across all desktop and hand-held devices. It paved the way for responsive web design.
Designers do owe Photoshop a lot for these two improvements which have proved so vital in technological developments, but we must now shed some light on:
What went wrong with PSD to HTML?
Comparable to other facets of design and technology, web design and development is a young field, still open to changes and innovations. Web developers all around the world, myself included, have drifted away from the PSD to HTML mindset and discovered some really effective alternates. And this has caused me to kill the hype around PSD to HTML and direct people towards these variations. Here are my reasons for why PSD to HTML is dead?
Responsive Web Design
Responsive web design is the need of the hour, without a second thought. But this statement does not begin to cover the magnitude of the ‘need of the hour’. There are numerous hand-held devices out there with their own unique screen sizes and resolutions.
You cannot likely create a website for each and every one of those devices. But even if you wanted to, PSD to HTML would fail you. Photoshop is pixel based; web pages ought to be fluid.
The browser has started supporting the new CSS features (drop shadows, rounded corners, gradients, and more). Despite a handful of issues, they are widely available. So, they can easily be applied in websites through CSS. An image-based fallback seems quite unnecessary.
Development of the Industry
With our general growth as the website design and development industry, the responsibility befalling the designer’s shoulders have increased. They are expected to manage all three, aesthetics, HTML, and CSS coding.
But it has come only with the advancement of better supported workflows. Many CSS frameworks like Foundation and Bootstrap and applications like Balsamiq have proved useful in creating mockups. Photoshop does not lead the way anymore.
Does This Mean Photoshop is Dead?
Not at all! Photoshop is still an unmatched tool in the arsenal of a designer. No other tool tops Photoshop when it comes to editing and exporting photographs. However, people put too many expectations in one tool and turn to it for all their website design problems.
Photoshop is still my go-to tool when I’m creating detailed high-fidelity mockups. I use these to communicate the website to the clients or discuss its many aspects with my team. But I don’t rely on Facebook to create my final outlook of the website. That’s all the change I’m trying to induce in the PSD to HTML mentality.
Despite my word against PSD to HTML, I would like to remind you that everyone is comfortable with their own workflow and no one knows how to make the perfect website. We are all in the process of trying, erring, and learning. So go with the workflow that brings out the best in you and your team.