Usability

RESPON-SIVE WEB DESIGN

What is the idea of Web Responsive Design?

Responsive Web Design is a concept of designing the website in the way that allows to adapt its layout and structure to the screen resolution of the device on which it is displayed by the user, including desktop computers, laptops, tablets or smartphones.  

The name ‘responsive’ is based on the idea that the website should actively respond to the user’s behavior and environment in which he is entering it - device, operating system, orientation of the device, browser. Simply, regardless the device and behavior of the user, the website looks and can be used in a proper way. 

Responsive Web Design - Checkout Process

How to create a design in Web Responsive Design concept?

The Responsive Design requires a specific design process, in which the idea Mobile First should be respected. The first step for the web designer is to create a website layout for the smallest screens, in this case smartphones. This assures that the most important elements of the website structure are identified and designed in the most accessible, readable and user-friendly way. Then, the designer should specify the breakpoints that are defined by device width and resolution and are declared by Media Queries. They specify how the website behavior is changing according to the device on which the website is browsed. The number of breakpoints should be discussed between the designer, developer and the client in order to establish the best possible range of them to assure the proper website display on each device. 


How to build a Web Responsive Design website?

In order to achieve the goal, specific Media Queries are used that recognize the size of the browser and implement the right declaration blocks.
 .search{
    margin-right:auto;
    margin-left:auto;
    width:250px;
    float:none;
}

@media only screen and (min-width:480px) {
    .search{
		width:230px;
    	height:40px;
    	margin:30px 10px;
    	float:right;
    }
}

@media only screen and (min-width:992px) {
    .search{
        margin:20px 10px;
    }
}
List of articles