A responsive website is a single website that adapts to any screen size so it's as easy to use on mobile as it is on tablet and desktop – no pinching or horizontal scrolling required.
The design instinctively adapts to the device it is being viewed on so it looks great on a mobile, tablet and desktop
Responsive web design is a relatively new approach to website design that ensures users have a good viewing experience no matter what type of device they’re using. It’s become increasingly important over the last few years as mobile device ownership has exploded and traditional PC sales have slowed. And now that Google is prioritizing mobile-friendly sites in its search results algorithm, it’s essential to make sure your site is optimized for mobile by using responsive design.
Responsive web design consists of three development principles. To work properly, all three of these need to be implemented:
1. Fluid grids
2. Media queries
3. Flexible images and media
A flexible grid-based layout is the cornerstone of responsive design. It uses relative sizing to fit the content to the device’s screen size. The term “grid” is a little misleading because it’s not necessary to implement any of the available grid frameworks. Instead, CSS is used to position the content. This approach is based on percentages and is a departure from traditional pixel-based design principles. Responsive design moves away from the pixel-based approach because a pixel on one device could be eight pixels on another device. By basing text size, widths, and margins on percentages, a fixed size can be turned into a size relative to its display space.
Media queries, also known as breakpoints, can be used to apply different styles based on the capabilities of the device. The website detects the type of device you’re using or the size of your web browser and correctly displays the page. To see this in action, stretch the window of your web browser to different sizes. Notice how the page adjusts. Features can be used to control the width, height, max-width, max-height, device-height, orientation, aspect ratio, etc.
This feature allows you to adapt images and other media to load differently, depending on the device, either by scaling or using the CSS overflow property.
Scaling in CSS is relatively straightforward—the media element’s max width can be set at 100 percent, and the web browser will make the image shrink and expand depending on its container.
An alternative to scaling media is to crop it with CSS. Applying overflow:hidden allows images to be cropped dynamically so that they fit into their containers.
Choosing to adopt responsive web design in your development isn’t a decision to be taken lightly, especially for existing web properties. Because Google prioritizes a site’s mobile viewing experience into the factors in its SEO algorithm, responsive design isn’t a choice—it’s essential if you want your site to be visible in search results.
A responsive website is one that responds (or changes) based on the needs of the users and the device (mobile device in this example) that they're viewing it on. Here, text and images change from a three-column layout, to a single column display. Unnecessary images are hidden so they don’t interfere or compete with the more important information on the site's smaller display.
If you are on a computer, you can tell if a site is responsive by reducing your browser’s window size from full screen down to very small. If the appearance of the text, images and menu change as you get smaller, the site is responsive.
Key features of responsive websites:
• Dynamic content that changes
• Navigation is condensed
• Optimized images
• Correct padding and spacing
• Reliant on mobile operating systems to function
You can achieve a more customized mobile experience with responsive design. However, it does require expertise, proper planning, and a bit larger budget.
Think about going responsive if:
• A large majority of your web traffic is viewing your site from a mobile device - at least 35 percent
• You have complex site content or features that are difficult to use on a mobile device
• You plan on your website having a longer shelf life and want it to appear up-to-date for longer