Designing for Hangout Apps — Dimensions

tl;dr Hangout Apps have a minimum size of 940 x 465 and Hangout Extensions have a minimum size of 300 (fixed) x 465. Use Media Queries and/or JavaScript to make a responsive design.

After someone has grocked how to developer a Hangout App, the first question I get asked is, “How do I start designing my UI?” Its the right question to ask early on as a Hangout App is not your Grandma’s static web page. Designing for a Hangout App is pretty easy since another type of webapp has caused better tools for things like dimensions (spoiler: mobile.)

Hangouts Resize

To start out, what is actually going on visually in a Hangout and what does the browser see happening? First, the Hangout usually launches in a chromeless popup window. The Hangout is elastic — if you resize the window, items like the film and the main video strip re-center using JavaScript. We’ve noticed that users like to resize Hangouts (usually for split-screen viewing,) so its a good thing the Hangout adjusts.

Lower Hangout Size Bounds

The Hangout doesn’t have a maximum width or height (I haven’t asked the team, but none AFAIK.) There are minimums, however. Everything will adjust until a certain dimension and then scrollbars will appear. My tests show that the minimum size before scrolling is 946 (width) by 709 (height.) That’s the dimensions of the entire Hangout’s .

<body>’s Metrics in the Dev Tools

How does this affect your Hangout App? These minimums set the smallest size you should be designing against. We know the minimum size for a Hangout but what about an App? To figure that out, I built a Hangout App.

Dimensions for Hangout Apps

I started out with a great article on Device and Viewport dimensions from Ryan Van Etten who authors Response JS, a responsive design toolkit for jQuery. I basically put in the fastest techniques he mentioned in a Hangout App. I actually made 2 version of this app, one for regular Hangout Apps and another for Hangout Extensions.

Dimensions for Hangout Apps

Dimensions for Hangout Apps

These apps helped me figure out the minimum dimensions for Hangout Apps and Hangout Extensions. For Hangout Apps, the minimum is 940x465. Hangout Extensions are a little different because they have a fixed width, but their minimums are 300x465.

Want to try them out? Click on Hangout App or Hangout Extension to launch them in a Hangout. I also posted the source on Github.

Next Steps: Make It Responsive

So now that you know the minimum size your app can be, what do you do next? Well, mobile-first, responsive techniques were all the rage last year. Media Queries and JavaScript techniques (and libraries) are plentiful. I won’t spend time in this post about it, but you can get started with a great article on html5rocks.

I hope this helps you make better and smarter Hangout Apps. As always, drop me a line on Google+ if you have any questions or comments.

./BBK

BONUS!!! Are you new to Hangout Apps and what to learn? Check out my talk at Google I/O 2012:

Show your support

Clapping shows how much you appreciated Jonathan Beri’s story.