Responsive web design: The ultimate guide
Verica Rosic, August 23, 2022· Presentation Design
We encounter Responsive Web Design countless times every day without realising it. Our own website, the email client for work and the news app on our smartphone are just a few examples. How to create a Responsive Website and what you should consider are questions that we as a web design agency want to address in this blog post.
Content
What is Responsive Web Design?
Responsive web design is a technique for making a website, app or other software look appealing on all devices. Responsive web design takes into account the different screen sizes and ensures a consistent appearance for all users, so that your brand is always recognised everywhere.
Unlike Adaptive Web Design, Responsive Web Design is responsive to change, which brings more complexity but also coverage. We will go into more detail about the difference between adaptive and responsive web design later.
Why is Responsive Design important?
Smartphones, tablets, laptops, desktop screens, portrait and landscape – there are countless dimensions of end devices that your website or app must serve in order to achieve optimal success. Responsive design is the key to ensuring that your design works and convinces in all dimensions.
But the users are only one aspect, because a website or app that has been designed with responsive design is also rewarded in the area of SEO. The search engine crawlers should behave like humans and if a design breaks, i.e. everything is shifted and overlapping, then the crawler also has trouble understanding what it is all about.
Optimisation for mobile use
About 60 percent of internet visitors use a smartphone. This means that you will miss out on more than half of your potential customers if you don’t have a responsive design.
So make sure that your website is optimised for smartphones and that visitors can interact with your website without hindrance.
Benefit of Responsive Design
The benefit of Responsive Web Design is clearly in the user experience of your website. You want to offer the same experience to all users in order to achieve maximum success. For that, you need a website that offers just that – and for that you need responsive design. Responsive web design is a trend that is here to stay and should not be ignored.
When is a website considered responsive?
We speak of a responsive website as soon as the individual elements of the website or the structure in general change with the size of the screen. An image that appears first next to the text and then above it or a collapsible navigation bar are among the classic examples.
How to create a responsive website?
The question of Responsive Web Design and how to implement it correctly in your own website has a lot to do with how your website is set up. Do you work with a CMS, a website tool like WordPress or Wix or have you coded your website entirely yourself? Depending on the tool or technique, a responsive website is closer or further away.
If you work with a tool like WordPress or Wix, you make life easy for yourself. These website builders have built-in functions that make your website look good on all screens. You still have to define exactly how you want it to look, but you can leave the technical aspect completely out of it. If you don’t want to define the order of every image-text combination for small screens like those of smartphones, you can work with templates. The templates provide you with structures for all devices so that you only have to worry about the design.
If you do it yourself, your responsive website will require more work. The first tip is to always work with a mobile-first approach. So create your website for smartphone users first. Once you have that, start optimising for larger screens. Once you have decided on this option, the CSS framework will be your constant companion, as it allows you to cover everything about Responsive Web Design. Nevertheless, there are still a few general sources of error that you should be aware of:
Don’t use Flash
The Flash Player was dropped from popular browsers at the end of 2020 because Adobe, as announced, discontinued support for the Flash Player. So make sure you keep up with the times and do not install outdated systems.
Fixed widths
For images or other graphic elements, you need to show an eye for detail. Should a graphic take up 90 or 85 per cent of the screen width? At what point is it no longer legible? If you have this under control, your users will thank you. But what you definitely have to leave out are fixed widths. If you say that an image should be exactly 500 pixels wide, then the browser will do exactly that. For smartphones, a width between 360 and 414 pixels is common. Perhaps you can already see where the problem arises: The browser used now displays a 500-pixel-wide image on a 414-pixel-wide smartphone, which means that part of the image cannot be seen.
Serve the differences in size
If you code your website yourself, you can use different techniques to serve all screen sizes and thus secure your presence. It is important that your website offers the same functionality and overview for all users in order not to lose potential customers.
The first technique deals with the size of objects. Here we are not only talking about images and graphics, but also about containers for texts or headlines. Everything must be clearly defined and this definition should also be cleverly chosen in the context of Responsive Web Design. For example, the size should be adapted to the screen width and height, i.e. it should increase or decrease dynamically.
Another technique concerns the use of tables. We don’t mean an Excel spreadsheet here, but a table structure for your website. You divide your entire page into cells so that you end up with a clearly structured page. Once divided into cells, the adaptation to different screen sizes happens almost automatically. Over time, frameworks such as “flexbox” and “grid” have proven to be particularly effective and intuitive.
By far the most important technique is to test your responsive websites. Use different devices with different screen sizes to achieve maximum coverage. Your goal is to minimise the errors and problems that usually occur after going live.
Bringing Fluid Images into Use
Fluid images are a very useful discovery that has simplified the lives of some developers. Fluid images are dynamic images. As discussed earlier, the cells that make up your website should adapt to the screen size of the end device. In today’s world, this can mean that your website is viewed on an ultra-wide monitor with a width of 3840 pixels. This brings some designs to their limits because they were not designed for such a width. The trick here is either to choose a design that can cope with these widths or to set a maximum width that cannot be exceeded. Then the whole ultra-wide monitor would not be used, but everything remains clear.
Back to the dynamic images: This setting of maximum or minimum widths or heights is often used with pictures and graphics. With this you can prevent an image from becoming too large when the quality reaches its limit, or you can prevent a graphic from becoming too small and the content no longer legible or recognisable.
Use media queries
Even though new smartphones with new sizes appear every year, there is a clear division of screen sizes. We always talk about the width, as this is decisive for the design. The height is also relevant, but it can be enlarged indefinitely by scrolling and swiping:
360 to 480 pixels: Smartphones
481 to 768 pixels: Tablets
769 to 1024 pixels: Small laptop screens
1025 to 1600 pixels: Desktop screens
1601 and more pixels: Ultra-wide monitors, HD monitors and smart TVs
This division is helpful for developers because it allows them to define so-called breakpoints and adapt their responsive design for them. A breakpoint is a certain screen size at which the website must undergo a structural change. For example, there is a commonly used breakpoint at 480 pixels. This means that the website will look different for a width of less than 480 pixels than for a width of more than 480 pixels. With these breakpoints you can make sure that you can cover all common screen sizes.
Adaptive and responsives Design
In the context of Responsive Web Design, the term Adaptive Web Design is also sometimes used. Let us now take a look at where the difference lies.
As we have already discussed, responsive design reacts to changes. We ensure this by working with the screen sizes of the end device when we create the website, or more precisely, the sizes of our objects. This way our website continuously adapts and with breakpoints we change the structure to serve the different devices.
Now to adaptive design. Adaptive web design does not react, but adapts. This means that with an adaptive design we don’t aim for continuous changes, but we choose some specific sizes and optimise our website for these sizes. This optimisation works in such a way that we design a separate version of our website for each size and when a user comes to our website, the version that corresponds to the screen size of the end device used is loaded. Classically, adaptive web design works with three versions: Mobile, Tablet and Desktop. These cover the vast majority of end devices and as a developer you can create three static, fixed versions instead of one version that has to be retested for every change.
Adaptive web design was the absolute favourite especially in the young years of the internet and the beginning of smartphones. But with time and new technologies came the possibility of Responsive Web Design. Quickly, Adaptive Web Design became obsolete and today it is extremely rare to find it. The problem with Adaptive Web Design is that with newer and newer devices and screen sizes, you always have to adapt your versions as well, because a small tablet might get the smartphone version of your website or a big smartphone might land on the tablet version. In both cases, the experience is disrupted and potential customers are lost. Responsive web design adds a lot more complexity, but now the frameworks and other tools support us no end, so the complexity goes away again.
If you have to make a decision when creating your website, we always tend towards responsive design.
Examples of responsive design
Responsive web design is everywhere. This page here, where you are reading the blog entry, is also responsive to screen size. If you are at the computer, you can make the browser window narrower and wider and see what happens.
In general, if you are at the computer, you can and should examine the websites you visit. Make the window wider and narrower or lower and higher and see what changes.
The absolute classic for Responsive Web Design is the burger menu. On any good website, there is a navigation bar at the top that we can use to navigate the website. There may be many sub-pages, categories or topics listed in this navigation bar. If someone comes with a small screen size, then this bar would have to be maybe 4 or five lines high, which is not good for the overview, because we want to see the content of the website and yet always have the option to navigate to another page. This is where the burger menu comes in. On small screens, the navigation bar is collapsed and all we see is a bar with a symbol with three horizontal lines above it. If we tap on this symbol, the navigation bar opens and we can see everything again. If you are on this page with your smartphone, you will already see the burger menu. If you are on the computer, make the browser window narrower so that the burger menu appears. Why the burger menu? The three horizontal lines one above the other are reminiscent of the simplest burger: bun-burger-bun.
Responsive Design – Summary
Responsive web design is here to stay as long as there are different and new screen sizes. This means that it is here to stay in the near future. What may change, however, is access. New tools and frameworks are constantly working to take work away from us and make our lives easier.
So whether you’re coding your website, app or software yourself or working with developer tools or CMSs, always keep responsive design in mind.In the post, we’ve often talked about images and graphics, which must and should remain uncluttered. But this also applies to videos. You want your visitors to be able to access your content without any problems. At E-Learnings, we work exactly according to this principle and deliver the optimal experience for all devices.