Responsive Web Design

Our new website with responsive design

At the end of April 2012 we launched a brand new version of which had a “responsive” web design, making it easier for mobile and tablet users to view it. Special consideration in content and design elements were carefully crafted to cater to these users since their screen size is a major factor when viewing our site.

March 2014 UPDATE — Today is excited to bring you an even BETTER browsing experience! Our 2014 re-design is bigger, bolder, and even more responsive than before. You’ll notice that the font size has increased and the color scheme is more vibrant, making it easier on the eyes and more fun to use. We hope you enjoy it!

What is responsive website design?

One of the latest trends in website development is something called responsive website design, but what is it and why should it matter to the average user?

Standard websites are designed for a fixed width to ensure they display correctly on the largest range of desktop or laptop computers, the size that currently fits the most devices is 960px wide. This method ensures websites look the best on as many computers as possible, on smaller screens it fits tightly, while on normal screens it will have a background on each side of the page, and on larger screens it will have even more background space.

In recent years mobile devices that can access the internet has increased, meaning that users are accessing websites on devices with a wide range of screen sizes, and a simple one size fits all approach is no longer the best way to design a website. With this in mind, has upgraded their code (the stuff that make our site work) so that folks on mobile devices and tablets have a better user experience.

Here is and example of different display types:

The solution to this problem is responsive website design. This method of creating websites involves the design responding to the different screen sizes, the response to smaller screen sizes could be to reduce the size of images and fonts or simply remove certain sections of the website.

If you want to see it in action grab the bottom right of the screen and reduce the width of the widow – this website has a new responsive design, so reducing the width will reduce the size of the logo and remove the certain design elements before finally changing the navigation to a suitable format for use on smaller screens.

Why should we care about this?

There are 3 main reasons we made the upgrade to a responsive website design:

  1. The simple fact that mobile internet browsing is a rapidly expanding market meaning there are a larger numbers of users accessing our website on a mobile device.
  2. Standard websites are difficult to read and navigate on a smartphone browser, and the user ends-up having to “double tap” or “pinch” the screen to make it readable.
  3. A responsive website is a much cheaper option then creating a special “Mobile App” because the cost of converting our website into an app could be very expensive.

How we accomplished this

We switched our website framework to Genesis by StudioPress which is “responsive” out of the box. Of course we made tons of tweaks to the code since there are so many unique design elements on our site. But we couldn’t have done it without their rock solid framework which offers the highest level of security and follows coding best practices. Thank you StudioPress!