What's happening on the screen
Hi. In this demo I'm going to show an example of a multi-channel web site built using WebSphere Portal, Web Content Manager with the Content Template Catalog (or CTC), and Web Experience Factory. And then I'll show how with IBM Worklight you can provide an installed hybrid mobile app that gives users access to the same web site, but with the added ability to use native mobile device features, such as the camera. First, let's look at the site from my desktop browser.
This is an example of a city government web site. It gives users access to services, content, social features. On the home screen, you have content here from Web Content Manager, live updates from IBM Connections, and information about officials.
Desktop browser - Your City.gov Home page
On other pages I have news, again coming from Connections...
Desktop browser - News page
and information about parks and I can go and select different park features that I'm looking for.
Desktop browser - Parks page
Now, let's switch over to my smartphone device and look at the same web site. I'm going to access the same URL that I was using from my desktop.
And here's the home page. Now, it's laid out differently from my mobile device. I can swipe down to see the different portlets, here's the elected officials, my tweets coming from IBM Connections. For navigation, I now have a drop-down menu here at the top left.
Smartphone - Your City.gov home page
I can tap; it opens up a menu. I can navigate to any of the pages in this site.
Smartphone - Drop-down menu
And they're all laid out differently for my smartphone device.
Smartphone - City News
Here's the Parks page again. Now, to see some of the responsive web design features of this site, let me turn my phone sideways into landscape mode.
Smartphone - Parks page
And we'll see that the portlets are laid out differently. I've got the parks on the left and now the events are on the right. And also within the parks list, notice that's laid out differently with the picture at the left and the text on the right.
Smartphone - Landscape mode, Parks page
I'll rotate back again and here it is with the original layout. And this responsive and adaptive behavior is available out of the box with the latest versions of Portal Content Template Catalog and Web Experience Factory.
Smartphone - Portrait mode, Parks page
Looking briefly at the same site from my tablet device -- this is an iPad emulator -- again, I have access to the same site. Now, the navigation's a little different.
Tablet device - Your City.gov home page