Adaptive Web Design

Adaptive Web Design

“Adaptive web design “to mean adapt your website for specified sizes, I recommended this for existing websites. Site with lots of users and lacking the resources to start from the ground up responsively. But Im not saying this only for existing websites, It is wonderful technology to make our site to responsive.

  • media queries
  • CSS
  • javascript or jquery

Layout:

max-width: 0px = css.css
max-width: 480px = 480.css
max-width: 760px = 720.css
max-width: 980px = 960.css
max-width: 1280px = 1200.css
max-width:1600px = 1560.css
max-width:1940px = 1920.css
max-width:2540px = 2520.css

Responsive Web Design allows your websites to fit the screen, This is the time for smartphones and iPads, all browsing websites is not limited to standard computers. Now people are browsing websites through mobiles and their smartphones and tablets.

Fluid Layouts

Fluid or elastic layouts allow your site’s content to grow and shrink to fit the screen,

Not all layouts work at all sizes.

Media Queries for Responsive Websites

Media queries are takes a design from fluid to truly responsive. we can use media query is attribute of <link .../> style sheet, also CSS3 introduced the concept of using a query’s as styles from same embedded external style sheet.

Here the simple Query used in tag

Here Query CSS tag for full Media Query website like this,


Media queries allows cascading style sheets to check for the conditions of particular media features when utilized by a device. This allows for a just one style sheet to contain multiple styles and allow for responsive layouts.Separate styles for multiple devices can be stored in just one single style sheet.The demo for the responsive design….. just resize browser with this pagesame style sheet Media queries like this,



With the release of devices such as the iPad, and a recent increase in the reputation of browsing the web on your mobile phone, 2012 is almost certainly going to see the creation of many more responsive web designs. By utilising this simple technique, it is possible to design a more compatible, more ergonomic website that will look great and function brilliantly on any device.

The prospective that media queries hold is tremendous, and with their help, web developers are now far better equipped for the future. If there was ever a good time to learn more on media queries and how to utilise them effectively, that time is now.