CSS on Mobile - Optimization Think Tank

tic
tic
edited September 2012 in Campaign Portal Building
Some great points have been raised, across various threads, about how our OP campaigns look on mobile platforms - both phones and tablets. I think this is a discussion we ought to have, as the mobile market grows and more and more people start wanting to view OP pages on mobile. It's really convenient to be able to whip out your phone while you're at the gaming table and check a few things, but functionality can become compromised the more we do to spice up our campaign designs.

I thought it best to start a new topic for it, instead of hijacking a different one (namely the October COTM thread). So: what can we, as members of OP, do to our campaigns to make them look better for mobile browsers? What are we doing currently that is hampering this?

To start us off, Gaaran pointed out in the COTM thread that menus and other content that fall outside the fixed-width "white box" of our campaigns are clipped out, and won't display on mobile platforms. I know that floating menus to the left of the campaign are very popular on a lot of campaigns, but to those who use them, does knowing they don't display on mobile platforms make you consider removing yours? What alternative solutions can we come up with for people who want to phase theirs out?

Comments

  • Langy
    Langy
    Posts: 364 edited September 2012
    It's not only that the floating menus don't display on mobile platforms - they occasionally clip into the actual content area, blocking it off.

    I use the following CSS code in Edgerunners in order to avoid that:

    ---

    @media screen and (max-width: 1275px){
    .sidebar-left, .sidebar-right{
    display:none;
    }
    }

    @media screen and (max-height: 600px){
    .sidebar-bottom{
    display:none;
    }
    }

    @media screen and (max-height: 425px){
    .sidebar-top{
    display:none;
    }
    }

    ---

    This removes the sidebars when the screen size is too small to show them.

    Further, during Edgerunners site re-design, I'm including a bottom nav table as well as the sidebars. You can see an example of it on the "cyberware":http://www.obsidianportal.com/campaign/edgerunners/wikis/cyberware page.

    I've been designing Edgerunners with mobile options in mind, as I occasionally browse the site from my android phone.
    Post edited by Langy on
  • gaaran
    gaaran
    Posts: 740
    I didn't know that you could do conditional statements in CSS. Consider my mind blown.
Sign In or Register to comment.

March 2024
Wrath of the Highborn

Read the feature post on the blog
Return to Obsidian Portal

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Discussions