Responsive web design strategies
The use of mobile devices to surf the web continues to grow at an enormous pace, and these devices are often controlled by display size and require a different approach to how content is laid out on the screen.
In order to change the layout based on the size and capabilities of the device. For example, on a phone users would see content shown in a single column view; a tablet might show the same content in two columns.
How to create sites which respond to the needs and capabilities of the device they are viewed on?
Responsive web design is an overall approach to building websites that encompasses web specification standards and flexible design models. The values behind it stems from the desire to make the web accessible to as many devices as possible.
Responsive design ensures that a website displays properly on desktops and mobile devices like smartphones and tablets. This relatively simple idea has spawned an entire generation of frameworks and tools like Bootstrap that automate much of the grunt work involved in designing responsive sites.
How Responsive Design Works?
Responsive design enables us to optimize the presentation of a web page for many devices with a single piece of source code. This allows you to create similar experiences across different devices, or tailor a web page for a specific device.
There are three main technical aspects of responsive web design:
1. Fluid Grids
2. Flexible Media
3. Media Queries
Fluid Grids
Fluid grids enable your design to adapt based on the user’s hardware and software. The main concept behind a fluid (responsive) grid is that the layout adjusts according to the client’s browsing environment.
Flexible Media
Another important part of responsive web design strategies is getting the media to adapt to the browsing environment for instance. Some of the elements on the page may need to be resized, or removed from the display completely for certain devices.
CSS Box Model: Understanding the CSS box model is essential to placing content. This is the official documentation of the box model.
Media Queries
Media queries analyze the user’s viewport size and apply CSS selectively to certain devices. These rules fix some of the layout issues that fluid grids can create.
- Using Media Queries: Mozilla Foundation’s docs on using media queries.
- CSS3 Media Queries: The official CSS3 docs on media queries.