Responsive design is an approach to web design in which the interface adapts to the device's layout, facilitating usability, navigation and information seeking. Responsiveness is possible thanks to media queries, allowing the design to adjust automatically to the browser space to ensure content consistency across devices, and design elements being sized in relative units (%).
Responsive design has significant benefits, and it's a default for web design to support device switching.
With responsive design, you may:
Reach a larger audience: nowadays, more users access the web through mobile devices.
Save time and development efforts since designers and developers only focus on one design version.
Improve SEO, as search engines reward mobile-friendly websites with better search positions.
Ensure brand and design consistency across devices, as there is no chance to modify guidelines to fit different design boxes.
ShowHide
video transcript
Transcript loading...
Why Responsive Design is so Popular
In the early 2010s, designers had to address a historical phenomenon. More users were starting to access web material on handheld devices than on desktops. There were two main design approaches to deal with designing across devices:
Designers could craft several versions of a design optimized for different devices and make each have fixed dimensions (adaptive design approach).
They could work on a single, flexible design that would stretch or shrink to fit the screen (responsive design approach).
Organizations and designers found the benefits of responsive design hard to ignore. Rather than work with absolute units (e.g., pixels) on separate versions, designers focused on just one design and let it flow like a liquid to fill all "containers."
Understanding the Language of Responsive Design
Responsive design has three core principles:
Fluid Grid System
Grid systems are aids designers use to build, design, arrange information and make consistent user experiences. In interaction design, multi-column, hierarchical and modular are the most widely-used types of grids.
The principle of a grid is simple: every element occupies the same percentage of space, however large or small the screen becomes, which means that the components can be scaled up and down as the user switches devices.
Fluid Images
For non-photographic images, such as icons, you can use SVG files—these file formats are lightweight, and you can scale them to any resolution without losing quality.
Media Queries and Breakpoints
Media queries are filters that detect the browsing device's dimensions and make your design appear appropriate regardless of the screen size. To aid media queries, you have breakpoints: these are the values where the content of your website will be rearranged to provide the user with the best possible experience.
Media queries and breakpoints go hand in hand, and both can be defined in your CSS style sheets. For designers, a breakpoint is a boundary where the design will change to accommodate the features to the new size. Commonly, designers use three sizes when designing responsive websites: 1024 & upwards, 1023-768, and 767-320 px.
Media queries work best with a "mobile first" approach where you define what you want on mobile and then scale up from there. You’ll need to test content to see where breakpoints occur and plan them. Eventually, you may find you can predict breakpoints based on a device's screen resolution.
Best Practices & Considerations for Responsive Design
With responsive design, you design for flexibility in every aspect—images, text and layouts. So, you should:
Assume a "mobile-first" mentality: Whether you start designing from the smallest screen or the desktop version, assuming a mobile-first mentality helps you practice the mobile-first approach, a design principle with simplicity at its core. A mobile-first mentality means prioritizing content, leaving complex graphs and images for the desktop version, and creating fat-finger-friendly tap targets (30px minimum).
Use Scalable Vector Graphics (SVGs). These are an XML-based file format for 2D graphics, which supports interactivity and animations.
Include three or more breakpoints (i.e., design for 3+ devices).
Prioritize and hide content to suit users' contexts. Check your visual hierarchy and use progressive disclosure and navigation drawers to give users needed items first. Keep nonessential items (nice-to-haves) secondary.
Aim for minimalism.
Apply design patterns to maximize ease of use for users in their contexts and quicken their familiarity: e.g., the column drop pattern fits content to many screen types.
Aim for accessibility with font sizes/styles. Use contrast and background effectively. Consider learning about typographic scales to harmonize body copy and headlines. As some users rely on screen readers, make all your text "real" instead of text within images.
Responsive design is robust and economical, but its "easy" nature is deceptive. You can still run into difficulties if you use it without caution. For example, it can restrict your control over the design's screen sizes; consequently, if you do not set media queries upfront, the elements could shift independently. Also, it is typical to run into issues with advertisement formats, especially on mobile devices.
Still, responsive design aids great UX since, by default, it requires uniformity, seamlessness, and simplicity in your design efforts. It is SEO-friendly, and the multiple CMS and frameworks, such as WordPress and Bootstrap, make it very cheap to implement.
In the “Build Your Portfolio” project, you’ll find a series of practical exercises that will give you first-hand experience with the methods we cover. You will build on your project in each lesson so once you have completed the course you will have a thorough case study for your portfolio.
Mobile User Experience Design: Introduction, has been built on evidence-based research and practice. It is taught by the CEO of ExperienceDynamics.com, Frank Spillers, author, speaker and internationally respected Senior Usability practitioner.
One Size Fits All? Definitely Not in Task-Oriented Design for Mobile & Ubiquitous UX
In the 1980s and ‘90s, our technology-loving civilization rode the wave of Personal Computing – one computer per person.
649 shares
3 years ago
Open Access - Link to us!
We believe in Open Access and the democratization of knowledge. Unfortunately, world class educational materials such as this page are normally hidden behind paywalls or in expensive textbooks.
If you want this to change,
, link to us, or join us
to help democratize design knowledge!