[wiki] Wiki Progression

Destry · 2009-12-17 23:50:26

This block reflects content from last revision date======================================

This thread contains the following linked mockups. Reposted here for easier tracking.

Common Masthead

Version 1

Wiki (.net):

Plugins (.org):

Version 1

=======================================================================

Please add whatever I’m missing as to what the wiki needs to be modern day.

PRESENTATION

Now that .com is sporting its new clothes, it’s time to bring TextBook into alignment with the new look too. This won’t be particularly difficult because the template that .com adopted will not work for the wiki, so the aim is to tweak the styles for the wiki to take on a few more of the new presentational styles (new logo, font attributes, etc.) that can be implemented without the layout restrictions.

Navigation won’t change in the wiki either (outside of styles, perhaps) because it requires both the global nav plus the functional tabs specific to the wiki.

Should we put the single Twitter post at the top like the .com site has? (I think not, but…)

I was hoping to do this sooner than later, but December is completely out for me at this point and probably the first couple of weeks in January too. We have several wiki admins at this point, and I don’t have any qualms with any of them trying their hand with the styles if they would like to get to it sooner. (Fellow admins: You don’t have to clear anything with me, just do it! We can always refine and nudge later.) Otherwise, all, please have patience as I get there. For myself, I’ll probably put up a mockup of what I have in mind before actually changing anything just to its clear.

URLs

For a long time know we’ve talked about improving the URL scheme, and that’s something that still needs done. I would say that’s even more important than any presentational changes, and better suited to you admins with more technical savvy. (Official buck pass.)

As far as I know Team Txp owns .net and .org (in addition to .com) so I’m guessing it’s theoretically possible to setup some redirecting scheme where all wiki content pages have the base URL of http://docs.textpattern.com/, assuming there isn’t already a /docs directory on .com. (And assuming there isn’t any pissing contests about what is “docs” or not.)

NAME (in the HTML Semantics)

The title/name of the wiki in the wiki template is not accurate if I’m not mistaken. I think we need to bring it current so that it communicates “Textpattern CMS” instead of just “Textpattern”. I know Robert would appreciate this, and rightfully so.

WHAT ELSE?

…

Last edited by Destry (2010-11-10 16:42:16)

wet · 2009-12-18 07:27:56

Destry wrote:

As far as I know Team Txp owns .net and .org (in addition to .com) so I’m guessing it’s theoretically possible to setup some redirecting scheme where all wiki content pages have the base URL of http://docs.textpattern.com/,

We can do that.

Destry · 2010-11-07 12:52:40

Well, it’s only been a year — Ha! — but I’ve managed to tweak the presentation a bit. Considering the carver went out with version 4.3.0, I’m not losing too much sleep over it.

Like I said originally, the .com layout is not suited to the wiki (not sure it’s suited to the others either, but…) so that’s not really changing. We could fold in some of the presentation, however.

The breakdown…

Link colors changed from old Txp brown to blue. It started out being the .com link blue, but frankly, those are a little light, so I darkened them up in the same color scale a bit. I also made text larger overall for improved readability.
Got rid of the classic yellow bar at top and adopted the blue band. This actually works good. I never liked where the search box was anyway (formerly at top of right column), and now the header of right column more effectively matches that of left column.
Made left/right column navigations a bit easier to click.
Changed header fonts from Georgia (leading off) to Times New Roman (like .com)
Dropped one of the useless columns in the footer to focus just on the main tools. (Still need to correct the alignment of the four columns.)
Made footers background blue.
Dropped the “Home” link in the main nav. I see .com doesn’t use one, so it’s a bit more consistent and probably less confusing. The logo still goes to .com.
I still need to change color on the external link graphic that tails body links.

Also, I think it’s possible to make the main nave a little more similar to .coms nav by using the existing wiki layout. It would require changing the logo, however to use just “TXP” instead of “TEXTPATTERN”. Then the logo would align properly in the left column dimension. I could then style the main nav links somewhat like they are with .com. I wouldn’t use the subordinate text in each link box, though, which I think is unnecessary.

I’ll have a simple mockup of what I mean later before changing anything. If you understand what I mean, comments are welcome on that…if it’s worth bothering with or not.

Let me know other problems. I don’t want to hear about IE6, or old versions of FF and Opera. I couldn’t give a rat’s ass.

wet · 2010-11-07 13:59:11

Thanks, Destry. Looks like a family member again.

There’s one thing (FF3.6):

Destry · 2010-11-07 18:16:57

OK, thanks wet. The code on the form was a little quick and sloppy. I’ll tidy that up soon.

Here’s the mockup I mentioned I’d show

Basically, it’s a move to having big buttons for the main nav like .com, but it takes into account the existing TextBook title bar, which provides the context for the wiki site (e.g., the background shading is different and active font items are in gold font). If I go with the blue shading, it becomes overbearingly blue, since the search band and footer are also blue, and there’s a greater number of blue links in the wiki than in the .com site. Blue. Blue. Blue. Blue. Blue…you see what I mean.

To make it closer to the main nav buttons, I couldn’t really make the TextBook title bar touch the main and wiki functional navigation like before, otherwise it doesn’t look as much as the .com navigation. But I couldn’t leave the greater white space that .com has either or you lose the contextual relationship between the active items. So, I’ve lessened the height of the Logo bar to bring the nav buttons closer to the TextBook title bar. Though they still don’t touch, I think the active elements are close enough physically to give the impression of all being the active context (the color helps too).

More to presentation similarity, I’ve added the idea of the “Download” button, instead of just being a link in the main nav. While I like the look okay, I don’t like the fact it’s an image with embedded text. I think it’s reasonable to try and pull that off with some progressively enhanced markup and get rid of the image. Until I get around to that, it would just remain as a link as current.

You can see the use of “TXP” on the logo, which is necessary for the logo to fit the wiki grid okay (not the same as .com). I also tried using “TEXTPATTERN” at a smaller font, but it looked a bit puny and silly. Alternatively I could use the “TXP” logo that has the hammer and chisel forming the “X”, but that’s less similar to the .com logo.

Finally, since there’s no Twitter account for TextBook, I put in the tagline in the left side of the search band, and downplayed the font a bit so it’s not too overbearing. I added the word “Textpattern” there to support the “TXP” abbreviation in the logo.

Overall it doesn’t take up more height in the masthead; in fact, it might be less since the logo bar and main nav are combined in this case.

Feelings about the idea, or should we just leave it alone. I don’t really care either way.

els · 2010-11-07 19:00:50

Destry wrote:

If I go with the blue shading, it becomes overbearingly blue, since the search band and footer are also blue, and there’s a greater number of blue links in the wiki than in the .com site. Blue. Blue. Blue. Blue. Blue…you see what I mean.

Though I understand the wish to have a layout that is more in line with the main site, I wonder if at least the link colour couldn’t be reconsidered, exactly for this reason.

Personally, I think it’s good to have similar layouts, not identical. It already happens to me on a regular basis that I land on Textgarden (by typing ‘T’ in the address bar and being a little hasty choosing the right option), and it takes me a while to realize that it’s not the .com site…

(not sure it’s suited to the others either, but…)

I need a Like button… ;)

thebombsite · 2010-11-07 22:13:07

I’m going to put a big image on the front-page which says “ELS, THIS IS NOT WHERE YOU WANT TO BE!”. ;)

Last edited by thebombsite (2010-11-07 22:13:32)

els · 2010-11-07 22:20:16

LOL! No, I’m afraid I’ll just have to think half a second longer before I hit Enter… ;)

Destry · 2010-11-08 03:01:02

With regard to identical, I know what you mean, Els, and agree. TextGarden is a good example of a good idea (consistent theming) going a little astray. That’s no offense to you, Stuart. Multisite theming is not an easy thing to wrangle and the problem with all of us is we are largely working in silos instead of together. I tried to talk about the concept of common mastheads many moons ago when .com was still in development but I think everyone was too heads-down on .com.

The key to pulling off a common theme across sites, while still providing a strong sense of orientation (from a user’s perspective) is consistency in the masthead, including the main navigation links. What will be different in each case is the orientation cues and the functionality (e.g, link tools) specific to a site. A good design across multiple sites stabilizes around both of these variables in the masthead:

Orientation cues mean clear site identity, active-state coloring, and perhaps even brief messaging like a tagline or whatever.
While you’re not going to have the same functional tools, they can be positioned in a common way, so while the links may be different, their location (as site-specific tools) can be consistent.

Two more mockups to help demonstrate what I’m talking about. One is a second version of the wiki masthead concept (link in previous post) in context of a whole wiki page. The other is just the wiki masthead, but includes hypothetical mastheads for the Forum and TextGarden too to show how orientation cues and functionality can be dealt with in a common way.

The changes since first version described…

Wiki Masthead Concept v2

What really motivated the change in this one was the logo. I didn’t like the way the “TXP” abbreviation was looking in v1. I also feel relying on the logo as the main/obvious link to textpattern.com is not the best idea because the masthead is not just a single site concept, but a family of sites represented in the main navigation. So I thought why not pull the text out of the logo and make it the first link in the main nav, leaving the logo icon by itself. This corrected the abbreviation problem and added a proper text link to the .com site. I instantly liked the improved usability and visual effect (cleaner).

I also decided there was no need to have “Features” as a main nav link item. That’s a content type that people can explore when in context of .com. (The .com “ABOUT” link was never in the wiki, and I’d argue it doesn’t need to be a main nav item in .com either. Websites that actually watch analytics often discover About pages don’t get many hits so they’re good for putting in footers and not clogging up the main nav. Same goes for links to Contact pages.)

What was clearly missing in the main nav was a link to “THEMES” (TextGarden). Of all the homegrown sites out there, that one deserves to be a main nav item along with “PLUGINS” (.org) and “Forum” because it has a long history, Joyent supported, and tightly coupled with Txp site design/development activities.

Weblog/Blog doesn’t turn many articles but it’s still main nav fodder for now.

The new link items are very strong choices for a primary navigation across multiple Textpattern sites, and it shouldn’t vary, ideally speaking. Finally, I reorganized the links left-to-right in what seems to be a reasonable order, but likely subjective.

In case you’re wondering about the Download button. I decided to demote that to somewhere further down on the wiki page, like maybe the bottom of the left navigation, though I’m really not sure that’s necessary now.

Masthead Comparisons

The second mockup compares three different site mastheads, and it should be easier to see what I was suggesting earlier.

The three mastheads are very similar in design. Yet there are enough orientation differences that it’s easy for a visitor to know what site they are in. The obvious orientation cues are:

the main nav link active state styling
the site names in the ID bar (i.e., TextBook, Support Forum, TextGarden…), whose colors match the main nav link’s active state color
the unique tagline in the top left of the search bar (their positions are common, but messages are unique to a site, and provides a fun message to visitors too)

As an example of the functional link tools I was referring too, note the login / logout lists in the site name bars, and the subbordinate tool links underneath the ID bars. These functions are slightly different from site-to-site (sometimes common, like login features), but they are positioned in the same place to maintain harmony in the shared design.

TextGarden

Where TextGarden currently goes wrong (more so than the wiki when compared to .com), is it does’t use a consistent main nav. It’s not enough to just use the presentation, you have to use the core links too. That fact that Els (and others) get confused when at the TxG site isn’t something to just blow off.

The problem could be improved by following the common masthead approach. The mockup isn’t necessarily proposing the design to follow, it’s just meant to demonstrate the concepts.

TextGarden does not have any subordinate function links like the wiki and forum do (note there’s not shown in the mockup). But it does have it’s own main content types (i.e., Frontend Themes and Admin-side Themes). Instead of making them main nav items, which violates the common masthead concept, they should be the key links in the left navigation (wiki is a good example: Orientation, Admin-side, Tag Reference…), or in the body as two big badges, or whatever suits the content best. The point is, this is where TextGarden should do something unique. Just like the wiki needs a unique layout for the sake of documentation content, so does a themes site for it’s unique needs too — lots of space to display graphical themes. The Forum and Plugins sites are no different; each has their own content and will require layout differences, but the masthead can unify all of these sites in a very intuitive way.

Not to harp on, but TxG redundantly lists a lot of the same links that .com does (e.g, in the left columns, footer, etc.). The only links that really matter are in the main nav. Again, the masthead is the common feature bridging sites. All those common links having the same presentation just add to the confusion of that site.

Below the masthead, each site should go native and give more focus to its real nature, it’s own content. Sites can still use the Txp colors, fonts, sizes, etc. but the layout and content should be unique, respective to the site.

I know Bloke and Co. are toiling away on the Plugins site. I hope this makes a bit of sense to them. Who’s going to take up the Forum? :)

els · 2010-11-08 08:16:01

That is a very clear statement, Destry, along with your visual examples, and I cannot but agree with you. I also like the new masthead concept (the blue aside, but I’ll shut up about that).

I have nothing to add, except that I love your Textbook tagline ;)

Textpattern is free, and so are you to help document it

Bloke · 2010-11-08 09:17:15

All great stuff and I’m in agreement with everything you say regarding mastheads. If Stuart fancies taking the reins on this one (he knows the layout best) then I’d like to make .org fit too. I’ve just (as in last night) started work on .org again and I was taking the similar route to txg and .com with custom headings in the nav. Thus, for .org, now is a perfect time to think about this before we go much further and have to re-engineer it. I’m using almost the same stylesheet and page layouts as .com at the moment so any changes should be easy to roll in.

Regarding the mockups, I also love the tagline things at the top. The login / profile / register buttons & information line is also going to be very relevant to .org (*mysterious music plays*) so to have it in a common location is going to really help.

All the other goodness on .org I can chip away at in the background — I firmed up the ideas on the way to work in the car this morning as it happened — and I think we’ll go for a phased release because it’s taken way too long already. Currently we can fall in line with any changes and I’m trying to keep the pages and stylesheets as close to Stuart’s originals as possible, but the further on it goes, the more difficult it’s going to be to roll in changes.

els · 2010-11-08 17:48:46

Bloke wrote:

Regarding the mockups, I also love the tagline things at the top.

Stef (now that I have your attention), sorry this is OT here, but I can’t find the topic where it was discussed: on the .com site, now that the twitter account is broken and the owner can’t be found, wouldn’t it be better to remove those lines (temporarily) because it doesn’t make much sense now?

Bloke · 2010-11-08 19:12:00

Els wrote:

wouldn’t it be better to remove those lines (temporarily) because it doesn’t make much sense now?

Yep. But I’m not the .com guy. Stuart is the current maintainer.

els · 2010-11-08 19:13:13

Ah OK, thanks :)

Destry · 2010-11-10 03:04:57

Thanks for the feedback. I think I meandered a bit in my argument, but I’m glad the main points got across.

Naturally, if a common masthead is going to happen, it needs adopted by the different sites. Silos would need to come down and more site manager collaboration would need to take place. It remains to be seen, but I’m all for it.

If nothing else, and Hakjoon has no objections, the wiki will continue with the masthead concept and make with the proposed changes to main nav links. Since the beginning, the common masthead idea has been proposed for the sake of usability — making it more obvious (and direct) for visitors to get around the Txp empire.

For kicks, let’s try and consider what might be involved with a wider adoption, and start from the top. I make no allusions that anyone besides Els and Bloke even care, so it’s just for kicks. Okay.

TEXTPATTERN.COM

It wouldn’t be that hard for .com to adapt, it’s practically there already. One thing we would have to accept in this case, though, is the positioning of elements would be different here because the template was designed specifically for .com. I’m talking about the wide left column aligned with the logo, etc. We can’t expect that to change. (Can we?)

In this case we could at least have some consistency in the proposed links themselves. Let’s consider how little effort that would require:

TEXTPATTERN – Not needed.
PLUGINS – This will be an important site when relaunched. Add this link in. Further, I’d replace the Features link with this one, since Features would be out of place with the others, really. Maybe better to demote it to left nav and put some gif fireworks around it. :)
DOCS – Already there. Easy. Change the link to the wiki. The textpattern.com/documentation page only has two main content items: FAQ and Manual (wiki). Plus a smattering of maybe you’re interested in this stuff, including the book ad. But really just a static page. If it made people feel better, we could build a special landing page in the wiki for that link that summarizes the same info. This at least puts the content in the DOCS location, and it’s then one less static page that .com has to maintain. Ideally, everyone might move the book ad to the footer of all family sites where it’s easier seen on a wider scale (smarter). And if you really want to get serious, you eliminate crazy things like a 1000-item FAQ by auditing/rewriting that intelligence into actual documentation in context, but granted that’s a deeper effort.
FORUM – Sorry, but the existence of textpattern.com/support is just silly. We all know the support around here is the forum, and that’s unlikely to change soon. Txp audiences likely know what a forum is and how to use one. The sensible thing to do is link directly to it and not waste people’s time. That page just reads like a lot of wanking. In fact, I bet nobody reads it; rather they probably get annoyed it didn’t take them where they expected to go, and never return there.
BLOG/WEBLOG – As long as we’re consistent. No change there.
THEMES – I suspect when TXP 5 is around, themes will be hotter than ever before. TxG is a historical site with relevant content to design/development. It’s a worthy main nav candidate. Add!

That just leaves .com’s About page. I mentioned in my previous post that it would be better served in the left column or footer. Very few visitors can give a rat’s arse for About pages. They’re like mission statements. Boring. Check your analytics and you’ll see I’m right (unless you’ve tricked them with that funny “software” label). About pages certainly don’t need a slot in the main navigation.

(Btw, it has to be said. Those kitschy strings on the .com main nav labels — “Look at the”, “Learn from”, “Check the”, “About the”… not good. Just visual/cognitive pollution. Sorry.)

PLUGINS

Bloke thinks the content could fit the masthead, and I’m sure it can. With the insights I have about that content so far, I whipped up another mockup showing a sample page of how the Plugins site could adapt…

Plugin Page Concept With Common Masthead

FORUM

I don’t have a mockup for this, but I think people can extrapolate easy enough now. You pull the proposed main nav links out of the “Txp Network Links” dropdown. No need to be redundant. (Maybe the remaining dropdown/links is put at right of search box at top-right of masthead and renamed “Other Community Sites”. Whatever.). The forum’s own functional links become the subordinate links to the ID bar (like the wiki, and as demoed in the plugins mockup above). Keep in mind those links adjust between logged in and logged out states (just like the wiki). The Login functions move to the Login/Logout location in the ID bar, and those links also change depending on status. It’s a perfect fit. Under that it’s just using the same forum layout but styled for color, fonts, etc. (Forum could use with some housecleaning/simplification, and now would be good timing.)

BLOG

Nothing to do.

THEMES

Just like with .com’s main nav links, this would be easy enough to tweak. But unlike with .com, TxG has the freedom to adopt a better masthead design, perhaps like proposed, while at the same time it can go with a custom template that’s better suited to themes content.

BUT…BUT WHAT ABOUT SQUAREDEYE’S TEMPLATE?

It’s only for .com, the only site that template was designed for. Every other site has unique content needs and that content should not be forced into shoes that don’t fit. A lumberjack would look funny in high heels, and fall down a lot.

The right approach is to figure out what your content is (the type and nature of it), make sure it’s lean (not full of ROT – redundant, outdated and trivial content), and then design a layout (or three) that fits it. Where conformance should happen is with the aesthetic styles (colors, fonts, etc), but that’s it!

I gave the example for plugin content, which just happens to be a simple three-column design with a reasonable left column width, but maybe other layouts are needed for that site too under different content outputs. Point is, it’s doable, and a mighty step closer to usable. Look at how the plugin concept is a strict focus on plugins, not a lot of redundancy with .com. Ideal.

Textpattern CMS

Textpattern CMS support forum

#1 2009-12-17 23:50:26

[wiki] Wiki Progression

#2 2009-12-18 07:27:56

Re: [wiki] Wiki Progression

#3 2010-11-07 12:52:40

Re: [wiki] Wiki Progression

#4 2010-11-07 13:59:11

Re: [wiki] Wiki Progression

#5 2010-11-07 18:16:57

Re: [wiki] Wiki Progression

#6 2010-11-07 19:00:50

Re: [wiki] Wiki Progression

#7 2010-11-07 22:13:07

Re: [wiki] Wiki Progression

#8 2010-11-07 22:20:16

Re: [wiki] Wiki Progression

#9 2010-11-08 03:01:02

Re: [wiki] Wiki Progression

#10 2010-11-08 08:16:01

Re: [wiki] Wiki Progression

#11 2010-11-08 09:17:15

Re: [wiki] Wiki Progression

#12 2010-11-08 17:48:46

Re: [wiki] Wiki Progression

#13 2010-11-08 19:12:00

Re: [wiki] Wiki Progression

#14 2010-11-08 19:13:13

Re: [wiki] Wiki Progression

#15 2010-11-10 03:04:57

Re: [wiki] Wiki Progression

Board footer