Responsive Website/Theme Preview Tutorial: Showcase Your Websites Responsiveness to the End User.
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:
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!
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.
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.
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.
NOTICE: If you’re NOT using retina images… you can ignore the
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, 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:
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%’).
As always, I hope someone found this useful and I look forward to any comments or questions.
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:
As you can see, I named my folder “/bk_preview/”, then just pointed a subdomain at this folder… it’s that easy!
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.