Skip to Content

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:

  1. In small screens, the menu can be converted to a drop down menu.
  2. 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.
  3. 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)  { }

Screenshot of the web application at this width:

961pxAndUp.png

Here is the picture put on the left side.


Browser width from 769px up to 960px

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

Screenshot of the web application at this width:

769pxTo960px.png

Here is the picture put on the right side.


Browser width from 551px up to 768px

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

Screenshot of the web application at this width:

551pxTo768px.png

Here is the menu replaced with a drop down box. The text is made smaller.

The text is made so that all the space width is allocated.


Browser width from 321px up to 550px

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

Screenshot of the web application at this width:

321pxTo550px.png

The text is made smaller.


Browser width up to 320 px

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

Screenshot of the web application at this width:

0pxUpTo320px.png

The text is made even smaller.

Mobile device browser
I tested my web application on my mobile device to see how it looked there.


Screenshots (I press the Menu button and choose Giraffes):

/wp-content/uploads/2013/04/mobile1_206633.png/wp-content/uploads/2013/04/mobile2_206634.png/wp-content/uploads/2013/04/mobile3_206635.png


Conclusion:

The SAPUI5 framework is easy to adapt to different browser sizes thanks to its support of CSS3. My opinion is that there is some work to make the responsive web application look good. But I think the work is similar for all the different frameworks out there. I hope with this article I can help developers get some code examples and tips on the way of creating responsive web applications in SAPUI5.

By the way!

Another concept of RWD is the fluid proportion-based grids. This have SAP made available out-of-the-box with the layout component ResponsiveFlowLayout. Fluid proportion-based grids are layout grids that deform depending on the users browser size. See this link (you will need to have a SAP account):

https://sapui5.netweaver.ondemand.com/sdk/#content/Controls/Layout/ResponsiveFlowLayout.html

To report this post you need to login first.

4 Comments

You must be Logged on to comment or reply to a post.

  1. Manoj Chaurasiya

    Thanks Morgan,

    Nice Article !! I am using sapui5 1.8.4 version there provide a wide range api and provide separate development for web and mobile. I means separation according Your UI is for mobile or web.

    Regards

    Manoj

    (0) 
  2. Meenakshi Raj

    Hi Morgan

    The article provides lot of information which I was looking for. Very informative.

    I have developed a desktop application, and I have added a css for every control I am using in my application. So, writing different css for different media-queries is not a feasible solution as i need to write different css for every control all over again.

    Can you please suggest another idea on how to proceed ?

    Thanks

    Meenakshi

    (0) 

Leave a Reply