iPhone, Android, and other mobile support

One phone to rule them all
I’ve been getting more and more curious about how people are using Obsidian Portal via their mobile devices. Being a technology luddite myself, I still use a cell phone that would be at home in the late 90s. However, I do recognize the potential that mobile devices represent at the game table. It would be incredibly handy to be able to reference your wiki or bring up a character sheet and have it actually be readable without needing to scroll or zoom (too much). With that in mind, I’m cautiously exploring what it would take to make Obsidian Portal more mobile friendly.

Fair warning

Before anyone gets too excited, let me lay out 2 important disclaimers:

1) This is a hypothetical discussion at this point. We may choose to work on it tomorrow, next year, or never.

2) We’re not going to make a dedicated iPhone app. Obsidian Portal is a web app and will stay that way for a while. I just want it to be usable for all you mobile gadgeteers.

The hypothetical plan

The most likely plan of attack would be to create a special stylesheet for mobile devices that repositions and realigns some elements to fit the reduced size of the screen. I’ve read a couple style guides, and the process is pretty straightforward, but usually involves cutting things out altogether. That’s by far the hardest part. For example, what about our sidebars? Could we lose them on a mobile version? They mostly display auxiliary information, but sometimes there are important controls there, like for editing a campaign or inviting new campaign members. I don’t really see these as things you would want to do while playing with the site via a mobile device, but who knows?

Your thoughts?

Since I’m mostly uneducated in these things, I’d like to hear what you have to say. What are the most frustrating parts about navigating Obsidian Portal with a mobile device? What are some things you could do without on the screen so it would clean things up? What are some examples of similar sites that do a good job of presenting a mobile version?

Leave a Reply

Your email address will not be published. Required fields are marked *

  1. I know I have done editing over a mobile device (Safari for iPod touch) on this page, and it’s pretty rough, which is understandable. The current size of the pages, namely the text editing boxes, don’t translate well over an iPod.

    I know that mobile versions of facebook, flickr, and gmail are all very nicely done.

    Despite the fact that the number of mobile users using OP is probably very low, as a mobile user I’m glad that you guys gave the idea a thought.

    -E

  2. I know I have done editing over a mobile device (Safari for iPod touch) on this page, and it’s pretty rough, which is understandable. The current size of the pages, namely the text editing boxes, don’t translate well over an iPod.

    I know that mobile versions of facebook, flickr, and gmail are all very nicely done.

    Despite the fact that the number of mobile users using OP is probably very low, as a mobile user I’m glad that you guys gave the idea a thought.

    -E

  3. Maybe, on a very first stage, provide a mobile version with read-only data (no editing) in a small-screen-friendly way, with access to wiki, characters and log

  4. Maybe, on a very first stage, provide a mobile version with read-only data (no editing) in a small-screen-friendly way, with access to wiki, characters and log

  5. I like the read-only idea. We could make a very trimmed down version with a lot of the sidebars and graphics removed, and just leave a link in the footer to go to the “full” website.

    My guess (again, not sure here) is that most people would tend to use it in a read-only mode while actually gaming. I doubt there is a lot of long-winded story editing going on. However, I must say that I do tend to add NPCs while gaming, like when the PCs meet someone I hadn’t planned for and I need to come up with a new guy right there on the spot.

  6. I like the read-only idea. We could make a very trimmed down version with a lot of the sidebars and graphics removed, and just leave a link in the footer to go to the “full” website.

    My guess (again, not sure here) is that most people would tend to use it in a read-only mode while actually gaming. I doubt there is a lot of long-winded story editing going on. However, I must say that I do tend to add NPCs while gaming, like when the PCs meet someone I hadn’t planned for and I need to come up with a new guy right there on the spot.

  7. I wonder where this sites in relation to other feature requests. More people are starting to buy webkit/chrome/ipad devices and may be tied less to smaller mobile devices going forward. Whatever you do, realize its a band-aid on a gushing wound. I like the idea of just a greatly simplified read-only approach as well – as a phase 1 offering. At the rate “mobile” technology advances, as long as you write to the latest standards like HTML and CSS versions, special fixes for the mobile platform will hopefully become less and less a concern. I would hate to see this trump many outstanding requests already out there that would make OP a better user experience for the majority of users as a web site.

  8. I wonder where this sites in relation to other feature requests. More people are starting to buy webkit/chrome/ipad devices and may be tied less to smaller mobile devices going forward. Whatever you do, realize its a band-aid on a gushing wound. I like the idea of just a greatly simplified read-only approach as well – as a phase 1 offering. At the rate “mobile” technology advances, as long as you write to the latest standards like HTML and CSS versions, special fixes for the mobile platform will hopefully become less and less a concern. I would hate to see this trump many outstanding requests already out there that would make OP a better user experience for the majority of users as a web site.

  9. Kelly,

    Excellent points, although I am curious what you mean about being a band-aid on a gushing wound. Is Obsidian Portal the gushing wound, or mobile technology? If it’s the first, I’d love to know what we could do to staunch the bleeding.

    And coding to the standards is exactly my plan. My hope for this would be to create a small stylesheet that targets mobile devices with a specific screen size. Hopefully, slicing off the sidebars and resizing the basic layout will be a huge leap forward. In terms of the 80/20 rule, we do the 20% that gets 80% of the benefit and call it a day. We go from “This really sucks” to “This sucks less”

    I’m also hoping for the same thing with ipad/tablet devices gaining traction, but the handheld mobile market is pretty sizable, and if I can spend a couple hours making the site slightly more useful for them, it’s a good investment.

  10. Kelly,

    Excellent points, although I am curious what you mean about being a band-aid on a gushing wound. Is Obsidian Portal the gushing wound, or mobile technology? If it’s the first, I’d love to know what we could do to staunch the bleeding.

    And coding to the standards is exactly my plan. My hope for this would be to create a small stylesheet that targets mobile devices with a specific screen size. Hopefully, slicing off the sidebars and resizing the basic layout will be a huge leap forward. In terms of the 80/20 rule, we do the 20% that gets 80% of the benefit and call it a day. We go from “This really sucks” to “This sucks less”

    I’m also hoping for the same thing with ipad/tablet devices gaining traction, but the handheld mobile market is pretty sizable, and if I can spend a couple hours making the site slightly more useful for them, it’s a good investment.

  11. If you do implement a mobile specific style, make sure you don’t lock your visitors into it. There are several sites (specific examples escape me at the moment) that will only allow visitors from mobile devices to view the site in a “stripped down” format. This really irks me since my Droid is capable of displaying full pages and looking good while doing so. The better sites will launch the mobile page, but will have a link somewhere that will still let you access the non-gimped version.

  12. If you do implement a mobile specific style, make sure you don’t lock your visitors into it. There are several sites (specific examples escape me at the moment) that will only allow visitors from mobile devices to view the site in a “stripped down” format. This really irks me since my Droid is capable of displaying full pages and looking good while doing so. The better sites will launch the mobile page, but will have a link somewhere that will still let you access the non-gimped version.

  13. Thanks for the tip, Roy. I’ve been looking around, and I’ve seen exactly what you mean. The best pages are ones with a link in the footer to “full site” or something like that.

  14. Thanks for the tip, Roy. I’ve been looking around, and I’ve seen exactly what you mean. The best pages are ones with a link in the footer to “full site” or something like that.

  15. Colors, remember to do something with the colors, when i view this on my phone the colors sometimes show up a little different and sometimes a little hard to read on the main page.

  16. Colors, remember to do something with the colors, when i view this on my phone the colors sometimes show up a little different and sometimes a little hard to read on the main page.

  17. This is my first time on Obsidian Portal ( I picked up the link on a friends Facebook page), but I am a Web Developer, and I have done a couple of mobile sites. In general, style sheet switching is an inferior way of presenting mobile content. As you mentioned, mobile users generally have different motives, and therefore should be presented with content in a different fashion. While making the mobile version “read-only” may make sense for your content, often times that makes the site “pointless”.

    Instead, I would recommend presenting a completely different site, new theme, new code base. Your database is the same, so the content and capabilities have the same appeal, but presented with the mobile user in mind.

    Menus at the top and bottom (don’t bother with drop-down, or slide-out menus, there is no “hover” on a touch screen!), plenty of padding on links and buttons (for fat-fingers). Break up forms and content into a linear, simple interface.

    Just a thought, the modern mobile browser is SO capable, that making a mobile version may not be such a high priority. High resolution screens, great zooming, powerful processors, makes building a mobile version less important for many Web sites.

    An example of a company that does a great job, Bank of America. Their desktop home page is dense with links and information. You can open accounts, loans, and a million other things. Their mobile site addresses just what a mobile user wants: atm locations, check balances, transfer money, make payments. It is pretty powerful, but simple to use.

    Best of luck! Cheers!

  18. This is my first time on Obsidian Portal ( I picked up the link on a friends Facebook page), but I am a Web Developer, and I have done a couple of mobile sites. In general, style sheet switching is an inferior way of presenting mobile content. As you mentioned, mobile users generally have different motives, and therefore should be presented with content in a different fashion. While making the mobile version “read-only” may make sense for your content, often times that makes the site “pointless”.

    Instead, I would recommend presenting a completely different site, new theme, new code base. Your database is the same, so the content and capabilities have the same appeal, but presented with the mobile user in mind.

    Menus at the top and bottom (don’t bother with drop-down, or slide-out menus, there is no “hover” on a touch screen!), plenty of padding on links and buttons (for fat-fingers). Break up forms and content into a linear, simple interface.

    Just a thought, the modern mobile browser is SO capable, that making a mobile version may not be such a high priority. High resolution screens, great zooming, powerful processors, makes building a mobile version less important for many Web sites.

    An example of a company that does a great job, Bank of America. Their desktop home page is dense with links and information. You can open accounts, loans, and a million other things. Their mobile site addresses just what a mobile user wants: atm locations, check balances, transfer money, make payments. It is pretty powerful, but simple to use.

    Best of luck! Cheers!

  19. Can I just echo the comments above. I work at a firm with an online job tracking software and we have two web interfaces, one for the office that can be quite complicated and allows you to do everything and the other is the “mobile” interface that allows the field technician to do what he needs to do and a little bit more. One database, two site codebases. You can access the office website from your iPhone but it’s alot easier on the mobile interface.
    As an OP user these are things I want to do with OP from a tablet/mobile device;
    Make small additions to pages (lite editing)
    Bring up adventure logs while running a game (I write up everything I need in the GM only area and then fill out the log after the game at my pc)
    Bring up info on the wiki
    Show my players images from pages.

  20. Can I just echo the comments above. I work at a firm with an online job tracking software and we have two web interfaces, one for the office that can be quite complicated and allows you to do everything and the other is the “mobile” interface that allows the field technician to do what he needs to do and a little bit more. One database, two site codebases. You can access the office website from your iPhone but it’s alot easier on the mobile interface.
    As an OP user these are things I want to do with OP from a tablet/mobile device;
    Make small additions to pages (lite editing)
    Bring up adventure logs while running a game (I write up everything I need in the GM only area and then fill out the log after the game at my pc)
    Bring up info on the wiki
    Show my players images from pages.