Nowadays the internet can be accessed by a large variety of devices. These range from mobile phones and tablets all the way up to large desktop screens.
Screen sizes for these devices vary widely, from about 320px for mobile devices to 1600px (and up) for desktop screens. This is a massive spread of sizes and one design will not fit all.
A responsive website will make use of a flexible layout to manage the content of a website and to fit to the device showing it. This is done via something called a media query. A media query is targeted to a specific size range, for example it can check if the size is less than 480px in width. All the styles within the media query will be active if the width of the device matches this criteria. These styles can reduce the size of text and images, and can even hide elements altogether if they are not required at all.
There are two basic forms of Responsive Websites: Fluid and Adaptive.
Fluid Responsive Websites
Fluid Responsive sites will stretch the content regardless of the size of the device. This is generally done by expressing the layout in percentage widths. If the website has three columns, the left and right columns could be 20% in width while the center column would take up the remaining 60%. Regardless of the size of the screen, this layout would also show content in the available screen space.
While this is a nice approach to responsive development, it does take longer to perfect than the Adaptive approach as virtually every screen size needs to be fully tested.
The media queries can also change the look of the layout at smaller screen sizes. In the above example, we would change it so the columns would stack instead - making it easier to read the content.
Adaptive Responsive Websites
An Adaptive website will have a set number of breakpoints for its media queries. Whilst the Fluid method always stretches to meet the available space, an Adaptive site will show a fixed width site that fits within its display. This will mean there may be some space to the left and right of the main content. In some cases this is desirable, and a background image could be displayed.
You can test the responsiveness of a website by changing the size of your browser. Once you move your browser so it will fall into a different adaptive category, the content will snap to the styles specified in that design.
There Is More To Responsive Websites
Changing the layout of the website based on the screen size is not the only function of responsive design. Other considerations need to be taken into account. These include the following (please note that this is not a definitive list):
Navigation: This changes dramatically from mobile to desktop devices.
Images: An image suitable for a desktop will be too much for a mobile device. While the style can change the size of the image it is displaying, the physical size of the image file remains the same. This can cause a delay in downloading the image, as well as increasing the amount of bandwidth required. Separate images need to be available for different media queries.
Retina: Retina devices improve the quality of the images by requiring an image to be double its required size.
Links and Buttons: These need to be checked to ensure they are now suitable for touch devices
Banners and Scrollers: Most people are used to making gestures on their touch devices, so these will need to be incorporated.
Data Tables: These do not display well on smaller sizes, and coming up with a different approach to displaying the data can be very challenging.
Unrequired Content: There may be content that is no longer required on smaller devices.
Responsive is Not a Silver Bullet
Making a website responsive is not a silver bullet for making any website available on mobile devices. There may be elements that cannot be converted to smaller screen sizes. Functionality will need to be tested to ensure it will work on multiple devices.
Just because something is on your website does not mean it should be visible on a mobile or touch device.
Responsive website design and development can be complex. It takes time to develop a good responsive site that meets the needs of the client as well as the visitor.
It also takes longer to test mobile responsive sites, as the number of devices that need to be tested has increased from just the traditional desktop computer, to mobiles, mini tablets, tablets and large screens. There are also multiple devices in each category that will need to be tested (Apple, Android, Windows, Mac, Linux etc).