Making simple structured website responsive

Let’s consider our simple case with most common tasks.  https://rts.support  website is built on Drupal CMS with custom built theme and standard templates. As you see in header we have elements like logo, title, slogan, search tool, log in and registration tools and in body we have menu and block elements. While making responsive all these components should comfortably fit in the viewport of different devices. This means that the website template may look differently on various devices. Otherwise, proportionate minimization of the visible area may result distortion of appearance.

As it's seen from desktop version of website, the search form and search button are placed separately and occupy large space which is intolerable in responsive version. So, we decided to combine this two in one block and make it expandable. Here is an optimal solution which will ensure the functionality of mentioned requirements. 

One of the most common tasks is the transformation of table arranged horizontal menu into dropdown menu. This will let your new menu to fit in viewport. This task become almost obligatory for any responsive website. We made it by providing switching option with a toggler button (☰) which activates or deactivates our new responsive menu by clicking on it.

In different pages of website there can be tables with the structure of multiple columns. Horizontal positioning of these columns will hinder the work with the included data or cause reading discomfort. That's why the only solution is to put the table into the container element and enable horizontal scrollbar for mobile browsers.

Another common fault we face while making responsive website is that the desctop version logo is not made in vector. In this case we prepared different sized logotype images for various breakpoints (device widths) and used them with the help of media querries.

Let's observe these tasks in detailed.