Blog

Read our blog posts about various industry news, events, SEO and technology updates and how-tos.

16 September 2015  /  
Technology

Fluid Grids and Media Queries for Responsive Web Design

I am wondering … what kind of device are you using to read this blog? Maybe a desktop or a laptop? Perhaps you have a smartphone in your hand and you are thumbing through on your way somewhere.

Over 25% of internet users browse via a mobile device. Responsive websites provide a better viewing experience across all platforms. It means that companies with responsive websites get more leads, and have a stronger competitive advantage over others without.

What is responsive web design?

Responsive design provides a solution of making the same code across various screen resolutions. If people resize their browser window, they will see the screen elements resize or reposition itself automatically. This is what lies at the core of responsive design – that whatever the screen size, the website is readable with ease.

responsive-design-2

In this article, we talk about two main CSS technology around responsive web design.

Fluid Grids

The first one is fluid grids. Fluid Grids is a solution for a block displayed across different screen widths to provide a more user friendly experience

Here is the traditional CSS code:
 .headertop { width: 910px;}
Responsive web design CSS code using Fluid Grids:
 . headertop { width: 50%;}

With the Fluid Grids, when a layout is squeezed onto a mobile device or stretched across a screen, the element will resize itself depending on other elements around it. However, it does not resize with the traditional / non responsive code.

Media Queries

The second one is media queries. Media Queries works with breakpoints or predefined widths when the website layout will change. An example would be like below:

@media screen and (min-width: 1024px) {
      . headertop {
            width: 50%;
             float: left;
       }
 }
 @media screen and (max-width: 1023px){
             . headertop {
             width: 100%;
             }
 }

This means that when you browse the website on laptop or desktop, this element take 50% width of your screen and stays on the left. However, when you browse this website on mobile device, this element will take full width of your screen.

Responsive web design is no longer just a trend. It is the method of choice for website development. Responsive websites offers amazing user experience for all devices, it is good for SEO, and can help your business always stay ahead of your competitors.

Speak to us about making your website responsive today.