Responsive Design
One of the hottest trends in web design is “responsive design”. This trend is the art of developing web page layouts - and the corresponding code - in such a way that, when the user changes the size of their browser window, the web page updates on-the-fly to optimally display in the “view port” size. View port is a new term designers use because it accounts for not only different desktop browser sizes, but also mobile devices
which all have different fixed screen sizes.
To get an idea of how it works, try visiting the Ghost Horses website on a few different devices. When using a desktop browser, resize the browser window perhaps by making it very narrow. You’ll see, as above show, that the entire page layout reconfigures itself dynamically. You may have noticed their buttons are the examples used earlier to show CSS design possibilities.
What makes responsive design possible is the “media queries” portion of the CSS3 specification. A media query is a CSS code that detects the browser’s size and, based on the information, tells the page to load the appropriate style sheet, for example “widescreen.css” rather than “mobilescreen.css”. These different style sheets contain different layout systems, font sizes, and image optimization settings. In theory at least, no matter how many different devices with respective screen size come on the market, it’s possible to simply create a new CSS document that optimizes our website to accommodate each and every one. For instance, we would link to multiple CSS style sheets in the <head> section of our web page - one for each screen width you wish to accommodate - like this:
<link href=”480.css” media=”only screen and (min-width: 480px)” rel=”stylesheet”>Read Next - Web Development : Presentation Layer Design - Conclusion
<link href=”600.css” media=”only screen and (min-width: 600px)” rel=”stylesheet”>
<link href=”768.css” media=”only screen and (min-width: 768px)” rel=”stylesheet”>
<link href=”992.css” media=”only screen and (min-width: 992px)” rel=”stylesheet”>
<link href=”1200.css” media=”only screen and (min-width: 1200px)” rel=”stylesheet”>
<link href=”1382.css” media=”only screen and (min-width: 1382px)” rel=”stylesheet”>
No comments:
Post a Comment