Responsive design is the practice of designing and building websites so that they work on both desktop and mobile screens without having to create a lot of separate designs or code for each.
More than 60% of web traffic is mobile so it is no longer optional for websites to be mobile-friendly. And many are designing website focusing first on the mobile state.
Good Responsive Design
- Minimizes the code needed for mobile compatibility
- Maintains design and usability at all screen sizes
- Is more about design than development
Bad Responsive Design
- Requires many breakpoints
- Is significantly more compelling on certain screen sizes
- Can’t easily be fixed by a developer
Responsive Design Concepts
Responsive vs Adaptive
White responsive design is trying to make website page elements that can look the same on all screens, adaptive design is making specific design choices for many different screen widths. Both can provide a good outcome, but responsive design is more efficient.
Breakpoints
Breakpoints are screen width where new CSS styles are applied that change the appearance of elements on a site so that they work for better that view. For example, for screens smaller than 640px you might want your title font size to be a big smaller.
Fluid Layout
The most common approach to responsive design is to give elements a percentage width so that you don’t have to set specific widths that might need to change at different screen sizes. You could have elements be 50% of the screen and know that would be true no matter it’s size.
Full-width media
Images, videos, and other media embeds can often be set to 100% width in CSS so that they always adapt to the size of the screen or the element they are contained within.
Design consistency
Responsive design aims to maintain the same or similar experience on every screen. With a highly responsive design, very little design guidance is needed for different screen sizes and design consistency is ensured.