RWD – or Responsive Web Design
Wondering what a responsive website is? At the outset, it is worth explaining the term RWD (Responsive Web Design). It is a technique of creating websites in such a way that their appearance and layout automatically adjusts to the size of the browser window in which the website is displayed.
As a result, a responsive website is fully functional on both a smartphone screen and a large monitor. There is no need to enlarge or zoom in on any elements. In addition, Google rewards HTML and CSS responsive websites by awarding them a higher ranking in search results.
10 best practices for a responsive website
Find out how to make a good responsive website based on 10 important principles.
Flexibility: must apply to all elements on a responsive page, such as text blocks, graphics, layouts and other components.
Scalable SVG vector graphics: much better suited to creating responsive CSS and HTML pages than standard raster graphics. SVG files automatically change their resolution, so they remain readable regardless of size.
Responsive images: are very important for the page to be displayed correctly on different media. It may be necessary to automatically resize and crop them. For example, square graphics work best on mobile devices.
3 basic devices (breakpoints): the website must work correctly on a computer, tablet and phone.
Card interfaces: the automatic layout of UXPin makes it easy to change parameters, as well as copy, paste and move pre-made card sections on the page.
Less content: makes the page easier to use, improves readability and increases page loading speed. In a word – minimalism always works.
Content prioritisation: On a small screen, the user will not see all the elements available on a large monitor. It is therefore necessary to determine which content is the most important and which can be hidden.
Focus on mobile devices: it is a good idea to start designing a responsive website with the smallest (i.e. most demanding) screen sizes.
Large clickable area: buttons need to have a surface area such that they can be pressed comfortably, even on a phone screen.
Competitor research: this is useful in any industry. It is worth checking how the market leaders approach responsive web design.
Find out what else you need to know about RWD web design.
Mobile website vs RWD website
These terms are often confused with each other. What they have in common is that both sites display correctly on mobile devices. However, it is important to know that a mobile website is only for smartphones or tablets (it has a different URL than a website for computers). A RWD site has a single address and adapts to the device on which it is displayed.
Examples of Responsive Websites
Check out examples of 3 well-designed responsive websites
Shopify – some options on the site are hidden when using it on a mobile device. This improves readability. In addition, the menus are split into separate groups, creating ‘two cognitive areas’.
Slack – what catches the eye is the interesting approach to the CTA buttons. In mobile and tablet view, two of them have been replaced by one large one – it takes up almost the entire width of the screen.
Starbucks – the responsive website stands out above all for its simple, static design, which is nevertheless eye-catching (mainly due to the well-chosen colours).
Responsive website – what you need to know
A responsive website is now a must have if you want to meet the expectations of search engine algorithms and, above all, your audience. A well-designed RWD website is equally functional on a small smartphone screen and on a large computer monitor.