Hi list,
I recently helped shepherd a new skin into Mediawiki; https://www.mediawiki.org/wiki/Skin:Erudite
I would like to think it is perfect in every way, but one area it hasn't had any love is making sure it works well on mobile devices.
To the best of my knowledge it shouldn't do anything particularly heinous, but I don't have any such devices to test it on. If anybody has a few minutes and could have a play, and see if anything could be improved, please do and let me know on list.
A live example of it is at https://www.dur.ac.uk/nick.white/erudite-demo/mediawiki-current/ which should have full editing etc rights enabled. It's a dummy wiki, so add whatever you like.
Thanks in advance!
Nick White
Hi Nick! Sorry for the lack of a quicker reply.
I'd say the most important part of mobile design is thinking about mobile from the start. It encourages you to identify what the key pieces of functionality that your website simply must surface are and helps you build beautiful interfaces.
Without a mobile device it is relatively easy now to simulate on a desktop what your skin will look like. If you use Google Chrome click view > developer tools and click the cog in the bottom right. In the overrides tab you can change the device metrics to match smaller screens. Another simple thing to play around with is simply resizing your browser window to see what it looks like.
Without a doubt going forward you will find media queries useful: http://css-tricks.com/css-media-queries/
It's also worth reading up on: https://developer.mozilla.org/en-US/docs/Mobile/Viewport_meta_tag
This should be a good starting point for getting your mobile site mobile friendly - but it's a huge topic in itself, so it depends how much you care about your users mobile experience :)
Jon
PS. Do you run OSX, WIndows or Linux? There are various simulators you can download so that you can test on iphone, android devices as well as various mobile browsers such as Opera Mobile and Opera Mini that you can test out!
On Fri, Sep 28, 2012 at 8:43 AM, Nick White nick.white@durham.ac.uk wrote:
Hi list,
I recently helped shepherd a new skin into Mediawiki; https://www.mediawiki.org/wiki/Skin:Erudite
I would like to think it is perfect in every way, but one area it hasn't had any love is making sure it works well on mobile devices.
To the best of my knowledge it shouldn't do anything particularly heinous, but I don't have any such devices to test it on. If anybody has a few minutes and could have a play, and see if anything could be improved, please do and let me know on list.
A live example of it is at https://www.dur.ac.uk/nick.white/erudite-demo/mediawiki-current/ which should have full editing etc rights enabled. It's a dummy wiki, so add whatever you like.
Thanks in advance!
Nick White
Mobile-l mailing list Mobile-l@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/mobile-l
Hi Jon,
No worries about not replying immediately - you made up for it with the usefulness of the reply :)
I'd say the most important part of mobile design is thinking about mobile from the start. It encourages you to identify what the key pieces of functionality that your website simply must surface are and helps you build beautiful interfaces.
Wise words, I'm sure. While I'm not particularly interested in mobile computing, it forcing me to think about deeper about key functionality and flow for the design can only be a good thing.
Without a doubt going forward you will find media queries useful: http://css-tricks.com/css-media-queries/
Thanks for the links. I always thought of using css media queries as cheating somehow, but I suppose it makes sense to create actually attractive and useful designs which can scale down elegantly.
I shall read up more on this stuff, and at the very least try hard to make sure everything is basically usable. Long shot, but if anybody wants to dive in to help, please do! https://www.mediawiki.org/wiki/Skin:Erudite
As for simulating a mobile device, thanks for the advice. I'm running Debian Squeeze at the moment, so I'll have to update my Chromium to get the developer tools with exciting device metrics options - thanks for pointing that out.
There are various simulators you can download so that you can test on iphone, android devices as well as various mobile browsers such as Opera Mobile and Opera Mini that you can test out!
What advantage would the 'various simulators' you mentioned have over just using Chrome's metrics stuff? I just wonder whether it's worth me setting that stuff up too?
Thanks again, very much, for you help.
Nick
It has been a while since I posted this, but I finally got around to making the skin mobile friendly. At least it should be ;)
The gerrit change is at: https://gerrit.wikimedia.org/r/#/c/68212/ And there's a demo install at: https://www.dur.ac.uk/nick.white/erudite-demo/
Does someone want to take a quick look and see that it basically works and is sensible? It's the first time I've done anything mobile-ish, and I don't have such a device myself, so any feedback at all would be most welcome :)
Thanks in advance,
Nick
On Mon, Oct 22, 2012 at 06:33:06PM -0700, Jon Robson wrote:
Hi Nick! Sorry for the lack of a quicker reply.
I'd say the most important part of mobile design is thinking about mobile from the start. It encourages you to identify what the key pieces of functionality that your website simply must surface are and helps you build beautiful interfaces.
Without a mobile device it is relatively easy now to simulate on a desktop what your skin will look like. If you use Google Chrome click view > developer tools and click the cog in the bottom right. In the overrides tab you can change the device metrics to match smaller screens. Another simple thing to play around with is simply resizing your browser window to see what it looks like.
Without a doubt going forward you will find media queries useful: http://css-tricks.com/css-media-queries/
It's also worth reading up on: https://developer.mozilla.org/en-US/docs/Mobile/Viewport_meta_tag
This should be a good starting point for getting your mobile site mobile friendly - but it's a huge topic in itself, so it depends how much you care about your users mobile experience :)
Jon
PS. Do you run OSX, WIndows or Linux? There are various simulators you can download so that you can test on iphone, android devices as well as various mobile browsers such as Opera Mobile and Opera Mini that you can test out!
On Fri, Sep 28, 2012 at 8:43 AM, Nick White nick.white@durham.ac.uk wrote:
Hi list,
I recently helped shepherd a new skin into Mediawiki; https://www.mediawiki.org/wiki/Skin:Erudite
I would like to think it is perfect in every way, but one area it hasn't had any love is making sure it works well on mobile devices.
To the best of my knowledge it shouldn't do anything particularly heinous, but I don't have any such devices to test it on. If anybody has a few minutes and could have a play, and see if anything could be improved, please do and let me know on list.
A live example of it is at https://www.dur.ac.uk/nick.white/erudite-demo/mediawiki-current/ which should have full editing etc rights enabled. It's a dummy wiki, so add whatever you like.
Thanks in advance!
Nick White
Hi Nick Great stuff! It does seem a lot more mobile friendly! However you'll need a viewport [1] as it currently looks the same as desktop on an iPhone [2].
I responded on the patchset as well! Jon
[1] https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag [2] http://jonrobson.me.uk/tmp/erudite.png
On Wed, Jun 12, 2013 at 11:46 AM, Nick White nick.white@durham.ac.uk wrote:
It has been a while since I posted this, but I finally got around to making the skin mobile friendly. At least it should be ;)
The gerrit change is at: https://gerrit.wikimedia.org/r/#/c/68212/ And there's a demo install at: https://www.dur.ac.uk/nick.white/erudite-demo/
Does someone want to take a quick look and see that it basically works and is sensible? It's the first time I've done anything mobile-ish, and I don't have such a device myself, so any feedback at all would be most welcome :)
Thanks in advance,
Nick
On Mon, Oct 22, 2012 at 06:33:06PM -0700, Jon Robson wrote:
Hi Nick! Sorry for the lack of a quicker reply.
I'd say the most important part of mobile design is thinking about mobile from the start. It encourages you to identify what the key pieces of functionality that your website simply must surface are and helps you build beautiful interfaces.
Without a mobile device it is relatively easy now to simulate on a desktop what your skin will look like. If you use Google Chrome click view > developer tools and click the cog in the bottom right. In the overrides tab you can change the device metrics to match smaller screens. Another simple thing to play around with is simply resizing your browser window to see what it looks like.
Without a doubt going forward you will find media queries useful: http://css-tricks.com/css-media-queries/
It's also worth reading up on: https://developer.mozilla.org/en-US/docs/Mobile/Viewport_meta_tag
This should be a good starting point for getting your mobile site mobile friendly - but it's a huge topic in itself, so it depends how much you care about your users mobile experience :)
Jon
PS. Do you run OSX, WIndows or Linux? There are various simulators you can download so that you can test on iphone, android devices as well as various mobile browsers such as Opera Mobile and Opera Mini that you can test out!
On Fri, Sep 28, 2012 at 8:43 AM, Nick White nick.white@durham.ac.uk wrote:
Hi list,
I recently helped shepherd a new skin into Mediawiki; https://www.mediawiki.org/wiki/Skin:Erudite
I would like to think it is perfect in every way, but one area it hasn't had any love is making sure it works well on mobile devices.
To the best of my knowledge it shouldn't do anything particularly heinous, but I don't have any such devices to test it on. If anybody has a few minutes and could have a play, and see if anything could be improved, please do and let me know on list.
A live example of it is at https://www.dur.ac.uk/nick.white/erudite-demo/mediawiki-current/ which should have full editing etc rights enabled. It's a dummy wiki, so add whatever you like.
Thanks in advance!
Nick White
On Wed, Jun 12, 2013 at 8:46 PM, Nick White nick.white@durham.ac.uk wrote:
It's the first time I've done anything mobile-ish, and I don't have such a device myself, so any feedback at all would be most welcome :)
You do not have _any_ mobile device?! :)
Are you aware of the free or cheap (or at least with free trial) services like saucelabs.com or browserstack.com? You can use them to see how a page looks like with different OS/browser combinations.
Željko
On Tue, Jun 18, 2013 at 04:46:53PM +0200, Željko Filipin wrote:
You do not have _any_ mobile device?! :)
Nope, I don't, honest. Well, I have an old phone that does WAP, but I'm not interested in making my skin work well for that!
Are you aware of the free or cheap (or at least with free trial) services like saucelabs.com or browserstack.com? You can use them to see how a page looks like with different OS/browser combinations.
That's excellent, thank you, I was looking for something like that. I did try the iphone4simulator.com website, but it's more-or-less just an appropriately sized iframe, so not actually particularly useful (that caused me to overlook the viewport tag in my initial attempt).
Thanks again!
Nick