What is Responsive Design?
If a web page is rendered in one device or viewing area, it would be nice if it would adapt accordingly on other form factors. Responsive Design helps us to make sure that we intelligently utilize what is being presented based on the screen or device real estate or based on the constraints of what that device can do. You can create a unique experience of your web pages to give better user experience and provide relevant content based on the users device.
Media Queries allow us to respond the resizing and constraints of viewing area. Look and feel of a web page can be changed based on viewing dimensions or device resolution capabilities.
Responding Design based on Viewing Area:
@media screen and (max-width: 768px) {
/* Styles */
.contentStyle {
background: #CCC
}
}
@media screen and (max-width: 768px) and (max-width: 1024px) {
/* Styles */
.contentStyle {
background: #FFF
}
}
Responding Design based on Device Real Estate:
@media only screen
and (max-device-width : 768px) {
/* Styles */
.contentStyle {
background: #FFF
}
}
You can also change css styles using JavaScript. Lets take a look at an example using code JavaScript and using JQuery.
Var e = document.getElementByID('output');
e.style.color = '#FFF000';
//Using jQuery
$('output')/css('color', '#FFF000');
How to Support Multiple Browsers?
By using Modernizr – An open Source JavaScript tool that makes it easy to check if the browsers support certain features or not. Modernizr simplifies browser feature detection.
If (!Modernizr.cssgradients) {
//Code for non-gradient support
}
We can also write CSS based on modernizr without writing JavaScripts by using implied if statements within style-sheet.
How is this possible? When an HTML5 page is rendered using modernizr it creates high level class names for eg; csscolumns. So you can write CSS like a regular If statement.
First we need to make a small change in the page HTML tag. We need to add class=”no-js”
So your html tag might look something like this <html lang=”en” class=”no-js”>
So modernizr will now inject all the features that are supported and no- supported in the HTML tag and that is what we will use in our style sheet. It allows us to code CSS classes using kind of implied if statements.
For eg:
.no-textshadow nav a {
/* If textshadow is not supported apply this style */
font-weight: bold;
}
.no-csscolumns #container {
/* Style if columns are not supported */
}
. csscolumns #container {
/* Style if columns are supported */
}
I hope this post provides a little information on what responsive design and how to get started using css3 media queries and modernizr.
If you enjoyed this post, please consider leaving a comment or subscribing to the RSS feed to have future articles and posts delivered to your feed reader.
