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.

Desktop browser full width design

Landscape tablet size - notice the change to the header and the smaller size banner 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

Smartphone size, single column layout and no banner image