What is mobile responsive design?
When a website is responsive, the layout and/or content responds (or, adapts) based on the size of the screen it’s presented on. A responsive website automatically changes to fit the device you’re reading it on.
Typically, there have been four general screen sizes that responsive design has been aimed at: the widescreen desktop monitor, the smaller desktop (or laptop), the tablet, and the mobile phone.
As you can see in the examples below, as the screen gets smaller, the content shifts and changes to the best display for each screen.
What we needed was an approach that allowed us to have our designs respond to any device they found themselves on, and so responsive web design was born.
In addition to changes in the device sizes that applications can appear on, there are also changes to how users interact with your applications. The interface between the user and the application is becoming more invisible, more natural. While accessibility experts were rallying for better keyboard and mouse support, your application now has to contend with touch and gesture events, and game controllers as input devices. Responsive web design is a series of techniques and technologies that are combined to make delivering a single application across a range of devices as practical as possible. Large and small businesses are seeking ways to make their web content work, regardless of where a user might encounter it.