[ad_1]
Features of responsive design
- It makes viewing your website on a mobile (or tablet) easy and eliminates the inconvenience of zooming.
- A responsively designed website has no need for a separate ‘mobile’ website. The same website will respond to different screen sizes.
- It uses HTML, CSS 3 and JavaScript (optional) to adjust the web page for different screen sizes – including desktop, tablet & smart phone screens etc.)
- CSS 3.0 makes creating responsive websites simple and neat.
- Designing responsively is easy.
What you will need
- Experience with CSS and HTML
- Optional: An understanding of JavaScript
How it works
Responsive design uses CSS media queries which are a new feature of CSS 3.0. CSS media queries makes it possible to build responsively, using only CSS.
Media queries use the @media rule (which always begins with @). Using the @media rule, different screen sizes are defined and styles are assigned to each different screen size. For example, if you wanted a sidebar to be 200px wide when the screen’s width is less than 680px and 100px wide when the screen’s width is less than 460px, you would write the following CSS code:
@media screen and (max-width: 680px) {
.sidebar {width: 200px;}
}@media screen and (max-width: 460px) {
.sidebar {width: 100px;}
}
The first media query is saying, ‘These styles should only be activated on a screen (not print) with a maximum width of 680px.’ The second media query is saying, ‘These styles should only be activated on a screen with a maximum width of 460px.’
Just for interest, media queries can be used to define styles for printing too.
@media print {
.sidebar {width: 300px;}
.header {display: none;}
}
These styles will only be activated when the web page is printed.
In the ‘What you will need’ section, I mentioned JavaScript. JavaScript is optional but not necessary for responsive design. It is most commonly used to hide the navigation menu on small screens and replace it with a single button, which when clicked, displays the whole navigation menu.
Conclusion
Today, with so many people using small screens to browse the web, building websites that don’t require zooming is a must. Smart phone users will come back to a website that looks attractive and is easy to navigate. Responsive websites eliminate the need for a separate ‘mobile’ website, thus saving a lot of time, money and clutter.
As web designers, taking the small amount of time to learn responsive design is essential – Responsive websites are the future.
[ad_2]