What we mean when saying “responsive” in web design
https://www.zyxware.com/sites/default/files/styles/user_image/public/default_images/index.png?itok=2YmREnrP
BY aby.va
4 years ago
Responsive-Design
0 comments comment

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 ARTICLE

/themes/custom/zyxpro_light/images/placeholder.png
more_horiz
close

on 23rd May 2013 / by tintu.manuel
Nowadays we can easily access internet in different devices such as mobile, tablet etc. So its necessary to make a website compatible with popular devices like iPhone, iPad etc. In Drupal, we have a simple method to make a website adapt to different devices. In this method we can convert a normal theme to responsive theme easily. To get this we have to modify the .info file and add the media query stylesheets in .info file. We will also have to add the responsive style rules to the separate media query stylesheets Drupal Drupal Theming Responsive Design Leave a reply Your email address will not be published. Required fields are marked *
Leave a reply
Your email address will not be published. Required fields are marked *

Filtered HTML

  • Web page addresses and email addresses turn into links automatically.
  • Allowed HTML tags: <a href hreflang> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol start type='1 A I'> <li> <dl> <dt> <dd> <h2 id='jump-*'> <h3 id> <h4 id> <h5 id> <h6 id>
  • Lines and paragraphs break automatically.
The content of this field is kept private and will not be shown publicly.
CAPTCHA This question is for testing whether or not you are a human visitor and to prevent automated spam submissions.