What Is Mobile Responsive Design?
Responsive web design (RWD) is an approach to web design aimed at crafting sites to provide an optimal viewing and interaction experienceâ€”easy reading and navigation with a minimum of resizing, panning, and scrollingâ€”across a wide range of devices (from desktop computer monitors to mobile phones).
When a website is responsive, the layout and/or content responds or adapts based on the size of screen they are 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.
Why Should I Care About Mobile Responsive Design?
In short, you (publisher, developer, and designer) should care because you want the visitors to your website to have the best experience possible, without forcing them to adaptÂ themselves.
There are essentially two ways you can give your audience a good experience utilizing responsive design:
The first is optimizing the layout of the content.
If a user is browsing from a mobile phone, they generally donâ€™t have a lot of screen real estate to work with. Phones today will typically zoom out automatically, so that the entire website can be seen onscreen. This can be good, as it gives the reader access to the entire sight, but it can also be frustrating when trying to find information that is located in a tiny part of the upper right of the screen. If you could move some things around, make some things bigger and not have as many columns youâ€™ll give your mobile reader a much better experience.
The second is to adapt the content that is shown.
If you own a restaurant and a potential customer is browsing your site from a mobile phone, chances are they arenâ€™t that concerned with how pretty your site is â€” your food blog with the awesome slideshow of delectable dishes scrolling from side to side isnâ€™t very useful in that situation. They want to know what your hours are, where youâ€™re located, how to make reservations, and want a look at the menu.
Your potential customer browsing from a desktop computer probably isnâ€™t looking to eat right now, and isnâ€™t in a hurry to see where youâ€™re located and what your phone number is. Most likely heâ€™s looking to see if you offer a good atmosphere and what types food are available.
These are obviously generalizations but you can see the benefits of having differing content presented to people in different screen viewing circumstances.
Mobile responsive design takes care of this all â€œon the flyâ€, and without multiple versions of your site to maintain.