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 doubt going forward you will find media queries useful: http://css-tricks.com/css-media-queries/

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!

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(a)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

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.