I think this would be pretty cool if our default theme used media queries and was able to respond design wise to user agents.

Rather than tailoring disconnected designs to each of an ever-increasing number of web devices, we can treat them as facets of the same experience. We can design for an optimal viewing experience, but embed standards-based technologies into our designs to make them not only more flexible, but more adaptive to the media that renders them. In short, we need to practice responsive web design. http://www.alistapart.com/articles/responsive-web-design/

Marking this as a meta issue for discussion and probably to track resulting issues if we think this a route we can explore.

Related issues:
#1192044: Convert Bartik's layout to mobile-first and responsive

Comments

manuel garcia’s picture

manuel garcia commented

Let's do it!

Jeff Burnz’s picture

Jeff Burnz commented

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).

jensimmons’s picture

jensimmons commented

Yes. I wish Bartik were already Responsive. :(
+1 from me.

manuel garcia’s picture

manuel garcia commented

Actually there's an quicker way around that, setting

img { 
  max-width: 100%;
  height: auto;
}

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.

Jeff Burnz’s picture

Jeff Burnz commented

Yeah the responsive fluid image method is the easy way out, and its a major drawback of responsive design, that said we should do it anyway because even if we eventually solve the preset issue it won't hurt.

FYI I am arguing hard to be allowed custom settings in D8 core themes, so we can have a toggle to make Bartik fixed or fluid, we really need this to open the door on responsive design.

jensimmons’s picture

jensimmons commented

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.

manuel garcia’s picture

manuel garcia commented

The images with responsive CSS only shrink if the parent container's width becomes/is smaller than the actual size of the image itself, it wont grow it or anything like that.

If image styles in core actually became responsive... it would rock so much I would cry.

Jeff Burnz’s picture

Jeff Burnz commented
Issue tags: +Responsive Design

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?

manuel garcia’s picture

manuel garcia commented

I think we should start by point 4. We definitely need to plant his out properly to maximize the quality of the end result, it's not a simple task ;)

Jeff Burnz’s picture

Jeff Burnz commented
Issue tags: +d8ux, +Needs design

You want to take that on Manuel?

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

manuel garcia’s picture

manuel garcia commented

Ah I'm flattered, but honestly, I don't know Bartik that deep to efficiently tackle this, as I was not very involved in its development... I'm sure there are better suited people for this analysis... I'll help out in what I can.

Jeff Burnz’s picture

Jeff Burnz commented

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 Britton’s picture

Andy Britton commented

I'm happy to put a design together. Jeff and I spoke on Skype about the lowest res to "shrink" down to and it was discussed that 320x480 would suffice.

One thing I am considering is what to do if sidebars are populated? Some examples I have seen remove the sidebar alltogether for the above resolution but I thought it was something to consider/discuss.

Jeff Burnz’s picture

Jeff Burnz commented

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.

Andy Britton’s picture

Andy Britton commented

Yeah not displaying sidebars will be an issue. I think the next step is discussing some dimensions or getting wireframes mapped out specifically for the sidebars at the lower resolutions. Between 320-480 the only other resolution used by any device is 360 according to Device Central, just throwing that out there.

I'm looking at the navigation(main menu) at the moment and how to implement a stacking set of tabs for 320px width. I can't really think of another way to achieve the same navigation without having to do some minor restyling so if anyone has ideas throw them at me. I'm comping something together at the moment which I'll post in due course.

Jeff Burnz’s picture

Jeff Burnz commented

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

BenK’s picture

BenK commented

Subscribing

manuel garcia’s picture

manuel garcia commented

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 ;)

Jeff Burnz’s picture

Jeff Burnz commented

Good link, images are the major issue...

brunodbo’s picture

brunodbo
he/him
commented

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.

Jeff Burnz’s picture

Jeff Burnz commented

I've played around with the Responsive Images module but haven't had time to dive into the code. One thing it overlooks though is images in text fields, for that we probably need something like an input format. Also it requires you to use a special type of image field, which is not ideal if you've already invested a lot of time into building your site using normal image fields.

So the ideal solution works without having to switch field type, works with image size presets and can account for images in text fields. These things can't be solved by the theme of course and we either need to approach this in contrib like Sven Decabooter has or make a big push to get something like this in core. I'd like to see something in core to be honest, I tend to think users will come to expect their sites to "just work" in mobile devices, rather than them having to jump through hoops to set up a special mobile only site (talking about the 80% here).

lewisnyman’s picture

lewisnyman
he/him
commented

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

hansyg’s picture

hansyg commented

subs

lewisnyman’s picture

lewisnyman
he/him
commented
Issue tags: +d8mux

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: 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
hansyg’s picture

hansyg commented

Hey Lewis,

Thanks for putting those together, I have added them under the "tentative roadmap" in the sandbox. Once I get those closed out we can track further issues via the sandbox issue tracker.

http://drupal.org/sandbox/jmburnz/1106520

Best
Hans

Jeff Burnz’s picture

Jeff Burnz commented

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.

hansyg’s picture

hansyg commented

Works for me, just let me know when.

~ H

Jeff Burnz’s picture

Jeff Burnz commented

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

hansyg’s picture

hansyg commented

Sry Jeff et al I had to jump offline. If you guys made any progress please ping me on IRC this week

H

joachim’s picture

joachim commented

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.

Jeff Burnz’s picture

Jeff Burnz commented

Lewis said somewhere else that we should not worry about images - I agree with this because it will hold us back, the image problem will need to be solved but this unlikely to happen soon and will mostly not be something we can do in the theme.

joachim’s picture

joachim commented

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

drupaltronic’s picture

drupaltronic commented

subscribing

AndrzejG’s picture

AndrzejG commented

subscribe

lewisnyman’s picture

lewisnyman
he/him
commented
Issue tags: +mobile

Let's bring this back into focus with the new initiative

Gaelan’s picture

Gaelan commented

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.

johnalbin’s picture

johnalbin
they/他
Primary language English
Location Taipei, Taiwan
commented
Status: Active » Closed (fixed)

There have been some really good discussion in this issue. But I just went and cleaned up all the issues listed in comment #24 http://drupal.org/node/1077094#comment-4617326 and the only one left is #1192044: Convert Bartik's layout to mobile-first and responsive.

I don't think we need a meta issue any more.

johnalbin’s picture

johnalbin
they/他
Primary language English
Location Taipei, Taiwan
commented
Status: Closed (fixed) » Closed (duplicate)
johnalbin’s picture

johnalbin
they/他
Primary language English
Location Taipei, Taiwan
commented
Issue summary: View changes

Updated issue summary.