Mobile first? Not for me, it’s all about content (restive.js)

A few years a go I was working on a project to make our Undergraduate website responsive when the term was still in its infancy. It was used a lot more outside of HE, but within it was a very scary and daunting prospect.

I read a lot about the concepts, the techniques and the theories but I never really agreed with what the consensus was – design mobile first.

There were projects such as 320 and up and many others that talked about this, and coming from a HE background I feel that it was this ‘industry standard’ approach that put off many HE’s adapting it at the time. One of the main reasons was that our sites were huge, and not only huge but a little messy and unorganized at times, with devolved ownership. So how could we design/build a new site from mobile first to accommodate this approach in this environment.

The answer in my opinion; we could not. (Disclaimer: we refers to the ones who could not 😉 and not everyone! There were some who had a a complete ‘university’ website which made this task easier as opposed to the ones who were basically a collection of many satellite web sites.)

As part of the project I talked a lot about my approach, I called it retro-fit. It was simply that you can pick out aspects of you site and then look at how you want that to interact on different devices and screen sizes.

Basically the opposite of mobile first.

But people would say you have to plan your content for the mobile device, show what was needed and then you can add as you go up in size, be that design or extra features. And this is the crux of what I saw as a limitation.

Design mobile first, design desktop first, it doesn’t matter – content is king!

If you build a site around content and the customer, have the right information and call to actions, then what follows is a relatively easy process in my mind to adapt for different screen sizes.

The many devices for websites

All the content and call to actions need to be there on all devices! If it is not, then it is bad content.

This is similar to this post on econsultancy – Think customer first, not mobile first

However, the long-term thinking should be around the customer’s needs rather than the device.
– Published 9 October, 2014 by Graham Charlton @ Econsultancy

My approach at the time was quite simple. I had a website, a stylesheet, and then I looked at my breakpoints and thought about what needed to happen as I went down or up. I then added the relevant styles at each of these until I had a site that functioned well across the whole range of devices. (Not adaptive though, at the time I used the standard breakpoints that were deemed the necessary ones).

As the years rolled on (has it been that long – eek), I have heard less of the words mobile first, and this has been replaced a lot more with content is king. This is good to hear. Websites are getting rid of the waffle, the noise and delivering the information that people need – long may this continue. People are not designing mobile first, but designing content/customer first and then looking at how that will work across devices and sizes.

Because that is the important thing here, it is not good enough to have a mobile site, a desktop site, a TV site, an <insert next thing here> site – what is important is that the site works!

Even when thinking of all the plethora of frameworks out there (how easy is it for people now to add one) to help build your site, what I see (and do) is build and then test what happens as you scale down/up.  It really is less about designing for these sizes but plug and play while you still design your site in your preferred medium. Using the knowledge that what you have on one, needs to work on all.

This is why, it was great to see a project yesterday that caught my eye as it helped do just that. This was called restive.js.

What is restive.js?

Restive.JS is a JQuery Plugin that helps you quickly and easily add features to your Web Site to enable it respond and adapt to virtually every Web-enabled Device. Using a combination of Device Detection, Advanced Breakpoints Management, and Orientation Management, Restive.JS will give your Web site an uncanny ability to stay robust in the face of a constantly changing device landscape.

The point here for me is brings back focus on one thing. It allows you to add features to your Web Site to enable it to respond. Not your desktop site, not your mobile site, but your website. And this ties in with what I was saying back in Edinburgh at the 2012 IWMW (Institutional Web Management Workshop) when I very nervously gave my talk, retro fit means adapting what you have, to fit the other scenarios, not designing for one, two or more. But by thinking of your site almost as an un-formatted document and then looking at how it should act on different sizes.

I could go into this more, but for now I will just say that I will be looking at restive.js in more detail and hopefully even do a case study of using it.

I would be keen to hear any others thoughts on this (particular from HE).