Responsive web design expresses a creative and technical paradigm of developing websites in such a way that they can adapt to the visual and haptic possibilities of the end device. The main reason for responsive web design is to arrange the page elements optimally for each end device or screen size in order to achieve the highest possible usability.
How can I tell if a website is "responsive"?
On the one hand, you can access a web address via various devices (your computer, laptop, tablet or smartphone) and will be able to see whether something has changed in the layout or display. It is easier if you make the browser window on your computer narrower:
This is the desktop view of our arocom.de website. The multi-column structure gives the content enough space to work within the screen section.
You will have this view on a smaller screen, such as a tablet. The biggest differences are in the navigation and the header image. The navigation no longer extends across the entire width of the content, but has given way to an icon. This contains all menu items in a list, making them easier to reach. The smaller screen would make it more difficult to click on a menu item in the horizontal navigation.
And finally, here you can see the view on the screen size of a smartphone. The most obvious difference is the arrangement of the individual elements: "The agency for your Drupal project" is no longer to the left of "Web design, theming & templating with Drupal", but as a block above it.
Why should my website be "responsive"?
The user behavior of Internet users has been changing strongly towards mobile for years. Many people have smartphones or tablets that they use to surf on the go. The German Association for the Digital Economy (BVDW), together with Google and TNS Infratest, has published a study on the use of mobile devices. According to this study, the number of smartphone users increased by 25% between 2013 and 2014. 54% of all users state that they use the internet more often since they have a smartphone. The trend continues to rise and you should follow it.
Because if a smartphone user arrives at a website that is not "mobile friendly", i.e. not optimized for mobile devices, there is a high probability that they will leave the website immediately.(We explainwhat mobile friendly means and what you need to bear in mind in our blog)
This means that the website must be suitable for mobile devices with smaller screens. If you look at the common screen resolutions of the various end devices, you can see a big difference:
Smartphones:
320px to 767px
Tablets:
768px to 1023px
Computer desktop:
1024px+
In addition, smartphones and tablets can be held in portrait and landscape format, which changes the width of the screen.
You could theoretically create a special website for all screen sizes. Some mobile websites have such an address, for example:
http://m.seite.dewhere the "m." stands for "mobile". However, this means double the maintenance work for you, as these are two physically different websites.
Responsive web design, on the other hand, is programmed in such a way that the content adapts to the screen size and other factors (see below).
How do I technically implement responsive web design?
Web technologies such as HTML and CSS form the technical basis for responsive web design. There are basically two ways to make websites responsive. Firstly, you can create separate CSS files for each screen resolution, which are then linked in the header of the HTML page. Wikipedia.org shows the following example:
The code states that there is one CSS for all devices (css/all.css), but that the smartphone CSS should be used for a device below 480px screen resolution (css/smartphone.css).
Another option is to enter so-called "media queries" directly in the main CSS. This first defines how a property (here text size) should be in principle and then this property is adjusted according to the screen resolution:
/* Basic property of the normal text
in the body: Text has font size 14px. */
body {
font-size: 14px;
}
/* For all screen resolutions between 768px
and 1023px the text should have a font size of 17px. */
@media min-device-width: 768px and
max-device-width: 1023px{
body {
font-size: 17px;
}
}
/* For all screen resolutions between 1024px
and 1919px the text should have a font size of 20px. */
@media min-device-width: 1024px and
max-device-width: 1919px {
body {
font-size: 20px;
}
}The difference between these two methods lies in how the browser retrieves the CSS files from the server: With method 1, only the CSS file that matches the device used is loaded (e.g. only smartphone.css for a smartphone). This saves loading time, as all other, irrelevant CSS commands do not have to be loaded. The second method, however, offers a better overview if programmed properly.
If you would like to learn HTML and CSS, we can recommend https://wiki.selfhtml.org/wiki/CSS.
What does responsive web design have to do with SEO?
As mentioned above, the number of mobile devices - and their use - is increasing. You should not lag behind this trend, but also design your website to be "mobile friendly". In November 2015, Google published the "Google Quality Rater Guidelines", which provide great insight into what Google considers to be a mobile-optimized website. This includes, among other things, links being easy to click on with a finger and text being easy to read on a small screen. Recently, these characteristics for mobile websites have also been added to Google's "open" ranking factors.
Search engines always want to provide their users with the best results. If there are two alternatives with the same relevance, the page that is easier to use will deliver the greater added value. Irrespective of this, the visual appearance plays an important role. Here are two more examples:
On www.heise.de (first image), the smartphone user has to zoom in to read the content, whereas on t3n.de (second image) it is easy to read. Although heise has a mobile site m.heise.de (third image), the aforementioned problem of double maintenance applies here. In addition, screen sizes will also vary later on. Instead of building a new page every time, you should rather rely on responsive web design, because the adjustments are easily done here.
Further references:
https://de.wikipedia.org/wiki/Responsive_Webdesign
http://www.responsive-webdesign.mobi/was-ist-responsive-webdesign/
The following video goes into more detail about what responsive web design is:
Responsive web design
As a Drupal agency, we know how important mobile-friendly websites are. That's why all our web projects are optimized for all screen sizes.
Book tips
