Responsive design is simply adding in design elements that allow a page to respond to the screen size, and device, that a browser is using to view that page. Instead of a mobile site, with its own URL (often something like m.domain.com), the URL is the same, and the page rearranges itself to fit the screen. This is important for a number of reasons. While search engine optimization is often cited as an important reason for responsive design, the positive impact on user experience is the primary benefit. Speed and a visually appealing experience do wonders for the experience users.
Responsive Web Design Is Evolving… And Improving
Originally, responsive design was just about fitting a new screen size. It was nothing more, and nothing less. Most smartphones had similar sized screens, and the only tablet worth designing for was the iPad, which had just one screen size.
Now we are seeing different sized screens on smartphones and new tablets that are as much as two inches bigger or smaller than their competitors. For instance, the iPad mini has a screen that is 5.3 inches wide and 7.87 inches tall. The Samsung Galaxy Tab 10.1 is 6.81 wide and 10.09 tall.
Design elements must include different screen sizes to ensure a uniform experience across devices instead of just designing for one device. New approaches to CSS are taking this into account.
It’s Not Just About Devices
Getting a page to render properly on each device is important, but specific elements on a page are also important. Responsive design has thus far failed to take into account important elements on a page like columns and ad placement.
Shifting sidebars and preserving menu placement to fit actual content onto screens is important, but pages need to maintain unique design elements and their ability to monetize. At this point, few if any responsive designs achieve this.
Even With Its Flaws Responsive Design is The Future
Responsive web design certainly has some important improvements to make. While it is imperfect, it is a lot better than dedicated mobile sites, plugins and other workarounds that are often executed in an effort to make a site mobile-friendly.