I have created a mobile specific theme for my blog! If you are on a mobile device this is not news to you!!
I came across this post by Betrand Le Roy (the father of Orchard!) the other day whilst looking into this and it exactly what I needed for dynamically changing the theme in my blog. Combine that will how much I like it when you go to a site on a phone and it’s layout is changed to make it easier to read/use. And I’ve not seen many better than the blogspot/blogger theme by this guy, if you’ve got a few minutes, take a look at the site – his designs and artwork are pretty special. You can see a demo of the mobile theme I am on about here on some Europe news blog.
Now, I should manage expectations, my theme was created in a few hours and isn’t as good as that one…it has swipe events and everything!! Something I might look to do in the future! I found a jGestures project on codeplex that should help.
I could use something like jQuery mobile (which I’ve looked at before– apparently v1 is out now) or IUI, but they look very iPhoney and i think my iPhoney days are behind me, but anyway…I don’t want an iPhone look-a-likey, I think they generally look average and don’t work as well as a native app, so don’t make it look like one.
I just want a simple theme that works well on a mobile device. And this is what I come up with!!
I have tried on my Windows Phone 7, but that doesn’t do screen shots…which is something I just found out!! Trust me…it looked equally magnificent!!!
Kept with my Metro theme – which for me means square and blue 
Made the whole abstract and title area clickable so its easier for fingers.
Search box is nice and big (I have hidden the search box when you are on a single blog page – keeping the focus on the content).
Generally made buttons/text and stuff a bit chunky!
I based it on the SafeMode theme that you get with Orchard, so really starting from the bare bones, which is good – kept the project nice and trim!
I have overridden numerous views to get this far…
Couple of problems with it:
Navigation: I don’t have a menu, I don’t really want the same items as the main site and with the standard Orchard menu module, I don’t think its possible to have different menus. Sure I could hack in something!
Zones: I haven’t shown most zones, mainly because I want to keep it trim, but I would like to at least have the tags, I like using tag clouds on sites if nothing else it gives me a feel on what content I can expect to find here or where the author’s interests/expertise lies, but because I’ve got my tag cloud in the same zone as the twitter widget and I certainly don’t want that. The solution is to probably put the tag cloud in a zone I don’t use on the main site as well as the one I do and render the respective zone in each theme!
Bit bloaty: I’ve got a few js libraries like Syntax highlighter which give it a bit of bloat – I’m should run some tests to see how performance is!
Moving around: Basically there is no way to move around, the theme mentioned above has back and next etc, I’m not sure this functionality is even available easily in Orchard, but currently you either need to hit the back button or scroll back up to hit the header once you’ve read something…making the wild assumption that anyone even makes it to the bottom!!
Swipey stuff: Need to get some swipe actions happening!
Theme switcher: I have put the code for the switching in my main theme, obviously means there is a dependency on having the mobile theme, not a problem. However unless I set the Mobile theme as the current theme and then set it back to the main one again, the mobile theme is not loaded. I don’t get an error, but none of the styles are loaded for the Mobile theme…i simply get “SafeMode”.
Blog and only blog: This is specifically targeting at blog sites – it will need more work to handle pages etc.
I’m going to hopefully work on some of those over coming weeks and release it to the Orchard Theme Gallery.
Resources:
- Calendar icons and markup
- Metro icon creator thing (love this!)
- Dynamic theme changing in Orchard
- Orchard Theme Gallery
- Creating a theme for Orchard