benkaminski.com


Responsive Website/Theme Preview Tutorial: Showcase Your Websites Responsiveness to the End User.

Create A Responsive Preview Page


  benkaminski.com

November 30th, 2014

2 comments Leave A Comment


If you’re a website designer, WordPress Theme Developer, or other responsive website theme creator… I think you will find this tutorial helpful and easy.

We have all seen on the “theme websites”, a header bar with the ability to change the viewport size of the screen by clicking usually an icon that resembles the device in question. See above.

Something like this allows your potential customers to preview what your website would look like on said devices. It had been requested of me to create something like this for a client so I figured, easy enough… I’m sure there’s a ton of plug-in’s out there… um, no. Surprisingly enough, I could only find WordPress plugins that allowed this functionality, but what if your sites not on WordPress and you want the same? I found a few pay versions that seemed a bit bloated for exactly what I was trying to do, so I just took matters into my own hands.

I put a question out on StackOverflow but ended up answering it myself before anyone else even chimed in. So, if you got here from there… this is my detailed use case tutorial on how to make this work. Anyhow, the way I accomplished this was by examining the sample site that my client sent me to and how they were handling the viewport re-sizing.

I immediately noticed the usage of iframes when viewing the page source. And just when I thought I wouldn’t have a use for iframes anymore. 🙁

Either way, the site was just using Jquery to manipulate the size of the iframe on it’s (what we used to call back in the day) mainframe page. The mainframe page was only calling in the entire website within the iframe itself like so:

<iframe src="http://www.yourwebsite.com"></iframe>

Literally, that was it. Jquery was handling the rest. So I knew now that this would work, I just had to design a UX (for this mainframe page) which was essentially just a header bar with 100% width and some icons to represent the mobile devices, oh — and an iframe.

So before we get into any scripting or coding I want to explain my plan of attack. I have already mentioned the 100% width header, but what to do with the iframe for the initial page load? This was the first question I had to answer. What I decided upon was that the page would initially load full width or 100% so I set my initial CSS to reflect that idea. From there, the jquery will handle the resize based on unique id of the “a” element as you’ll see below. I’m going to start with my HTML to further explain.

Let’s do some Coding!

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="css/bk-preview-styles.css" rel="stylesheet">
</head>
<body>
	<div id="preview-bar">
		<div id="bk-logo"></div>
		<div id="icon-area">
			<ul>
				<li class="icon-row"><a id="viewport-change-desktop" href="#"><img src="img/desktop-icon.png" height="48px" width="60px" alt="Desktop Viewport" /></a></li>
				<li class="icon-row"><a id="viewport-change-laptop" href="#"><img src="img/laptop-icon.png" height="30px" width="47px" alt="Laptop Viewport" /></a></li>
				<li class="icon-row"><a id="viewport-change-tablet" href="#"><img src="img/tablet-icon.png" alt="Tablet Viewport" /></a></li>
				<li class="icon-row"><a id="viewport-change-mobile" href="#"><img src="img/mobile-icon.png" height="20px" width="9px" alt="Mobile Viewport" /></a></li>
			</ul>
		</div>
	</div>
		<iframe src="http://benkaminski.com/" align="middle" frameborder="0"></iframe>
<script src="js/jquery-2.1.1.min.js"></script>
<script src="js/bk-demo.js"></script>
<script src="js/retina.min.js"></script>
</body>
</html>

As you can see… pretty minimal code here for the mainframe page. Also, you’ll notice that I’m going to use this website as the demo when it’s all said and done and I post the preview link.

In the above code, notice the unique ID’s assigned to the “a” elements, this is how we’re going to trigger the size change with jquery. Also, I decided to center the iframe on the page hence the align=”middle” attached to the iframe element.

There are definitely some unnecessary things in there, for example, you don’t need to use “retina.js” or the IE=”edge” meta tag, but my jquery code is located within the “bk-demo.js” file (so you will need to create your own js file or include the js in-page). You will see it’s contents soon. I use retina.js when using icons because in my opinion it makes a huge difference on devices that support it.

The CSS

Here’s my CSS, use it if you like but the idea here is for you to expand on what I have created… make it your own. As you will see, not much CSS involved either, but it should help explain my above HTML better.

/* BenKaminski Preview Styles */
html {
height: 100%;
width: 100%;
position: relative;
}
body {
background: #fff;
margin: 0;
height: 100%;
}
iframe {
position: relative;
width: 100%;
height: 98%;
display: block;
margin: 0 auto;
}
li {
list-style: none;
}
#preview-bar {
height: 80px;
width: 100%;
background-image: url('../img/office.png');
border-bottom: 6px solid #666;
top: 0;
}
#icon-area {
width: 400px;
height: 80px;
float: right;
margin-top: -78px;
}
.icon-row {
display: inline-block;
margin-left: 25px;
}
#bk-logo {
width: 350px;
height: 80px;
background-image: url('../img/bk-logo.png');
background-repeat: no-repeat;
background-position: left 25px center;
}
@media all and (-webkit-min-device-pixel-ratio: 1.5) {
#bk-logo {
background-image: url('..[email protected]');
background-size: 350px 80px;
}}
@media (max-width: 767px) {
#icon-area {
display: none;
}}
NOTICE: If you’re NOT using retina images… you can ignore the

@media all and (-webkit-min-device-pixel-ratio: 1.5) {
...
}

CSS declarations in the above code.

So, now we’ve got our mainframe page created and styled using CSS and things should start looking good for you at this point. I realize that my images will not work with your design but you should be able to substitute your own images in place of mine and go from there.

Now we just need to program some jquery to tell the buttons what to do (which is resize the iframe) on-click of the icons being used. Remember those “a” ID’s I told you to think about from before, here’s where they come into play.

The JQuery

The Jquery, which I have included in my “bk-demo.js” file is actually pretty simple. We have set 4 unique identifiers and attached them to the “a” tag of the buttons. Essentially, all were doing is telling Jquery to change the iframe size onclick event as you can see below:

$( "#viewport-change-desktop" ).click(function () {
    $("iframe").width('100%');
    $("iframe").height('100%');
});
$( "#viewport-change-laptop" ).click(function () {
    $("iframe").width(1024);
    $("iframe").height(768);
});
$( "#viewport-change-tablet" ).click(function () {
    $("iframe").width(768);
    $("iframe").height(800);
});
$( "#viewport-change-mobile" ).click(function () {
    $("iframe").width(320);
    $("iframe").height(568);
});

If you have followed the tutorial this far, you should now have a working website demo that allows end users to change the viewport size to emulate certain devices. From here you could add more devices or remove unwanted ones. You can also play around with the viewport sizes in the jquery, just remember that if you’re going to use percentages as width or height to wrap them in single quotes in jquery IE: (‘100%’).

Responsive Website Preview Page

As always, I hope someone found this useful and I look forward to any comments or questions.

The Demo:

 
 Demo
 

And just as an FYI, without some serious finagling, don’t plan on hosting this within your current websites folder. It’s much easier to create a new top level folder and house this mainframe there as seen below:

Preview File Tree

As you can see, I named my folder “/bk_preview/”, then just pointed a subdomain at this folder… it’s that easy!

Leave a Reply

Your email address will not be published. Required fields are marked *

This article currently has 2 comments.

Excellent weblog here! Also your web site quite a bit up fast! What web host are you the usage of? Can I am getting your associate hyperlink on your host? I desire my site loaded up as fast as yours lol

    Ben Kaminski
    Post author

    The speed of the website page loading is from more than just my hosting. I utilize word press plug-in’s as well as cloudflare CDN to improve page load time. 1and1 hosting is my current provider but as stated, there are many other steps to take to increase page speed. Thanks for visiting my site.

Related Topics: , , , , , , , , , ,