Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Responsive design

ariari
edited March 2013 in News
Today we have an essay and a marketing opportunity.

Several years ago companies started creating special mobile versions of their website for people with smart-phones or small tablets to use. Often you would access them with a special URL like this http://m.abc.net.au/ and the content would be substantially different the main site. The navigation would include great big buttons and simplified content. At ish, we went a long way down the path of preparing plans for this kind of site for our onCourse users. Thankfully we stopped in time, since a new approach to this has recently become more popular.

History: the essay

(Skip ahead to the next section if you just want to know what you should do next.)

"Responsive design" is a relatively new concept. With modern browsers (that is anything from Firefox, Chome, Safari and Opera plus Internet Explorer 8 or above) responsive design works really well. Instead of creating multiple sites, a web designer can create one site which dynamically changes itself in response to different viewing devices. To understand this better, let's go back 15 years to the early days of the web.

Back then, people would create websites much like they created brochures printed on paper. A designer would work in Photoshop until it looked just right. They would hand it over to a web developer who 'chopped it up into little pieces' and glued it all back together again using tables and other bits of html. If that didn't give you the result you wanted, you used Flash to get it just right. Content was not as important as adherence to the exactly pixel dimensions of the design. We have worked on websites like that in the past, and let me tell you it was not fun.

Then things changed. Web developers kept talking about the 'semantic web' ( http://en.wikipedia.org/wiki/Semantic_Web ) and slowly people started listening. The semantic web is all about content... that is, content is king and the design travels along for the ride. Sure, make it pretty and make it usable, but start with html markup (the stuff web pages our described in) which describes the content. So no longer do you wrap some text in heading level 3 to make it display the way you want; instead you use levels of heading to display structure of content.

What really helped along this process were several other changes. Firstly, something called CSS make it possible to design websites and make them pretty without hacks to the html content. Secondly, Internet Explorer 6 virtually disappeared: once websites stopped supporting IE6, developers were free to focus on standards-based web markup. No longer did we have to support Microsoft's attempts to subverting the internet to its own purpose. There were a couple of years where we'd have to build a website twice: once for the standard and then again for IE6. Thirdly, Google. People realised that to appear on Google's results you couldn't have your content hidden in strange html markup or Flash. Google needs to be able to understand your html and understand which parts are headings, dates, events, prices and so on. And finally of course were the growth of mobile smart phones and tablets. Apple's iPhone put a stake through the heart of Flash and demanded that designers understand how to display their site on a 4 inch screen. Android and other phones cemented that change and brought small web browsers to the masses.

Responsive design

So we come to the modern solution to the problem of small touch screens. First we need to eliminate mouse hover effects which used to be so popular. onCourse still uses a few, but nothing that it vital to the use of the site.

And of course we need to adjust the design as the size of the screen changes. The best way is by example. Go to this site: http://cce.sydney.edu.au/ in your desktop browser. Then slowly decrease the width of your browser window and watch what happens.

What you should do now

With somewhere from 20%-30% of all page views to onCourse websites coming from mobile devices we've decided to prioritise this work. Over the last few weeks we've added all the back end logic to all onCourse websites. We worked closely with CCE to upgrade their design to a responsive one, and now we are ready for the rest of you!

Responsive design needs to be properly planned... we can't just 'turn it on' by flicking a switch. What happens to menus? Which ad blocks disappear at small sizes? How we do highlight search and browsing choices for the user? How do we deal with large images on your home page? Which text is important and which can be reduced or hidden?

This is a perfect opportunity to think deeply about how people interact with your site and what they want to do once they reach your home page. Getting this user experience (UX) right can be the difference between enrolments and diminishing student numbers. If you want enrolments you need to go to where the students are: and that is online, not just in offices and homes, but on the train, walking down the street and having lunch in a cafe.

So talk to us. We would be happy to consult with you at no charge and discuss how to implement this change. Then you can take advantage of our back-end work to implement your own responsive design, or engage our developers to do it for you. Post your ideas on this forum thread or email ish directly. Depending on the skills you have, this could cost you nothing more than your time.

image
Desktop browser full width design


image
Landscape tablet size - notice the change to the header and the smaller size banner image

image
Portrait tablet size or mini tablet landscape size - header has adjusted again, removing menu options and left navigation panel has moved to the design footer

image
Smartphone size, single column layout and no banner image

Comments

  • I vaguely recall you honking on about responsive design a while ago, and had wondered on occasion why our website didn't seem to be doing what I thought it ought to be doing. And verily, herein lies the answer.

    Would it be worth mentioning which desktop browsers have mobile device emulators or suggest some mobile simulator URLs? May help people get a feel for what their users are really experiencing when on the go.

    Excellent timing BTW. I'm all for taking a hatchet to our website and going full medieval on its noggin.
  • Hi Danny,

    In any recent browser (Firefox, Chrome ect) you should be able to grab the right side bar of the browser window to drag it and make it narrower. If you try http://cce.sydney.edu.au/ you should see it 'jump' to a new layout as you get to certain widths, similar in size to a full size tablet on landscape, a 7" tablet or portrait full size tablet (where the left sidebar moves to the design footer) and then the narrower smart phone width, where the design becomes a single column.

    I've added some screenshots to the post also.

    Let me know how you get on.

    Regards,
    Natalie
  • Me? I'm all good. Better than I have any right to be, anyway.

    While resizing a desktop's browser window is an adequate demonstration of the elasticity of a good responsive design, what I meant was plugging your website into a mobile device simulator like http://ipadpeek.com to give you an idea of why people who use the things peer in intense frustration at times, fingers madly scrabbling from one side of a stubborn webpage to another.
  • Ooh, yes, very nice. Thanks, that's what I was after.

    On a related note, is there a way to rate the load time of a given page?

    I know there's a bunch of subjective imponderables in that, but even something like "On a scale of 1-5, where the Google homepage is a 1 and a 5 is something housed on a decrepit Pentium running an unpatched copy of Windows NT in someone's closet in Astrakhan, your page is a 2.7" would be better than repeatedly clearing the cache and testing in multiple browsers on a desktop.
Sign In or Register to comment.