Posted 25th June 2012 | By ExtraMile

So you’ve heard the words “responsive design” muttered about, you’ve read Peter’s blog post on why you need it, but you’d like to learn more about this web wizardry.

Let’s delve a little deeper.

Responsive design is based on the concept of using a flexible layout, which is able to automatically (after some serious coding!) adapt to the screen capability of the device on which your visitors are viewing your website. We’re talking desktops, netbooks, tablets, smartphones and everything in between. With a site like this, you can experiment with how different elements of your website are displayed and are able to tailor what the user sees, while preserving essential content and the fundamentals of your design. This is not always possible with an individual mobile site, which produces a “one size fits all” model, offering no support for additional screen sizes or devices.

Extramile’s new website showcases responsive design seamlessly. View it on an iPad or any other tablet device and you’ll see how the page has fluidly scaled to fit the dimensions of the screen.  The menu bar is now narrower, with a more prominent search function underneath.  Below this, the grid-like icons have repositioned themselves for a better fit.  You may have also noticed that the images have resized themselves whilst maintaining the quality. Pretty neat, huh? Now check it out on an iPhone, Blackberry or Android device and see how we’re presented once more with a different representation of our site. This time, the multi column layout has transformed into a full width vertical layout, impressively maximizing our screen real estate.

Surely we have all shared a mobile browsing experience like the following: You’re running on a poor internet connection, need to find information fast and are left feeling frustrated at the endless amounts of zooming and scrolling to get to the content you require. Perfectly scaled layouts, reduced load times, easier navigation, introducing/hiding content and a more intuitive mobile interface are just a few of the hurdles that we can overcome with responsive design.

So how do we accomplish this? The answer is ‘Media queries’.

We tell the web browser how to respond to a particular screen width through a series of media queries located in our stylesheet.  These rules correspond to the specific HTML elements within our website. Our preferred technique is to write the original CSS with the most popularly used screen resolution in mind (e.g. 1366x768 – equivalent to a 15” notebook). We then work backwards, drilling down through various screen widths, identifying how we want the content to be displayed and implementing rules to achieve the desired effect.   

Here’s an example:

@media only screen and (max-width: 320px) {

             #home-services{ width:100%;}
}

Here, the browser is taking our services column situated on our home page and overwriting the original styling to convert this element to a full width column when viewed at iPhone width or smaller.

At ExtraMile, we write CSS3 media queries to respond to every screen size, so your business’s website will continue to adapt to future mobile devices that are introduced to the market. No re-development required. You name a device, we’ve got it covered.

We can then add a little more pizzazz to further show off the responsiveness of the site. Visit our home page and grab the corner of your browser window. Reduce its size and you’ll see the grid images fall beautifully into place. These transitioning effects are down to some clever jQuery scripting that we’ve implemented, achieved with CSS 3D transforms, transitions and animations. This adds a whole new dimension (pun intended) to the user experience.

Note: if you’re viewing our site in an older browser such as Internet Explorer 7 or 8, you won’t see the magic. However, you should still see the desktop view of our site, identical to the responsive version. We ensure that our responsive websites gracefully degrade in unsupported browsers.

If you’re as excited about responsive design as we are, contact us now to find out what we can do for you and your business.

 

Anita from ExtraMile Communications Ltd in Eccleshall, Staffordshire.

Need content? You may use this article on your website, or in your newsletter. The only requirement is inclusion of the following sentence and link: Article by Anita Mander of ExtraMile Communications Ltd- Extreme eMarketing.

extramile

About ExtraMile

A digital marketing agency with international capabilities