Skip to main content

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>.
<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
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.


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

Popular posts from this blog

My weekend project: an Arduino, Raspberry Pi & Node.js robot

Yes I know, I'll get more buzzwords when I my JavaScript creates Cloud Synergy - but after I Pivot.

I've been spending my wee few hours a week designing, tinkering and finally building my little robotics platform. I've had ideas brewing for a while but haven't had enough time outside of work to start hacking.

It all started when I first saw Rick Waldron's Johnny Five framework for Node.js.
Sensors are asynchronous, so, ya, a node.js robot framework makes sense. A few months later I started sketching designs, reading up on firmata and buying my arduino & Pi.

Before the what & why, here's the basic BOM:
1 Arduino Uno R3 running firmata1 original Raspberry Pi with Raspbian, Node.js & 4gb of storage1 Magicians chassis1 SN754410NE Quad Half H-Bridge to drive the motors1 dual-output mobile battery backA custom mount for the Pi & some custom USB cabling for power Why Raspberry Pi The main controller is a Rpi. It turns 2 small motors by delegating instru…

Easily switch between different versions of GCC ARM Embedded

I need to switch between different versions of GCC ARM Embedded somewhat often. I couldn't find a good solution online so I threw together a simple shell script to simplify the process I call switch-gcc-arm. Here's a screenshot:

The script is pretty simple, even for a bash n00b like me. It uses symlinks so that standard make files work:

For each version of gcc you want to support, you'll need to add it is as an elif statement and add it is as a new option. The script creates a "virtual" $BIN directory that points to whichever version of gcc you need. Make sure you add the path to the folder where you placed the script, as well as the $BIN path you set as the virtual bin directory. I add the paths to my .bash_profile and rely on the system keeping the last-used version of gcc.

Hope this helps someone. Any suggestions for improvements?


A Maker's Equipment List

I've been building up a nice supply of tools and components so I decided it is high-time to build a small workspace in my tiny SF apartment. There were things I knew I still needed but wrestled with some tough choices (like which Oscilloscope to buy.) I wanted either a nice Wishlist on Amazon or at least a great list to start my journey. I found a few decent starting points in the form of video & blogs:
How to set up an electronics lab/workshop at homeSo You Want to Build ElectronicsHow to equip your EE lab The first link is actually a transcription from +EEVblog /by +Dave Jones (EEVblog is an awesome blog and YouTube channel, you should subscribe.) The second blog /by +Kenneth Finnegan covers more of the components side.

What I couldn't find is a complete compiled list with links to purchase. So I made one! I put together a simple Amazon Affiliate store called Maker Workbench Equipment List. I merged what I thought made sense and added a bunch of items I think any good Mak…