Layout: Mobility (mobile optimized)

[branchandroot]

Theme name/layout: Mobility (layout) with Ivory Alcea (theme)
Author: branchandroot
Image info: Mitsuba Aoi image from Openclipart.com, public domain

Mobility (layout): Layer

Ivory Alcea (theme): Layer | Preview

ETA: Starflower (theme): Layer | Preview

These should both be good to go (though I've only been able to test it on an Android emulator, so if anyone wants to kick the tires that'd be great too).

Additional info (for layouts): This one is optimized for viewing on multiple devices, but especially on small-screen mobile devices. It has a lot of mobile-use features (viewport = width of device, reversible reduced nav-strip, word wrapping, image scaling, small icons), but also a handful for viewing on big screens (settable max width, all column layouts supported), and a few just for general use (jump-to-modules link in one-column layouts).

I would absolutely love it if people want to add more themes to this; it kind of calls out for wallpapers, and I'm not the best with those.

Comments

[musyc]

The preview link isn't working for me, but if this is the layout you currently have on your journal, it works awesome for mobile devices. Mine, at least. XD I could read without zooming! Fantastic.

[foxfirefey]

Looks like the layers are still up and available--do you need instructions to use them?

[musyc]

Hmm? No, I was clicking the preview link and getting the "sorry, there was a problem" message. But *points down* looks like it was not me! Linkage mistake. All better!

[foxfirefey]

For some reason I thought this was an older post, ha! Preview away!

[branchandroot]

*facepalm* Gave it the style id instead of the theme id. *feels silly and fixes it* There! Preview up!

And fantastic! *pleased* I've been playing with this on my phone and just chortling over the not-zoom-needing.

[musyc]

When you say "reversible reduced nav-strip", what does that mean? Peeking at the code, that's an option in the wizard, a yes/no thing? If so, awesome. I think the minimal nav strip would be keen for loads of people, but I kinda miss my filters drop-down. (HILARIOUSLY, I hated the nav strip on LJ and refused to use it, going so far as to code my own layouts to eliminate it entirely. Here? Can't do without it. Love it.)

[branchandroot]

*nodnod* Yeah, it's set to reduced by default, but it's the first thing in the Presentation wizard options. If you un-check the "reduce" checkbox, you get the whole thing back, and instead the cells of the table are floated. So, in wide-screen they're just as always, but in a mobile they stack. Which kind of makes a big glob at the top of the screen, but if people use it a lot, then presumably that won't be a problem.

[musyc]

That sounds ... like SO MUCH FUN TO PLAY WITH.

*cough*

Not that I'm gleeful like a kitten with a string or anything, but that's just niiiiiiiice. I doubt I'll be letting go of Librarian's Dream any time soon because it's just so perfect for my use patterns, but I was thinking of eventually poking at something that would give me a mobile-view without having to have a minimalist design. So watching bits and pieces come together is FUNTIMES. XD

[momijizukamori]

Ooh, I like. And I've been working on some wallpaper-based themes for Paper Me, so I shall do some ports *g*

Thought - have you seen what it looks like with sidebar-width blocks in one-column mode (see... uh, probably anything I've patched for examples). I'm not sure how well it'd work for narrow view, but I find I like the look a lot in one-column desktop views - less unused space.

[branchandroot]

Ports would be lovely!

You mean make the modules sidebar-width in one-column? It unbalances the header material a bit, in the one-column-split view, is the thing. And once I got going, I kind of liked letting all the module text be un-wrapped. It would be an easy mod to make to a theme, though, if you want to. I think you'd just need to change .one-column #secondary and #tertiary to $*sidebar_width, in a theme style sheet.

[momijizukamori]

Hmm. I didn't think theme stylesheets had access to the core2 variables? But that may just be me being silly.

My solution would probably be 'CENTER EVERYTHING', haha. That's the secret trick to display:inline-block - you can set text-align:center on the parent element and all the blocks will center-align too.

[ninetydegrees]

Very nice. I wanna theme this!

[branchandroot]

Themes would be absolutely lovely!

[gone_fishing]

It looks fine on my regular computer monitor and I'm using Firefox as a browser. I think the one-column layout looks snazzy, and I wouldn't mind making some themes with the wallpapers that are on my Abstractia layouts... I need some time, but.

[branchandroot]

*thumbs up* Fantastic.

[milkymoon]

This is a really clean layout, and I'd really like to theme it at some point. (:

[branchandroot]

Thank you!

[forthwritten]

I really like this. However, the red bars in polls are displaying as a red block - screenshot here. I'm using Firefox 16.0.2 on Windows 7.

[branchandroot]

Ack! Thank you, I'll track that one down.

[branchandroot]

Okay, think I got it. Had to make the images max-height auto. When you get a chance, could you take a look (with the updated layer) and make sure it took in Windows also?

[forthwritten]

Yes, that's working now.

I've also had a very quick look at it on an android phone (vers 4.0.4) and it seems to be displaying correctly but I've not prodded it much.

[branchandroot]

*relieved* Excellent, thanks! Getting the images to scale down is the catch, and I /think/ this got it without deforming any of them.

[azurelunatic]

I've applied it! I have an actual Android, and I'll see what it's like when I go back to bed. :D

[branchandroot]

Lovely! If you could especially let me know whether any images in entries stay proportional, that would be great.

[azurelunatic]

It did squish my port bottle photo at small widths, though I have it in 2 columns because 1 drives me nuts and 120% serif font so I can read

[branchandroot]

Argh. Okay, I'll poke at that some more. Clearly, some browsers still don't like the max-height setting.

[azurelunatic]

It was squished in at the sides, not down from the top. My phone does not like providing screenshots, or I would.

[cirque]

This makes me so happy. It looks great on my Android. I must remember to theme it at some point, maybe pinks and blues :D thanks for making this!

[branchandroot]

My pleasure! And more themes will be absolutely delightful.

[ninetydegrees]

Quick check: did you mean the icons page to display directly on the page background instead of within an entry-style box or is that an oversight?

[branchandroot]

I think the icons page hadn't been converted, when I designed this. It should have an entry-style box, like the tags page does.

[ninetydegrees]

Noted. Thanks.

[ninetydegrees]

Another check: still on the icons page, did you mean to have the icon info display below the icons and not on the side (like in site skin view)?

[branchandroot]

Like I said, I didn't have a chance to do anything with that page. Anything showing right now is by default. I think a layout as close as possible to what people are used to seeing in the site skin would be best, though.

[ninetydegrees]

Ok I'll use some standard styling then. Thanks again!