Moodle theme / mobile theme

Moodle theme / mobile theme

by Vijay N -
Number of replies: 5

Hi,

Moodle 2.4+

I am just interested in knowing more about the mobile and tablet sections in the theme selector.  From a theme design point, what specific lines need to be added (or css) in the theme files to make a theme compatible with mobile or tablets - or does moodle some how compress the site to be more mobile or tablet friendly from a user interface?

Thanks in advance

Vijay

 

Average of ratings: -
In reply to Vijay N

Re: Moodle theme / mobile theme

by Richard Oelmann -
Picture of Core developers Picture of Plugin developers Picture of Testers

Specific css lines for mobile/tablet - non e: but you need to consider mobile/tablet in the entire design, probably by making the theme responsive such as bootstrapbase/clean or zebra/krystle

Additional compression for mobile/tablet in moodle - no. Again upto the theme designer to make the theme mobile device friendly eg. using css3 instead of images, making the theme responsive etc.

In reply to Richard Oelmann

Re: Moodle theme / mobile theme

by Vijay N -

Thanks Richard,

 

Are there any documents around this topic of designing the theme for mobile and tablet (eg:- ipad) use...

On the above point - using css3 instead of images...the only thing I would worry is that most office users are still relying on Internet Explorer 8 instead of 9, 10, or 11....so Css3 would not work for these users...

In reply to Vijay N

Re: Moodle theme / mobile theme

by David Scotson -
Hi Vijay,

that's one of the benefits of sending a different theme to mobile devices, you can drop all the IE8 specific workarounds and not worry about it, since mobile devices are generally more advanced in their CSS support.

However, I'm keen for any such improvements to be added to the Bootstrapbase theme in a way that benefits both desktop and mobile users e.g. if you put all the IE8 workarounds in a separate CSS file then you can send that only to users of IE8, not users of Chrome, whether on a desktop or mobile device.

Currently though, deleting CSS intended for IE6 is more pressing and benefits even users on IE8 while reducing downloads for mobile devices on 3G networks and with small caches.

There's some bugs related to this here: MDL-39094 "Make Moodle's CSS smaller"
In reply to Vijay N

Re: Moodle theme / mobile theme

by Richard Oelmann -
Picture of Core developers Picture of Plugin developers Picture of Testers

Well, that (css3 v images) now depends on whether you are talking about making a fully responsive theme that works on desktops as well as mobiles and tablets, or your original question about making a theme specifcially for mobiles/tablets. Moodle copes with both using its device recognition.

If you are making a single, fully responsive theme (whether its bootstrap based or not - there are alternatives) David's solution of serving IE specific css is probably the best option. (In work I've actually created a single responsive desktop/mobile theme, but then added IE8 to the list of legacy browsers that get served a non-responsive version of the theme with IE specific (non css3/non-html5) code in it.)

If you are making a separate, mobile only theme, allowing Moodle's device detection to serve a full desktop theme to the desktop browsers and a mobile theme to mobiles/tablets, then you wont need to worry about IE8 as its not used on modern mobile devices anyway! (And they need to get onto a decent modern standards-compatable browser anyway smile - IE10, FF/Chrome, both of which are free downloads and work on XP! Alternatively, add a prompt for users to download ChromeFrame to your theme - this renders most things as if they were in a chrome browser from within IE)

As for documents - for moodle and mobile themes, not that I can recall immediately, but on responsive design and mobile website design, there are literally hundreds on the net, most of which have good advice which can be applied in some ways to moodle theming.

Richard

In reply to Richard Oelmann

Re: Moodle theme / mobile theme

by Vijay N -

thanks guys,

I will update this thread if i have further questions on this...