Responsive Web Design is an approach to web design and development that websites and web applications respond to a screen size, layout and resolution of the device on which they’re being accessed.

The design challenge

Any design is constrained by the medium in which it is executed and by the context in which it will live. Interiors design requires taking space and its shape, lighting conditions into account, architecture - the land, the surroundings, industrial design - the properties of the material, the environment it will be used in.

The same rigour applies to designing for responsive web. However, we’re missing the constraints of the medium and the context in which our design will live. Web design is defined by its transience, whatever we do, will be repetitively changed or replaced within the short time frame, the new technologies and devices that we haven’t initially considered will come shortly.

How to approach the problem?

Although there is no perfect method that would allow a designer to create ideal web product, there are ways to approach designing for the continuously changing viewports.

• Responsive web design is typically accomplished by writing a set of styling rules (CSS media queries) that define how page layout should be rendered between breakpoints.

• Breakpoints are the pixel values at which rendition of a layout in the browser changes (or breaks); they correspond to screen widths of different devices on which web pages can be accessed.

• The longer we work with low fidelity wireframes and prototypes the better chance we have to identify layout breakpoints before a major commitment to a high fidelity design is undertaken.

• Designing for smaller screens - the mobile first rule - helps with deciding about content in terms of priorities. Then it will be easier to translate experiences for desktop screen sizes.

• Instead of thinking about a website as a collection of pages, we can start thinking about it as a system of components that can be adjusted and rearranged across viewports.