Some useful articles and resources to consider when designing a responsive web app.
Mike Pick, December 4, 2013, A List Apart
This article explores the opportunities gained when responsive design accounts for larger screen sizes in addition to mobile devices. The author covers how to successfully use content, and he points to examples of websites and web apps that use simple and sophisticated design strategies to take advantage of larger browser windows.
This is a website maintained by Arthur Bodolec, Chris Polk, and Nathan Barraille -- designers and developers living in San Francisco. It has screenshot examples of the user flows of various tasks in many applications. The examples are categorized by task (e.g., Adding, Creating, Onboarding) and by app (e.g., Dropbox, Facebook, KAYAK). They "...lay out the most interesting user flows so you can compare them, build your point of view and be inspired." Initially they only archive user flows from iPhone 4S and 5, but also compare and contrast iOS 6 and 7. As of November 8, 2013, they have 242 user flows in the "archive".
Dan Bricklin, November 8, 2013, Dan Bricklin's Log
Notes from a session about Responsive App Design at a conference. Includes different contexts to take into account, examples of apps to learn from, and more. One observation an attendee mentioned is how web sites mainly have a Presentation Layer, but apps also usually have as major components Control Layers and Input Layers.
Android Developers, October 9, 2012, Developer.Android.com
In this 29 minute video, Android Developer Advocates Nick Butcher, Roman Nurik, and Adam Koch go through screenshots of a few different actual Android apps and discuss how they are different on a phone, a small tablet, and a large tablet. This gets into layout, typography, and a bit about differing behavior.
Luke Wroblewski, August 15, 2012, Intel Software Business Network
This page has a 15 minute video that explains in detail many issues you should be aware of with respect to the size of "hit areas" on the screen, both for touch and mouse. It also explores the issue of posture -- how the person is holding the device and what parts of the screen are easier to hit than others. Being related to Intel's support of new touch-enabled, light laptops, it also covers this important (to business apps) area in addition to phones and tablets. The page itself has links to other related videos.
Jason Grigsby, March 28, 2013, Cloud Four Blog
In this series of extensive blog posts, web developer Jason Grigsby walks you through many aspects of considering responsive web app design. He summarizes and links to a variety of additional valuable resources to make his points, and goes step-by-step through his redesign of a browser-based expense reporting application as a mobile app design.
Dan Bricklin, October 22, 2013
This 3:19 video is a quick overview of the Alpha Anywhere development system used to build the simple demo application in the main video and the new Responsive Layout Genie feature used to make it responsive.
Jack Groetzinger, July 31, 2013
Jack goes through, in great detail, his thinking as he made an iPad version of an iPhone app, dealing with a lot of the issues and looking at alternatives and other apps.
Jessica Enders, October 15, 2013, A List Apart
While not about "responsive" per se, this article does relate to differentiating between informational apps and those used for data entry and Create, Read, Update, and Delete ("CRUD") database operations. The article starts with: "The problem is that most flat UIs are built with a focus on the provision of content, with transactional components (i.e., forms) receiving very little attention. What happens when flat and forms collide? User experiences can, and often do, suffer."
Jack Groetzinger, September 3, 2013
This blog post explores in great detail differences in UI guildelines between iOS 7 and Android. It is helpful to understand what users of different mobile operating systems will expect.
Lars Kappert, June 12th, 2013, Smashing Magazine
Declan Bright, November 28th, 2012
This blog post shows a responsive approach to a traditional search page with a filter bar and table using the Responsive Table jQuery Plugin. Read more about the Responsive Table jQuery Plugin in another of his blog posts.
Apple Computer, 2013
Apple's guidelines for iOS, updated from previous versions to include use of iOS 7 features and the principles behind them. See the UI Elements section for information about different Content Views and Temporary Views. Guidelines like this for native code have useful material for thinking about HTML5 web apps, too.
A guide to Android app UI design. Guidelines like this for native code have useful material for thinking about HTML5 web apps, too.
Dan Bricklin, October 17, 2013, www.bricklin.com
This is an essay that mirrors much of what is in the video with some extra detail, written by Dan Bricklin who also created the video after writing it.
This is the website shown in the video and often pointed to for Responsive Web Design.
Ethan Marcotte, May 25, 2010, A List Apart
This is the original essay that most people point to about Responsive Web Design.