From PSD to HTML

Hello there! I’m trying to convert a PSD to HTML, but I have some problems, I am not into web design, my area of knowledge is for back-end etc.I don’t know how to respect the proportions when the total width of the PSD is around 2000px but my screen has only around 1700px.

And what size is my screen? Or someone else’s screen?
You don’t know, do you…

This is where you need to recognise the difference between a PSD which has fixed dimensions of width and height and a web page that could be viewed on an endless variety of devices with various screen sizes and aspect ratios. Anything from a 4K widescreen monitor to a tiny mobile phone in portrait orientation.

How do we deal with that? The common standard today is RWD (Responsive Web Design).
It’s kind of a big subject to cover in a single post, so you may want to search the forums (or the whole internet) for info on that, then if you have any more specific questions you want to ask, then do.

1 Like

As @SamA74 says, coding a 2000px (or, indeed, any size) fixed-width site is really not a viable option these days. This SitePoint article should help to explain RWD:

We have had numerous threads on the subject; here’s a couple which might interest you. (A quick search will reveal others.)

https://www.sitepoint.com/community/t/how-to-approach-responsive-design/210784

1 Like

I just needed a way to start from full scale and then, from there, to go down ( I know about mobile-first approach, but it’s easier for me to go this way ).Good that chrome gives me the chance to see a web page with different sizes using the device toolbar.

My screen is just too small to have it at full scale :smile:

When in the dev tools in Chrome you can actually change the view scale. This will let you see the view on a larger screen than you actually have, only scaled down.

Work with your design in terms of scale rather than absolute. The full width of the PSD is 100%, not any hard pixel value. Say the full page is 1000px wide, and inside we want a 800px container. We REALLY want an 80% wide container.

Start like this and you should get to where you want.

Of course this is a desktop first approach and will need media queries for mobile.

If the psd is 2000px and your screen is 1700px, just make the psd smaller. 2000px is considered too large a width for a website nowadays anyway.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.