What is a Responsive Web Design (RWD)?
Responsive Web Design is a web design approach to provide optimal user experience for all mobile devices (phones/tablets), orientations (landscape/portrait) and computers (desktops/laptops) using one single website for all.
>>> As opposed to use different websites for mobile devices and for computers.
Responsive Layout = Fluid Layout (%) + Flexible Image (%) + Adaptive Layout (Breakpoints)
- Fluid Layout: Layout built using relative units for widths (such as percentages) as a result, columns are relative to one another allowing the browser to scale it up and down fluidly.
>>> As opposed to Fixed Layout which has a set width (such as pixels) and resizing the browser or viewing it on different devices won’t affect on the way the website looks.
- Flexible images: Also use relative units for widths (such as percentages) so images are scaled automatically to fit its container for all devices.
- Adaptative Layout: Use of Media Queries to target specific device sizes.
- Media queries: Use of predefined sized (Breakpoints) where different layouts are triggered to control the design and its content as it scales down or up with the browser or device.
- Progressive Enhancement: Approach focusing on the content which is the reason we create websites. Is a more appropriate paradigm by applying technologies in an intelligent way, layer-upon-layer. This doesn’t require that you provide the same experience in different devices.
>>> As opposed to Graceful Degradation that focuses on building the website for the most advanced/capable devices.