Responsive Design

Looking good – wherever you’re seen

… like a shamrock, my old priest used to say. “Three leaves, but one leaf.”

Nuns on the run, 1990

A decade ago the only way to view the internet was with a computer. But since then we have smartphones, tablets and even smart tv’s now.

A page created to be seen correctly on a computer with a large monitor won’t look as good on a tablet and even worse on a smartphone. With the advances in mobile technology, cheaper data plans and free wi-fi in practically every café and bar, we connect to the internet more now by our faithful mobiles than PC.

The same forces which have propelled the new standards in HTML and ECMAScript resulting in new client-side programming frameworks such as Angular have also pushed new standards in design, specifically CSS.

Similar to the evolution of JavaScript, the improvements in the base technologies for design have spawned new design frameworks which simplify the application of the new design functionality available to the designers. Amongst the existing frameworks, Jarmit Consulting has opted to use Bootstrap – one of the most mature and tested frameworks available today.

Website of the Federación de Cooperativas Agro-alimentarias de Euskadi created by Jarmit Consulting

But what is responsive design?

In simple terms responsive design is the positioning of content on the page according to the available width.

This means the same page contains the design instructions for several different widths, known as ‘breakpoints’ which correspond to the different types of devices – three designs in one. A single page which can be seen correctly in all types of devices is much more easily maintained than multiple pages duplicating the same content.

Responsive design is not restricted just to websites. In Jarmit Consulting we use Bootstrap in our applications created with Angular to give the end user the best experience possible irrespective of the type of device they are using to view the app. In this example we show how a form in an application published in SharePoint Online changes automatically when the available width changes.