Blog home

Archive

RSS

The Livetyping Blog

• Stuff You Can Do in an HTML Prototype that You Can't Do in a Wireframe or Comp

  Tweet

  Caution: This post includes animated GIFs. Some people find these annoying (especially when, like here, they're not even funny).

  There are plenty of good reasons to prototype your designs in HTML. (I posted a roundup a while back. And this post by Leisa Reichelt puts it even better.) But one of the most compelling reasons is that there are things that you can do in a prototype that you simply cannot do in any static deliverable.

  Here are a few examples.

  Animated Transitions

  

  An animated transition to show that something has been removed makes the change less jarring and makes it more obvious what just happened.

  Selection-dependent Inputs

  

  With Javascript, you can easily change the contents of one input control based on what the user selects in another.

  Inline Validation

  

  Again, Javascript lets us do things like compare the values that the user inputs and alert them if the values don't make sense. (You could just as easily use it to make such a mistake impossible.)

  Drag and Drop

  

  jQuery makes it extremely easy to turn a simple list of items into a list of draggable items.

  Responsive Layout

  

  Yeah, yeah, I know—the only people who do this to their browser windows are designers. But the point is, if you build your prototype using a framework like Foundation (other front-end frameworks are available), not only can you lay out your page very easily, that page is automatically responsive—it works on any screen size. (Though it's up to you to make that work in a way that makes sense for users—just letting the content get reflowed doesn't always cut it.)

  Conclusion

  These are just a few examples of things you can do in an HTML prototype that simply can't be done in a wireframe or Photoshop comp. (There are many more.) Which means things that must be documented to supplement the wireframes/comps. Which means things that are open to interpretation. And to mis-interpretation. If you're not already prototyping in HTML, you should be thinking about it.

  If you want to learn how to build prototypes that can do stuff like this, check out Livetyping, the video course that teaches you how to create interactive prototypes using HTML, CSS, and Javascript. (All these examples are from the course.)

  Tweet

• The Best of Both Worlds—Mixing Bootstrap and Foundation

  Tweet

  

  This site is built with ZURB Foundation, which is awesome. But when I was adding this blog to the site, I decided I wanted the stuff in the right column to stay visible all the time. (If you're reading this in an RSS reader, head over to the blog to check it out.) Foundation doesn't really have a component that does that (except for a sticky top nav bar, which doesn't help me). But Bootstrap does have a component that fits the bill.

  You can see the component in action on the Bootstrap site here. As you scroll, the nav on the right gets pinned in place. That's exactly what I wanted. But this is Bootstrap and I'm using Foundation. What to do?

  Well, it turns out that lots of things in Bootstrap (such as this) are implemented as standalone modules. (The same is true of Foundation.) Which means you can just grab the relevant file and start using it on your own site. So that's exactly what I did. All you need to do is grab the file and put it in Foundation's Javascript folder. (I just copied it and pasted it into a new file.)

  Then you can include it in your page, add one line of code to your $(document).ready() function to attach the behavior to the relevant element, and you're done. Almost done anyway. In the case of this specific module, you need to add a couple of data attributes to the element's HTML and a couple of CSS rules, but nothing too complicated.

  I also had to tweak a few things to make it work properly. For example, my footer was really big, and this made it hard to get it to behave correctly, so I made the footer a bit smaller. And because Foundation's grid is more fluid than Bootstrap's, I had to make the element that gets pinned fixed width.

  But if you're OK making compromises like these, you can achieve quite impressive results. So if you're already using a particular front-end framework, don't be afraid to borrow from one of the others. It works, and you'll always learn something new in the process.

  Tweet

« Page 10 / 18 »