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.)
Lower Hangout Size BoundsThe 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|
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
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: