#6 Interface Update for iPhone

Ben Skipper

I am working on an interface that allows for greater ease of use with a gesture/touch enabled device. Currently I am playing with the theme that relates to my school's colors. As soon as I nail this down, I will work on a default theme that is more neutral and appeals to a greater audience.

It is by no means complete, but I am posting what I have done so far so that you might have pointers or criticisms to help point me in a better direction.

I am not nearly knowledgeable enough with the php but am learning as I go. As is, I needed to modify the CSS for a few classes in ways that I am not happy with, but I can not decode enough of the php to figure out where the tags are for many of the dynamically created content lists ('My Courses' for example, which uses the base <a> tag for the list, where I would rather use another class).

Here are a couple of the premises for changes:

1)Took out the "back" button since a browser will have that within the browser interface.

2)Took out the link to download MLE as it is not ready for the iPhone and thus is a useless link for my application (though should be great for Google's Android architecture).

3)Larger buttons for easier button pushing in a touch device.

4)Took out some of the icons on the front page for spacing reasons - as well as the profile ID in the header bar (thinking about putting this in a footer on every page).

I have attached the CSS file and a couple of screenshots. The buttons are simple PNG files and I am using Apple's prescribed technique with their webkit extensions for CSS.


  • Ben Skipper

    Ben Skipper - 2008-10-19


  • Ben Skipper

    Ben Skipper - 2008-10-19

    File Added: withoutAddress.jpg

  • Ben Skipper

    Ben Skipper - 2008-10-19

    My Courses View

  • Ben Skipper

    Ben Skipper - 2008-10-19

    File Added: MyCourses.jpg

  • Ben Skipper

    Ben Skipper - 2008-10-19

    File Added: Weeks.jpg

  • Ben Skipper

    Ben Skipper - 2008-10-19

    Weeks from within a course

  • matthias

    matthias - 2008-10-19

    Just a few comments:

    1.) back-button: I'll leave that in for the other applications, since I've encoutered some mobile browsers, where the back-button is hidden somewhere in the menu and thus complicated to reach. But I will take it out just for the iPhone.

    2.) That is not necessary, you can disable the MLE-download for Moodle via Administration - Modules - MLE - MLE config. Then the link won't be shown anymore. But again I can disable it just for the iPhone too.

    3.) can be done with CSS (and the iPhone will use it's own CSS file) - but I've to keep in mind that users with different phones will use MLE-Moodle as well, so I stick to "smaller is better", for mobile phone browsers ;-)

    4.) I'm not happy with removing the icons from the start-page. But I can add a settings-value which turns of the icons on the start-page.
    The reason why I put the username in the header is, so that you know, who is currently logged-in. But I could move this link to the start-page instead. At the first line we could write: "Welcome UserXY!" or something like that.

    I can add a class-attribute to the A-Tags of the start-page if you want. Do you need class-attributes anywhere else?

    by the way, could you post the user-agent value, so I can identify that the current device is the iphone?

  • Ben Skipper

    Ben Skipper - 2008-10-19

    Thanks for the input. All of this is definitely specific to the iPhone and I agree that you need to keep MLE-Moodle for a broad range of browsers, my assumption being that we would implement any changes for specific devices via the user agent value (not exactly sure what that will entail, but I have the concept).

    1+4)Sounds good...is this something that could also be put into the configuration settings of the module? ("What do you want to have in the header bar of the browser?" and have check boxes for each field and the ability to rename the button)

    2)Noted and will use the config settings - hopefully this will eventually be useful via Java support on the iPhone.

    3)Definitely - the buttons were simply student requests (as were the icons). The students who are using the downloadable application have no complaints about the interface, just the iPhone/iPod Touch users.

    Class attributes - I need to sit down and think out how this would best work without creating too many headaches and creating class names that made sense to those who want to customize. I'll throw some thoughts up on the forums.

    User Agent
    Here is one I got from the internet for the iPhone (emulating in Safari)...

    Mozilla/5.0 (iPhone; U; CPU like Mac OS X; en) AppleWebKit/420.1 (KHTML, like Gecko) Version/3.0 Mobile/4A93 Safari/419.3

    Here is mine on an updated iPod Touch...

    Mozilla/5.0 (iPod; U; CPU iPhone OS 2_1 like Mac OS X; en-us)AppleWebkit/525.18.1 (KHTML, like Gecko) Version/3.1.1 Mobile/5F137 Safari/525.20

    Thanks again...

  • matthias

    matthias - 2008-10-20

    Check out this new pre release of a new mle_moodle version:

    Check out the admin-page for the new MLE-Moodle configuration page

    and use the new "styles_iphone.css" for your custom changes.
    Do not edit the browser.php, perhaps we can find a better way to realise what you want (otherwise you will have to edit the browser.php everytime I release a new mle-moodle version)

    by the way, don't you think that the font-size in your css is a bit too large, in the normal PC-browser it looks really BIG.

    If you have CSS improvements for the iphone, please post it here

  • matthias

    matthias - 2008-10-20
    • status: open --> closed

Log in to post a comment.