Skip to main content

Posts

Showing posts from July, 2012

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.