Dave Burke : Freelance .NET Web Developer specializing in Online Communities
Home
Services
Blog
Photos
Search
Contact Me
Welcome, Guest!
Sign in
Join
Going Mobile with your ASPNET Website
Howdy!
[Me]
[Services]
[Sueetie]
Why is Mobile a Requirement for Your Website
Look at the numbers, man.
Demonstrates you're serious about your business/product/services
Mobile website is cross-device. Cost effective solution
What I'm Talkin' Bout
Sueetie Framework Apps: BlogEngine.NET, Gallery Server Pro, ScrewTurn Wiki, and YetAnotherForum.NET. Using the same logic we'll demonstrate today you'll find fully mobile versions of each application at Sueetie.com and screenshots below. Two factors to keep in mind in all of your mobilization efforts: 1) Creating a Mobile Version of your website is primarily a matter of reduction, and 2) Our goal is to facilitate the
consumption
of content from our website, not necessarily the production of content.
Compare the two Sueetie.com Home Pages
Two formats of the same Sueetie.com Forums Thread
Two formats of the same Sueetie.com Blog Post. Consumption Junction.
Something you've not seen before. A Mobile Wiki
For Completeness Sake. A Mobile Media Gallery
Everything I learned about Mobile Design I learned from BlogEngine.NET
Two Themes: One for desktop browsers, one for mobile devices
Sueetie Framework Root
YetAnotherForum.NET
ScrewTurn Wiki
BlogEngine.NET
Gallery Server Pro
Theme selection based on device agent description. Regex string placed in application .config
SueetieContext.Current.IsMobile
SueetieContext.Current.Theme
Notice, nothing is cached here as an application Theme property normally would be. For example: SueetieSettings.CurrentTheme
Setting the Theme
Theme is set in a base page from which application pages derive
Using IsMobile and a Tip that's Golden
Example A
Alternate Links for Address Bar RSS Links
Example B
Pages: To Share or Not to Share
Way different form factors require way different .ASPX pages
Url Redirection
HttpModule on Begin Request traverses through items in url.config below. If current rawUrl matches "path" it is rewritten to the RewrittenUrl url, substituting the current desktop/mobile theme using SueetieContext.Current.Theme
Mobilizing your Website: Tips and Tricks
Reduction
All about Width
Tiered Services: Web more, Mobile less
User Agent Switcher Extension for Firefox. Gotta Have It
Safari Font Substitution. Google It
Beware the Mobile Browser. Nuff Said.
Consider creating an iPhone Home Screen Icon
Fixed width image sizes in free-form content like blog posts or wiki pages
Providing a full-size option from mobile devices
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
Thanks
Thanks for attending my session!
Refresh page...