Search code examples
htmlcssphotoshoppsd

When someone gives you a PSD and tells you to convert it into a web page

I was given a code challenge to do this. I've read and watched some tutorials about how to do it, and have run into a lot of stuff about how this "workflow" of PSD to HTML is dead.

In my opinion, it's not that hard to bring a design to fruition with HTML and CSS but there's definitely still some questions that linger when given this assignment without very specific instructions and lacking much practical experience in this realm. Here are some...

  1. Given that most websites are responsive and I assume that's the expectation for new sites, should you take the pixel width and height of PSD layers literally and give them a fixed width/height? Or should you use some other approach such as measuring the relative width/height (like as a percentage) of a specific section?

  2. When is it appropriate or recommended to crop a portion of a PSD and include it as an image rather than drawing it yourself with HTML/CSS?

Solution

  • 1.) make sure the site looks like it's supposed to look in the psd. with tools like bootstrap at your disposal it's easy to make it responsive. Fixed widths are never OK unless you're using media queries to change them based on the window size. But don't reinvent the wheel, again - tools like bootstrap exist. take advantage of someone else's hard work.

    2.) Never. Never ever. The most important part of building a site is that it is accessible to all people it's important that each element has what it's supposed to ie alt and title tags for those with disabilities. Equally important, if not more, is that the page loads as quickly as is possible. CSS styles and optimized images(ie using a 1px bg image and repeating it, making sure it's the right type of image for the situation, etc.) load way fast than just cramming images in a div to make it look right, plus an image cannot be responsive the way markup can be.

    Obviously these are mostly opinion based, so this answer might get shut down. But the real answer is make something that works great regardless of resolution, is made for all users, and don't be lazy and take short cuts.