About a year ago the SAP Hana Cloud Portal development, product management and devOps teams moved to a new workspace – the SAP Raanana Apphaus. While the absence of walls took some getting used to, we all soon realized one of the most significant benefits – the workspace forces us to be more collaborative; Personally I noticed I’m rarely at my desk anymore, most of the time I’m roaming across the floor between colleagues, shared spaces (previously known as meeting rooms) and of-course, the coffee corners. I effectively became a very mobile Product Manager… Being mobile, I soon realized I rely more and more on my mobile devices throughout my day – first and foremost – my iPhone. Interestingly, I find that even when a PC is around, a lot of my activity is still done on the smartphone, e.g. I don’t remember the last time I tweeted or posted on Facebook from a PC, I read and write most of my emails on my iPhone and IM on a PC is a distant memory.
A Global Trend
This is clearly just a microcosms of one of the strongest technological and social trends the world has seen in the past 5 years – we are all mobile and we increasingly rely on our smartphones throughout our day. On the web, mobile phones account for 17% of global web usage today, up from only about 4% at the end of 2010. This is well known in the consumer and enterprise space, and businesses apply different strategies to accommodate this mobile revolution. Two of the most popular mobile web strategies are adaptive layouts and dedicated mobile sites. In adaptive layouts, a websites layout is optimized to the consuming device capabilities but most of the content and functionality is the same; in a dedicated site there are two versions of the same website each optimal for either desktop or mobile in terms of layout and also content and functionality. As a platform with the main goal of easy creation of business websites, we realized that Cloud Portal has to support both of these strategies.
Cloud Portal and Smartphone Sites
Starting from our October release, SAP Hana Cloud Portal supports consuming sites from smartphones (starting from the iPhone). Added to our iPad support, we now support all three major device types: desktops, tablets and smartphones. This enhancement will enable two common scenarios:
- Creating sites that will run the same content on all supported devices using an adaptive layout and responsive design
- Creating dedicated smartphone sites linked to desktop sites
Adaptive example: author once, consume anywhere
In the first scenario we allow the design and authoring of a site once; the site is then rendered optimally for the consuming device:
- Site is designed, authored and published in Cloud Portal's WYSIWYG editot
- At consumption, site layout is optimized to the consuming device
Desktop:
iPhone:
Demo video: http://www.youtube.com/watch?v=7QcW4revNlE
Dedicated example: leveraging the best of both worlds
In many cases, the desktop and the smartphone website requirements are very different in terms of user intent, content and functionality. For this we added the capability to link between dedicated smartphone and desktop sites; the corresponding site will be dispatched according to the consuming device, allowing full flexibility and high differentiation between the two site versions. This is done in the desktop site settings by specifying a pre-designed smartphone site within the Cloud Portal account:
Some technical stuff: what we did to enable this
The following are the major features that enable the Cloud Portal smartphone scenarios:
Authoring and Site Layout
The sites are created using the same desktop WYSIWYG authoring experience. When consuming these sites from a smartphone device, however, the framework renders a layout that is optimal for the smartphone form factor and hardware capabilities. The differentiation against non-smartphone devices is done using the UserAgent attribute.
When the CP framework identifies that the consuming device is a smartphone, the following changes apply in the way the layout is rendered:
Site hierarchy: The site pages in the smartphone site are identical to the desktop site pages and include the same content and attributes like access restrictions and appearance in the navigation bar.
Navigation Bar: Indeed also the navigation bar shows the same pages as the horizontal navigation bar in the desktop site, although its appearance in the smartphone site page is different. In a smartphone site the Navigation bar is vertical and it resides in a dedicated navigation panel that is opened by a button unique for smartphone sites. The pages order in the navigation bar matches the one in the authoring pages panel order in the desktop navigation bar.
Page Layout: Widgets in every page are arranged in a single column layout; the arrangement of the widgets is determined by the position of the widgets in the desktop layout.
Smartphone Theming
As a rule, the same theming CSS file is used to define the site's look and feel in desktop and smartphone site. Most of the CSS classes defined in a site's theme.css apply also in smartphone; a small subset of the CSS classes have special smartphone behavior; we also added some classes that are unique for smartphones.
Out of the box Widgets and Custom Widget Development for Smartphone
Most of Cloud Portal’s out of the box widgets are responsive and will be rendered optimally in the smartphone. Custom widgets and widgets that enable inserting the source code directly (Rich Text Editor source code mode where html code is changed inline or the html viewer widget where html code is uploaded) require special attention from developers; here the code has to be written explicitly to support smartphones. All of the relevant OpenSocial APIs have been adjusted to work on smartphones.
More reference
For even more technical guidance, please see the smartphone chapter in our new developer guide.
We‘re super excited about supporting smartphones in Hana Cloud Portal and truly believe this will greatly extend the reach of cloud portal sites whether it’s in the workplace, at home or anywhere…
- SAP Managed Tags:
4 Comments
