Tweet
Written by IBxAnders and Xiaoyu Huang
Please note that the Mobile style is currently in development and not all features discussed in this blog post are currently available.
It’s shiny, sleek, fast, user friendly and is available in vBulletin 4.1.2.
Mobile Style Design Concepts:
The initial objectives laid out for the vBulletin mobile style did not appear to be extraordinary in conceptual stages: Deliver a minimalistic style with some basic functionality and a good integration with the core vBulletin4 product. In fact, “This should be quite simple!” - were our famous last words as we embarked on this project only to realize the sheer sophistication and complexity of the features, use-cases and special requirements that our customers demanded.
vBulletin set out to deliver a sleek, modern product that would work for well for our customers and deliver unsurpassed quality and value to their vBulletin powered community and ultimately their users. As such, we quickly realized that basic html/css along with all of our existing templates will not satisfy our product design goals and we must use the latest mobile technology.
VB Mobile Style & Touch Screen
The vBulletin Mobile Style has to be alive and interactive; the design has to fit our fingers, links and buttons bigger and bolder. The style will not only have to provide information but provide the users with an exceptional browsing experience. To meet these requirements we decided to incorporate touch screen features into the navigation functionality of the mobile style and take major design cues from iOS. To further make this a reality and ensure that functionality would be compatible across different devices we had decided to take full advantage of powerful mobile browsers; mainly “Webkit” core, which have outstanding support of standards: HTML5, CSS3 and Javascript.
A powerful browser framework was needed to seamlessly interconnect our product design goals with technical requirements. We evaluated many frameworks against our set of product requirements and eventually limited the choice to just two competing products – JQuery Mobile and Sencha Touch. While our friends @ Sencha provide a solid, feature-rich, comprehensive solution, we decided against using it based on several factors. For one, we did not want to present all of the vBulletin mobile UI components via JavaScript and we did not fall in love with the “Ext JS” syntax. Another concern was that at the time of evaluation, Sencha Touch framework supported only Andoid and ios – we wanted to support a broader range of devices and operating systems.
VB Mobile Style & JQuery Mobile
Built on the rock-solid jQuery and jQuery UI foundation, the framework’s lightweight code is built with progressive enhancement and has a flexible, easily styled design. JQuery Mobile seemed more and more like the clear winner for vBulletin’s technical requirements. Accordingly, we chose the JQuery Mobile framework to power the touch-optimized vBulletin mobile style for smartphones & tablets. We are currently using a high-performance, much improved JQM version 1.0 Alpha 3 with JQuery 1.5.
Customizations for Your Site
The vBulletin mobile style is designed specifically to use the existing vBulletin Administration Panel functionality and Style Manager features to accommodate and allow for easy customization of the Mobile style product. Customers will be able to configure special auto-detection behavior as well as add custom code into their mobile style – for example – add advertising.
Our Favorite Features?
The vBulletin mobile style navigation bar was a challenging, but fun feature to implement. Navigation and Pagination presented a very unique UI implementation problem. The mobile screen is very narrow and we could not fit 4 buttons for “First,Previous,Next,Last” without sacrificing major screen real estate and usability. Our solution was to implement the “Swipe” feature, which triggers specific events in vBulletin. You can now “Swipe” your finger to navigate, for example to “Next” and “Previous” pages.
