This is very nice and should be part of the core. I was beginning work on something exactly like this but you beat me to the punch:)

mobile jquery could be usefull here

I wasn't able to log in using Lumia 800 with IE8. It didn't give an error but just brought back to front page. The textareas seemed to be more or less broken because of TinyMCE in HTC with Safari 4.0 and Nokia 5230 (Native browser).

Otherwise this is looking really good!

There is a lot of demand for usability in mobile devices so it's great that you're working on this.

mobile design is an area I don't have much experience in, though I'm going to have to learn pretty quick.  It does seem to be increasingly important though, thanks for the start gillie.

i notice that demo site loads very fast, so this responsive coding is not just for mobiles?
or is the speed in pc browsers the result of a fast server? 

hmmm ;-o 'moble', 'smart devices', the startrek 'communicator' -- seems to have been quite @focus for quite some (long) time. lotf od web`devel areas have been concentrating on 1) mobile (2) tabklet (3) desktop -- in that order!;) seems over past 3 years, users acceesing internet via smart phones are doubled. and various market studies indicate that by 2014, smart devices will be higher % than PCs. Our own little observations since abt 2009 consistently were that increasing %%s of our 1/4Mill+ *Kiddie user-base were coming in via.. smartphones! so, dare say that Smart devices - Android/ iOS. BlackBerry are becomng 'in' and older std devices are closer @ way 'out'. i've been (play) testing some handfuls few s/w utilities that auto-convert and optimize WML/WAP/HTMlL content for mobile view-ports, assemble compatives and such kindred aspects for smart devices targetting.. interesting stuff; incl whatever offerings jQuery sectors have brought out so far (recently). we're all getting to there, with certainty!

@gillie: Responsive web design is pretty complex topic, and i would ask what technique/technology/library are You using on this demo page? You use CSS3 media queries obviously, but is it all for now? How about compatibility with various browsers (especially IE8)? Did you make some tests?

This page http://caniuse.com/#feat=css-mediaqueries states that EI8 does not support media queries. Do you have some fallback mechanism?

edit: Did you consider putting media queries in media attribute of <link> tags? It might help not loading unused css code.

@gillie This is a great start with responsive design for Elgg. Thanks for these efforts!

@Srokap As I can see, gillie is using respond.js (https://github.com/scottjehl/Respond), which is the fallback solution for IE8 and other browsers with no support for media queries.

@Mike (vazco) yes, JQuery Mobile is another approach for responsive design (and more).

Ok, here are my thoughts for 3 approaches:

Approach 1)  HTML5 + CSS3 + media queries

Pros

• HTML5 + CSS3 is faster on desktops
• This is following a single web approach for desktop, tablets and mobile devices

Cons

• more complex to design
• Not really user friendly on mobile devices
• is slow on mobile devices as everything have to be downloaded, and depending on device scree size some UI blocks will be made visible or invisible
• not optimized for touch

Approach 2)  JQuery Mobile

Pros

• responsive design that is fully tested on many mobile and tablet devices, also in desktop browsers.
• if combined with media queries, it can be used also for desktops
• progressive enhancement
• built-in Ajax everywhere (can be configured though)
• based on JQuery, the most robust and favored JS Framework
• more faster than approach 1)
• more user friendly on mobile than approach 1) - optimized for touch
• slick and elegant UI widgets on mobile device with native look
• easy to learn and develop for mobile devices
• plays very well with PhoneGap

Cons

• more widely used for mobile devices. if combined with media queries, you need more efforts to develop that single web approach.
• compared with native apps, it is sluggish and slow
• to my opinion, better suited for developing less complex mobile device apps

@Srokap (vazco) The demo is a clean elgg 1.8.8 installation and a plugin with the responsive stuff, mostly css.

Core files are untouched except topbar.php and header.php. I use respond.js to support IE as mentioned by SocialPlus+ . I did try bootstrap and googles ss3-mediaqueries.js but ended up with respond, which is working very well, I think.

Besides that a js code snippet makes dropdown menus close on finger tap.

If you go to the demo with a handheld, you'll see that the avatar hover-menu closes on finger tap. But it's just the mentioned fix, a built in support for gestures will be a challenge.

Another problem is friendspicker. I found it almost impossible to make it work in a responsive layout. In the demo the friendspicker.js is unregistered.

@Juho Jaakkola  Weird you have problems logging in. Can you login to other elgg sites with those devices?

@SocialPlus+  I would definitly recommend approach 1. Not least because 2 and 3 in my opinion is overkill.

The JQuery Mobile is not there yet, I found it quite difficult to work with and do not think that the app look is worth striving for.

@Gillie :  good job. Working fine with Chrome, FF. 

@Social plus: the jQuery mobile is much easier and better solution. Also bringing in the bootstrap (#3) in to elgg has more advantages like inbuilt jQuery plugins.