Making simple structured website responsive

Let’s consider our simple case with most common tasks.  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 fit comfortably in viewport of different devices. This means that the template on various devices may look differently, otherwise, proportionate minimization of layout may result distortion of appearance.

While making responsive, first, it should be set up the viewport. Main three concepts responsible for RWD are fluid grids, flexible images and media queries which provide unique customized layout for various devices (even depending vertical or horizontal viewing). First two are responsible for presenting page element (containers) dimensions in relative measures (percentages) instead of absolute units like pixels thus optimally fitting containers on the screen. Media queries are set conditions making a block to inherit desired CSS properties thus making web page to be displayed according to appropriate device viewport.

After setting the viewport we noticed that search form and search button which are placed separately in desctop version occupy large space in mobile version. So, we decided to combine this two in one block and make it expandable. Here is an optimal solution for you. 

One of the most common tasks which become almost obligatory for any responsive website is transformation of table arranged horizontal menu to fit in viewport. We made it by providing switching option with a toggle button which activates or deactivates our new responsive menu by clicking on it. 

Making simple structured website responsive

Make my existing website responsive - request form

1 Start 2 Complete

If you don't have web development skills, just fill in the form below. Our specialists will make your website responsive.