From Print to Web: A Step-By-Step Tutorial

Categories Articles

You’ve probably noticed that all across the Internet—at least the parts that matter—websites are getting more and more similar to one another, so much so that it sometimes can be difficult to keep track of which site you’re looking at.

In some ways, this homogenization of the web has been a good thing for users in the sense that it has made all the sites conform to an expected standard.  For (genuine) designers and developers, however, this has become a bit of a problem.  It has allowed millions of “Cheap Charlie” developers to spring up offering cut-price websites, which has had a detrimental effect on the whole industry in many different ways.

Conformity has stifled innovation, and many usability issues with the “standard design” have become persistent and pervasive, especially when it comes to the needs of mobile users.  Ironically, full service advertising agencies are among the worst offenders for utilizing the shortcut design method, which when you think about it is completely the wrong direction for them to be going in.

Advertising agencies expend a lot of resources designing epic print ads.  These ads also require a very serious investment from the client, usually in the realm of tens-of-thousands.  So why undermine that?  Why strip away the effectiveness of the print campaign with a lacklustre generic website?  It’s time to shake things up and take back the web for the professionals.  It means taking your print ad and turning it into a website, but without losing any of the benefits of either a print ad or a website.

In this article, we’re going to proceed step-by-step through the process of turning a successful print ad into a website.  While your own projects are likely to extend on this concept and branch out in completely new directions, this project will hopefully get us innovating again.  It’s what the web needs, and it’s the only way you’re going to remain relevant in a world where people are being told “anyone can make a website”.  Let’s prove that you’re still a necessary part of the site creation process.

1. First, we need to reference our print ad

Before you can even begin to build a web page based on a print ad, you need to know how that ad actually looks.  In the case of this project, we’re looking at a print ad that was created for a VIP dining club in Thailand called “Bancharee House”.  Here’s the original version of the double page print ad:

doc81img001

Obviously this is compressed down to fit on our screen here, so you probably can’t see all the finer details, but you can get the overall impression.

2. Now you need a web page

All websites have to start somewhere, and most of them start with the first page.  In the case of this site, it will be the only page.  For now we just need to build the page’s skeleton.  It needs to be declared, have a head and body section defined, and include links to its external dependencies.

The dependencies for this project will be Bootstrap, jQuery, a custom CSS file, and of course all the images that will be components of the page.

Setting that up is simple enough:

doc81img002

The idea of those big commented headings is that they make finding your way around in a long source document much easier.  Those two javascript files are added at the end of the body section for reasons explained in Bootstrap’s documentation.  Using Bootstrap is not a compulsory requirement for a project like this, but here it is just being used as a time-saver.  There are plenty of other ways to achieve the same result.

The above lines are all that is necessary to establish the skeleton of the web page, but of course this won’t do anything interesting by itself.

3. Add some style

There are many different ways to interpret the source advertisement.  One way is to see it as two narrow columns that are spaced wide apart.  One of the first things you’ll notice when working with a webpage is you have a lot less space compared to designing for a printed page.  Text is bigger, it takes up more room, and it’s harder to control the exact positioning of individual text characters.

For this design, the columns are going to have to be slightly larger than in the real ad, and the text is also going to have to be slightly larger.  There are things we can get away with in print that we really can’t do online (although when it comes to what we actually write, the opposite is true!).  We’ll just use two Bootstrap columns to take care of spacing, and a container inside the first column will provide a column-like effect.  We’ll have 3 vertical layers, with the core layer on the bottom, a layer called “home” for the content to sit on, and the top (hidden) layer where modal information will display.

Let’s start with the core layer:

doc81img003

The effect of this CSS code will make the website look like this:

doc81img004

Now you can see from this one of the limitations that you have to make a choice about.  If you want to retain the ability to scale the background image to suit any situation, you may have to accept some minor variation from the original image.  Otherwise you can choose a fixed-width image, but that can be worse in many ways, which is why it’s probably not the best choice.  A bit of compromise is necessary.

Here is the original:

doc81img005

How much of the picture we lose depends on the resolution and available viewing area of the device the page is being viewed on.  But as you can see from the example (1290 x 768 at full width), the focus on the main dish is much more pronounced, the handles of the cutlery get lost, the other dishes in the top corner are also somewhat lost.

A possible solution to this problem is to change the minimum height property to something larger than what a user’s screen might be expected to be, but then you’ll need to add overflow-y:hidden to prevent vertical scrollbars from appearing on smaller screens.  Here’s what happens when the minimum height is set to 700px:

doc81img006

Which at least brings the other dishes into the frame and shows some more of the cutlery.  On a less wide screen, things would also be different.  With the viewing area only 1024px wide, the image is a lot closer to the original:

doc81img007

Next thing we need to do is set up the columns for the “home” layer, like so:

doc81img008

What we have above is a column called screenL (which is the left column) and two variations of the right column called screenRsmall and screenRbig.  When the page is viewed on a small screen, defined by Bootstrap as “xs”, the right column will have mostly the same settings as the left column.  The right column doesn’t have any background color when viewed on a larger screen, and has different font settings.

4. Put the columns into the page

This is where the website starts to take shape.  Now it’s not just a background image any more, but how much of a change you will notice after this edit depends a bit on what browser you use.  The change being made here is very subtle, because it is entirely structural, and only noticeable because we’ve set a background color.

This code is added just after the body tag:

doc81img009

The effect of it is too subtle to be picked up by a screenshot, so we should add a little content to make sure it works as intended.

doc81img010

Which will produce this result:

doc81img011

We can see that the overlay is working nicely and the font looks close enough to the original.  Now we can choose between adding the second column or adding the rest of the left column content.  It doesn’t really matter, but putting in the rest of the left column content will probably help give more visual definition.

This is how that would look:

doc81img012

doc81img013

So this is the half way point for achieving the original look of the ad.  Now we just need to put in the right column and its content, and the most important part of the task will be complete.  We start with adding the code to define the existence of the right column:

doc81img014

Visually, this won’t have any effect except on the “xs” sized screen.  The content of these two columns is almost identical, but not quite. 

Next, we need to add the logo.  This just needs one line to be added in screenRbig and screenRsmall:

doc81img015

For the small screen, there is no pull-right added to the class declaration. Either way, we should get this:

doc81img016

Because we used pull-right on the image in screenRbig, and because the text that follows also needs to be pulled right, that means we need to add an extra div to prevent these items from stacking horizontally.  And although it’s not strictly needed in screenRsmall, it doesn’t hurt to include it, and it provides some white space without any effort, so we might as well paste it in:

doc81img017

Then we just add the remaining lines for this column:

doc81img018

Again you can see the only difference is that we don’t pull right on a smaller screen.  Having done all this, we now have a result that is reasonably close to the look of the original ad:

doc81img019

And here is a side-by-side comparison, showing where it has been necessary to compromise:

doc81img020

The image shows clearly the differences between print and web.  With print, we normally have more vertical space, and we don’t have to worry about title bars, menu bars, scroll bars or status bars.  We can also pull the font tighter without losing readability.  But these can normally be acceptable compromises.

5. Transform it into a website

What actually makes a website be a website is that it is meant to be interactive. If all we do is replicate the print ad without providing any functionality, it doesn’t deserve to be called a website.  So we start by adding a button:

doc81img021

doc81img022

Bootstrap’s stock colors don’t contrast well, so we fix that with some custom CSS in our CSS file:

doc81img023

doc81img024

Great, now we have a button that won’t make us blind when we look at it, but what does it do?  Well, its role is to put a functional web page inside our otherwise static advertisement.  This is a game-changer right here, because it is completely upsetting the whole evolutionary process of website development.

Sites have been getting bigger and more complex.  Their navigational structures dominate the page and determine what we will see.  Here we have a site that is incredibly simple—on the surface at least—offering only a single button to take you deeper into the site, and as you will see, once you get to this new information, it doesn’t introduce any extra complexity.

This part of the project begins with defining a basic Bootstrap modal window:

doc81img025

doc81img026

Now we add structure for tabbed navigation:

doc81img027

And define some CSS instructions for how to handle the display of these tabs:

doc81img028

doc81img029

Then we add the tab body items:

doc81img030

doc81img031

And fill them with content:

doc81img032

Adding some css for the new image classes created:

doc81img033

With the result:

doc81img034

At this point we have successfully created a hybrid between a website and a print ad.  It derives the best from both, opening with a strong visual message untroubled by clutter and distractions, but still having access to however much additional information or other functionality we want to provide.

There are additional steps that need to be completed before the website could be considered “finished” in the sense that it provides everything a user might want from it.  Additional tabs should be added to make it possible to automatically check availability and make reservations, send an email requesting more information, and perhaps even provide video content.

All of these additional features are easy to add later.  It’s also important to understand that the size of the modal window can be increased, even up to the the full width and height of the viewport, so don’t feel that this design concept constrains you in any way.  Neither is it necessary to use a modal at all.  There are so many different ways that you could connect the user with more information.

When you have a print ad like this, the clients will have already invested somewhere in the vicinity of $35,000 to have the ad created and placed for them in a major publication.  Wasting more time and money creating something completely new isn’t going to be as inviting to the client as being able to tell them that you can integrate their website with their print advertising campaign to create a winning combination.

Note: things happen fast on the internet.  Since this article was written, the subject website has already had some design alterations.  You can get the most recent version of the source code by visiting the website and selecting View Page Source in your browser.

header image courtesy of Pixabay

Inspired Mag Team
We always try to come up with high quality and well-researched content in order to inform and inspire the creative web community.
  • As a developer it’s a work for me. Such a great tutorial, thanks for it.