The new Transformers movie trailer just dropped to a surprising amount of fanfare. Regardless of how you feel about Michael Bay's metal clanking movie pantheon, you have to admit that at least the concept of robots beating the snot out of each other is pretty cool. In the series, a set of shape changing robot-beings invade earth and entangle humans in their battles in search of universal domination. In the web world we're fighting a similar battle, the proliferation of devices that have led to the rise of a set of shape changing components, entangling designers in their own search for universal domination.
Like Transformers, responsive components change their size and shape to fit into different circumstances and devices. But how do you make sure you're using them effectively and not just creating a loud, metallic mess? Key to winning the battle is a deep understanding of the makeup of your 'troops', knowing the key factors to consider and the components you can call upon to step up and fill their roles.
Assessing the Battlefield - Key Factors of Responsive Components
When considering responsive components, the elephant (or Dinobot) in the room is space, but there's a multitude of space-related factors to consider.
- Vertical Space - how much will you need to scroll, can you make something take less height by shrinking an image, or splitting a list into multiple columns?
- Horizontal Space - Large numbers of columns are challenging to display within a mobile device, resulting in a desire to create interfaces that make sense when you stack components or align them vertically.
- Clickable Space - On mobile devices, while you have less space to play with, you actually want clickable items to take up MORE space, because fingers on a touch screen are less precise than a mouse.
Your Transformer Army - Common Responsive Patterns
Just as the Transformers have different specialties and are called to duty in ways that match their abilities, different components also have specialties. As mobile-first design has become more and more of a standard, we've begun to develop common, reusable patterns that function well responsively and can be used as parts of your design tool chest.
The first of these is cards. Cards are the Bumblebee of Responsive design - small, able to fit into many situations, but often overused and can get into trouble. Cards are by their nature incredibly easy to make responsive - they form an atomic unit that can be expanded or laid out side by side as screen size permits, but also fit naturally within a mobile environment. Just be careful not to overuse.
Another extremely common pattern for a responsive component is in site navigation. This is a place where not only the content layout matters, but interaction patterns are super important. Dropdown menus feel extremely natural in desktop environments, but are clunky and hard to navigate on a small, touchscreen device. In contrast, drilldown menus have been a part of iOS native navigation since the beginning, and feel completely natural in a mobile environment. An extremely common pattern for a responsive navigation component is now to use a top bar containing a set of links that have dropdown navigation on large screens, switching over to have a top bar hamburger icon that taps open either a drilldown menu or scrollable 'mega menu'. These menu patterns are like the Constructicons - relatively weak in isolation, but super similar and when their powers combine they create a super-powerful component.
A final pattern we want to highlight is for hiding and displaying content. Sometimes, you have just too much content to handle, and you need to throw something powerful at it. In the Transformers, this is when Optimus Prime gets called in - he's relatively vanilla but can handle situations that no one else seems to be able to deal with. In the responsive web world, this is when you want to use accordions and tabs. On large screens, it is common to have tabs-based interfaces to allow you to navigate between different content blocks or images, but on a small screen fitting both the tabs and the content all on screen is challenging. Designers have learned to switch their tabs for accordions on mobile to keep the hide/show controls directly adjacent to the content being shown, making it much easier to navigate on a small screen. This responsive 'accordion-tabs' pattern has been growing in popularity and is starting to show up in many different situations where you're trying to manage large amounts of content in a small space.
Responsive Components in Foundation 6.3
While navigation has been reasonably well handled in Foundation 6 via responsive menus and the off-canvas component, we have not had a built in responsive accordion/tabs solution, and we have not had a cards component. Until now. Foundation 6.3 (due to ship December 15, check out the release candidate here) will include BOTH a responsive accordion tabs component and a cards component.
The cards component, while very 'foundational', makes it easy to start building responsive cards within Foundation without having to spend a bunch of time building up the basic component structure.
The responsive accordion tabs component follows the model of our responsive menus, allowing you to use the exact same markup to generate an accordion at one screen size, shifting seamlessly into tabs at another. This will dramatically improve the ease of implementing this common design pattern. Optimus Prime has arrived. ;)
The Future of Responsive Components
There are a few technologies on the horizon that are going to dramatically shift our ability to build powerful responsive components. Currently we create components that are responsive based on screen size using media queries, but the coming of element queries will allow the creation of components that are responsive based on the space allotted to them rather than the full screen size. This alone will dramatically improve the ease with which we'll be able to integrate responsive components throughout the web.
Secondly, the upcoming CSS grid spec allows you to dramatically change layouts based on media queries. This will enable us to create radically responsive components, doing transformations using a few lines of CSS that previously would have taken complex JavaScript manipulations and large amounts of structural markup. Between the two, we couldn't be more excited about the future of responsive components in web design - possibly even more excited than we are for the next Transformers movie.
