Responsive App Design

Resources for building applications for mobile + desktop
Sponsored by Alpha Software

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.

Added on December 11, 2013

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

Added on November 11, 2013

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.

Added on November 11, 2013

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.

Added on October 31, 2013

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.

Added on October 30, 2013

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.

Added on October 30, 2013

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.

Added on October 30, 2013

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.

Added on October 19, 2013

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

Added on October 19, 2013

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.

Added on October 19, 2013

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.

Added on October 19, 2013

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.

Added on October 19, 2013

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.

Added on October 19, 2013

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.

Added on October 19, 2013

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.

Added on October 19, 2013

The Boston Globe website

This is the website shown in the video and often pointed to for Responsive Web Design.

Added on October 19, 2013

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.

Added on October 19, 2013