Responsive Design

The web is always changing. In the past, websites came in two forms: fixed width and fluid. A fixed width site was a set width (normally 960px) and was centered on the page. For many, the site would fill the screen and look really nice. However, as screen sizes got larger and pixel depth changed, sites started to have space on the left and right side of the screen, which made people start to look for other ways to show their site.

Fluid sites were set relative to the browser window.  The design would fit into the window, which meant that no matter what size screen you were viewing your site on, it would fill the entire screen. This was a step in the right direction for sites to be of the most use to all viewers. However, the problem was when the window got to be wider and wider, the site would stretch to fit, but the text would stay the same size, as would the images.

So for the longest time these were the two options you had to choose from.

With the advent of smart phones and iPads, it became clear that there needed to be something done to help account for the smaller screen sizes.  While smart phones did a great job of just shrinking existing sites into the available window, people had to “pinch to zoom” in order to read anything.

And Then Came the Mobile Theme

If you used WordPress, you were able to use a plugin to allow two different designs depending on how you were viewing the site (on a smart phone or laptop). This was a great leap forward, because now you could have your content readable by users on any platform. However, it still had some issues. First, you had two themes on your site now, which meant that you had to make sure both were updated if you made a change. Another issue people faced was that Caching plugins tended to cache the mobile version of the site, so that a desktop user would see the mobile site on their computer, which was not a desired result.

Welcome to Responsive

Responsive sites is the best solution to give your users the best experience with few issues on your site. A responsive site leverage the power of CSS media queries to change the look of the site depending on the size of the screen. So if you have a two column site, if a user views it on a mobile phone, a responsive would change the layout to be one column, enlarge the text size to make it more readable and enlarge the photos to fit.

The best part about responsive sites is that they are normally a lot easier to create than a separate mobile theme. Most of the time, if your site is setup semantically, you can keep the design and just tweak the CSS to “responsi-tize” your site.

If you would like some help or want more information, please feel free to contact me.