Fundamental HTML Changes - The Foundation Grid and responsive design

Micah
Micah
edited May 2013 in General Archive
Probably the most fundamental change we're pursuing is migrating the underlying HTML structure to a responsive grid. In short, a responsive grid will allow the site to intelligently resize as you view it on different devices. Looking forward 5 and 10 years into the future, I see tablets and mobile phones being only more prevalent, especially at the gaming table. Therefore, we want Obsidian Portal to look nice and be easy to use on these devices. A responsive grid framework gives us a lot of power to do this right out of the box. We don't have the skill or time to create native apps, so this is our best way to provide a good experience on non-desktop devices.

*The Foundation Grid*

The framework we're looking at is "Foundation 4":http://foundation.zurb.com/grid.php. I've used Foundation on a few other projects, and I've been very pleased. The grid resizes nicely on different devices, and it provides a special mode specifically for mobile phones. So, our hope is that we can have the mobile site and the main site be the same, just intelligently resized. Contrast that with how it is now where the mobile site is vastly different. We basically have to maintain 2 separate views of the site.

*The Bad News*

The bad news is that this will be a massive change to the underlying structure of the site, breaking all the custom CSS and styling that people have painstakingly constructed. We're very sensitive to this, and it is our number one concern in the overall reforging process. We want to make this process as painless as possible, but at the same time we're trying to be bold and not be too scared to make changes. If we're not willing to break things, then we are essentially stuck and unable to move forward.

*The Way Forward*

Our plan to reduce the pain is to:

# Get the updated layouts on the beta server as quickly as possible and give access to it (first to High Ascendant backers, eventually to everyone). That way you can test out and tweak your CSS to fit in the new layout.
# Hopefully implement something like the "templating described here":http://forums.obsidianportal.com/comments.php?DiscussionID=3004. Going through and updating each and every wiki page will be painful, but less so if you're just adding includes to templates or something along those lines. It will still be painful, but perhaps not awful. No guarantees here, but we are really going to try.

If there's anything else we can do to help, please let us know. One special note, before it's asked: It's doubtful that we'll offer some kind of "run in legacy mode" to just leave your campaigns as they are now. That would require us to basically run 2 versions of the site (legacy and new), and we're just not in a position to do that. Running one is hard enough. If we find a way to do this (or something similar) that doesn't pull us away from the reforging too much, we'll definitely try.

Comments

  • crimsonknave
    crimsonknave
    Posts: 28
    I'm looking forward to this! It will suck some to redo custom css, but totally worth it.

    Perhaps some demo page with the new layout that anyone can access would let people test it out if they are using chrome and edit the css file with theirs. Won't really affect me, but I suspect there are a number of people who have custom css that didn't get access to the beta server.
  • gaaran
    gaaran
    Posts: 740
    I just want to say, as someone that has done a lot of work on creating custom CSS for my campaigns, "The Melekar Chronicles":http://www.obsidianportal.com/campaigns/melekar and "The Dark Queen of the West,":http://www.obsidianportal.com/campaigns/the-dark-queen-of-the-west I am okay if the reforging breaks what we have done. I would much rather see improvements to the site as a whole, than have my own stuff (and of course, the countless others that have done the same) be an impediment to the future of Obsidian Portal. Break away, and we'll pick up where you leave off!
  • xb95
    xb95
    Posts: 6
    I have not done a ton of customizing, but I second "just go with the new version, and make the changes you need to make it awesome" sentiment.

    Foundation is also a good system. I use it on some of my projects and am pretty happy with it. It takes a lot of the "oh god how do I~" out of building CSS, which counts for a lot for a backend developer like myself. :p
  • Langy
    Langy
    Posts: 364
    Like Garaan, as one of the people who has done a lot of custom CSS/etc for his site, I have to say - I *do not might at all* that the reforging process might require me to redo a bunch of it and, in fact, fully expected it to from the outset. There are a bunch of things that I had to do with that CSS that I expect I'll want to change around after the reforging is done (and one of the reasons I wanted to back at the High Ascendant level or higher is so I can see what's going on and fix the site up so that once the Reforging is complete our site should look fine).

    So, break away! I'm just happy with the direction you're breaking it;)
  • aelana
    aelana
    Posts: 3
    The benefit of using a good framework with sane, consistent CSS means that whatever work we will have to do to re-skin should be offset by that work being much easier to do. Plus it gives us a push as we redo our CSS to think about new things we haven't thought about such as, how does this look/operate on mobile devices. [if the parent site didn't design around mobile devices there is a lot of negative feedback and more effort required to make it work with mobile devices through only CSS so most people won't even bother, but if the parent does work well with mobile devices there is more desire to do so and it is easier when tweaking to keep it working that way]

    So take that as a vote for go for it, worrying too much about making things backwards compatible will just make the end result frustrating and confusing to customize and will probably make it worse overall.
  • Matrissa_The_Enchant
    Matrissa_The_Enchant
    Posts: 18
    A responsive grid framework for the HTML is totally the way to go for future-proofing the design. I wholeheartedly agree with the others who say that while, yes, fixing up custom CSS will be a PIA, it's more than worth it to have the site be better overall.

    One option you might consider is providing a configuration option that allows a GM to choose to "migrate" to the new layout or leave their campaign in "classic" style, perhaps only for a specific period of time, and have your code render those exactly as they are rendered now. Then let GM's with "Classic" selected toggle the state back and forth for individual pages so that they can tweak things to work in the new format. Then, when they're ready (or whenever the time expires) their campaign can be permanently migrated. If you did this, you'd probably have to separate the custom CSS files for "Classic" vs. "Modern" so that tweaks can be made to one without affecting the other.

    Also, regarding the framework - you mention Foundation 4, but are you actually considering any others? It's always good to compare and contrast, just to make sure you're really going with the best choice for your purposes. Some other examples you might want to check out (I haven't used all of these, but I've heard positive things about each):

    * "Twitter Bootstrap":http://twitter.github.io/bootstrap/ (Goes well beyond the basic grid scaffolding as it includes a comprehensive, customizable, set of core CSS styles and dynamic UI components - the company where I work actually uses this)
    * "Zen Grids":http://zengrids.com/ (Uses compiled CSS using "SASS":http://sass-lang.com/ and "Compass":http://compass-style.org/
    * "Golden Grid System":http://goldengridsystem.com/ (Two compilable options for the CSS, one built using SASS and built using "LESS":http://lesscss.org/ - my company uses LESS in conjunction with Bootstrap)
    * "Unsemantic":http://unsemantic.com/ (Responsive grid only, consideed the "next generation" of the "960 Grid System":http://960.gs/)
    * "Responsive Grid System":http://responsive.gs/ (Responsive grid only)
  • GamingMegaverse
    GamingMegaverse
    Posts: 2,998
    I have a bunch of custom CSS, and even more importantly, html that is repeated on each page. I don't care about changing the CSS- it is just one place, and would happily change it all! My worry is breaking my custom nav bars and buttons, which are not CSS, and having to change each one of my 900+ pages.... That being said, I have done game wide updates in the past, and would do it again, gladly, if it improves like it obviously will.
    Aelana brings up a great point- I know that my buttons are in the middle of the page on a mobile device, and this would give me the motivation to fix that issue!
    I love the template idea.

    Overall, I echo Langy- Break Away!

    Just trying to help out.

  • JustinMason
    JustinMason
    Posts: 36
    As long as existing dynamic links are maintained, personally don't mind anything else getting broken. Some of my older campaigns on OP have a ton of inline CSS and custom HTML (before the "global" css option was added) and they'll be completely trashed with a framework redesign, but my newer campaigns focus mainly on divs formatted in the new campaign-wide style sheet option. So, really, I'm thinking, no matter what get's thrown at us, "hands-on" content generators, it seems it should be a relatively easy task of redefining the values of the various classes in the style sheet.
  • GamingMegaverse
    GamingMegaverse
    Posts: 2,998 edited May 2013
    Like I said, break away (post was in error... sorry)
    Post edited by GamingMegaverse on

    Just trying to help out.

  • ZacZero
    ZacZero
    Posts: 8
    I've done plenty of custom CSS. I'm happy to see it destroyed in the name of improved future functionality. Templating is almost a must - that will (most likely) make a *huge* difference.
  • ChainsawXIV
    ChainsawXIV
    Posts: 530
    Like everyone else, as big user of the existing CSS customization, I'm totally on board with this despite the amount of work it will entail.
  • Quasimotocar
    Quasimotocar
    Posts: 12
    I have no custom CSS or other formatting customizations, so I don't really have anything to lose in this change. Nevertheless, I think the benefits of a responsive design framework well outweigh the temporary pain of re-doing customizations.
  • GTB
    GTB
    Posts: 10
    Hahahah Kallak is going to be so pissed. hahahahaha
  • FrankSirmarco
    FrankSirmarco
    Posts: 250
    Onward and upwards! We bought it - you break it!
  • PalamarTM
    PalamarTM
    Posts: 5
    Something that 37Signals did with their Basecamp project communication software when they "reforged" was to keep all the existing content and the existing website available for users who wanted it - telling them that absolutely no further development or bug fixes would be done to that site. Then they popped out the new site and gave each user the option to migrate project data from the old site - telling them there could be substantial loss of formatting and actually some data loss. I personally kept most of the existing projects in the "classic" version until they were closed, migrated one or two that I really wanted the new features for, and created all new ones in the reforged version. Just a note on how others have handled this issue.
  • ReverseG
    ReverseG
    Posts: 17
    I'm aware that any changes during the reforging may break whatever CSS I've put down, and as my main campaign started just after the Kickstarter was funded, I don't mind treading lightly with the custom CSS until we get the go signal to start messing with the code again.
  • Talonious
    Talonious
    Posts: 6
    I haven't done any custom CSS, but I play in games that have. Would it be possible to leave the custom css in, but disable it. So the GM could turn it on or off and see how broke it would be before using it? That way they could fix it and turn the feature on?
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