Make Bartik a responsive design - meta issue

One of the major issues with responsive design is dealing with images, so I am wondering if there is some way we can push different presets depending on either the user agent or the screen resolution - not a deal breaker but very cool to have.

I have thought about this a lot over the past couple of weeks and I still think this is worth doing - main reason is that end users will simply demand mobile device support in D8 and at least Bartik could provide a decent level of support for this. Many users will build a dedicated mobile site/theme (and I think this will be much easier in D8 than it is now).

To be frank I'd like to sit on this for about 6 months and see what happens in some of the other initiatives and how core proposes to tackle the mobile device issues, of course we can always simple do it (write a patch to make Bartik fluid etc, in fact most of this is done in http://drupal.org/project/antonelli).

Actually there's an quicker way around that, setting

Will make all images take up at maximum the available width of the first parent container that has a width set, ideally a % width for responsiveness.

If you want to see what I mean, check this theme demo for wordpress, which uses the technique: http://themify.me/demo/themes/funki/ (resize your browser)

The solution to serve different presets for different devices could be preferable, considering that you would serve smaller filesizes, but I'm not sure if that falls inside the scope of a theme.

I don't know about fluid images, since it opens up a UI/UX WTF for the site builder. They'll use image styles to set images in pixels, and then Bartik-fluid-images would resize them using CSS? So no matter what style they created, Bartik would show them physically the same size, just with different resolutions?

Of course, that's assuming Drupal 8 image styles work just like Drupal 7's. And meanwhile, a whole other re-thinking of image styles for responsive design could be figured out outside of Bartik.

The images could be made smaller / shrunk down with responsive CSS. I just can't see making them get bigger / always being 100% wide.

Perhaps we need to map out a plan, initially I'd say (in no particular order):

1. Make bartik fluid width (I like to use a fluid grid, I've been building one call Adaptive Fluid Grids which works pretty flawlessly in all browsers) - I'd strongly consider making Bartik content source ordered as I think its much easier to deal with sidebars if they are both below the content. I'll stick my hand up and take this.

2. Figure out how to handle images, I think there are very few approaches outside of using the 100% trick, Jeremy Keith has a great post about this. Takers?

3. Dig into media queries and see where we can use these, I think we'll need additional stylesheets maybe? Takers?

4. Perhaps we start with a good audit of current Bartik and make a blow by blow plan of what needs to be done. Takers?

You want to take that on Manuel?

Tagging for UX, we'll need some designer input on this before we start coding.

Bah, I know you can do it ;) Bartik is not a complicated theme by any means, but if you don't want to that's fine.

Andy, its a good question about the sidebars - my initial thoughts are that at around 480 both the sidebars are below the main content and side by side, then at around iphone res they stack on top of each other. The issue here is at what point do they start displaying below the main content - <960, <720?

I think a problem with not displaying at all is that critical navigation could be in a sidebar, so user could be trapped with no nav.

Sandbox: http://drupal.org/sandbox/jmburnz/1106520 no changes as yet, I'll be using this for testing and patches etc.

One sandbox we might want to keep an eye on, is JohnAlbin's http://drupal.org/sandbox/johnalbin/1110358

Perhaps we should get him involved in the discussion also ;)

Concerning fluid images, have you looked at http://filamentgroup.com/lab/responsive_images_experimenting_with_contex...? Sven Decabooter started working on this in his sandbox (http://drupal.org/sandbox/svendecabooter/1132954).

Having a theme add an .htaccess file might be a bit much (which is what this technique needs, AFAICT), but the idea sure is neat.

Subscribing, I'm diving deep in to this kind of stuff now.

Ok, I'm going to bring some focus in here. I say we forget about how to handle images for now because that is content. We shouldn't be touching that in the theme anyway.

Roadmap

1. #1192044: [Change notice] Convert Bartik's layout to mobile-first and responsive
2. #1192054: Strip styles down to a mobile friendly layout
3. #1192064: Progressively enhance Bartik for larger screen sizes.
4. #1192068: Graceful degradation for browsers that don't support media queries

We're probably going to end up breaking those issues down even more - to manageable patche-per-issue sort of thing.

For example the header will probably need at least one patch on its own, comments also and so on. Try not to have to bigger patches as they are hard to review, chop it up into bite size chunks.

Maybe we could have an IRC chat and get a long list of these chunks.

OK, we're there now in #drupal-themes

I was subscribed to the Bartik fluid width issue, so subscribing here.

> if there is some way we can push different presets depending on either the user agent or the screen resolution

I guess that would belong partly in Butler, which AFAIK will get context data based on the current device.

Yup, agreed. It's something that can be added later, and the actual work for it will be happening before the theme layer.

How about the sidebars become accessible when the user swipes her finger left or right? We would need an alternative for non-touchscreen devices though.