Menu

Search

InstantForum 2013 - The new jQuery Mobile Skin + Responsive Design

If you've been reading our blog you’ll know we are hard at work getting our InstantForum 2013 release ready for the first public beta. You can read more and see a early demo here.

At the moment we are just putting the final touches to our new jQuery mobile skin.  I wanted to quickly share with you some of the improvements we’ve added since our last post. 

jQuery Mobile Skin

Dedicated jQuery Mobile Theme

Our new mobile skin is built upon the jQuery mobile framework.  This ensures the most complete device support and provides a really nice highly optimized touch experience for your user. We've moved away from fiddly small inks. The new mobile skin is very touch friendly. 

We really wanted to make it easy to quickly review your forum whilst on the go. 
From the homepage you can see all your forums. We also added touch friendly quick links along the top that allow you to access the latest posts, popular posts and forthcoming events. 


 

 

Device Specific Themes

As we use the jQuery mobile theming framework we now customize the UI of our mobile theme to match the look & feel of the device you are using.

For example if you visit on a iOS device the jQuery mobile iOS theme will be loaded. If you visit on a Android device we load the jQuery mobile Android theme.  As we use a standard theming framework it’s also possible now to easily add new mobile themes. There are lots of community developed themes to target a number of devices. 

You can see a few examples below….

 

 

Better Navigation

We've revisited our navigation for the mobile theme and have made some very nice improvements. 
You can now touch a small navigation icon in the top left of every page to slide out the main navigation from the left. You can then tap the icon again to hide the navigation.

 

Quick Search

You can now click the small search icon on the right of every page to slide out a search panel. 



Responsive Images

Any images embedded within forum posts will now dynamically re-size for smaller screen sizes. This also supports orientation for example if you toggle between portrait and landscape images will re-size correctly… 





Unfortunately these screen grabs don’t really do the mobile skin justice. There are a number of nice transitions and effects we use from the jQuery mobile framework to make the application feel like a native application on your respective device OS. We will have a real demo online very soon so you can try this out on your preferred device. 

Responsive Design for Classic / Desktop skin

We've now added CSS3 media queries to ensure our classic desktop theme will re-size and flow correctly on smaller screen sizes. Our classic desktop skin will re-flow and scale correctly for the following screen sizes – tablet landscape (1024px) and portrait (768px)  – mobile landscape (480px) and portrait (320px).

We employ a number of techniques to make the classic skin responsive. Tables should now flow correctly and won’t be squashed up. Buttons will become bigger the smaller you make the screen size to make them more touch friendly. Our main navigation that runs long the top of every page will move to a touch friendly button once you hit 1024 pixels. 

We've improved many of our desktop controls to take advantage of these media queries to dynamically hide and re-flow elements based on your screen size. For example our paging control will hide buttons based on your screen size. 




Final Notes

Once we complete the new mobile theme we’ll be releasing a beta for the InstantForum 2013 release. If you’re an existing customer and would like download the beta please don’t hesitate contact us or email me directly on ryan@instantasp.co.uk

I’m sorry this is such a short blog post. I just wanted to keep everyone up to date and to let you know we’ll have our 2013 beta very soon. 

Thank you as always for your support. I look forward to bringing you further news. If we can assist don't hesitate to contact us or post a comment below. 

On a scale of 1-5, please rate the helpfulness of this blog entry


Not Helpful
Very Helpful
Optionally provide your comments to help us improve this blog entry...

Thank you for your feedback!

Add Your Comments

Comments require login or registration.