Responsive Web Design (RWD)

Responsive Web Design ensures that a website renders correctly and it's usable on any device regardless of its screen size. It's important for a website to be easy to read and navigate on both desktop and mobile devices.

Modern websites adapt to the screen size of the device to make sure it renders correctly and it's usable on desktop, tablet and mobile screens as well. This can be achieved by a fluid layout which responds to the screen width or redirecting the user to a separate mobile site.

Ideally a mobile website has to maintain the design and branding but at the same time must be simplified, not loading too many large images and heavy code which consume mobile data traffic.

Responsive vs. Adaptive Web Design

Adaptive websites detect the user agent of the device that has sent the HTTP request to the server and the server decides what content to send back, depending on the device properties. Some websites operate a separate site, optimized for mobiles and tablet devices that contain smaller images and simplified data. This approach requires to maintain two different websites and a system that is capable to decide what data to send out depending on the user device. Usually the mobile websites are operated on an m subdomain, for example m.ebay.com.

Responsive web design sends the same HTML content to all devices but there are conditional style elements which apply only for certain screen resolutions. The conditional CSS3 properties are called media queries. Responsive web sites have to adjust images, iframes and videos maintaining the aspect ratio and providing usability on all screen sizes. You can test the responsiveness of the current website on a desktop dragging the browser window and shrinking down to a mobile width. If the site responds to the new size and the vertical scrollbar doesn't show up, that means it is responsive.

Mobile-Friendly Test

Google has its own mobile-friendly validator which analizes any website and lets you know if there's something wrong with the submitted URL: www.google.com/webmasters/tools/mobile-friendly