Responsive design is a style of site design that causes pages to adapt to screen size and display. Responsive websites are adaptive and work similarly across mobile, tablet, and desktop devices.
A responsive site only has one URL that loads a single HTML, using CSS and media queries to format the layout around determined breakpoints. Breakpoints cause your website content organization to adjust based on screen and display width.
Breakpoints should always be based on content, never on specific devices, products, or brands. Google’s recommended approach to defining major breakpoints is to start small, designing for the smallest device first.
Responsive design is ideal for SEO, because its single URL retains its link juice across all devices. It’s also ideal for content management, since you only have to manage one website worth of content for all devices.
How a static website works
When websites were first built they really only accessible by computers with smaller screens using modems to connect to the internet. Websites were built as if you were printing something – the paper size was fixed and once printed it didn’t change. If your screen was smaller or larger? It was just like printing on a different sized piece of paper – the site just got bigger or smaller without changing.
The benefits and challenges of responsive design
Additional time / resources upfront
Responsive design does require additional time to design and perfect the user experience but this additional time is far outweighed by the fact that you are then building a single website for all devices. The other benefit is that responsive techniques allow you to build for a range of screen sizes and not just one or two. This means you can have a layout that changes for a mobile, tablet, small desktop, larger desktop and just about any device that might visit.
This has completely changed the way we look at browsing the internet and is incredibly important when some sites are viewed more often on a device that isn’t a desktop.
Sometimes having trade-offs for speed or per-device optimisation
Responsive design like any other part of building websites has to be built within a certain budget and deadline. This means that certain trade-offs exist. This means that although responsive sites are great – they are not necessarily perfect in every situation. A common issue with poorly built or cheaper sites is that images are not optimised for different devices. This means that if you uploaded a larger image size that is a few megabytes, that might be the same image used on a smaller screen that will download the whole image and simply shrink it down. This leads to poor speed on mobile data connections.
Another thing to be aware of is the increasing number of devices being released with unusual screen technologies. Smartwatches, foldable screens and unusual shaped screens. These create exciting opportunities for a developer to get creative but they can also mean that a responsive website may still not look its best in some cases.
There are many different ways to overcome these challenges and your web agency or developer should be able to advise you on the best way to achieve this.
Using specialised techniques such as SVG
The increasing need for better responsive technologies has led to benefits that go beyond simply screen size. The rise of the use of SVG instead of traditional JPG or PNG images is a good example. An SVG is an alternative to standard images for computer generated imagery. The benefit is that file sizes or fractions of standard imagery with the added benefit that the image can scale without pixelation to any size.
New techniques and technologies are being developed all the time. If you would like to know how some of these technologies could benefit your website, your customers and potentially optimise your website then please do reach out.