1

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.

2

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.

4

On other pages I have news, again coming from Connections...

5

and information about parks and I can go and select different park features that I'm looking for.

6

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.

7

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.

8

I can tap; it opens up a menu. I can navigate to any of the pages in this site.

9

And they're all laid out differently for my smartphone device.

10

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.

11

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.

12

13

14

15

16

17

18

19

20

21

22

23

24