Inspiring

Answered

Problems with layouts for the web

Forum|Forum|7 years ago
September 29, 2018
6 replies
1213 views

Hello everyone!
I'm going through a nightmare! I designed a whole website and it is 30% bigger than it should be.
I created a whole website layout with Photoshop that were sent to the developer.

I've worked with a 1920 pixels for width, but the content was centered with 1280 pixels with a 12 column grid.

I tested my work all the time, using ctrl+1.

To my dismay when I got the published website, everything was terribly big. Big fonts and images. A nightmare.

I immediately contacted the developer and he told me that he followed my layout.

I did some prints of my Photoshop screen and the published layout and showed to him how everything was terribly different.

Then he told me that what I see in Photoshop is not acurate. That I should always check my work in a browser. I could upload a psd file to dropbox and then open it at 100% in the browser. I did that and it is true, my layout became bigger, like the one he deloped. When I lower to 66% then I can see the layout in the proportions i designed. So there is a 30% increase in size.

I have looked everywhere for information regarding this issue but haven't found anything.

I find it hard to believe that all the professionals that use photoshop for creating layouts for the web simply forgot to mention this issue.
Please, can anyone give me some information regarding this issue?

Articles, tutorials, everything is welcome! I'm already behind in my schedule, and according to the developer, he would need to redo the whole website. And i would have to redo all the layouts.

photoshop webdesign sizing

This topic has been closed for replies.

Correct answer melissagf

My developer found the solution! He was very intrigued and asked to review the settings of my notebook. I have a Samsung 15-inch and the video settings he found the problem. The default setting is to display texts and applications at 125%. There's the problem !!! Something super simple but that went unnoticed.
Thank you for your patience and your help!

melissagfAuthorCorrect answer

Inspiring

My developer found the solution! He was very intrigued and asked to review the settings of my notebook. I have a Samsung 15-inch and the video settings he found the problem. The default setting is to display texts and applications at 125%. There's the problem !!! Something super simple but that went unnoticed.
Thank you for your patience and your help!

italosan

Community Expert

It's a strange situation. Unfortunately, without seeing what you have designed and what is the actual result online, it's difficult to judge and evaluate.

Also, if you have designed the layout in Photoshop, it's more likely that the dev should have interpreted it as a concept, and not as a 1to1 corresponding representation.

For future references, anyway, this kind of stuff is something you should consider at the beginning of the design process, and maybe agree technical choices with the developers to avoid these troubles.

Bojan Živković11378569

Community Expert

Which browser you are using to preview your site? Did you sent a link to someone to confirm or you got a conclusion from your experience? You are mentioning zoom level, what is zoom level in your browser, can you check that?

T

Test Screen Name

Legend

Never expect "100%" to mean the same in two different apps. Know your design size, and how it works. Never use your size on screen as a design guide. Also, especially understand the implications of high definition / "retina" screens, and how most apps are doubled in size.

D Fosse

Community Expert

What is your monitor resolution in pixels, and how big? Do you have any scaling set in Windows?

Photoshop always displays accurately, with one image pixel represented by one screen pixel. But web browsers automatically scale if they detect a high-density display.

melissagfAuthor

Inspiring

@D Fosse Thanks for asking, My monitor is 15 inches with 1920x1080 pixels. It is full hd (I don't know if this info matters).

Derek Cross

Community Expert

For a responsive site something like 1024px for computers, 960px tablets, and 480px for smart phones.

Check out the latest stats.

melissagfAuthor

Inspiring

@Derek Cross Thanks for repplying! But the thing is, I designed in 1920 pixels wide, in a 1920 pixels wide monitor, so... I'm not using responsiveness in this case, am I right? Am I missing something? Thanks once again!

Derek Cross

Community Expert

More people view websites on tablets and smartphones than on computers so do consider designing a responsive website.

John Waller

Community Expert

What is the website address?

melissagfAuthor

Inspiring

John, thanks for repplying. The website is in an staging environment. Unfortunately I can't divulge it in a public place. Sorry, not my rules. I sent through a private message.

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.

Scanning file for viruses.

This file cannot be downloaded