Web developers and designers I’ve worked with seem to treat iframes in websites with pure disdain. The scroll bar that often shows when a website is iframed into another can be a little aesthetically unappealing, but an iframe can also serve an important utilitarian purpose. If you are working with a vendor for a certain element of your site (commerce), an iframe will keep users within your site and your brand rather than bouncing them off your site.
When Tricia Fulks decided to do her tutorial on iframes, I was interested to see what she created and if I would have the same reaction to iframes as my developer and designer friends.
Regardless of opinions about the use of iframes, Tricia’s clarity, casual tone, and helpful notes made her tutorial easy to complete. Here’s what I had at the end of the tutorial.
A good tutorial is easy to spot. The quicker you can work through a tutorial the better. If a user has to stop and re-read a section, they’re gone. Not only did I not have to stop and re-read a section of Tricia’s tutorial, she offered helpful asides that predicted possible areas of trouble for anyone doing the tutorial:
“Important: (I found this out while I was troubleshooting) Make sure the extension of the photo you link to matches up in the styling. If it is a png, jpeg, tif, use those extensions. If the extensions are capitalized, make sure it is capitalized in your stylesheet.”
To be able to anticipate the problems a user might have when following a tutorial shows a particular attention to detail not found in all tutorials.
If I had one problem with the tutorial as a whole, it was the use of images of the code instead of using a WordPress code plugin like WordPress Code Snippet or CodeHighlighter. Without a code plugin, I had to maneuver my browser and Adobe Dreamweaver so I could read the code in the tutorial from one side of my screen and type it into Dreamweaver on the other side.
While that extra bit of work could seem like a hinderance, I actually kind of appreciated it. When I come across tutorials with a code plugin, I usually follow the instructions, copy and paste the code, and move on. Actually typing the code for myself helped me understand the code if for no other reason than repetition. The more I type code, the more embeds in my brain.
Broken into three easy steps denoted with subheads—HTML, CSS, and background image—the coding was done quickly and I understood why each step was taken and each line of code was written.
Regardless of anyone’s feelings about iframes or using photos instead of code plugins, I walked away from this tutorial with a nice looking iframed site in a matter of 15 minutes. If only every tutorial was that clear and helpful. I wonder if she thought my tutorial on an iPhone dropdown using Photoshop and JQuery is as helpful and clear?