SAPUI5 and Responsive Web Design (RWD)

Former Member · ‎04-17-2013

In this article I want to examine the possibilities for Responsive Web Design (RWD) in SAPUI5. I use the latest version of SAPUI5 v 1.10.3 (this version I got when updating (Check for Updates) Eclipse yesterday). I will first explain the RWD concept and then show my own build web application developed in SAPUI5 that uses responsive design.

About Responsive Web Design

RWD is all about making the viewing and reading of a web application as convenient as possible for the visitor. The same web application then looks good independent of the different screen sizes viewing the application. The RWD is a web design approach that makes it possible to only maintain one web application for all the different screen sizes. Making a separate mobile application in some cases unnecessary.

Below are three examples of adaptions that can be developed using RWD:

In small screens, the menu can be converted to a drop down menu.
In small screens, the pictures can be smaller to fit the browser size. The pictures can also be rearranged to improve the viewing experience. Or the pictures can be removed if the screen is to small.
In small screens, the text size can be smaller and in bigger screens bigger.

RWD doesn't come of itself. You as a developer need to make it happen! There are two key components to make RWD work. I will specify them below:

Component 1: Meta tag

You need to insert the viewport meta tag in the <head> tag. The meta tag looks like this:

<meta name=”viewport” content=”width=device-width, initial-scale=1”>

You use the viewport meta tag because if you don't use it the browser will not scale to the clients browser size.

Component 2: CSS3 media queries

You will need to have CSS3 media queries. The media queries loads different CSS style rules depending on the device that is viewing the web application. Most often the style rules depends on the width of the browser. The media queries in itself is a component in your CSS file(s) that tells the browser what to do at different browser sizes. In media queries, you specify min-width and/or max-width. The browser built-in CSS3 logic then calculate which media queries will be executed depending on the browser size. I specify bellow some examples of media queries that can be put in a CSS file:

Example of media queries

/* Large desktop */

@media (min-width: 1200px) { }

/* Portrait tablet to landscape and desktop */

@media (min-width: 768px) and (max-width: 979px) { }

/* Landscape phone to portrait tablet */

@media (max-width: 767px) { }

/* Landscape phones and down */

@media (max-width: 480px) { }

More media queries can be found at:

http://dev.bowdenweb.com/a/css/media-queries-boilerplate.css

Responsive pictures

To get responsive pictures you will need to use the max-width property in the CSS file. It makes the pictures scale depending on the browser width. The max-width property can also be used for video, object and embed tags. The max-width doesn't work on older internet explorer browser. To make the pictures responsive in older internet explorer you need to create a separate CSS file that loads if the browser is an older internet explorer that contains the width property instead of max-width. The example below is making all the images scale depending on the browser size:

.img {

max-width: 100%;

}

Responsive text

You can also make the textview scale that contains text depending on the size of the browser. I recommend it because all the text can fit the browser view or you can make it take up only some part. The example below is on a SAPUI5 textview that has the ID aboutAnimal. I use it in the media queries for the smaller browser sizes:

#aboutAnimal {

max-width: 100%;

}

My web application

Below I will show you my example web application in different browser sizes. First I will provide you with the address of the source code available at my GitHub address:

https://github.com/morganap/responsiveWebDesign

You can try my example web application at:

https://responsivedesignp1041122trial.hanatrial.ondemand.com/ResponsiveWebDesign/

In the above link, you can test the different sizes if you shrink your web browser view. You can also visit the link above with your mobile device to see the difference.

Browser width from 961px and up

The media query looks like this: @media screen and (min-width: 961px) { }