The Livetyping Blog

  • Can You Prototype Native Apps in HTML?

    A thought has been bouncing around in my head for a while now: prototyping in HTML, CSS, and JavaScript is all well and good for web sites and webapps. But what about native apps (iOS and Android)? Can you prototype them in HTML?

    Obviously, there are things that HTML prototypes (and webapps too for that matter) can't do that native apps can. The browser on your smartphone or tablet just doesn't have access to all the capabilities of the device and the OS that native APIs provide (e.g., location data, accelerometer, system notifications and so on).

    Aside from this though, is there any reason why we can't do this? If you use a responsive framework, layout is a cinch. You can even change your page layout depending on device orientation. And we now have things like off-screen menus and independently-scrolling sections.

    But one place where native apps really shine and provide opportunities to delight is in the sphere of animation. Most webapps don't attempt the fancy stuff that some native apps do.

    So I decided to do a little experiment. I picked an animation from a native iOS that I figured I should be able to replicate without too much difficulty, and tried recreating it in HTML, CSS, and JavaScript. The animation I chose is the one that the Tumblr app uses when you tap the new post button.

    When you tap the button, an overlay appears over the current content, and six buttons (one for each type of post) come flying up from below the screen and bounce into position. Immediately after this, a "Nevermind" button slides up at the bottom of the screen. If you tap one of the buttons, the six buttons fly up off the top of the screen and are replaced by a photo selector, text entry area, or whatever. If you tap "Nevermind", the buttons fly off and the overlay fades out so you're back where you started.

    I decided to just replicate the "Nevermind" action. (I didn't bother getting every last little detail right—I used numbers instead of icons for the buttons, the buttons themselves are a bit small, etc.)

    I used Foundation for layout and Julian Shapiro's excellent velocity.js for animation. The result looks like this (try clicking New):

    (In some mobile browsers, this doesn't display correctly. So you might want to open it in a new tab.)

    And here's a video showing the original Tumblr animation, my version in a desktop browser, and my version in Mobile Safari:

    I think it's pretty convincing. There's a "but" coming though…

    And this is it: but there are limitations. For example, the overlay that the Tumblr animation adds also blurs the content that it covers. This is easy enough to do in CSS, and you can animate the blur using velocity.js. It looks great in a desktop browser, but in Mobile Safari, it makes the animation a bit clunky.

    And this is a fairly simple animation. Other, more complex animations that require more processing power will most likely perform more poorly in mobile browsers.

    So is this a viable approach? It depends what you are trying to do.

    If you want to show people your prototype on the desktop (maybe in something like my iPhone viewer (code), then it works great. If you want to actually show it working on a smartphone, then you may run into performance issues, depending on what you're trying to achieve. (If you have a newer phone than mine, it may work better.)

    I'll definitely be experimenting more to see what works and what doesn't.

    If you want to poke around in the code, it's on GitHub.

    And if this pushes your buttons (sorry), you should check out my upcoming workshops, which will cover this and oh my goodness so much more. If you're a UX designer and you want to learn how to make stuff like this, give it a look.

  • The UX Designer's CSS3 Cheat Sheet

    CSS3 logo

    A while back, I put together an HTML5 cheat sheet for UX designers, which seemed to go down rather well. But what's HTML without CSS? Not much. So now I've made another cheat sheet, this time for CSS.

    Grab your copy here. I hope you like it! (If you do, I'd realy appreciate it you'd share it.)

  • Size DOES Matter: How Responsive Designs Often Get It Wrong (and How to Fix It)

    Responsive web design is awesome. Just look at how it has swept the web design world in the last couple of years. But it is not a panacea. We can't just build a site responsively and leave it at that, without using our brains a bit. (Meaning that we need to get into the mobile first mindset.)

    One example of this is when a page looks great on the desktop, but on a small screen, it turns into an interminably long strip of content. Just want to get to the footer to find a link to the support page? Good luck.

    I appreciate that many sites use a CMS, and that any technique that requires additional markup to accomplish its goal may well require changes to the CMS and the workflow of the content authors and editors. However, even in such cases, it may be useful to consider these approaches just for specific pages (such as the homepage).

    Let's take a look at a few different ways to get around the overly-long-content problem.

    Just put less stuff on the page.

    Do you really need all that content on one page? In the spirit of mobile first, maybe splitting it up into multiple pages would work better for both small and large screens. Filament Group's homepage is a nice example of how not to overload your homepage with too much crap:

    Filament Group's uncluttered homepage
    Filament Group's homepage

    Just hide stuff

    Some content may just be luxuries that you can't afford on small screens. One solution is to simply not show it at all on smaller screens.

    The responsive version of the BBC News site uses this approach. The ads that appear on large screens are not shown on small screens. Also, the "Watch" section shows three items on large screens and just two on mobile:

    The BBC News "Watch" section on a large screen The same section on a small screen
    The "Watch" section of BBC News on large and small screens

    And on big screens, there is a "Most watched/read" section that isn't shown at all on small screens:

    The BBC News Most Watched/Read section
    The BBC News Most Watched/Read section—gone on small screens


    Instead of showing all the content, show a heading and a control to expand it. Most sites that do this just do it for some of the content on the page.'s store selector on desktop The same selector on mobile
    The store selector on Dutch ecommerce site Coolblue on big and small screens

    Wikipedia's mobile site takes a similar approach:

    Wikipedia accordion closed Wikipedia accordion open
    Wikipedia's mobile accordion


    On small screens, show the start of a piece of content, then show a link to the full content. This could either take you to a new page containing the full content, or expand (or load) the content in-place. (Having a separate page has a downside—content is duplicated, which means having to maintain two copies of the content, or using some kind of include mechanism.)

    The App Store on iOS is a good example of the latter approach—by default, you get a short version of the content, with an ellipsis and a "more" link. Tapping on the link shows the full content.

    A truncated app description from Apple's iOS App Store The full version of the same app description
    Truncated and full versions of the description of an app in Apple's iOS App Store

    The App Store simply truncates the content to a fixed length. A variation would be to have a hand-crafted teaser. This could be a tl;dr version of the content, or a hand-picked extract. (For sites using a CMS, this could be tricky though.)

    Amazon does something similar with product descriptions on its mobile site:

    A product description on Amazon's mobile site The same description, expanded
    Teaser and full versions of a product description on Amazon's mobile site

    The How

    If you're using Foundation or Bootstrap, you can show and hide elements depending on screen size by simply adding classes. If you're not using a front-end framework, you can add some media queries to your CSS to achieve the same results.

    You can use this technique for straight showing and hiding, for replacing regular content with a teaser, and for replacing content with the same content contained within an accordion.

    The Specifics

    Hiding stuff

    Bootstrap has what it calls responsive utilities that let you show and hide elements depending on viewport width. Just apply the appropriate classes. Foundation has its visibility classes that work in much the same way.

    In addition to showing and hiding stuff based on screen size, Foundation also lets you show and hide based on device orientation and whether the device is determined to be touch-enabled or not. (Modernizr does the detection here. It tells you whether the browser supports touch events, which is not necessarily the same as knowing whether you are dealing with a touch-enabled device.)

    This is handy—you can use touch as a proxy for other device capabilities, such as the ability to upload files other than images (so you can hide those file upload controls where you know they'll be inappropriate).

    If you're not using a framework, you can roll this behavior yourself using media queries. For example, you can add a hide-on-small class to the elements you want to hide on small screens, and add a media query rule like this to hide them:

    @media (max-width: 640px) {
        .hide-on-small {
            display: none;

    If you have elements that you only want to display on small screens, you'll need a second class (say, show-on-small) and a second media query rule:

    @media (min-width: 641px) {
        .show-on-small {
            display: none;


    To implement teasers, you need three things:

    • A short version of the content (which will be displayed for all screen sizes)
    • The remaining content (which will be displayed by default on larger screens, and hidden on smaller screens)
    • Something that users can click or tap on to to show or hide the extra content

    Put all the content in your page, with the appropriate visibility classes (see above) so that the additional content is hidden on small screens, but not on larger screens. At the end of the short content, add the link for showing/hiding.

    Then add a little bit of JavaScript so that when the user taps the link, the additional content gets shown.

    Here's a simple example. Check out the source code on GitHub here.

    (My version has "Show more" and "Show less" links, with JavaScript to show and hide the right one.)

    Note that if your shortened content is a specially-crafted summary, rather than just the first part of the larger piece of content, you'll need to toggle between it and the whole of the larger content, instead of just showing and hiding the remaining content, as I've done here.


    Animation showing accordion on small screens only
    Regular content on larger screens, an accordion on smaller screens

    If you want to replace your regular content with an accordion on small screens, you need to duplicate the content. You'll have your regular content, and the same content within the accordion.

    Foundation includes an accordion, as does Bootstrap. If you don't like these (or if you're not using a framework), you can use jQuery's accordion. (Note that you will need to include both the jQuery and jQuery UI libraries in this case.)

    Again, you can just use the visibility classes to hide the regular content and show the accordion on small screens, and vice-versa on larger screens.

    If you're uncomfortable with the idea of having to duplicate your content, fear not! There are things you can do to avoid it. Foundation has a component called Interchange that is intended to be used to insert different content (from external files) depending on the screen size. But you can also use it to insert the same content more than once on the same page.

    Another way to do this is to use a templating language. These let you pull pieces of content into your page from separate files. They are usually used to do things like adding the same footer to all the pages in a site. But they're good for this sort of thing too. Some of them are a bit complicated and have quite a learning curve. But for simple stuff, check out Brace Tags—it's very easy to use.

    (Note that templating usually means you have to run a script at the command line to actually put all the pieces together. There are ways to automate this, though.)

    My example uses the Foundation accordion. It also uses Interchange to avoid the content duplication issue. By default, the Foundation accordion isn't animated, but you can make it animated with not much effort, like this. Both of these examples are on GitHub here. (For more information, see this page.)


    If you design or build responsive sites, apps, or prototypes, you will probably run into the too-much-content problem at some point. I hope that the techniques suggested here will help you overcome it.

    If I've missed other ways of handling this (or if you have any other feedback), I'd love to hear from you. I'm @martinpolley on Twitter.

    If you enjoyed this post, you should sign up for my newsletter to make sure you don't miss the next one. (You also get a free lesson from Livetyping, my HTML prototyping course for UX designers.):

    Sign up for the newsletter

  • A Thing for Showing Your Design on an iPhone without an iPhone

    So. I wanted a thing that would let me show people what my designs look like on an iPhone, but in the desktop browser. Especially HTML prototypes that only live on my machine. So I cobbled this together:

    (Open in a new tab.)

    Note: If you're viewing this on your phone, the above probably looks a bit rubbish. But it's not meant for use on a phone, so that's OK.

    I know it's not the same as viewing stuff on an actual device (or even on an emulator). But it's perfect for me.

    If you think it's useful, you can grab it off GitHub and use it too.

    (Thanks to 99designs for the transparent iPhone image.)

Page 1 / 8 »