Responsive Elgg

I've talked to Evan about boosting the process of making elggs default theme responsive. It would be interesting to hear what the general opinion is.


The starting point is the preservation of the theme as it is now and use media queries. However, with some appropriate modifications that meet the handheld screen. It will also require a javascript if the explorer must be supported and some js for touch functions.


I have put a demo online here. Let me know what you think.


http://www.perjensen-online.dk/showroom/responsive/

  • 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:)

  • 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
     
    Approach 3)  Grid frameworks with responsive design support, e.g. twitter bootstrap, Foundation 3 and many other frameworks. 
     
    Pros
    • faster development than approach 1)
    • they are free!
    • they follow own standards and conventions, and which are ready set
    • less testing required (already tested in many browsers)
     
    Cons
    • more difficult to customize
    • learning curve also required for Elgg plugin developers
    • could have problems to implement with Elgg
    • they have often uneccessary markup that is not used
    • can be more difficult for Elgg developers if they don’t know that framework
     

     

  • @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.

Feedback and Planning

Feedback and Planning

Discussions about the past, present, and future of Elgg and this community site.