Choosing styles that work well on small screens

[foxfirefey]

Hey, folks--lately we've had a couple of requests pop up about a need for styles that work well on small screens. This post will try and give a run down of how to choose a style that works well on a small screen.

First of all, you are going to want to choose a layout with a one column option. Here is a complete list of layouts that support one column arrangements. This is the complete list of layouts supporting one column arrangements, with above-entry navigation. Some good examples include:

ColorSide and Practicality: One column, with all modules below the entries.

Bases, Basic Boxes, Crossroads -- These also work well in one column modes and have above-entry navigation.

EasyRead -- This layout is made for people with specialized reading needs--that's why many of the colors themes are a little garish, since they're meant to help people with certain visual requirements (such as very high or low contrast). But, you can change all of the colors in the Customization Area (http://www.dreamwidth.org/customize/options?group=colors) to your liking, as well as the base font size. Additionally, EasyRead has a section above the entries where different modules can be places (http://www.dreamwidth.org/customize/options?group=modules)


Another common request recently is adding a header image; most styles support header background images in the images section of the customization area

Remember that you can always ask questions to have people assist you with your style in style_system or getting_started.

Comments

[ninetydegrees]

It may be simpler to say that only three styles don't support one-column yet: Brittle, Drifting and Skittlish Dreams.

[foxfirefey]

True! But even some one column layouts don't seem that suited to smaller screens, like Blanket.

[ninetydegrees]

Oh sure I was just referring to your first point seeing as we do try to provide that option for all styles and have nearly succeeded.

[foxfirefey]

We've definitely gone a long way, thanks to you! I think I was just writing it from the point of somebody who doesn't know all of the styles--in my opinion, it's better to list out styles they can use than styles they can't for that case.

[ursamajor]

This, combined with the panel I went to this morning on JQuery Mobile, makes me wonder how possible it would be to declare a "mobile style" as a secondary style, so that I can keep my happy three-column layout for my widescreen netbook, but then when I load my readpage on my phone, have it be a sensible single-column layout (that respects cuts, but isn't just titles-only, and that ideally kept cuts happy and ajaxy). (I mean, I know we have an existing mobile readpage, but the fact that I can't read entries on it specifically makes it completely useless to me - often, a title is not enough to tell me if it's worth waiting the 30 seconds for a clickthrough. But what I was thinking was that it might be nice for, say, a non-Dwenizen reading your journal on their phone to still be given a sensible-for-a-phone layout.)

I know that my being on an iPhone complexifies things, because lots of times it loads non-mobile pages (and I have done almost no mobile-specific development, so I'm not sure if the problem is that the site doesn't detect that I'm using an iPhone properly, or that the site utterly lacks a mobile-oriented version to begin with, or what.

[delight]

I would really, really, really love if this were an option.

[scribblingage]

This is just what I was looking for, thanks! I settled on something that isn't one-column, but does work nicely on my phone browser (Opera Mini or Mobile on HTC Wildfire).

Memewidth.org is so useful for easily browsing the base layouts, are there are any plans to incorporate/link it into the main DW site?

[foxfirefey]

Eventually, yes--the browser I have up there was an experimental prototype that was liked, so some day we'll figure out how to make a native DW version. The Memewidth version took a couple of days for me to throw together, though, a native DV version would take much more work!