Responsive websites are designed for a range of screen widths. When deciding whether to create a responsive site or separate mobi and desktop sites, consider your customer first:
• How much of your website traffic comes from (specific) mobile devices? If this is a large percentage, consider building a dedicated mobile site. Bear in mind that the popularity of particular mobile devices can change quickly as consumer preferences evolve.
• Do your desktop users have the same goals as your mobile users? If your mobile consumer’s goals are very different, then you may want to consider building a separate mobile site.
• What is your budget and how quickly do you need your website to be built? Responsive websites take longer to build and can be more expensive. You could save money long term by going this route, but there is a sizeable upfront investment.
• Do you have an existing site, and can it be converted into a responsive website, or will it need to be rebuilt (Du Plessis, 2012)? Responsive design comes with a fair bit of terminology, but there are three key concepts with which you should be familiar.
Flexible grid
Typical websites are designed as a large, centred, fixed-width block. With responsive design, the page elements (the heading; the text or copy; the main image; and other blocks of information) are arranged in a grid of columns that have predefined spacing. Each element relates proportionally to the other elements. This allows elements to rearrange or resize in relation to each other whether the screen is tiny or huge and the screen quality is high or low. Although this system allows for flexibility, an extremely narrow screen can cause the design to break down. In this case we can make use of media queries.
Media queries
Media queries are bits of code that allow websites to ask devices for information about themselves. It then selects the website style that will suit the device best from a list of styles defined in a CSS. Media queries ask for information about the device’s browser window size, orientation (landscape or portrait) and screen display quality.
Flexible images
Images are designed to move and scale with the flexible grid. How fast the website loads is an important consideration, so high-quality images are made available for larger screens and lower-resolution images are made available for smaller screens, according to the information received from the media query. Parts of images can also be displayed for smaller screens to maintain image quality. Images can even be hidden completely.
