“Of course responsive web design is hard, it’s design” — Mason Wendell
Mobile first site design has been front and center for a few years now as the way to do responsive web design. There are a lot of great things designing mobile first has done for our design workflows, first and foremost getting us out of the mindset that the desktop is where websites should be viewed. The constraints of designing for such small real-estate force a focused conversation around content hierarchy. Just as desktop first design was overly focused on that environment it’s important to not lose sight of the bigger picture.
A symptom of the mobile first philosophy is prefixing every sentence describing a site feature with “on mobile”. Ideally features don’t change depending on device, we are designing websites that work universally, not just on mobile. While we might be looking at the site through the lens of an iPhone, it’s important to not focus too much on the lens but the site itself, its content, core features, typography, and design patterns.
Content first is the new mobile first
“We must shift our focus back to the user. A content-out approach is a user-centered approach.” — Ben Callahan
A design approach that focuses on content architecture as a foundation instead of mobile might be a better approach. In practice, the differences are subtle; a column of content without layout can look a lot like stacking content on a phone. The difference is that the focus is on site content and features instead of how it might look in a single form. Web design agency Sparkbox creates content prototypes as a first deliverable and this is an excellent idea to gain a far better understanding of how components might work and how a user would navigate a site. This excerpt from Callahan’s post describes the process:
A content prototype is an HTML-and-CSS-based fluid-grid prototype, consisting of layout and typography, that consists of the project’s actual content. Its greatest usefulness may be in determining where to apply media queries to make the Web design responsive.
Leaning on this approach we get a much richer understanding of how content and interactions work and the design problems that need to be solved to make the site look and function well.
Design for features not devices
Another danger of focusing on devices is that they conflate many unrelated characteristics we are designing for. Touch is no longer limited to small screens and as desktop multitasking tools are evolving, small viewports may not be touchable. Thinking about how a tool works with touch based input vs mouse and keyboard shouldn’t be constrained by screen size. Designing touch interactions exclusively for small screens eliminates what might be a nice enhancement for those on large tablets. Thinking about features individually allow you to better focus on how the feature works and how best to design for it. Creating a checklist of device features and independently going through how each feature might make your site better allows you to look for opportunities you might overlook otherwise. How might the experience differ if the device has geolocation, accelerometer data, touch, a small viewport, a large viewport and can we accurately test for that feature?
Deconstructing device features is the only way to truly design for the diverse multi-device world. We will start inventing more beautiful and fluid interactions everywhere when we move past a focus on mobile, tablet, and desktop and instead focus on the strange and wonderful continuum that is responsive web design. The design challenges left to solve lie where we aren’t looking, in the breakpoint between mocks, in the typography and imagery that crash and flow chaotically as we resize, and the deep untapped sensory information of gyroscopes and GPS. Devices are what our users will see, but as designers we can be looking much, much deeper.