How do we want the main content schedule to work and appear at DC Denver?

The "usual" content at Drupalcon and other items that appear the schedule:

  • regular sessions
  • core conversations
  • BoFs
  • schedule items like coffee breaks and lunch
  • day stage
  • sprints
  • trainings
  • evening events

Do we provide it all, in some way, on the schedule? Or, are you unable to see some content (like evening events like parties, for example) on the main schedule?

Not only do we have those content types, but we have categories of certain types, such as tracks and skill level.

Comments

coltrane’s picture

DC London did a good job of progressing the Drupalcon schedule design forward, here's a screenshot of http://london2011.drupal.org/conference/schedule

Organized by day (limited to one day at a time), it provides a single-column list of content grouped by time with optional filters on track (session track, including core conversations and day stage) and skill level. The content shown is of types session, core conversation, and schedule item (coffee break, lunch, etc).

Isabell’s picture

I think it'll be good to add the evening events as well to the schedule so people know.
one thing missing on your list: Day Stage

Isabell’s picture

Issue summary: View changes

Updated issue summary.

Gábor Hojtsy’s picture

I think the London view did not really do a good job of showing stuff that happens at the same time visually. Can we make the data appear more like in a calendar table view? Like http://szeged2008.drupalcon.org/program/schedule.html? I understand it is small fonts and too wide screens required, but we can / should make it possible to filter it down to less wide views I hope. What do you think?

coltrane’s picture

Yes, we should use horizontal space when we have lots of it and thus show concurrent content in columns, like Szeged's schedule. For smaller screens the columns could collapse.

To show BOF or sprint content together with track content lisarex suggested creating an additional row within a time-slot row. This makes sense if we discontinue labeling columns by room name/number, which wasn't optimal either.

Common questions I've found myself asking at Drupalcons:

  • "What's next"
  • "What's next in this room"
  • "What's next [in specific track | of certain type]"

Controlling the schedule braindump:

Filters:

  • Show specific track(s)
  • Show specific skill level
  • Show other content (BOFs, sprints)

Column sorting:

  • Track
  • Room

Is column sorting compatible with showing BOFs?

Cell inner HTML (whether visual or semantic):

  • content title
  • time (microformat)
  • room
  • room sponsor name
  • speakers
  • track (if set)
  • type (if BOF, sprint, break, party)
  • skill level
  • add to schedule
  • edit (if authorized, useful for BOF scheduling)
Graeme Blackwood’s picture

Just some thoughts on this from a practical perspective –

Large tables don't work well with responsive layouts once you get down to small sizes. So we would have to fake a table with divs and display: table etc, then shift the display type at a certain point, and then stack the items.

If we are going to end up stacking them anyway for smaller viewports, why not go for a stacked layout like London's from the start? This layout would be much easier to implement in a responsive situation.

I have been refining a static HTML/CSS schedule design I did, taking influence from London, Chicago and Denver: http://labs.deeson.net/denver-schedule

It is still a bit "App-like" so would need adjusting before adding to the Denver site, but it isn't far off now – once the addition of the daily schedule tabs is in as per London / track names are changed to Denver's etc.

Scale the browser down or check it out in your phone. I have also set up HTML5 appcache to demonstrate how it could work offline.

Practically this approach is going to be a lot easier to implement than a horizontal time / session layout.

coltrane’s picture

Since it'll be a static schedule for launch we could leave out the filtering controls (unless you want to do it with JS, but I don't think it's necessary). Also, let's leave out rooms for now as the schedule will be changed a bit and that specific information isn't so important yet.

We have 9 tracks

  • Commerce
  • Site building
  • Coding and development
  • Design and user experience
  • Drupal community
  • Business and strategy
  • Mobile
  • Nonprofit, Government & Education
  • Core conversations

Graeme, I'll get you a page matching your HTML populated with live data.

pixelwhip’s picture

DrupalCamp Austin did a responsive schedule this year. We may want to look at that for reference. I'm not sure how well it will translate to a schedule with more events going on simultaneously.

http://2011.drupalcampaustin.org/schedule

rupl’s picture

Hi pixelwhip, I helped build the DCATX site and will try and use the feedback we got from attendees to help improve the Denver site.

I think Graeme's prototype is a good starting point! Here are some observations:

  • Page is lightweight DOM-wise, which helps ensure the page loads fast and scrolls well. Here are the DOM Monster stats at the time of my comment. We can run this test again (with more devices) once we load the whole schedule up and make sure it's still ok.
  • Image downloads are fairly minimal already, but I assume we'll reduce to one sprite by the DrupalCon.
  • Maybe we'd want to trigger fonts on bigger screens only? Fonts can cause a ton of latency.
  • I think we could pull off the columns on wider screens, but we don't need to worry about it just yet. Perhaps by the time the entire schedule is finalized we'll find a way to fit 9 columns across. If that doesn't work we could try doing five across, which would break into two rows fairly cleanly.

And some minor changes needed to make appcache more effective:

  • Appcache file has to be served as MIME type text/cache-manifest. Won't work otherwise :(
  • NETWORK section needs a plain * to work with all browsers.
  • Avoid caching HTML, so that we're always grabbing the latest content.

It's still a new browser feature, so I always keep a checklist of appcache facts handy to help me with debugging. Also, things change sometimes.

coltrane’s picture

Here's an HTML list grouped by time-slot http://test-denver2012.redesign.devdrupal.org/program/schedule

use drupal:drupal to get through basicauth

Graeme Blackwood’s picture

Thanks Coltrane. Is it worth me updating the HTML to reflect the data or does it make more sense (I think it does) to start theming now?

I think we need the days split into different tabs, and then we can just theme the views? I am not sure who on the Denver team has been doing the site, but am happy to support if needed.

coltrane’s picture

Yeah, if you would start theming that'd be awesome. I've updated the theme directory in this sandbox project to match bzr. You can also use test-denver2012 on redesign.drupal.org if you like. I assume you have access?

I can look into splitting into day tabs, yes.

Also happy to coordinate in real-time in #dcondtown or #drupalcon on IRC.

Graeme Blackwood’s picture

Great! Yes I do seem to have access – just logged in and can edit the CSS. My only concern is how my time is split at the moment. I only have evenings and can't get to this tonight or Friday, which only leaves tomorrow evening. Isn't this supposed to be launched on Friday?

coltrane’s picture

FileSize
82.86 KB

In #1397878: Handle content in between session time slots I'm wondering how we can show content that is between time-slots and progresses multiple time-slots. Also, with adding Drupal Means Business and BoF content perhaps it'd be better to not collapse them to one column. I expect that having DMB/BoF/Sprint/Day Stage content in a separate column is a strong visual indication that it's different. For example, in #1397878: Handle content in between session time slots have an image of a DMB content piece that happens during the Thursday keynote. Is the time range below its title a strong enough indication?

Here's a mockup I did of the additional inner-cell fields in #4 and including BoF and Day Stage content in the same column. Adding this additional content makes each time-slot section longer and maybe risks the user forgetting the content time?

Edit: The "My Schedule" would only display in mouse hover-over, much like the tracks are currently.

dcdenver-schedule-mockup.jpg

lisarex’s picture

Hmm, just playing around here, but what if each distinct time slot had it's own grouping/heading? You could label them a bit further to indicate whether they;re 45 min or 30 mins long....

https://skitch.com/lisarex/g585w/dcdenver-schedule-mockup

In the above example, I guess the next heading would be the next start time of the next block of events (though here, it's probably lunch ;))

If we want to stick with one of the proposed solutions.... I think the timeslot indicator in http://drupal.org/files/dmb-schedule.jpg is def not prominent enough, and in http://drupal.org/files/dcdenver-schedule-mockup.jpg I'd probably move the timeslot info above the node title, and def keep all the 45 minute content in one group.

Tricky problem to solve, though it's great to hear the London schedule was a success!

Graeme Blackwood’s picture

We could easily up the size of the time slot divider text to make it more prominent, and I think the simplest way to resolve the sub-times is just as you have done with the Phase 2 entry – by writing in the sub time.

I also noticed that the rooms are missing on the live schedule. Have they not been assigned yet, or was that overlooked?

coltrane’s picture

"I also noticed that the rooms are missing on the live schedule."

Purposefully left off for now. With the schedule completing this week the rooms should be finalized, so I'll get them added to a test site at least and will comment back here with links.

Graeme Blackwood’s picture

Cool, I figured they must not have been finalised yet!

coltrane’s picture

@Graeme I've started putting some day stage and room content into the test schedule at http://test-denver2012.redesign.devdrupal.org/program/schedule/2012-03-22

You should be able to reset your email for test-denver2012.redesign.devdrupal.org/users/graeme-blackwood so you can log on. I've made you an admin.

@lisarex "each distinct time slot had it's own grouping/heading" in #14: That adds some more vertical height. Not sure I think that it's better than increasing the specific time of interior content, and maybe highlighting it's different type.

Moving the time above the session title does look a bit better https://skitch.com/jeavons/ghadh/thursday-3-22-schedule-test-denver2012-dev

Graeme Blackwood’s picture

Hi,

I have updated the content type and Views to do exactly this. I am just using a text field but I figured it would help to keep it simple and flexible. I have also added a filter on the views to order by the time, but this means any sessions without a "sub-time" will be displayed before those with one. I don't think this is really a problem though.

I have amended the SCSS in a couple of places too, but am not sure how you are compiling it on this site?

G

kenwoodworth’s picture

Hi Graeme,

You'll need to compile the SCSS locally. We're using Compass so you can can follow the steps here to get it installed: http://compass-style.org/help/. Since the project is already set up, you won't have to do that part. Let me know if you have any questions.

Thanks!
Ken

Graeme Blackwood’s picture

Ok I have done this and made some tweaks to the styling to vertically center the icons now that some sessions have a specific time above the title (they looked off because all the other titles aligned nicely with the icon). Let me know if you are happy with this before I commit anything:
http://test-denver2012.redesign.devdrupal.org/program/schedule

Also added styling to the time slot here:
http://test-denver2012.redesign.devdrupal.org/program/sessions/drupal-ma...

coltrane’s picture

The schedule looks great. Good point about needing the specific time on the node. The specific time is only used for day stage content though, and I was thinking that it wouldn't be shown anywhere but the schedule, but it needs to be on the node. Perhaps it's only shown with your styling for day stage content types?

Graeme Blackwood’s picture

If there is no specific time set, it just won't display – I chucked in some randomly to test, so I think this is working ok?

coltrane’s picture

#21 looks good to me, thanks for working on this Graeme. I think you can commit and push live (or verify on stage, which is now http://denver2012.staging.devdrupal.org/)

Graeme Blackwood’s picture

Same for this – committed but the views/content type need updating. Is this all in code? If so it might be better for someone else to do it. Otherwise I can just do it through the GUI, but I don't have SSH or Drupal access to the staging site.

coltrane’s picture

@Graeme, you have admin access on http://denver2012.staging.devdrupal.org/users/graeme-blackwood I just set your email to full (the staging process alters emails) so you should be able to reset you password. If not catch me on IRC and I'll get you logged in.

coltrane’s picture

FileSize
65 KB

Not sure what to do with Day Stage content (see attachment)

Need to highlight it as so and figure out exposed filtering. It's a separate content type so ideally default view has it off with an easy "show day stage content" option. Perhaps just with JS?

rickmanelius’s picture

The problem with the day stage and/or DMB schedule is it had to break from the traditional time slots in order to account for all the sponsor talks, etc.

I think toggling on/off could work. What is the best way to proceed? A quick discussion and/or mockup?

coltrane’s picture

Schedule with Core Conversations, Day Stage, and regular sessions.

DrupalCon-Denver-schedule.jpg

Left to style:

  • Icon for Core Conversation (Ken has the graphic already made)
  • Icon for DMB or Day Stage or someother way to differentiate?
  • Add to my schedule flag
  • Filters
  • Other schedule nav like day tabs at bottom
Graeme Blackwood’s picture

If I can get the add to my schedule flag and filters output, I can look to start styling them. I'd like to default to using checkboxes for the Views filters, but I am not sure Views allows this without Better Exposed Filters? Once we get the basic action in, we can maybe look to lay JS over the top to avoid page refreshes.

Can I get the Core Conversation icon too please – this will be easy enough to add.

Will have a think about DMB / Day Stage. Maybe a slightly different icon style, e.g. not circle, so these are distinct from the tracks.

Have commented on the schedule tabs issue separately

coltrane’s picture

What do you think about doing just client-side filtering with JS and not using exposed filters? It's a bit hackish but will provide us the better customization and will work both online and off.

We could write the checkboxes into the template or block or Views header.

coltrane’s picture

FileSize
98.33 KB

Played around with better exposed filters and came up with the following:
drupalcon-denver-filters.jpg

Problems:

  • Hitting the server to filter content -- not really necessary as this content is unlikely to change during the event
  • No association between track, exp. level filters and content, i.e. if you don't have "Session" checked then marking track or exp. level will mean nothing will show (could maybe figure out better ORing of filters)
Graeme Blackwood’s picture

Great! I am thinking we can intercept checkbox selects and filter the schedule that way. If jQuery is off, the Apply button can be displayed and the default server request will take over.

Wondering if we should be using data- attributes or if we can get away with just reading the content of the .session-track and .session-level divs. I am not a massive jQuery wiz but that has got to be less efficient. Might be negligible on this though.

Regarding your second point above, yes I think we could check if no session track is selected and if so, show all with the selected level, otherwise only show the tracks + difficulty level selected.

Graeme Blackwood’s picture

Just went to have a look at the filtering, but I can't see it anywhere. Was the screenshot taken off test-denver2012?

coltrane’s picture

Up at http://test-denver2012.redesign.devdrupal.org/program/schedule now.

I'm not sure what makes the most sense for the Core Conversation and Day Stage filters. People want to see experience level & track, but because day stage and core conversations are separate content types we can't combine them.

I might be able to work on a custom filter that includes those content types with session tracks.

coltrane’s picture

Graeme Blackwood’s picture

Getting there with this! Just need to make it work with multiple selections. In fact it does work, but because I am looping through, the next one selected closes the previous lot. Trying to get the thinking right for it. Not far off though. Take a look: http://test-denver2012.redesign.devdrupal.org/program/schedule

I don't claim to be a jQuery guru, or even really a programmer, so I may be approaching this wrong. If anyone can see how to finish off really quickly, please go for it. Otherwise I will keep chipping away.

coltrane’s picture

Cool, you probably realized that I altered the tracks. I had a facepalm moment and realized we could just add the track and exp. level to the other content types. duh.

I can also take a try at this. Testing out some stuff now on my local setup.

coltrane’s picture

This is awesome, I have a similar approach but slightly different JS and I added a class using preprocess. Working locally but I copied it up to test-denver2012 and its in fine denver2012.js.ben

The issue I'm not running into is the differences between BEF with a filter applied and the JS. If you set filters and then apply you limit the result view on the next page, so the JS effects don't matter for that page that doesn't even have the content to show.

For example, filter to just Commerce and Site building and Apply. Then click on code and development and it can't do anything cause those rows aren't there.

I think we should extract the form from BEF and keep it all client-side filtering. We'd lose bookmarking a filtered View unless we wrote fragment filters (which is an option, but only if there's time). What do you think Graeme?

Graeme Blackwood’s picture

Only just spotted this, and have been continuing my work on it. I also completely changed the method and it is working nicely now, though it sounds like you got there before me. Hope I didn't overwrite anything of yours!

Yes I totally see what you mean about the applied filters. Can we do something clever as a fallback and show the BEF form in the unlikely case JS is off? This can probably done through a body class? May be helpful if anyone has an older mobile devices.

The other thing is that I think I'd prefer it as a faceted search, where you select to filter, not deselect. Feels more natural to me than hitting select none.

So start with all the checkboxes unchecked as before, and apply filters as you check. If none are checked, slideDown everything. It will make more sense if and when I get to style the checkboxes for mobile.

coltrane’s picture

Yes, that's true, we could have JS hide/disable the exposed filter submit button. I'm fine with select to filter over deselect, that makes sense.

slideDown is causing odd popping in Chrome, I think because it's looping through the elements. This was my approach that requires the track-[number] class on list items so the checkbox value can be applied:

  $('.form-item-track :checkbox').click(function(){
      // Toggle tracks.
    $('li.track-' + $(this).val()).toggleClass("hide");
  });
  $('.form-item-exp :checkbox').click(function(){
    // Toggle experience level.
    $('li.experience-' + $(this).val()).toggleClass("hide");
  });

It needs a little work though because if a track is being show and then an exp. level is hit it will toggle the matching tracks and hide them when it shouldn't.

Graeme Blackwood’s picture

Haven't managed to get round to this just yet. If you get any time or inspiration, please go for it! :)

coltrane’s picture

Status: Active » Fixed

Good enough for jazz!

Status: Fixed » Closed (fixed)

Automatically closed -- issue fixed for 2 weeks with no activity.

Anonymous’s picture

Issue summary: View changes

Updated issue summary.