ProjectForum News and Tips

« New Beta featuring Mobile Support. | Main | Price Slashed over 90% for 1 Group License »

November 23, 2011

Support for iOS and Android

We've now released version 7.2 of ProjectForum and CourseForum.

More info can be found via this press release or in our change log.

The highlight of these versions is new mobile support, so I just wanted to take a minute to explain what that means and how it works.

Users of Apple's iPhone or iPod Touch, as well as Android users, are now offered a mobile-specific view of most pages, geared to the smaller screens and touch capabilities of those devices. You can see some examples here:


Directory Page

You'll find that fonts have been adjusted to be more device-appropriate, some of the more complex features have been hidden away, and many page layouts have changed to fit better on your screen.

You can also toggle between the mobile view and the "regular" view at any time (for example to access some of the complex features that were hidden on the mobile view). You'll also find that some of the more complex, less-used pages, such as the site or group administration pages, don't have a mobile-specific view, so that you'll always see the full view.

iPad

When it came to the iPad, we found that the mobile view designed for the smaller screens didn't work as well, and opted to keep the regular view of pages, complete with all the different themes. That doesn't mean we haven't made changes here however. You'll find that fonts are increased to a more comfortable size when viewed on the iPad, and there has been some tweaking of layout.

Other Improvements

While we were making these improvements to support mobile devices, we couldn't help but make a few other changes here and there that we think will improve things for everybody. You'll notice the 'sign in' area on the main directory page has changed, and that page locking controls on the edit page are hidden until needed. There are also lots of small layout, wording and other cosmetic tweaks in dozens of places. And a few bug fixes to a couple of the themes (especially Broadcast and Dark Weblog).

A Note to Custom Themers

If you've developed your own custom themes, you may need to know what's going on behind the scenes. When a small mobile device is detected, the normal theme that would be displayed for the page gets replaced with a special new "mobile" theme, which like all themes is pure CSS. To accomplish this though, some of the HTML that is generated was changed, and relies on some different styles than in the past. For example, all the forms used to be rendered as HTML tables; these are now done purely by CSS, without any tables. A number of new styles were of course introduced in the process.

For the iPad support, each theme stylesheet (styles.css) as well as the base stylesheet (base.css) has an iPad-specific section to it, which is used to override font sizes defined in the rest of the theme.

If you're using a custom theme that has been "derived" from an existing one (i.e. you don't define your own "styles.cs" which replaces the inherited one, but instead override particular styles in "extras.css") most of this should get automatically picked up, and you will likely have few if any changes to make to your custom theme.

If you've created a custom theme that has its own "styles.css", now would be a very good time to convert it to a properly derived theme, where you factor your changes out all into an "extra.css" file, so that you'll pick up these changes in the base theme, and those in future versions of the software, automatically. You can find out more via our Themes HOWTO.

How to Add iPad Support to your Theme

Take a look at the styles.css of the built-in themes (or base.css). You'll notice at the end of the file, after all the main styles have been defined, there is an iPad section that overrides just a few attributes of those styles. It's couched in a conditional that triggers that part of the CSS just for the iPad:

other styles...
@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) {
    /* ipad */
    ipad-specific style overrides...
}

Comments

job online

nice program if it can did that i can use Android applications and add!

The comments to this entry are closed.