How to show design mockups
It’s very important to show design mockups to a client during website or apps (applications) development. Experts advice is to invite clients to your office to make presentation personally, but we are working with our clients remotely, so we don’t have such an opportunity. I will tell you about the technical part of the process without discussing client communication tips.
Why is it inappropriate just to send pictures to a client?
I had some curious cases, when a client had received the web design mockup as a graphic file and couldn’t appreciate the quality of it in a proper way. It happened because of the software, which he had used to look through the web design mockup. For example, default browsers such as Windows and OS X show a full size picture on a screen, adjusting it proportionally. Big difference in scale is seen with half an eye. But sometimes a picture is scaled down to 90–80%, so not everybody can notice it at once and Windows 7 default browser makes it impossible to set a scale up to 100%. As a result, when a client saw pages converted to HTML, he wondered why everything is so large sized and differs from the original mockups.
That’s why it’s better not to guess the software, used by a client for watching a mockup, but to find a solution, which would help a client to open web design mockup on his PC at 100% scale.
Demonstration with predictable result
At that moment, there were no such tools as InVision or RedPen to demonstrate web design mockups to a client, so I decided to create my own tool.
The thing is that a web design mockup must be placed on HTML page as simple and as quickly as possible. Then I would place a page on a local FTP server (with a link for a client). I would share a link with a client at once to be sure that a client would see a mockup at a correct scale.
I started with direct approach and created a web page template, where, as planned, you should only write src address of a mockup.
<html><head>
<title></title>
<style>
* {margin:0; padding:0;}
body {background-color:#fff; text-align:center;}
</style>
</head><body>
<img src="mockup.webp" alt=""/>
</body></html>
The first difficulty I faced with was the following: website design mockups are usually made larger, than minimal width required. If you place a picture just using the tag <img>>, and a window will be smaller than a picture width, an annoying horizontal scroll will appear and the body of a design mockup will hide behind a window border. Then I decided that a picture must be placed as a background. It wasn’t easy to add <body> to a background.
body {background: url('mockup.webp') top center no-repeat;}
Another problem appeared when a page with a background picture didn’t scroll upright and was visible only to the ‘fold line’. Some kind of spacer was needed to scroll the page down to the end of the mockup. To do this, I added <img> with the same picture and added CSS property visibility: hidden.
It was the working version, which was well-suited for me.
<html><head>
<title></title>
<style>
* {margin:0;padding:0;}
body {background-color: #fff, url('mockup.webp') top center no-repeat;}
</style>
</head><body>
<img src="mockup.webp" style="visibility: hidden"/>
</body></html>
After some time I wanted to optimize this web design mockup. It enlarged a little bit while using additional backgrounds. So, mockups seemed more realistic, because the background filled the screen at any width. What did I need to optimize? Best of all I didn’t like to enter the address of image twice. So I wanted to minimize this. I asked one of my friends, who was a front end developer, to help me, and using JavaScript or, to be precise, jQuery he placed url only at the beginning of a file once. I didn’t know the first thing about this then.
<html><head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type="text/javascript"></script>
<script>
$(document).ready(function(){
var path="mockup.webp";
$('#conteiner').css('background-image', 'url('+path+')').css('background-position', 'top center').css('background-repeat', 'no-repeat');
$('#conteiner img').attr('src', path);
});
</script>
<title></title>
<style>
* {margin:0; padding:0;}
body {background-color:#fff; text-align:center;}
#conteiner {position: relative;}
</style>
</head><body>
<div id="conteiner" style="width: 100%; overflow: hidden;">
<img src="1.webp" style="visibility: hidden;"/>
</div>
</body></html>
After a while I interested in JavaScript and decided to rewrite this piece in pure JavaScript, not to use jQuery library for such a small task. And that’s what I got:
window.onload = function() {
var imgPath = "mockup.webp"; // Mockup path
document.getElementById('container').style.backgroundImage = 'url(' + imgPath + ')';
document.getElementById('image').src = imgPath;
};
With such a template, I was sure that a client would see a mockup correctly and in its place — in browser.
Additional features
Depending on my needs, I tried to add some features. For example fixed menu. I experimented with backgrounds, because each website had its different background. Somewhere it was about 3-4 background layers. Also, I had an idea to add a link on a list of project pages. A client could open a link, to look at it (to look through it) and open immediately a list of other project pages.
Responsive design
After a while, I got a task to create a responsive website design, also I had to think out how to show design mockups to a client and to demonstrate their responsiveness as realistic as possible. Then I made sense of how CSS media queries work and decided to apply this to my template.
Vertical scroll problem appeared again. Initially, a page height was equal to a mockup height and you had to change it if you resize a mockup. I failed to find an elegant way of solution due to a lack of time and I just changed properties height when I changed a picture.
/* Screensize -320 */
@media (max-width : 479px) {
#container {
background-image: url('img/320/mockup_320.webp') !important;
}
#container img {
height: 2760px;
}
}
It worked. You could open a page even on a mobile phone or tablet and to check out how would it be like in a real-time.
Then I had some time to optimize the mock up to demonstrate responsive design. A main requirement was to minimize file editing — to give the mockup link only once, to count height automatically, to determine ranges in media queries easily.
With the help of our front-end developer Igor Basmanov, I managed to optimize the mockup
As a result, I put a link to images and media queries ranges in array and special script does the rest of work.
var imagesData = [ //media query in CSS format, image path ['(min-width: 980px)', 'image.webp'] ];
According to Igor’s advice I put the mockup on GitHub.. I think, many people can help me to improve it by giving plenty helpful advice.
In Vision as an alternative
My way of solution, of course, has its advantages, but there are some disadvantages too, like absence of interactive features and absence of possibility to comment above mockups. But at this stage it was enough for me to show design mockups.
I heard many positive opinions from my colleagues about InVision and I want to try how it works. It attracts me by its advantages:
- user-friendly project managing tool: easy to add, to update web design mockups at any stage of work right from PSD format;
- interactive features: pageflows, fixed headers;
- compact view: works well with mobile apps design;
- ability to leave comments on pages, to discuss with a client or a colleague;
- and many other things.
