Responsive Web Design @ Squirro (aaaand some more sneak-peaks!)

March 30, 2012

In one of your last posts we talked about the development approach of “Mobile First”, which claims that instead of developing a desktop version of a web app first developers should start with the mobile application instead.

Today, we’ll have a closer look on “Responsive Web Design”, which aims to deliver one single application that adapts its output depending on the device it’s being displayed. In other words: The underlying application stays the same, but what you’ll see, when you use it, depends on the device you’re using the application on.

Why use Responsive Web Design?
Admittedly, you’ll have to do a little more to the application to make it fit any device. However, these additional efforts will pay off since you don’t need to develop completely new applications for each platform and device. Eventually, you’ll end up with one single application – and changes in logic or features won’t need you to rework different clients for different devices – it’s a snap to ensure consistency throughout. However, consistency in functionality does not mean consistency in how things are being delivered. Depending on the device, certain features might need more space or attention in general. With Responsive Web Design, an individual emphasis on each element of the layout can be achieved, while the functionality does not change across different devices. Content basically stays the same – just how it’s being displayed is depending on the device.

How does it work?
The ideology behind Responsive Web Designs are so called “Fluid Layouts”, which means that you don’t even have to care about the exact screen sizes of all layouts. The layout itself will adapt according to certain criterias. For those of you who are knowledgeable about HTML and CSS will know the new CSS3 media queries. With those, you can query the browser for things like screen resolution, screen size, and other things. That way, it’s pretty easy to detect if the user is sitting in front of a desktop PC or is using a mobile phone. Or a tablet. And deliver a design that displays content in an appropriate way for the respective device.

How’s that going to look like at Squirro?
As we adressed in the “Mobile First” post, we’ve got a number of design drafts for a first mobile version. Building upon that one, we then extended to the desktop interface. Which – as Responsive Web Design claims – offers the same functionalities but tied to a different set of input and output devices: high-resultion screens as well as keyboard and mouse. At Memonic, while the clients shared a big portion of the same code basis with the web platform, they were completely own applications. Even the desktop and the mobile versions differed in many ways. So did the features across all clients. Now with Responsive Web Design, backend developers are able to work on features and functions while the frontend designers do their best to assemble them in ways it makes sense for each device.

For those of you fluent in German, a few sneak-peaks of the upcoming desktop application have been revealed in the video interview posted yesterday. For all the others, here are some tiny little extractions of what we’ll come up with in the next weeks and months: