The era of multi-device is here. It is difficult to find someone who doesn’t own a mobile, which means, a business with internet presence can reach out to any individual in the world. But the question is how to build a website for all devices and all users and the answer lies in responsive web design, or known as RWD.

Responsive Web Design is a technique of building a website suitable to work on any device regardless of it screen size. Responding to the environment, the layout and content will optimize in order to provide an intuitive and gratifying experience for everyone with different devices.

We're separate the tasks to make a new or an existing website responsive into 4 groups:

Choosing strategy
Changing HTML
Responsive theming
Responsive scripting

Changes in the HTML structure

Media Query is a condition declared for browser to include or exclude a set of CSS rules or a separate stylesheet. Read more about Media Queries. There are two methods for CSS declaration with Media Queries: 1. Declare a single stylesheet and include Media Queries into CSS. Here is an example: /*---rules for mobile devices----*/ @media screen and (max-width: 480px) { #wrapper{ width: 320px; min-width: 320px; }
Usually portable device such us mobile phones and tablets has a small screen, so during navigation mobile browser scales the website and fits it to screen. Viewport is a HTML meta tag created to control layout on mobile browsers. Here is a simple example of viewport meta tag:<meta name="viewport" content="width=device-width, initial-scale=1.0">

Responsive theming

There is only one rule: the wrapping element's width should be smaller or equal to viewport's width. Lets consider a particular simple structure: <div id="page"> <div id="wrapper"> .... </div> </div> CSS rules a stylesheet without Media query #page{ width:100%; } Media query: "screen and (max-width: 480px)" #wrapper{ width:320px; /*---the most common mobile viewport width--*/ }

Responsive scripting

Menu is the one of the most important functional parts of the website. We should provide a simple way for to user with mobile device to navigate between pages. The most common method for horizontal menus is switching with a toggle button. User clicks on a toggler (toggle button) which shows menu items.

Make existing website responsive - request form

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