These days, the word responsive is one that we are hearing a lot in the website development environment, isn't it? No worries, together we will see the real meaning of it and its impact on our website development.
One factor that influences decision making (but is sometimes ignored) when starting the development process is the number of devices and different screen sizes that we need for previewing the responsiveness of website layout. Some time ago, we used to work with some definitions of website dimensions, for example, 1024 pixels. This happened because we thought the only way to access the content was on a desktop. But, as you know, technology is bringing us more and more devices (that can show websites), improving the way we interact with sites, such as large desktop monitors, tablets, smartphones, smart TVs, outdoor displays, and other good things.
These advances in mobile technology and the quick evolution of website navigation and viewing techniques have pushed everyone to review the concept of limited dimensions of sites, to start thinking of a structure that can adapt itself, and to offer the right content for each situation.
In this chapter we will learn:
Understanding the concept of responsive web design
Comparing responsive, fluid, and adaptive web
Adapting the screen with media queries
Mobile-first concept and tips
Using wireframe tools
Practicing mobile-first development in wireframes