Risc – Responsive Design

One size doesn’t fit all anymore. Mobile phones, tablets, and even TVs now access the web, so its vital that your website has the ability to serve the variety of devices.

Objective

All businesses need a mobile friendly or tablet friendly site. Especially a premium consultancy like RISC, who have highly influential, time poor customers.

Challenge

Having already built the website for Risc, and selecting a theme that didn’t have responsive style sheets built in, we’d have to consider either

a) creating a redirect site for mobile/tablet use; or

b) changing the style sheets using media queries (i.e if site is between 200px and 500px make the menu look like this…)

We chose the latter because we felt maintaining two sites would be overkill, and we also wanted the ability for the site to resize according to the screen size.  In some instances going with a redirect might be advisable if you wanted to reduce load times by uploading smaller images.

Solution

There were 3 main considerations in developing new style sheets:

1) All widths had to be fluid, so that as the screen got smaller or bigger, the dimensions of the site would change, becoming either bigger or smaller.

2) The homepage had to be completely redone , as a two column approach wouldn’t work on a mobile.  We in effect hide those elements on a mobile.

3) The menu system would ultimately take up the majority of the viewing space so we utilised what is called a toggle menu, that appears and disappears on click.

We created rules for style sheets such as, if device is x size, then make the site look like x. The most important piece was the menu, which we decided on a toggle menu, click and it drops down, click and it dissapears.

Lastly we did some testing and of course found that internet explorer 7 (and below) didn’t like the media queries.  IE7 doesn’t play nice with most things, so we found some neat little javascript code that taught IE7 to behave like the other kids.  If you are reading this and you are on IE7 or below, please do us web designers a favour and upgrade, or switch to Chrome / Firefox.

Try it

Open www.riscpl.com on your mobile or simply resize your browser to see it in action.

Whale call – Port Fairy Folk Festival

We’ve been busy little bee’s.  One of the bigger projects we’ve been working on is the Port Fairy Folk Festival website.  We think it’s pretty cool. Read more

Relaunch of Georgi Kay

We just did a mini make over on  Georgi Kay’s website, taking her from simple white to dark and moody black.  Take a look and let us know what you think. Read more