Atlassian Summit 2012 - Going Mobile with Confluence

So as you know, because you&#x2019;ve been using it the last 2 days, Confluence Mobile has been the platform we used for delivering all the information you&#x2019;ve needed for getting around Summit.\n\nWe thought that this was something you might been keen to learn a bit more about, both how we did it, so you could use it for your own events or sites, but also what makes it different to the &#x2018;out of the box&#x2019; Confluence Mobile experience that you&#x2019;ll get with Confluence 4.3.\n
So before we begin, I think it&#x2019;s worth pointing out that you could always use Confluence on your mobile... I&#x2019;ve got a screenshot to prove it!\n
...hmm, ok, well I guess you could say there was some room for improvement here... Actually, we know from your feedback that you definitely thought so\n
Now, you probably couldn&#x2019;t see unless you&#x2019;re in the front row, but that was the Confluence Dashboard you were looking at before... And this is the new one\n\nI think it looks pretty good up here on the screen, but as you&#x2019;ll know if you&#x2019;ve been playing around with it, the difference in using this compared to the old one is amazing... Unless you really liked using pinch to zoom.\n\n<transition>\n\nSo as always, as soon as we had something working, we began Dogfooding... And it didn&#x2019;t take long for someone to have an idea...\n
Now, you probably couldn&#x2019;t see unless you&#x2019;re in the front row, but that was the Confluence Dashboard you were looking at before... And this is the new one\n\nI think it looks pretty good up here on the screen, but as you&#x2019;ll know if you&#x2019;ve been playing around with it, the difference in using this compared to the old one is amazing... Unless you really liked using pinch to zoom.\n\n<transition>\n\nSo as always, as soon as we had something working, we began Dogfooding... And it didn&#x2019;t take long for someone to have an idea...\n
Now, you probably couldn&#x2019;t see unless you&#x2019;re in the front row, but that was the Confluence Dashboard you were looking at before... And this is the new one\n\nI think it looks pretty good up here on the screen, but as you&#x2019;ll know if you&#x2019;ve been playing around with it, the difference in using this compared to the old one is amazing... Unless you really liked using pinch to zoom.\n\n<transition>\n\nSo as always, as soon as we had something working, we began Dogfooding... And it didn&#x2019;t take long for someone to have an idea...\n
Now I don&#x2019;t throw words like &#x201C;genius&#x201D; around lightly, but clearly Matt is a genius.\n\nBut the less said about the shower part the better.\n
So Summit Mobile was Born.\n\nNow I know what you&#x2019;re thinking.\n
Am I right?\n\nBut\n
No, it&#x2019;s not just something completely hacked up as a total one off\n
So some quick technical background... Confluence Mobile itself is a plugin to Confluence. What we&#x2019;ve done here is to also create an additional &#x2018;Summit Mobile&#x2019; plugin that contains a bunch of CSS and the items to display in the fly our menu bar to create what you&#x2019;ve been using here at Summit.\n\nSo let me let me just run through quickly how we made each of the main screens in the app.\n
Now earlier I showed you the new Mobile Dashboard but as you know when you log in to the mysummit site, you actually see this instead.\n\n<transition>\n\nBut there&#x2019;s nothing overly magic about this.\n\n
There&#x2019;s a normal Confluence page made with Page Layouts that Confluence is configured to use as the default homepage. Now as anyone who&#x2019;s administered Confluence here will know, that&#x2019;s just a normal Confluence setting, we&#x2019;ve just made sure that Confluence Mobile respects that setting.\n\nThe other thing we&#x2019;ve done is to add some CSS so the styling matches this content on the mobile.\n
There&#x2019;s a normal Confluence page made with Page Layouts that Confluence is configured to use as the default homepage. Now as anyone who&#x2019;s administered Confluence here will know, that&#x2019;s just a normal Confluence setting, we&#x2019;ve just made sure that Confluence Mobile respects that setting.\n\nThe other thing we&#x2019;ve done is to add some CSS so the styling matches this content on the mobile.\n
There&#x2019;s a normal Confluence page made with Page Layouts that Confluence is configured to use as the default homepage. Now as anyone who&#x2019;s administered Confluence here will know, that&#x2019;s just a normal Confluence setting, we&#x2019;ve just made sure that Confluence Mobile respects that setting.\n\nThe other thing we&#x2019;ve done is to add some CSS so the styling matches this content on the mobile.\n
The agenda overview is the same, again just a normal Confluence page where we&#x2019;ve styled the list items using CSS\n
The agenda overview is the same, again just a normal Confluence page where we&#x2019;ve styled the list items using CSS\n
The agenda overview is the same, again just a normal Confluence page where we&#x2019;ve styled the list items using CSS\n
And again the same for the agendas, this time using tables\n
And again the same for the agendas, this time using tables\n
And again the same for the agendas, this time using tables\n
And then again for the individual event pages. This one required one extra step of adding an additional css class to the table so we could style them differently to other tables in Confluence.\n\nI won&#x2019;t go through all the other pages but they follow a similar pattern. There is one other thing you&#x2019;re probably wondering about though...\n
And then again for the individual event pages. This one required one extra step of adding an additional css class to the table so we could style them differently to other tables in Confluence.\n\nI won&#x2019;t go through all the other pages but they follow a similar pattern. There is one other thing you&#x2019;re probably wondering about though...\n
And then again for the individual event pages. This one required one extra step of adding an additional css class to the table so we could style them differently to other tables in Confluence.\n\nI won&#x2019;t go through all the other pages but they follow a similar pattern. There is one other thing you&#x2019;re probably wondering about though...\n
As I&#x2019;ll show you in a moment, this fly out menu is very much part of the normal Confluence Mobile experience, here we&#x2019;ve customised the items in it using some experimental plugin points that we hope to eventually include as part of Confluence Mobile so other plugins can make use of it. As an example, Team Calendars could provide a quick link to your calendars from here.\n
So that was the Summit Mobile app, which, to recap was done mainly using CSS plus making use of plugin points to alter the fly out menu. Both of these were done in an additional, small, Confluence Plugin. For the CSS styling, I&#x2019;m hoping that in the future we can make that something you can do yourself without needing to make use of a plugin.\n\n\nSo that&#x2019;s Summit Mobile, and hopefully shows you how you can make a REALLY nice looking app for an event or anything else that would benefit from a nice looking mobile microsite. I&#x2019;ve focused on the visual impact of this but just as it&#x2019;s worked here people can still Like, Comment and receive notifications to keep conversations going throughout the event.\n
Like I mentioned earlier, unless you&#x2019;ve changed it, the first thing you&#x2019;ll see when you log in to Confluence Mobile with your phone is the Dashboard. One of the things we always heard form people is that they wanted a way to stay &#x2018;in the know&#x2019; with what was happening in their company and team, which was one of the drivers behind the popular stream on the Dashboard in 4.2, and we know people wanted this experience on their mobile too. Along with notifications and tasks, I think the mobile dashboard will genuinely change the way you stay up to date with what is happening in Confluence. It&#x2019;s so easy to quickly read, comment and like the latest stuff on your way to and from work. Personally I love it for catching up on what happened overnight here in San Francisco when I&#x2019;m on my way to work in Sydney each morning.\n<transition>\nThe navigation menu you&#x2019;ve been using here to jump through the Summit Agenda is a permanent part of Confluence Mobile&#x2019;s navigation and the way you access search, which works for people and content. We&#x2019;re working with people now on what they really want to see in this menu so if you have any feedback please drop me a note or come find me.\n<transition>\nBut the core of the app is of course the super easy to read blog posts and pages. We heard so many times that people wanted to be able to quickly refer to some info while they were at a customers site or travelling and this was where we really started out, stripping everything back to give you a lightweight, superfast page load that had great readability on a phone.\n\nThe final thing...\n\n
Like I mentioned earlier, unless you&#x2019;ve changed it, the first thing you&#x2019;ll see when you log in to Confluence Mobile with your phone is the Dashboard. One of the things we always heard form people is that they wanted a way to stay &#x2018;in the know&#x2019; with what was happening in their company and team, which was one of the drivers behind the popular stream on the Dashboard in 4.2, and we know people wanted this experience on their mobile too. Along with notifications and tasks, I think the mobile dashboard will genuinely change the way you stay up to date with what is happening in Confluence. It&#x2019;s so easy to quickly read, comment and like the latest stuff on your way to and from work. Personally I love it for catching up on what happened overnight here in San Francisco when I&#x2019;m on my way to work in Sydney each morning.\n<transition>\nThe navigation menu you&#x2019;ve been using here to jump through the Summit Agenda is a permanent part of Confluence Mobile&#x2019;s navigation and the way you access search, which works for people and content. We&#x2019;re working with people now on what they really want to see in this menu so if you have any feedback please drop me a note or come find me.\n<transition>\nBut the core of the app is of course the super easy to read blog posts and pages. We heard so many times that people wanted to be able to quickly refer to some info while they were at a customers site or travelling and this was where we really started out, stripping everything back to give you a lightweight, superfast page load that had great readability on a phone.\n\nThe final thing...\n\n
Is the new profile screen. We realised that when people talked about being away from their office and needing to look something up, a lot of the time the next thing they&#x2019;d want to do was talk to the person who was involved with that content. \n\nSince you&#x2019;re already on your phone, it made total sense to link avatars and names (say the name of a &#x2018;subject matter expert&#x2019; on the page you just looked up) to a mobile friendly profile page that lets you call, message or email them directly from here.\n
Sorry, I couldn&#x2019;t talk about Mobile and not say that...\n
Despite this whole presentation being full of iPhones, Confluence mobile works perfectly on Android as well.\n
So that&#x2019;s Confluence Mobile.\n\nIt&#x2019;s a free in Confluence 4.3 and will help you stay productive wherever you are. \n
fin\n

Atlassian Summit 2012 - Going Mobile with Confluence

Recommended

Recommended

More Related Content

More from Atlassian

More from Atlassian (20)

Recently uploaded

Recently uploaded (20)

Atlassian Summit 2012 - Going Mobile with Confluence

Editor's Notes