The goal of RWD is to build websites that feel intuitive and function without the clutter of resizing, reloading, zooming, and panning. This way, your website is a clean, inviting surface for users to engage with.
According to Trighton Interactive CEO Jody Resnick, RWD is a space to watch in 2013. “With a responsive website, businesses can be in front of consumers at every step of their online journey. People who search for a business’ site begin reading content and viewing videos from their desktop computers at work, and then look for the same business on their smartphones… to continue their research into products and services uninterrupted. In contrast, if the business has a traditional website and a mobile site, someone investigating products and services online can become frustrated by the lack of complete content on the mobile site or the inability to navigate through the full site on her smartphone. She might give up the search altogether.”
The problem? You never know which devices your users are using – so your website has to adapt. Some devices allow for touch screen swiping, which content-oriented websites can leverage to present information, making their product more interactive and engaging. Clunky, slow-loading sites discourage user interaction and retention. With RWD, your website will seamlessly adapt itself to individual users’ devices and habits.
The RWD approach harnesses 4 key development elements to present clean, interactive pages:
- The fluid grid – This design approach sizes page elements relative to one another, on a grid pattern, rather than in absolute terms. This relative sizing allows sites to quickly and cleanly load their page elements and minimizes the need for users to pan and scroll to reach your content.
- Flexible images – Following in the fluid grid pattern, flexible images are sized relatively, which keeps them from overpowering pages and displaying outside their element.
- Server-side components (RESS) – To deliver richer functionality and faster loading, server-side components are employed alongside device-side components.
- Media queries – Depending on the device in use, your website will use different CSS style rules to display the page.
These elements of development come together to allow users to interact on web and mobile platforms across devices without a second thought. Resnick also points out that beyond simplifying user experiences, RWD streamlines companies’ marketing regimens. “Responsive websites simplify internet marketing and SEO. Instead of having to develop and manage content for multiple websites, businesses with responsive sites can take a unified approach to content management because they have only the one responsive site to manage. The same applies to analytics and strategy development and deployment. A responsive website means there is only one set of analytics to examine and a single strategy to develop and deploy. In addition, responsive websites are easier for consumers to find than traditional or mobile sites because they come up higher in search engines’ rankings.”
Responsive design was listed as #2 in Top Web Design Trends for 2012 by [.net magazine] after progressive enhancement at #1. They also listed 20 of Ethan Marcotte’s favourite responsive sites.