Tumblr’s customize page, in its current state, isn’t very usable. Editing a custom theme within the 180-pixel-high textbox provided is painful. I suspect most, if not all, theme designers exclusively edit their templates externally. This isn’t necessarily a bad thing. Tumblr’s interface cannot be held to the same standards as single-purposed, desktop-class text editing applications. What it should do, though, is at least function well enough for slight adjustments to be made sans the carpel-tunnel inducing scrolling.
The embedded preview page, too, is just as worthless. As noted previously by Matthew Buchanan, it fails to encompass all potential post types and lacks pagination. Furthermore, because it occupies 400 or so pixels of vertical space on most monitors, scrolling is required. Designers can’t possibly get a decent gist of a them when they’re forced to scroll through the preview in chunks. To address these inadequacies, I propose some alterations be made to the customize page. Here’s a mockup of what I’d like to see done.
Most notably, this mockup features vertically separated tabs as opposed to the horizontal ones seen in the current interface. Text edit fields are resultantly wider and longer. If implemented, I’d expect the left editing portion of the page to have a minimum width of 640 pixels and be horizontally scalable to take advantage of screen real estate on larger, widescreen displays.
Also new is the view type bar along the top of the page. This would allow users to quickly swap between display modes. Edit mode expands the left frame to take up the entire page width, whereas preview mode similarly makes the page preview take up the screen. Split is the view mode featured in the mockup.
Because the split view mode probably wouldn’t work optimally for tumblr users with narrower displays (1024 pixels wide and under), it’d be wise to implement page width detection, defaulting to edit mode for smaller screens. Even so, I’m pretty sure swapping between the edit and preview views as necessary is less problematic than today’s customize page.
Above is a mockup of the Theme tab under split view. I much prefer this. Syntax coloring would be ideal, but I’m guessing that’s insanely difficult to implement, so I can do without it.
Another idea I had for improving upon theme editing from within the customize page is shown. It’s called new theme from template. When clicked, the text box is populated with the markup for Bill Israel’s/Richard Dunlop-Walter’s CustomCSS theme so that tumblr users can quickly compose a theme of their own without worrying about tumblr’s syntax.
Poorly written commentary and mockup inconsistencies/alignment issues aside, I hope you tumblefolk can see the logic behind this concept. If my suggestions are at all unclear or come off as poorly thought out, reblog with any queries and/or ideas of your own. Better yet, make even cooler mockups. I’d love to see them, and I can only hope David or whoever’s in charge of the customize interface listens to our suggestions and makes something amazing of them.
