DBVT.COM is now mobile-enabled. The home page, the blog, the photo gallery, the whole damn thing…with a little help from the Sueetie Framework. I knew Sueetie needed to have mobile support—to what extent I don’t yet know, but I decided to begin the process by going mobile with dbvt.com for the sole reason that there are less moving parts here.
Ruslan Tur and BlogEngine.NET Leading the Way
The Sueetie Mobile Architecture supports multi-platform access on the same urls. No “mobile.dbvt.com” or anything. When a mobile device is detected, a mobile-specific theme handles the request. If this sounds familiar to BlogEngine.NET users, that’s because it’s the same model. The forward-thinking men on the BlogEngine.NET team had a “mobile” theme for at least two years, predating even the iPhone. I took that idea and extended it for Sueetie and multiple-applications. Before proceeding I need to recognize Ruslan Tur for leading the way on BlogEngine.NET mobie theming. His posts at rtur.net were invaluable.
Just as BlogEngine.NET has two theme settings, now Sueetie does, too. You’ll see the updated Theme Admin page in Sueetie 1.4. And just as BlogEngine.NET has a MobileDevices app.config property, Sueetie now has a new SueetieConfiguration.Core.MobileDevices property which is shared by all Sueetie apps.
A Url Redirection Bonus
I realized quickly on that we needed full mobile/PC theme independence and that the /default.aspx page, for instance, could not be shared between the two themes. So I added a UrlRedirection HttpModule and extended the Sueetie Url Handling Model to include a RewrittenUrl property to serve as the rewritten url path for shared pages like /default.aspx. I’ll blog on that later. The redirection bonus is that it works site-wide for complete theme content independence in all applications. The new theming model in Sueetie 1.3 brought us to third base on theming independence. This final redirection function takes us to home plate.
A funny byproduct of using multi-themes and independent content was in addressing caching and the display of items like site menus. In testing I discovered that a mobile theme displayed a desktop theme footer menu or vice versa. I knew we had menu object independence, but noticed that both were sharing the same Cache Key. So if testing from a browser and iPhone, whichever browser caused the menu to be cached was what format the other saw it. Adding the Current Context Theme Name to the Cache Key fixed the menu sharing problem.
Say Hello to the new Chiclet Mobile Theme
Enough talk, time for pictures. Say hello to Chiclet, the new Sueetie Mobile theme, displayed here in DBVT.COM green. I’m thinking more red for Sueetie.com, as you no doubt already guessed.
I’ll show you the pages you see on a PC with their mobile counterparts.I removed substantial amounts of content on the mobile pages for the purpose of presenting them to you here. First the home page.
Next up the blog home page.
There's one more page I need to show you, a Gallery Server Pro photo slideshow page. Yes, Gallery Server Pro has now gone mobile. I'm pretty sure that's a first. There’s still some weirdness in the GSP mobile presentation between the iPhone Safari and Opera browsers, which I’m attributing to GSP’s heavy use of Component Art client-side functionality. But we’re close on that.
I’ve learned in my brief exposure to mobile design is that it is a world unto itself (or maybe just designing for Safari and Opera, I don’t know.) The big news is that a mobile architecture is in place for Sueetie. There’s work ahead, but all things being iterative, this could be an exciting adventure.