Textpattern Forum

You are not logged in. Register | Login | Help

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

Destry
Moderator
From: Strasbourg, France
Registered: 2004-08-04
Posts: 2,353
Website

[wiki] Wiki Progression

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

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

Common Masthead

Wiki (.net):

Plugins (.org):

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

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)

Offline

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

wet
Developer
From: Lenzing, Austria
Registered: 2005-06-06
Posts: 3,091
Website

Re: [wiki] Wiki Progression

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.

Offline

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

Destry
Moderator
From: Strasbourg, France
Registered: 2004-08-04
Posts: 2,353
Website

Re: [wiki] Wiki Progression

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…

  1. 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.
  2. 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.
  3. Made left/right column navigations a bit easier to click.
  4. Changed header fonts from Georgia (leading off) to Times New Roman (like .com)
  5. 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.)
  6. Made footers background blue.
  7. 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.
  8. 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.

Offline

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

wet
Developer
From: Lenzing, Austria
Registered: 2005-06-06
Posts: 3,091
Website

Re: [wiki] Wiki Progression

Thanks, Destry. Looks like a family member again.

There’s one thing (FF3.6):

Offline

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

Destry
Moderator
From: Strasbourg, France
Registered: 2004-08-04
Posts: 2,353
Website

Re: [wiki] Wiki Progression

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.

Offline

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

Els
Admin
From: The Netherlands
Registered: 2004-06-06
Posts: 7,380
Website

Re: [wiki] Wiki Progression

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… ;)


<txp:Els /> ;)
Tag Reference | Unexpected behaviour? Check the tag trace | Still no clue? Check the names of your custom fields

Offline

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

thebombsite
Plugin Author
From: Exmouth, England
Registered: 2004-08-24
Posts: 3,251
Website

Re: [wiki] Wiki Progression

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)


Stuart – The BombsiteProText ThemesTextgarden

In a Time of Universal Deceit
Telling the Truth is Revolutionary.

Offline

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

Els
Admin
From: The Netherlands
Registered: 2004-06-06
Posts: 7,380
Website

Re: [wiki] Wiki Progression

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


<txp:Els /> ;)
Tag Reference | Unexpected behaviour? Check the tag trace | Still no clue? Check the names of your custom fields

Offline

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

Destry
Moderator
From: Strasbourg, France
Registered: 2004-08-04
Posts: 2,353
Website

Re: [wiki] Wiki Progression

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:

  1. the main nav link active state styling
  2. the site names in the ID bar (i.e., TextBook, Support Forum, TextGarden…), whose colors match the main nav link’s active state color
  3. 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? :)

Offline

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

Els
Admin
From: The Netherlands
Registered: 2004-06-06
Posts: 7,380
Website

Re: [wiki] Wiki Progression

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


<txp:Els /> ;)
Tag Reference | Unexpected behaviour? Check the tag trace | Still no clue? Check the names of your custom fields

Offline

Board footer

Powered by FluxBB