As web trends change, designers and developers need to respond accordingly. With the increasing usage of mobile phones, tablets, and net books we need to rethink the way we create a website and display its contents. It can become very time consuming to create unique websites for all of these platforms, so why not create a single website that adapts or responds to its environment accordingly?
The concept of responsive web design can be daunting at first but can be obtained by using a few simple CSS tricks to modify styles when the users screen hits a specific width.
To start, we build our site worrying about large monitors first. Assume we are using a wrapping width of 1000px. This means the largest possible size will be 1000px. You can find out current monitor resolution statistics here to determine what your maximum site width should be. Once the browser is scaled below 1000px, our first CSS media query kicks in:
@media screen and (max-width: 1000px){
/*—Your css — */
}
Placing any CSS styles inside the above CSS snippet will only take effect when the browser width is less than 1000px. This would include phones, tablets, net books, and smaller computer monitors.
From there we want to switch to a percent-based system. This means that rather than setting a column’s width to a fixed px value we set it to a percent value. For instance a two column layout could have a column width of 75% and 25%. Now when we resize the browser the columns will scale accordingly. Additional tricks could involve dropping a column below another or completely removing an element such as a banner. The end result leaves you with a website that looks stunning and functions on any device.
If you’re interested in converting your existing site into a responsive website contact NetgainSEO today!
By Andrew MacPherson, Web Developer