Draft layout, Call and Response

[carene_waterman]

Theme name/layout: Call and Response
Author: carene_waterman
Layout info: Layout layer code
Image info: RSS icon, free, link to source in code
Additional info (for layouts): Flexible, fluid, elastic responsive design. See below for more details.

Call and Response is my first layout, and I'm looking for feedback/testing/bug reports on the layout itself. I have only tested it so far in Firefox, and I know it won't work right now in IE7.

I have several themes built already, and I'll link to a few here to aid you in seeing how the layout works. Also, as of now and for a few days, carene_waterman is a live preview of the Raw Sugar theme as a work in progress for this layout.

Call and Response is an elastic/fluid responsive design remix of Tabula Rasa. Explaining what that means is a bit complicated, but I can't ask you to look it over if you don't know what you're looking at.

The layout uses the Tabula Rasa design for two- and three-column set-ups with only minor tweaks.

The one-column set-up is where all the responsive magic happens. When there's enough space, the main content and sidebar tile horizontally.

• On a wide enough screen, a user sees a two-column design very similar to the standard two-column layouts we're all used to.

• On a smaller screen, like a tablet, the sidebar and main content form up vertically.

• On an even smaller screen, like a phone, the user-set margins and the navstrip disappear, all elements appear at full width, and the typography is adjusted to something more suitable for a small screen.

• Within the sidebars there's some minor magic as well. The modules also tile horizontally--in both sidebars, whenever there's enough space for it.

This is very complicated to put into words, I think a visual explanation is better.

Sirius Bzns Greyscale is a theme for this layout that has a one-column-split set-up. You can preview it at this link: http://www.dreamwidth.org/customize/preview_redirect?themeid=340120

Try making your browser window bigger and smaller and you'll see the responsive design in action.

Note: the break points are in ems, so font size is also a factor in how the design behaves. Try upping your font size to see how it responds.

For another way to see this in action, you can use this responsive emulator set up with my journal style. Click on the toolbar images and select phone or tablet or desktop views.

To enable this responsive design I had to add two new options to the presentation area of the customization options. Only two! To mitigate that, I got rid of the "double the sidebar width" one and decided to let the computer multiply by 2.

This is a screen cap of how the options will look:



I've tried to make this straight forward enough that it won't overwhelm users. A user may adjust these options to force the layout into a traditional vertically stacked one-column design by simply setting a module width, sidebar width and main content width all about the same. Theme makers can set this as a default as well.

What I'm hoping to get in feedback:

I'm interested in your response to the typography, how the layout flows, how things are put together and particularly if you see anything that doesn't work correctly.

This layout is much more flexible than most, and it most resembles Tabula Rasa itself, with a lot of leeway for themes. I know that hasn't proven to be the way most layouts are designed, but my plan was to give theme makers a palette to work with that will let them do anything with CSS they can imagine, but still give users the maximum amount of control over their own experience, and have the responsiveness built in. Flexibility for everyone.

I'd love to hear from mobile users about how this works (and doesn't) for you.

Any questions, confusions, suggestions are welcome.

Other views:

To see the layout only in preview (two-columns right--no responsive effects):

http://www.dreamwidth.org/customize/preview_redirect?layoutid=340119

To see a simple six-colour theme (three-columns split--no responsive effects) called HexaGreen:

http://www.dreamwidth.org/customize/preview_redirect?themeid=341420

There's a longer version of this post at my journal with a list of other features at the bottom, if you want more information.

Links to theme code for those interested, and to illustrate how little code there is in each theme, but how very different they look:

Raw Sugar, Sirius Bzns Greyscale, HexaGreen

Comments

[musyc]

On an even smaller screen, like a phone, the user-set margins and the navstrip disappear

REALLY not cool, imo, for accessibility and user expectation. If a user has chosen to display the navbar, it should never be forced to disappear because of the designer's choice. User first, in this case. I would end up never using this layout at all because I find that navbar very useful, even on my mobile.

Forcing the navstrip into a larger font/bigger padding (I can't tell quite what you've done) doesn't work for me either. On my netbook, it's become a two row strip, and takes up almost a third of my visible screen.

[carene_waterman]

I hesitated hard on removing it and I'm really not wedded to the idea. But it is huge as is.

What if I let it stay horizontal? What does that look like on a phone or small netbook or whatever? It makes a big scroll-bar yes? But would you be fine with that. Is that what people expect?

I was also considering ways to make the navstrip smaller--take out the icon maybe, since that just duplicates the username.

It's a table is the problem.

And I think you're right, I shouldn't make it vanish completely. Thanks for giving feedback and making me think twice!

[musyc]

The icon in the navstrip actually links to the "edit icons" page for the user. Not a good idea to strip that out either.

What if I let it stay horizontal?

If you mean not breaking the navstrip to separate rows on a smaller screen? Yes. On my mobile, the default navstrip takes the full width of the screen, no scrolling. It's very small and I do have to zoom to hit anything on it, but it doesn't scroll at all.

Adding the larger size/padding just does not work at all for me. The second row consists solely of the "search/switch style" area and there is a HUGE empty space on the right from it.

[carene_waterman]

Okay, things to consider. Thanks for answering. I'll definitely rework that part.

[momijizukamori]

First thought - is the header supposed to be way wider than the sidebar + entries content? Because it is to me, and it looks really weird visually. (possibly an artifact of letting the computer calculate doubled margins?)

Also, I see that you've auto-generated the other color codes, which is cool, but does it behave well if you override in the customization wizard? A loooooot of users don't want to do CSS styling (see: the vast number of different base layouts we have *g*), and turn to the customization wizard instead.

[carene_waterman]

In the responsive design, you set the width of the main column, so that means depending on screen size, you might see a larger header.

Users would set whatever worked for them.

Color codes--I guess you mean in Raw Sugar? The way that works is there is an automatic fallback colour generated which is 50% lighter than the set hex colour and an rgba transparent colour based on whatever the set hex colour is.

Users who changed the set colour in the wizard would see an rgba 50% transparent version of the colour they picked.

Transparent colours can have surprising results and be lighter than people expect, but it's easy with the colour picker int he wizard to darken it up.

A them maker could do a different colour theme on Raw Sugar without ever understanding how the code in it worked. It needs some comments to that effect.

[momijizukamori]

Hmm. As a user, that would not be how I expected the header to behave. And I would particularly not expect it to be off-centered the way it is.

[carene_waterman]

In a regular two column layout it looks how you'd expect.

What you are used to is a main content that expands to fill all the available space. This one is fixed by a user-set amount. It is common in responsive designs to not go much beyond 60 em in total screen used for content. But I hear you that seeing white space on a journal is weird.

Odds are running pretty good that I'm scrapping the whole responsive portion of this and reworking it at some later date.

same person different account

[vinesofregret]

Ahhh. See, I'd expect the header to match the content - if the content (the whole .content area, so sidebars and entries) was set to a certain width, I'd expect the header to follow to match. Though I think I have the only 'set the content width' design we've got so far, and I haven't patched it yet.

The responsive design is interesting, but I think it maybe needs to be tied into a bigger discussion about DW and it's appearance on mobile platforms. Because I don't know what the average user wants, and I think something like that would probably be best applied across the board instead of having one layout that behaves like that and a whole pile that don't.

[musyc]

I looked at the layout code but I don't speak S2 and I'm confused. It looks to me that, for example, you pick a link color in the wizard and the layout automatically selects a visited/hover color - is that right?

Can you override the transparency effect without having to know CSS? If someone doesn't want transparency or automatically selected colors, can they easily set the colors to be plain/opaque/their choice in the wizard? (Possibly a ticky box of "use transparency/auto values?" in the wizard.)

[carene_waterman]

It looks to me that, for example, you pick a link color in the wizard and the layout automatically selects a visited/hover color - is that right?

Um, no, not at all. The link colours are set as normal. Although a theme that had you pick one colour and it generated all the others might be fun.

Only the backgrounds are transparent, and the theme sets them that way, so you can't override the transparency amount, just the colour.

Now I could put in a property to make the transparency a variable, but for me this is felt like a case of going too far with user options and it being something people wouldn't get.

The point of the theme is that the transparencies overlay the texture. If you want a theme with coloured textures that aren't transparent, this isn't it.

The only automatically rendered colour is the fallback for browsers that don't support transparencies. There are no generated colours--just a conversion to rgba format.

[musyc]

Ohhh, okay, I see. I had images shut off to test something on a different site and didn't turn them back on. I see the textures and transparency effect properly now. Hmmm. I still think there should be an option to prevent that happening in the wizard. A user may be "oh, awesome!" about the shape of the layout itself and the magic shifting sizes, but end up disappointed about being able to use the layout because of transparency. (I stop that from happening whenever it pops up because seeing images, even light/faded ones, behind text makes my vision freak out.) A problem I could solve by removing the textures/images from the wizard/layer myself, but sooooooooo many people have no idea how to do that at all.

[carene_waterman]

The code to make transparent backgrounds is in the theme, not the layout. It's a theme-specific feature. The layout can come in all sorts of designs, including one with a texture image background -- or any other image -- and normal colour blocks over top of it.

The layout contains the code to convert to rbga colours if a theme maker wants them for any purpose.

I can see that the way I put all the bling in the theme and only the structure in the layout is confusing because most people put everything in the layout but the colours.

[musyc]

The code to make transparent backgrounds is in the theme, not the layout. It's a theme-specific feature.

That makes a great deal of difference! I was under the impression that you had designed this to force transparency regardless of theme, and that's a squirrelly thing for me (and most non-codey people in my circles, which is pretty much all of them. XD ). If that's theme-applicable instead of layout, that removes my objection to transparency.

[carene_waterman]

Sorry, I just clicked to what you meant by computer calculating margins.

It doesn't do that.

There's an option where you enter the sidebar width and right below it you enter that amount doubled--the two and three column layouts use that to place sidebars. That double the sidebar width is the number I have the computer calculating.

[momijizukamori]

The margin thing was a wild-ass guess, mostly - it seemed like a possible explanation for why I was seeing a second sidebar-sized column of totally empty space.

[asenathwaite]

I'm using a mobile browser (Dolphin Mini) and the navstrip shows up much bigger than usual.

Not sure how I feel about putting the modules on top of the content. It's useful for the page summary, especially if the user is looking for a specific entry, but scrolling down through all the modules to get to the content is a little frustrating.

I really like the idea of responsive design; it looks like an efficient alternative to having a separate mobile site.

[carene_waterman]

If you choose the one-column modules on bottom set up you get the sidebar to the right on wide view and it drops below for narrower screens.

I would expect using the modules on top would work if you put navigational things there only--like if you use the profile links a lot or the calendar.

Do you like the default navstrip on your mobile device usually? Does it work as it for you? I'm definitely redo-ing the navstrip part of the design.

(Thanks for offering feedback!)

[asenathwaite]

Is that if the viewer chooses one-column-modules-on-bottom, or the journal proprietor does (if that makes sense)? Personally I'd have only the page summary at the top, but the calendar could be useful.

I use the navstrip on my phone. It's usually tiny, so taking it away would barely make a difference in screen space.