Photo by Wengang Zhai on Unsplash.
Responsive websites that adapt to different devices are about much more than fluid grids, flexible images and media queries. These technical building blocks are used to implement responsive web sites in the viewing environment. However, they don't define how the content should be structured so that it can be accessed on any device browsing the web, including mobile phones, tablets, desktops and future devices we don't know about yet.
So how should we go about it? What is the best approach to design and develop responsive websites in the post-PC digital landscape?
Pages as design systems
Responsive web represents a major paradigm shift in our industry, restoring the web to where it should've been from the start. We have been through many schools of thought, such as "Web is not print", "There's no mobile web", "Mobile first", "Content first", "One web"; all of which are clear indicators of how much the web has matured as a medium. Websites or apps cannot and should not look the same in every browser. The ever-increasing number of mobile devices used to access websites is driving this significant change.
Pixel-perfect and fixed-width webpages created with print design in mind are an early misunderstanding of the web as a medium. Responsive webpages, on the other hand, are scalable systems, modular style guides and patterns, created to serve the same content to multiple devices and screen sizes. Due to their flexible nature, these new design systems can produce responsive pages with structured content elements tailored for each device. Responsive systems are not add-ons; they are the core engine.
Component-based responsive workflow
Many people around the globe are trying to find solutions to managing the responsive design and development process. We're exploring new ways to refine our workflow.
We no longer focus on pages, because we're not designing for print; rather, we focus on deconstructing content elements into smaller and simpler components outside of any page layout context. Once these elements are ready, we reassemble them in a fluid, responsive grid and implement breakpoints, defined by the design.
Sometimes change hurt, however we have learned that it is actually faster, more efficient and flexible to create a scalable and fluid pattern-based system than creating static, fixed-width page mock-ups for each screen size. And it allows us to define user interaction in a dynamic, real-world browser environment.
In terms of process, a responsive design and build involves parallel design, development and testing processes. A very welcome transformation that "force" us to bring our interdisciplinary skills in play from the outset. We have aimed at working interdisciplinary from the outset for years, now this aim has become a complete necessity.
Tools and deliverables
Many tools have been created recently. For designers, Style Tiles looks promising, offering a structured way to create a visual vocabulary for a project without layout constraints.
For frontend coders, Pattern Primer and Twitter Bootstrap are just two examples of the many frameworks that have appeared recently.
These tools can help creating a flexible, reusable and scalable style guide library system that contains both established and recently created patterns for both design and code. This collection of components can then be used to bootstrap a new project in a customized environment.
Letting go of control
Responsive web helps us let go of control we never really had. The fact is we don't know which browser, which version of that browser or which size of the browser window the user is using (to name just a few known unknowns). In responsive web, layout is a user experience enhancement if your screen size can accommodate it. This means that designers and frontend developers need to rethink their workflows, create new ways to structure their work, create reusable patterns, test early, test often and communicate effectively with each other.
Testing and discussing design work with developers from the beginning is a crucial factor for a successful responsive web project. This also helps in defining design breakpoints early in the process, based on content instead of currently popular device sizes. Responsive websites take progressive enhancement to the next level.
Grouping related methodologies under one concept—responsive web—helps push a structured methodology for creating a better experience for users, no matter what device they use. Web is a unique, flexible content delivery platform and responsive web is going to take it even further.