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 asconvenient 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 menucan 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 sizecan be smaller and in biggerscreensbigger.
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) { }
/* Portraittablet to landscape and desktop */ @media (min-width: 768px) and (max-width: 979px) { }
/* Landscape phone to portraittablet */ @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
Youcan 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:
Image may be NSFW.
Clik here to view.
Here is the pictureput on the leftside.
Browserwidth 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:
Image may be NSFW.
Clik here to view.
Here is the pictureput on the right side.
Browserwidth 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:
Image may be NSFW.
Clik here to view.
Here is the menureplacedwith a drop down box. The text is madesmaller.
The text is made so that all the space width is allocated.
Browserwidth 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:
Image may be NSFW.
Clik here to view.
The text is madesmaller.
Browserwidth up to 320 px
The media query looks like this: @media screen and (max-width: 320px) { }
Screenshot of the web application at this width:
Image may be NSFW.
Clik here to view.
The text is madeevensmaller.
Mobile device browser
I tested my web application on my mobile device to seehow it lookedthere.
Screenshots (I press the Menu button and choose Giraffes):
Image may be NSFW.
Clik here to view.
Image may be NSFW.
Clik here to view.
Image may be NSFW.
Clik here to view.
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