How do I do Responsive Web Design

Convert website to responsive design

More and more users visit websites with their smartphones, tablets or other devices with a small display. The trend is likely to continue and further device classes with a wide variety of displays will be added in the future, e.g. wearable devices. Responsive web design offers one way of providing these visitors with acceptable websites. Some advantages and disadvantages of this method are described under responsive web design. If you have decided to make the website responsive, you should plan it carefully so that the transition goes as smoothly as possible. It can happen that on the one hand the effort is underestimated and on the other hand undesirable effects suddenly emerge during the changeover that were not taken into account in advance.

From experience it can be said that the effort can range from a few hours to several weeks or even months. Depending on how the website was set up in the past and what content is available on a website. For example, if a website has grown over the years and a variety of techniques have been used that are difficult to implement with responsive design, then a lot more effort is certainly required than if you only have a few websites that are also compatible with responsive designs. For example, it is difficult to reasonably display large, wide tables on small displays. If you have many tables, it may be necessary to adapt the code for the tables on the pages so that they can at least be displayed in an acceptable manner on small displays. A few points to consider if you want to convert your website to responsive design.

Technical aids

General information on HTML, CSS and JavaScript codes

Content design

The topics mentioned are described in more detail on the respective pages. The following is a quick overview of the topics with sample codes and no further explanation. Comments within / * ... * / are CSS comments.

META specification for the viewport

CSS styles inline, in one or more files

With XHTML, the LINK tag must be terminated with .. "/>.

Define parameters for media queries

Mobile first or desktop first

Example CSS code for Mobile first (mostly recommended).

Sample code for desktop first.

Example CSS code for breakpoints from 768 pixels.

There are many options for navigation. JavaScript is often used to show and hide the menu. An example with CSS, JavaScript and HTML code for a simple toggle menu. The link to show and hide is only visible below 768 pixels. To test the code, it is sufficient to reduce the size of the browser window.

Images for the design (header, logo, background images, etc.)

If you convert the website to responsive design, you usually have to edit the images for the design (header, logo, background images, etc.) and provide them several times in different sizes. For example, you often cannot insert large headers or logos on small displays. On large monitors, on the other hand, there is a risk that the layout will not look appealing with small images. Depending on the size, different background images can be displayed.

The following code can also be used for images with flowing text.

So that smaller images are not enlarged to 100% in Firefox, you can add the styles float: left; to the containers in which the images are placed. or float: right; assign and clear the text with clear: both; place underneath anyway.

Image galleries are usually designed for large widths and have fixed width specifications. This could make it difficult to use for responsive designs. There is no standard procedure here. Either you reprogram the picture gallery or use one that is based on responsive design, e.g. Flexslider. But here too, adjustments are usually necessary, depending on various factors.

With some tags, the text is not automatically wrapped by default if the text is wider than the visible area. This is the case with hyperlinks, for example. You can specify the text break in such cases.

Sample code for hyperlinks

In some cases it may be desirable that the text is not wrapped when space is limited, but that scroll bars are displayed. This is useful, for example, with pre-formatted texts that are placed in the PRE tag and with which codes are often displayed. If you were to let the texts break automatically, the code could look illegible.

Example code for pre-formatted texts (PRE tag)

Elements with fixed width specifications

All elements with fixed widths can generally lead to undesirable effects with responsive design and you should work without fixed widths if possible. Instead, you could use e.g. with maximum specifications (max-width: ...; or max-height: ...;), so that a certain flexibility is available. Sometimes you also have to remove the fixed width specifications so that they are compatible with responsive design or they no longer have any effect because they are overwritten by CSS. There is no specific scheme and you have to test the individual websites with the respective content and settings on different display sizes.

Sample code for tables to automatically display scroll bars

These CSS settings can lead to the fixed specifications for the table widths being canceled. In addition, scroll bars are automatically displayed if the available space is not sufficient.

Fallback when using JavaScript

JavaScript code is used in many places, especially in connection with responsive design. You should always keep in mind that a website should also work without JavaScript. For example, search engine bots cannot necessarily execute JavaScript code and there are users who have disabled JavaScript in their browser for various reasons (even if the number of them is small). Under certain circumstances, this could lead to content not being taken into account or displayed as desired, e.g. if you press display: none; hides the container and provides JavaScript for the display.

The same applies to picture galleries. For example, the container in which the picture gallery is placed is often indicated with display: none; initially hidden. This prevents the container from becoming very large when the code is loaded. The size of the container is only set to a certain level through JavaScript. You could also use display: none; do without and implement the limitation of the height with JavaScript. This means that users without JavaScript enabled and search engine bots that do not understand JavaScript can still see all the images.

Tables with a lot of content are also elements where JavaScript is often used so that wide tables can be meaningfully displayed on small displays, e.g. with a scroll function with which individual columns can be shown and hidden. When developing such solutions, one should look at the table on small and large displays even without activated JavaScript and consider a fallback.

Conclusion

As you can see, the effort involved in converting a website to responsive design can be very large. It is usually not enough to just change the CSS files. Often the content also has to be adapted so that it is compatible with responsive designs, e.g. removing fixed widths from the elements. The codes mentioned should only be considered as examples of the most important and frequently performed tasks. Every internet project is individual and it may well be that one or the other code does not fit and another solution has to be found.