Responsive web design is a hot topic these days, especially as websites need to adapt to the growing number of mobile devices with their relatively small screens. Many designers and developers want to create new websites with responsive layouts, or modify their existing sites to incorporate responsive elements.
However, the whole topic can be somewhat bewildering at first glance. Responsive design is a relatively new idea, and it is rapidly evolving. It’s full of rather confusing terms, such as responsive layouts, adaptive layouts, media queries and viewports. Where to begin?
In this article, you get a gentle introduction to the world of responsive web design. You’ll:
- Learn exactly what responsive design is, and why it’s useful
- Look at the difference between the terms “responsive design” and “adaptive design”
- Take an existing fluid layout and convert it into a responsive layout that looks good on all screens, from mobile to widescreen desktop, and
- See how media queries and the
viewportmetatag can help you build responsive layouts.
Ready to explore the world of responsive design? Let’s go!