Responsive design
A way of designing websites so that a single page adapts to any screen size, instead of making a version for each device.
What problem it addresses
There are too many screen sizes to design a version for each one.
An example
The same article, opened on a phone.
It is the same content. What changes is that the page rearranges itself to fit the space it has.
Why it happens
The grid uses proportions, not fixed measurements, and stretches or shrinks.
Images adjust to the available width.
Media queries change the layout when the screen is narrower.
Applications in design
Use it like this
Design the narrowest version first and add as space allows.
Avoid
Hiding content on the phone because “it doesn’t fit”: people using a phone need it too.
Don’t fall for it
Test on real phones, not just by narrowing the browser window.
3 ingredients
What the research says
Marcotte (2010) proposed them to define responsive design: fluid grids, flexible images and CSS media queries.
Solid evidence. Wroblewski (2011) also proposed starting with the phone: designing first for the smallest screen forces you to decide what is essential.
Connections
Used in
Related to
Authors and works
- 2010
Ethan Marcotte
Named responsive design and described its three ingredients.
- 2011
Luke Wroblewski
Proposed designing for the phone first.
Sources
Original sources
- Marcotte, E. (2010, May 25). Responsive web design. A List Apart. View source: Marcotte, E. (2010, May 25)
- Wroblewski, L. (2011). Mobile first. A Book Apart.
Last reviewed: