User talk:Zozart/category test: Difference between revisions

From Valve Developer Community
Jump to navigation Jump to search
No edit summary
mNo edit summary
Line 9: Line 9:
I like it too, a lot more usable now. :) --'''[[User:Campaignjunkie|Campaignjunkie]]''' <sup>([[User talk:Campaignjunkie|talk]])</sup> 15:40, 21 Jan 2006 (PST)
I like it too, a lot more usable now. :) --'''[[User:Campaignjunkie|Campaignjunkie]]''' <sup>([[User talk:Campaignjunkie|talk]])</sup> 15:40, 21 Jan 2006 (PST)


I removed some Edit-Links of the first design, by replacing Wiki-Headline codes with HTML-Tags. --[[User:King2500|King2500]] 12:55, 26 Jan 2006 (PST)
I removed some Edit-links of the first design, by replacing Wiki-headline codes with HTML-tags. --[[User:King2500|King2500]] 12:55, 26 Jan 2006 (PST)


== Low-HTML versions ==
== Low-HTML versions ==

Revision as of 13:55, 26 January 2006

Wow, it looks even better than I imagined! I'll try making some background icons. --TomEdwards 09:16, 21 Jan 2006 (PST)

Looks like the Wiki can't handle bg images. :-/ --TomEdwards 09:30, 21 Jan 2006 (PST)
Yes, it wraps an image tag around the image... However, if we could get the go-ahead from one of the administrators we could request for a background image to be uploaded for us to reference directly. `zozart .chat @ 10:02, 21 Jan 2006 (PST)
I'm not sure that the location of the file would make any difference...--TomEdwards 10:06, 21 Jan 2006 (PST)
Oh, yes, you're right. It strips out any tags or properties related to a background-image. However, my suggestion still stands, as an administrator could add the background image in the wiki .css file instead. `zozart .chat @ 12:45, 21 Jan 2006 (PST)

I like it a lot. I've just edited the Dystopia entry to use this new lay out: —Fuzzy (talk  )

I like it too, a lot more usable now. :) --Campaignjunkie (talk) 15:40, 21 Jan 2006 (PST)

I removed some Edit-links of the first design, by replacing Wiki-headline codes with HTML-tags. --King2500 12:55, 26 Jan 2006 (PST)

Low-HTML versions

First of all, I think this is a good effort, and absolutely worth addressing. The category page has needed a bit of an overhaul as it is now much larger than the original design allowed. I just added another version on the bottom the page that is cleaner and uses significantly less HTML, though it is not all eliminated. The main advantage is that it's easier to read and edit the text. The main disadvantage is that the open and close <div> markups are harder to track. I also reorganized some of the links to more closely match the needs of beginning users.

There are some significant problems with creating formats using mixed HTML and Wiki markup simultaneously. The idea of the VDC is to keep formatting as simply as possible. The more HTML is involved, the more difficult it will be for many users to successfully follow basic formatting guidelines. This is true when they wish to edit that page, or when they go to create a brand new one with the same formatting. Regardless, please do not change the actual Category:Level Design page until we can discuss the issues with one of our interface designers next week. If the desire is that the formatting matches the Main Page, we may decide to simplify the front page instead of making all of the other pages more complex to edit. Finding a layout for this page that uses almost no HTML would be ideal. --JeffLane 17:56, 21 Jan 2006 (PST)



We could use templates for the div's, e.g. {{Start Category}} and {{End Category}}? That would eliminate alot of the repeating clutter. It would also make it slightly easier to track where the div's start and end, since they'd be named (e.g. matching up {{Start Category Section}} with {{End Category Section}} -- the Section would be the identifier). Finally, this would eliminate all the visible HTML on the page, leaving only templates with friendly names. On the downside, there would still be at least two start/end's to match up (we could compress two of the div start/end's into one template, as they are directly nested), but templates would certainly make them more manageable.

To example, this:

== Tutorials ==
<div class='capsule'>
<div class='captop'><div></div></div>
<div class='capcontent' style='text-align: left'>
=== Beginner ===
<div class='categoryboxout' id='beginner' {{CategoryBox}}>
==== General ====
* [[Getting_Started|Building your first room in Hammer]]
* etc...

Would become this:

== Tutorials ==
{{Start Category}}
=== Beginner ===
{{Start Category Section|beginner}}
==== General ====
* [[Getting_Started|Building your first room in Hammer]]
* etc...

In this case, if the user clicks 'Edit' on a single category box, then they'll only be shown two, aptly named, template markups. `zozart .chat @ 02:04, 22 Jan 2006 (PST)

This would be a good way to go if the page uses many divs. Templates can be tricky though, because they're not standard markup, so new users can have difficulty finding and using them. --JeffLane 20:09, 23 Jan 2006 (PST)

Alternate simplified designs

I added a couple more suggestions to the page that use only Wiki markup. I also removed a number of the headers that were in the original design that did not seem particularly necessary, but added visual noise and excess edit links.

I discussed some of the issues raised on this page with our internal UI and design pro, and he agrees that HTML and complex code should be avoided in standard designs if we can. That's one of the trade-offs of Wiki markup -- you gain simplicty of editing at the cost of some visual flexibilty. This is not written in stone, however. That's what is great about the Wiki concept. --JeffLane 20:09, 23 Jan 2006 (PST)

I vote for the third option. It's relatively simple and the sections are more clearly defined than in the second version. --TomEdwards 01:01, 24 Jan 2006 (PST)
I added some colours from the original version. What's the general feeling on the lower/higher contrasts? --TomEdwards 01:06, 24 Jan 2006 (PST)
Agreement with the third option, especially with the new colours. I like the subtle colour difference between the left and right column. The focus on wiki-markup is also a plus; it's not so much a minefield to edit now. Templating the table markup is a good idea, and thanks to the versatile nature of templates it'd be easy to change the colours on the fly, e.g. {{Category|background=#f5f5f5|border=lightgray}} `zozart .chat 04:13, 24 Jan 2006 (PST)
Were you thinking of something like this?
{{category header}}
{{category newcolumn|rowspan=6|background=#f5f5f5|border=lightgray}}
{{category cell|rowspan=1|background=#f5f5f5|border=lightgray}}
{{category newcolumn|rowspan=1|background=#FBF7EA|border=lightgray}}
{{category cell|rowspan=1|background=#f5f5f5|border=lightgray}}
...
{{category end}}
That would allow for different configurations of cells, yet keep the basic design more centralized. The {{category end}} isn't strictly necessary, since it would always be a |}, but it might make more sense to someone less familiar with the templates. --JeffLane 10:32, 24 Jan 2006 (PST)
Aye, this works well. It allows for sufficent customisation without alienating those new to wikipedia or causing too much confusion. `zozart .chat 09:55, 25 Jan 2006 (PST)

Dual-table design

I've added a fourth design which uses two nested tables in order to allow sectioning for both columns (previously it was only the right column). I also brightened the colours slightly from TomEdwards' third design and alternated white and light grey backgrounds between sections. HTML usage is still at a minimum, and this also eliminates the need for the rowspan attribute. However, the two columns no longer seamlessly connect, as one can be larger than the other. `zozart .chat 05:01, 24 Jan 2006 (PST)

Not so keen on having two tables, it seems less organised. It isn't so bad to have only one cell on the left, seeing as we're going to want continuity between each table instance anyway. If push came to shove there could be a sub-table within the left cell, too. --TomEdwards 05:34, 24 Jan 2006 (PST)
I'm not thrilled about the rowspan attribute that I had to use in the third design, either. I tested some designs like this without it and I found the same problem with the design looking uneven. I think it would only work with a borderless design. --JeffLane 10:10, 24 Jan 2006 (PST)