Application Development

What we mean when saying “responsive” in web design

Aby.va | | 1 min read

Responsive web design is a new technique for building websites that work on tablets, desktop screens and mobile devices. websites were typically designed for desktop and laptop screen resolutions. This worked well until the advent of web supported tablets and smart phones. Responsive Web Design is a new concept which leads to design an application or website in such a way that the same design can be rendered in various devices of different orientations and screen sizes providing the users with the super possible user experience, if not similar.

Responsive themeing involves three main principles that come together to form the whole that is responsive design.

  • Fluid Grids
  • Fluid Images
  • Media Queries

1.Fluid Grids
Normally, websites have been defined in terms of pixels. For find the transition to using percentages there’s a simple math formula that looks like this:

target / context = result
From this, we can say that you have a website that has a wrapper containing the site to a width of 960 pixels, and you’re looking at this site in a maximized browser window on a screen that’s 1920 pixels wide.

960px / 1920px = 50%

2.Fluid Images
There is many advances in responsive images , but the main idea is that images should be able to shrink within the confines of a fluid grid. This is done very simply with a single line of CSS code:

img { max-width: 100%; }

3.Media Queries

Take original two column layout and try to shrink it down to a mobile phone, it’s a challenging one. Typically smartphones are used in the screen is taller than it is wide like portrait mode. This tends itself to websites that scroll vertically, but it is not good for wide layouts with several columns. That’s where media queries come in. Media queries are a CSS technology that have been available in browsers for several years now, and they’re a core component of responsive design. Media queries allow CSS to only be applied when specific conditions are met.

The trick of responsive design is CSS3 media query. It is same as if conditions to tell the browser how to render the page for specified viewport width.

For example, If the browser reaches a specific width and write a media query that will only applies CSS. That means that when a design is too small or too large , a media query used for detect the site width and serve CSS that appropriately Correct the site’s content.


@media screen and (min-width: 600px) { /* ...tablet styles here... */ }
@media screen and (min-width: 900px) { /* ...desktop styles here... */ }

The main purpose of the media queries of for specified viewport width is to apply different CSS rules to achieve different layouts. The media queries can be in a separate file or in the same stylesheet.

Reference:drupal.org/project/media_responsive_theme

 

 

Related Topics