In the search of mobile theme

mobile_thumb.png Largely as a result of iPhone revolution, mobile devices today more wide spread and connected to the web than ever. It is increasingly important for web sites to look good on the small screen to attract mobile users. BlogEngine.Net has mobile theme that looks ok, but we need more and better. I’ve been looking for options and played a little with some of the frameworks available for other platforms. There are some interesting development, and I’m interested in doing more here. As first experiment, I updated my previous iPhone admin add-on and combined it with simple but fully functional mobile theme. It got a list of categories on front page, from where you navigate to the posts. You can also login and publish posts using admin add-on that became part of the theme. Take a look at screen shots, they are pretty self-explanatory.

categories_thumb.png login_thumb.png newpost_thumb.png published_thumb.png

If you want to try it out for your BlogEngine.Net site, download, unzip and move files to corresponding locations as you would for any custom theme or extension, then go to admin/setting and choose iPhone as your mobile theme.

Because this theme is based on CSS framework developed to support iPhone web applications, it looks best on iPhone/iPod touch. But iPhone by default pretends to be a “normal” and will load your standard theme instead of mobile. To force BlogEngine.Net load mobile theme for iPhone, you’ll need to add it to the list of mobile devices in the web.config file:

<add key="BlogEngine.MobileDevices" value="(iphone|ipod|nokia|sonyericsson|blackberry|samsung|sec\-|windows ce|motorola|mot\-|up.b|midp\-)" />

Last thing to mention, you might want to add some of your regular CSS styles to new theme depending on your design. That is, if you want to keep custom look and feel that main theme provides inside of the post body itself (special fonts, headers, picture alignment etc.). Generally speaking, support for mobile theme requires you to re-think the way you create content and layout. Even best looking mobile theme will do little if you have large pictures, graphs, tables,  use tricks to align things etc. But it will pay off if you take care of such things – you’ll get standards compliant portable content that can be easily moved and transformed in the future.

iphone.zip

About RTUR.NET

This site is all about developing web applications with focus on designing and building open source blogging solutions. Technologies include ASP.NET Core, C#, Angular, JavaScript and more.