Many designers are turning towards responsive web practices as a way to expand the flexibility of their websites. If you keep some of these practices in the back of your mind as you develop your websites, it will help to ensure that your site will provide a nice precentation on multiple devices.
Today, you really can't afford to sacrifice designing for a tablet or smartphone, so designing responsively allows you to do that in real time.
The first step of making your website responsive is to make it fluid. Change your width settings from pixels to percentages. This is probably the single biggest step of turning to responsive practices. It does require some math, but ideally you would re-use some of your calculations or find some frameworks that take care of this for you. But regardless of how you enter the transition to a fluid site, you will need to remember that as you work through your projects.
Ethan Marcotte opened the pandora's box of the Responsive web with his book Responsive Web Design. This explains the strategy invovled in using @media queries to target the size of browser windows as well as specific devices in your CSS files. A media query will look something like this to target a browser window between 480px and 769px wide (like a tablet):
@media only screen and (min-width:481px) and (max-width:768px) {
.two-sidebars #sidebar-first {width: 47.917%;margin-left: 0.521%;}.two-sidebars #sidebar-second {width: 47.917%;margin-left: 1.042%;}}
His formula for figuring out your fluid calculations is target / context = result. This means that your target size is divided by the size of the element framing your target size. And the result is your percentage.
If I have a standard 960 grid and want to calculate my content area and right sidebar, I should know that my content area will be 620px and my sidebar is 300px. There is a 20px divider between the two, and a 10px padding on the left and right to give it some space between the content and your site's outermost border. Your formula for each of these elements would look something like this:
Content: 620 / 960 = 64.58333%
Sidebar: 300 / 960 = 31.25%
Divider: 20 / 960 = 2.083333%
Gutters: 10 / 960 = 1.041666%
The idea is that it is ok to have a large amount of numbers in your decimals because that only makes it more accurate.
Some things to consider:
Images
You want to make sure all your images have a max-width of 100%. This can easily be done by setting the CSS for your general image. The max width should be set so your images don't expand past their container divs.
img {
max-width: 100%;
}
Tables
Tables are still a tricky issue in Responsive web design. There are a number of ways that people are addressing tables. As of this post, there isn't anything standard that is in place, so you could try using any number of these.
http://css-tricks.com/responsive-data-table-roundup/
Floating positions
You might want to consider the structure of your pages if you are expecting to move your sidebars based on different media queries. A content-first approach helps give more control over your sidebar placement without having to use absolute positioning. This may work better for re-arranging your sidebars if that is your goal with a smaller mobile device.
Some cool examples:
Here are a couple cool examples of responsive design that I personally like. You can see how the site changes by re-sizing your browser window.
Leave A Comment