Symphony.

I am currently designing an extension to improve usability of Symphony’s backend on mobile phones (Android, WinMo, iPhone, whatnot).

First of all, I want to create a stylesheet that basically strips down the whole backend, enlarges all important buttons and changes the menu as hover-y things tend to confuse both phones and users on touch interfaces. :-)

Also I am thinking about hiding blueprints as you shouldn’t be fiddling with them on a mobilephone anyways.

I will start producing some lines in a few days (after my last exam for this semester). So until then its just a discussion to gather ideas and suggestions. Do you guys have any?

Oh yeeaahh this would be sweet!!

moonoo2

Great idea! I’ve played with customising the UI and it’s good fun. A lot of CSS overrides needed!

I agree that Blueprints aren’t required. The only purpose I can see is for editing content on the move, or perhaps changing Preferences (e.g. remoterly enabling to Maintenance Mode in an emergency).

If you specifically target the iPhone then you’ll have more scope for creativity and less work on compatibility testing. One idea I had was emulating the iPhone UI using an existing library (jQTouch, iUi, iPhone UI etc) with the initial list of links as a home page, which could be the list of sections under navigation groups.

Also, sounds like you need to get hold of some Notepods! (The name coined by our very own Makenosound.)

remoterly enabling to Maintenance Mode in an emergency

Oh right, that’s an important one! Maybe that and a button to disable the mobile phone CSS (just in case, so you’re not stuck with it all the time).

Could you bundle a mobile detection script to do this for you? You could potentially write different stylesheets for different phones.

To be honest, that script looks horrible: The generator returned

  mobile_device_detect(true,true,true,true,true,true,false,false);

Pretty self-explanatory, right? :-)

Additionally, they are only releasing it for free for non-commercial websites. I could only do the same, creating a messy licensing-situation.

I was actually thinking about using

  <link media="only screen and (max-device-width: 480px)" href="mobile_phone_css.css" type="text/css" rel="stylesheet" />

At least for the first version.

That’s the first one I stumbled across to demonstrate the idea, I imagine there are alternatives or you could easily make your own to check for specific devices (if, for example, you wanted to make an iPhone-only stylesheet).

But targeting using the media rule will work too :-)

Has anyone else noticed how the W3C site is serving different stylesheets for narrow screen widths?