Centering Large Images Horizontally On A Web Page For Client Graphical Proofs

When I create a website for a client I just don’t sit down and code a website from scratch. While that could be done, if there were revisions (and there always are) HTML/CSS code is harder to work with and can get jumbled pretty easily after a bunch of changes.

The most efficient workflow for me is that I will design a creative proof in Illustrator (where I can nudge and perfect pixels on the screen without having to write any HTML/CSS), export it as a JPG, and then let the client have a look and comment on any revisions they wish to see. Revisions are often times easy and quick in a graphics program but not necessarily when dealing with HTML/CSS. So that’s what I do, build the graphical proof in Illustrator, revise in Illustrator, and then when it’s client-approved I crank out the HTML/CSS coding.

So after have done this hundreds of times it became clear to me that even though I open JPGs all day long and have no issues with viewing, sizing on screen or manipulating the images… often times when clients opened the JPG proofs I provided to them, they would “shrink to fit” on their screens (making the graphical proof look really tiny) or other times showing the height of the graphic but displaying a lot of whitespace at either side of the graphic. It became obvious sending a large JPG wasn’t the best way to communicate a design proof. If I couldn’t rely that the client was viewing the proof properly, then its counterproductive to send it in the first place.

The solution for me for the past few years is to continue with my graphics program workflow, export the JPG as per usual and then add it to a web page where I then send the client a link to view the graphical proof. Using this process means the graphic would always show at the correct 100% size without any scaling taking place.

A few other bonuses are that you don’t have to send large graphics in emails, and when it comes time to revise, I can post the revised graphical proof to a new page and the client and I both have a record of the changes as we work through the design process together.

To make sure your super-large graphic renders correctly—I’m talking something like 1880px wide by 3660px tall—in a webpage there are a few caveats that you must pay attention to.

1) If you just stick the graphic on a page it will be positioned to the top left corner and the design will not be centered for the clients viewport.

2) If you put the image on the page and apply the CSS to the IMG tag so that the left and right margins of the image are set to auto, that won’t work either for large images.

So the solution to have any size graphic center itself horizontally in any browser window is to place the image in CSS on the body tag for the page and then declare its height. The height of the image must be included or there will be no scroll bar present to allow the user to scroll down to see the rest of the graphic.

Here’s the code I use:

I should lastly mention that only once have I ran into an issue with this technique. One day a client called up saying they were unable to print the page they were viewing. This was because as a “background image” most browser defaults when printing turn off background images.

Tags: , , , ,

Leave a Reply

Other tags used in my blog:

 (1)  (6)  (1)  (16)  (1)  (1)  (17)  (1)  (17)  (1)  (1)  (7)  (1)  (4)  (15)  (5)  (2)  (28)  (9)  (1)  (12)  (4)  (1)  (4)  (5)  (9)  (1)  (6)  (1)  (4)  (1)  (1)  (1)  (3)  (1)  (3)  (4)  (7)  (3)  (3)  (4)  (1)  (1)  (2)  (1)  (7)  (11)  (12)  (2)  (6)  (1)  (3)  (16)  (2)  (3)  (1)  (5)  (1)  (28)  (4)  (4)  (9)