Links
Some useful articles and resources to consider when designing a responsive web app.
Surveying the Big Screen
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.
UX Archive: The iPhone app archive
Website
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".
Notes from the MassTLC unConference session on Responsive App Design
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 Design in Action: Responsive Design
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.
Re-imagining Apps for Ultrabook™: Touch Targets
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.
Responsive Design for Apps Part 1 / Part 2 / Part 3
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.
How the Responsive App Design Demo Was Built With Alpha Anywhere
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.
From iPhone to iPad
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.
Flat UI and Forms
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."
Beyond Flat
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.
Facing The Challenge: Building A Responsive Web Application
Lars Kappert, June 12th, 2013, Smashing Magazine
This article goes into detail about some of the ways you can build responsive web apps using HTML, CSS, and JavaScript techniques.
Applying Responsive Web Design to Business Applications
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.
iOS Human Interface Guidelines
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.
User Interface | Android Developers
developer.android.com
A guide to Android app UI design. Guidelines like this for native code have useful material for thinking about HTML5 web apps, too.
Responsive Web App Design
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.
The Boston Globe website
This is the website shown in the video and often pointed to for Responsive Web Design.
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.