A tutorial on a new way to build web widgets.
I just completed a project where I had to create a web widget for CrossFit Kids. The task was straight forward, create a web widget in an iframe that could be easily adjusted to fill the space it was inserted into, while also having a pop-up overlay which would display the embed code for easy copying and pasting into other websites. My approach to creating web widgets is unique in the sense that I wanted to build it “Responsive” so that it would automatically adapt to whatever container it was put into. So, in that sense I wasn’t using Responsive Web Design techniques to create something to be viewed on a mobile device, I wanted a flexible layout to adapt to whatever part of the web page the user put the widget.
What is a Web Widget?
So, what is a “Web Widget?” Well, Wikipedia describes web widgets this way, “A widget is a stand-alone application that can be embedded into third party sites by any user on a page where they have rights of authorship (e.g. a webpage, blog, or profile on a social media site).”
We see them all the time on websites. Weather widgets show the local weather, facebook widgets show your facebook friends and in the old days you would see them as web page counters at the bottom of your site. Traditionally, web widgets have been built using a variety of techniques. Pure Javascript, Flash and even a combination of HTML, CSS, Javascript and Flash. In the past I have built widgets using all the above techniques, even going so far as to use tables for layout so the widget can expand to 100%. This worked at the time, but we have a new tool in our arsenal now, media queries.
Introducing Media Queries
The problem that I saw with how widgets were currently being built was that the elements always stayed the same size, while the gaps got wider or smaller. Essentially, the widget looked great when it was small and terrible as it got bigger. In the past, developers tried to solve this by providing multiple versions of their widgets. You would just go down the page and pick the widget size that worked best for you. Again, if they didn’t offer the exact size you needed, the widget would look awkward or wouldn’t fit at all. Using CSS3 Media Queries, HTML and a little Javascript we can detect the viewport size and supply the styles to fit the window, thus increasing font size, image size and field size. Now we only need one widget and it will automagically look right wherever we put it. These methods are taken from Responsive Web Design, first introduced by Ethan Marcotte in his article on A List Apart. Later he penned an excellent book, also titled “Responsive Web Design” where he explains in more detail the concept of Responsive Web Design and the methods he uses to have your website automatically adapt to whichever type of screen it’s being viewed on. You can pick up Ethan Marcotte’s book, Responsive Web Design at A Book Apart
Start Mobile First
Even though widgets are targeted towards the desktop, a “mobile first” strategy works great here. Luke Wroblewski author of “Mobile First” which can be found at, A Book Apart, was the first to coin the term “Mobile First”, which brings to light how more and more people are viewing the web on mobile devices and it’s time to shift away from developing from a “Desktop First” to a “Mobile First” strategy. A Mobile First strategy works well here, because widgets are inherently small. They usually are added to sidebars and footers and we don’t need the default to be large in size. We start small and go up from there.
The Widget
CrossFit Kids is a great organization which has, as it’s main focus, the health and well being of children through physical activity. The widget I created took an existing image that they had and “widgetized” it, so that it could be easily embedded on other affiliates websites. As mentioned earlier, our goal was to build one widget that could be inserted into any container and have it automatically increase or decrease in size, to fit it’s surroundings. You can view the different sizes here, Small CrossFit Kids Widget, Medium CrossFit Kids Widget and Large CrossFit Kids Widget.
The HTML
<meta name="viewport" content="width=device-width">
The viewport tag allows us to detect the device width. In this case it will be the iframe width and then insert the correct sized media query for that iframe size.
<iframe src="index.html" width="100%" border="0" frameborder="0" scrolling="no" style="border:0;">
We are using a typical iframe so that we can update the widget in one area and have it update everywhere the iframe is embedded.
The CSS
@media only screen and (min-width: 100px) and (max-width: 300px){
/* styles go here */
}
Minimum and Max widths were used to have more finite control over possible containers the iframe might be installed in. By specifying a minimum width and maximum width we could make sure the fonts, buttons and fields would scale evenly. I just added more breakpoints at the sizes I thought the widget would typically be used. These sizes can always be adjusted later.
.widget {
z-index:1;
position:absolute;
top:0;
left:0;
}
The outermost div I gave a z-index of 1, so that I can lay our other div containing the embed code on top of the widget.
.embedcode {
z-index:10 !important;
position:absolute;
top:.5em;
left:.5em;
min-height: 70%;
width:89%;
}
The div with the embed code now has a z-index of 10. I also restricted it’s width and height so it will look like it’s floating and not get cut off by the margins of the iframe.
The Javascript
function toggle_visibility(id) {
var e = document.getElementById(id);
if(e.style.display == 'block')
e.style.display = 'none';
else
e.style.display = 'block';
}
I knew I wanted to do a simple hide of the embed code until I needed it, so I used this great toggle snippet from CSS-Tricks. All you have to do is give your div an id like this:
<div id="show" class="embedcode">
*Note: Make sure to add “display:none;” to your CSS for your embed div, so that it doesn’t show the embed div immediately when the widget loads. You can read more about it at the CSS-Tricks link above.
and then I made a button that would launch the hidden div with this code:
<div class="embedbutton"><a onclick="toggle_visibility('show');" href="#">Embed This On Your Site!</a></div>
Making It Easier For Users
As always, you are not the only one that has a great idea. I had implemented the great “respond.min.js” javascript from Scott Jehl, which allows media queries to work in Internet Explorer 7 and 8 and in researching some loading issues I was having with the code, I came across a post from New Signature, where they were describing how to do exactly what I was doing, but they added some extra perks.
They created their own IE 9 version of “respond” so that iframes in IE 9 would play nicer with external CSS files.
Also, they created a javascript that eliminated the need for the user to edit the height and width on the iframe embed code. There are a series of steps that you have to follow in order to get this to work, but it is well worth it. The end result is a single script tag that the user has to insert into their web page and that’s it. No other settings are needed. You can checkout this amazing script here.
Compatibility
I ran into a few issues with getting “respond.min.js” to run efficiently. Scott has some troubleshooting tips and notes that you have to make sure the syntax of your CSS is correct. I ended up pulling up his “test.css” file and made sure my CSS matched the format that he was following and then everything worked great.
Also, there are a lot of “curved-corner” solutions out there to get curved corners to work in Internet Explorer, but I’ve found this one from Google Code to work the best.
I am really happy with how this widget turned out and thankful for the additional resources out there that helped me get this project done. I hope you will experiment with this possible solution the next time you have to make a web widget. Enjoy!
