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
5 years ago
Application-Development
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
close

on 19th February 2010 / by webmaster
While designing fixed width layouts it is advantageous to use percentage based width for inner co Application Development HTML CSS Leave a reply Your email address will not be published. Required fields are marked * canl? tv izle (not verified) access_time 24 May 2020 - 10:30 Good work! Your post/article is an excellent example of why I keep comming back to read your excellent quality content that is forever updated. Thank you! This beautiful and informative article, thank you very much. Use this page to your friend told you. I am constantly followed. Pete (not verified) access_time 24 May 2020 - 10:30 Thanks for the tip! it was really helpful to my term paper, since I also encountered the same issue, thanks again and kudos! Larah (not verified) access_time 24 May 2020 - 10:30 We needed a modern day PT boat but got instead gold plated flaming datums. Buy some Visby Corvettes, and then fire or retire everyone involved with this waste of time and treasure. Mikkie (not verified) access_time 24 May 2020 - 10:30 Excellent post.The post is written in very a good manner and it entails many useful information for me. I am happy to find your distinguished way of writing the post. Now you make it easy for me to understand and implement the concept, and Mikkie (not verified) access_time 24 May 2020 - 10:30 Excellent post.The post is written in very a good manner and it entails many useful information for me. I am happy to find your distinguished way of writing the post. Now you make it easy for me to understand and implement the concept and Pagination Current page 1 Page 2 Page 3 Next page Next › Last page Last » Add new comment
/themes/custom/zyxpro_light/images/placeholder.png
close

on 26th September 2012 / by webmaster
Although the Drupal core provides all the basic functionality to run a website you need to have additional contrib modules installed to extract the full capabilities of Drupal. Here are 18 essential modules we have come up with for building a simple Drupal site. You might also find our list of the Top Drupal SEO modules and Top Drupal 6 modules to be of help. Contact us to get professional help to build your Drupal website. Drupal Theming and Drupal Migration are just two of the legion of Drupal services we have on offer. Application Development Drupal Technical Drupal Modules 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.