Feb 04 2012
Feb 04

Posted by Graeme Blackwood on Saturday, 4 February 2012 at 6pm

One of the most important and complex aspects of a DrupalCon is the schedule. An enormous amount of work goes into getting it right – from the huge number of session submissions, which have to be reviewed and selected by the track chairs and their teams, to the people whose job it is to carefully consider and decide time slots for all of them.

Once all of this work has taken place, the schedule then needs to be presented, in print, on meter boards, posters and in the delegate guide, as well as on the website and mobile app.

With around 70-80 sessions over three days and eight tracks, with three possible skill levels and multiple presenters, all split up into different time slots, and sometimes sub-time slots, presenting this lot is not a simple task. I had some great people working with me on the London schedule and I think we did a pretty good job.

For Denver, the plan was to take the schedule a bit further, making it responsive so that the layout adjusts to the size of the screen you are viewing it on. This is particularly useful for mobile phones and tablets, on which the user experience would be very poor if the design wasn't responsive. Initially the Denver team were looking at a table format for the schedule, similar to the Chicago approach: http://chicago2011.drupal.org/schedule. This layout is really good, but tables don't do well with responsive design. Tables have no way of rearranging themselves – if the width of the table shrinks, the cells just squash horizontally until they are stopped by the longest word in each. This looks pretty horrible and usually breaks a website's layout on smaller screens.

DrupalCamp Austin did use a semi-table layout, and importantly, it doesn't actually use table markup, meaning it can collapse. This worked well because the number of sessions in a given time slot was limited. Denver's maximum is seven sessions in a single time slot, which even in a 960 set up, would be really squashing them in on a single row and force them to collapse almost immediately on the slightest resize.

Drupalcamp Austin's horizontal schedule layout

So a different method was needed. Initially taking the approach of a mobile web app, I put together an example schedule using Denver's branding to help demonstrate how it could collapse on smaller screens. The main difference in this layout is that instead of side by side, the sessions are stacked, divided by the time slots. The track icons were produced for Drupalcon Chicago and it felt really right to pick them up again for Denver.

The Denver team then adapted the prototype to fit the website and extended the icon set to cover the new tracks. While implementing, they made some subtle improvements to my prototype, like the track title on hover: http://denver2012.drupal.org/program/schedule

Drupalcon Denver web app prototype

There are definitely more improvements to be made. The hit area isn't very large on the sessions (only the title), so it's not always easy to press with your finger; wrapping everything in an a tag would resolve this. The rooms aren't displayed yet, which would be pretty useful to help you find your way around and some of the sessions don't fall into specific time slots, so we are working on adding these soon. Also the filters are yet to be implemented on the Denver site, but it is worth looking at the prototype on a mobile device to see how I envisaged them working.

This is of course, just one example of a schedule for one event format, but if you are reading this from inside or outside the 'Drupalsphere', I hope you found some of the ideas useful.

Categories: drupal, DrupalCon, Mobile, Responsive, UX

May 23 2011
Tom
May 23

Mobile Tools swiss army knife verticalIn a couple of months the Drupal community, and businesses will attend Drupalcon London 2011. An opportunity for us developers to learn about new trends, decision makers to evaluate Drupal and for a lot of Drupal pro's the opportunity to share knowledge with a wider community. I am looking forward to share my experiences on Mobile development with Drupal.

Each year, I propose a talk about something general called "Mobile Drupal", something I have been working on for a couple of years now and that has mainly resulted in the Mobile Tools module.

This year I choose to narrow down my proposal to a talk about techniques that Drupal module developers and site builders can use to prepare their existing desktop site for mobile. When you master this, you definitely are able to create a mobile site from scratch. So no extensive talk about javascript frameworks, and mobile user experience/design this year. Although this would also make an interesting session, this is something that goes much wider than just the Drupal community.

Currently many challenges exist in creating a mobile variant of your desktop site. Since Drupal is mainly desktop oriented, a lot of techniques are put in place to configure 1 display of your site. And to date,thousands of sites have been build with only "desktop" in mind. So how are we going to convert all those sites do mobile without having to rebuild them.
Under the hood Drupal allows some flexibility to configure your site for multiple display without the need for huge refactoring... And this is what my session will be about.
Some topics I really would like to cover are:

  • How to easily change formatting of your nodes on mobile?
  • How to make and configure mobile contexts for your pages?
  • How to make panels mobile aware?
  • How to create mobile alternatives for your views while maintaining paths?
  • What modules hook into mobile contexts?
  • How to use imagecache to scale images for mobile?
  • How to create separate mobile navigation, while reusing the menu system?
  • How to cache both your mobile and desktop site?
  • How to make your own device detection and theme switching algorithm?
  • ....

There are many techniques available that help you in adapting your Drupal site for mobile, so I would like to demonstrate some of the techniques that can fit a 1 hour session :)

I hope that together with this 'developer oriented' session, we will also see a couple of sessions related to mobile user experience, mobile design and related several mobile frameworks that are around there...

So if you would be interested in this session, please head over to the Drupalcon website and you know what to do there ;)!

Bridging the gap between Desktop and Mobile publishing with Drupal

View the discussion thread.

About Drupal Sun

Drupal Sun is an Evolving Web project. It allows you to:

  • Do full-text search on all the articles in Drupal Planet (thanks to Apache Solr)
  • Facet based on tags, author, or feed
  • Flip through articles quickly (with j/k or arrow keys) to find what you're interested in
  • View the entire article text inline, or in the context of the site where it was created

See the blog post at Evolving Web

Evolving Web