From Wikipedia: ``Responsive web design (RWD) is a web design approach aimed at crafting sites to provide an optimal viewing experience—easy reading and navigation with a minimum of resizing, panning, and scrolling—across a wide range of devices (from desktop computer monitors to mobile phones).
Elements of responsive web design
A site designed with RWD uses CSS3 media queries, an extension of the @media rule, to adapt the layout to the viewing environment—along with fluid proportion-based grids and flexible images:
- Media queries allow the page to use different CSS style rules based on characteristics of the device the site is being displayed on, most commonly the width of the browser.
- The fluid grid concept calls for page element sizing to be in relative units like percentages or ems, rather than absolute units like pixels or points.
- Flexible images are also sized in relative units (up to 100%), so as to prevent them from displaying outside their containing element.``
From responsive-nav: ``Responsive navigation plugin without library dependencies and with fast touch screen support. Try it out by resizing this window.``
main link files
<!-- Put these into the <head> --> <link rel="stylesheet" href="responsive-nav.css"> <script src="responsive-nav.js"></script>
navigation and mark-up
<div id="nav"> <ul> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Projects</a></li> <li><a href="#">Contact</a></li> </ul> </div>
<!-- Put this right before the </body> closing tag --> <script> var navigation = responsiveNav("#nav"); </script>
- Weighs only 1.7 KB minified and Gzip’ed.
- Doesn’t require any external libraries.
- Uses CSS3 transitions, touch events and simple markup.
- Removes the 300 ms delay between a physical tap and the click event.
- Makes it possible to use CSS3 transitions with height: auto.
- Works in all major desktop and mobile browsers, including IE 6 and up.