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

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