May I suggest that a link/note be added so that it appears on each page and leads to an explanation of the new look (i.e., created by the Pattern skin) and how to disable it.

I have other comments that may (??) be of interest on Wikilearn.TWiki's New Look, and you can see how I made a tentative attempt to add such a note as part of the copyright message (so far, on the Wikilearn web only).

-- RandyKramer - 24 Aug 2004

640x480 is a very low screen resolution. I am not surprised you are having problems with this. You will probably encounter this on many more webpages, since this was abandoned as standard resolution by about 1999. Perhaps I should add 800x600 minimum as requirement, although things do function. I hope your wife's machine is at least upgraded to Explorer 5.5.

-- ArthurClemens - 25 Aug 2004

because PatternSkin is designed, in part, as a kind of skin templating engine itself, you can use what's already been CSS-ified. just drop this bit of CSS in the "right place" (see PatternSkinCustomization) to place the topic text on the left and taking the full width of the window. minimizing horizontal scrolling, the menu is still available on the right, a great compromise for low resolution screens. finally, the top bar is turned off, increasing vertical screen real estate.

.twikiMain {
        margin-left:0px;
}
.twikiLeftBar {
        margin-left:100%;
}
.twikiTopBar {
        display:none;
}

i've attached this CSS to PatternSkinCustomization

   * css settings
      * Set USERLAYOUTURL = %PUBURL%/%SYSTEMWEB%/PatternSkinCustomization/LowRes.css

feel free to add/modify https://twiki.org/p/pub/TWiki06x01/PatternSkinCustomization/LowRes.css (feedback welcome, etc.), as you're actually running such a system.

-- WillNorris - 28 Aug 2004

PatternSkinCustomization is updated with these guidelines. Thanks. -- ArthurClemens - 28 Aug 2004

Will and Arthur: Thanks! But so far I can't get it to work for me. Maybe you can take a look at my home page and see the problem. One thing I noticed is that while %PUBURL% seems to resolve (to http://twiki.org/p/pub), %SYSTEMWEB% does not (it just appears "verbatim". But I even tried pasting in a "copied" link to the attachment and the CSS still does not take effect. PS: Feel free to modify my home page, but, leave the old mistakes there for now so I can compare them to the right thing.

• There was extra space at the end of the variable. I've updated your home topic. -- ArthurClemens - 29 Aug 2004 Ahh, wonderful! Thanks! -- RandyKramer - 29 Aug 2004

-- RandyKramer - 29 Aug 2004

I really like the new look, it is quite beautiful and very pleasant to use - great work on the skin and on getting this in place!! It's interesting how it completely alters the feel of using TWiki to something much more modern and well-designed, even though it is only a skin change.

The font size in the comment box is very large, not sure if that's related - size is OK in Edit mode.

Now, I just hope we can change the default logo for CairoRelease - given discussions elsewhere it looks like there are legal reasons to do so, but even if not, it sticks out as the only part that is not designed. I think the HighResolutionLogos are good and will fit into the new design well.

Also, can we update the static HTML page for http://twiki.org/ to fit in with the new design? This would create a much better first impression?

Having done a lot of eBay recently, I've noticed that their item composition page uses a new window for the Preview feature - this works really well, as the new window automatically has Back disabled, of course, removing the problem of BackFromPreviewLosesText. Although that issue is largely solved, there is still the 1% of cases where it loses text, which is very annoying for the user, so I'd prefer to engineer it out.

Also, can we set 'release edit lock' to be the default, at least on TWiki.org?

-- RichardDonkin - 26 Aug 2004

Deleted my verbose and unorganized comments — most of them are summarized on Wikilearn.TWiki's New Look — elided details can be seen by reviewing R1.6 of this page.

-- RandyKramer - 26 Aug 2004

There is no question, pattern skin gives a neat look. But not all is wonderful, I believe. I am concerned about the wastefulness of the new skin with respect to

• Spacing between lines
• Tables generated from searches

I find information became harder to find in this manner, and tables that previously were compact appear now disorganized. I hope we can fine tune the space utilization, as for right now, I find this a usability problem that stands in the way of adopting pattern skin, at least for me.

-- ThomasWeigert - 27 Aug 2004

... in particular, the WebChanges page looks bad, IMO due to lots of wasted space between the lines.

I also feel that the space between sidebar and the start of the text in main area shouldn't be more than 1em.

The topbar also looks pretty empty - I think topic name should appear there. After all, if people choose not to put heading for topic, then we can't easily know which topic we are in. (And it would probably be nice to put twiki logo into sidebar itself.)

Edit/attach/printable (and couple of other things) at the top of the page seem to merge with topic contents. Like at bottom, I would have liked them to be in a independent box - which should look like as if it is overlaid on top of topic contents.

-- VinodKulkarni - 27 Aug 2004

To address some of the issues raised:

• Personally I like the spaced search results. But I recognize that people want efficiency too. I have modified style.css (in particular .twikiSummary to make the results more compact. See this comparison table; the pixel numbers show the heights of the red lines (the distance between results): (from Safari, will look at it in Win Explorer tonight)

Thomas, does this fulfill your needs?

• The top bar is empty in awaiting of TWikiBrand. Remember that PatternSkin is a generic skin, to be used by a lot of different people and companies. In a lot of cases you will need a top bar. Take Java's twiki for instance. I know the top bar is not useful always. Perhaps on a small intranet with low branding you can do without. On my private twiki, the origin of PatternSkin, I also did not have a top bar. I will write guidelines how to remove/not display the top bar soon.
• To put the title in the top bar is a separation of screen functionalities. At least in the current layout. If you don't have a wide top bar but only a left bar stretching from top to bottom, you can reserve an area to display the title - I wouldn't show a separator line then. So in a derived PatternSkin this is thinkable. It shouldn't be too hard to change layout.css for this reason.
• Often the WikiName of the page does not exactly cover the topic - take a look at the bug report titles for example. When you show the WikiName automatically (in large font), you get a double when people are actually using a topic title. So if you want to show the topic title at the top, I think its better to have a topic variable TOPICTITLE that people can fill in in the topic's web form.
• I think we both agree that the action buttons should be separate from the topic text. My solution was to make them grayed out, so that the focus of attention is still on the topic text, and not on 'technical' buttons. Other solutions are possible, and I am open to suggestions, but please design them and attach them here, so we have something to talk about.

-- ArthurClemens - 27 Aug 2004

Arthur, thanks for the experiment above. Not sure why you used different text, so the results are not as easy to compare.

• The list had changed in the meantime. But the gist is that the new patternskin layout uses 3 pixels more per item than the classic skin, and 10 pixels less than previous. Each item in the picture has 2 lines of summary text, so their heights should be equal. The new style can show more items in the same space. -- AC

The new version of pattern is much better than the old one in terms of readability. Note that classic is still more space efficient. I think you should also drop the lines between the rows (or make this configurable by the search) and make the space between each row not much larger than the space between lines within a row. Please again look at this topic. It went from informative to unreadable purely due to the larger spacing (and, of course, that now the page has to be made much wider due to the space taken up by the left side bar; personally, I think the side bar is a bad idea, except in exceptional situations, but that is a different story).

-- ThomasWeigert - 27 Aug 2004

Are we seeing the same information? I definitely don't agree that the search results are unreadable - on the contrary, readability has increased significantly, due to the horizontal lines. See this comparison picture, above the classic skin, below the new PatternSkin:

-- ArthurClemens - 27 Aug 2004

Arthur (in particular),

I think you're aware that I found some anomalies with konqueror and the Pattern skin (things like the square instead of the —, the down arrow in place of a bullet for the TOC, and the moving (disappearing) text for the TOC headings). I'd like to record them somewhere (other than on the Wikilearn web) so that they might possibly be addressed. I could add them to one of the formatting problems with browser x pages (don't recall the title offhand), but wondered if it would be more appropriate / useful to create a similar page(s) associated with the Pattern skin, in the Plugins web.

Please give me your thoughts, and even suggest a page name if possible.

-- RandyKramer - 27 Aug 2004

There is a bugs table on the PatternSkinDev page. If the desciption is long, or there needs to be much discusion then it would probably be best to create a separate topic (in the Plugins web?) which the bugs table could link to.

-- SamHasler - 27 Aug 2004

To move the left bar to the right: I have added WillNorris' comments to PatternSkinCustomization. I have changed LowRes.css a bit so that the paddings are even smaller, and the bottom bar aligns better.

-- ArthurClemens - 28 Aug 2004

Arthur, I don't mean to appear obstinate, but please take a look at the screen dump below: it compares the same topic viewed in Classic skin and PatternSkin, using the same size browser. The difference in information content is startling (click here for a full-size image).

You might say that this is not a fair comparison, as the left bar eats up screen real estate. This is a problem in itself, but to see the impact of making the browser wider so that in both browsers the text area shows the same width, please go to here. Still a big difference...

I hope that this example makes it clear why I am concerned. Note that generating tables from searches is the second most common thing you find in twiki topics, I believe.

As I said above, I think that the search results under PatternSkin are unreadable due to the low information density. Even with my small screen fonts and high resolution there is not enough information on a single page.

I realize I can make changes by adjusting the CSS. But my point is that this is something we should change for the system out of the box. Presenting information is what TWiki is all about...

-- ThomasWeigert - 29 Aug 2004

Hmm, I see. I agree that this should be improved. Do you have a 800x600 resolution? What browser version?

I had to recode the search results presentation due to problems with Explorer 5.5, that takes a table with width of 100% to be the width of the total page. So the search results now all use divs.

Besides the left bar "problem", the font size is a little bigger, forcing the rev date info over 2 lines. I could make .twikiSearchResults .twikiTopRow a little smaller, for instance with font-size:95%;.

Could you try this, by setting in your home topic the modified style attached here? Use:

      * Set TWIKISTYLEURL = %PUBURL%/Codev/TWikisNewLook/style_smaller_results.css

This is a bit small to my taste, but it might help you now while I am looking for a long-term solution. Another solution could be to forget the tabular form and appending topic title, revision date and author.

-- ArthurClemens - 29 Aug 2004

My screen resolution is 1600x1200 pixels. I am running IE 6. I think this layout just is not appropriate for queries returning more than a few lines, which most queries do. I think you should not render boxes around each row, nor the extra space.

I used the TWIKISTYLEURL you indicated. The font size is better, but we are still wasting a lot of space in situations where there is just a single line returned. There is a huge amount of white space between the entries.

By the way, I began using your USERLAYOUTURL indicated towards the top of the page to get rid of the left bar. That works well.

Note that in my opinion, your line spacing in normal text is also way to wide.

-- ThomasWeigert - 31 Aug 2004

though I am a text size freak like i think Thomas is, I'm not sure his or my opinion is necessarily correct. I prefer dense information, but I think that generally, most people need spacing like that Arthur has put in.

-- SvenDowideit - 31 Aug 2004

I'm with Thomas on there being too much line space in normal text.

-- SamHasler - 31 Aug 2004

Something goes wrong in Explorer: if you set the width of a div, it will always have a height, even if it has no contents. I am working on an update.

Also the line spacing in IE is indeed too wide. I make it now the same as for bullet lists.

You will have noticed IE is not my native browser.

-- ArthurClemens - 31 Aug 2004

I have made a few corrections to 2 search templates and to style.css. Unfortunately it cannot go into CairoRelease, but you can see it on http://www.dekko.nl/cgi-bin/twiki/view/Main/ArthurClemens. I will update the PatternSkin zip and style.css on twiki.org tomorrow.

-- ArthurClemens - 31 Aug 2004

I've just been browsing twiki.org with Lynx. The 'skip to topic' and related links are very nice! Please add one for 'skip to attachments'.

-- MattWilkie - 01 Sep 2004

Noted.

-- ArthurClemens - 27 Oct 2004

I was a bit confused about why the InternetExplorer topic was using the old skin, yet the InternetExplorerBrowser topic, which is a %INCLUDE% of InternetExplorer, is using the new skin. The answer was the Set SKIN = iejs command embedded in that page... Not sure if it's a bug that TWiki interprets such commands within <pre> tags, but have now fixed that topic.

-- RichardDonkin - 21 Nov 2004

It messed up because IejsIsNotASkin : its use of the SKIN setting is a symptom that we need a WebControlBottomBar

-- MartinCleaver - 21 Nov 2004

I enjoy PatternSkin and have modified it a bit for my personal site (http://spacebit.org). I changed the CSS to put the navbar on the right, but there is still a problem with many browsers (LayoutOfCSSForLynx). Lynx, Treo phones, text readers, etc. still get the navbar first even if it is on the left or right. I spent an hour trying to fix this but have been unable to. Is anyone here more skilled at CSS and can help?

-- KenMankoff - 07 Dec 2004

CSS doesn't work with this google cache page. No clue if this is TWiki or Google. It isn't Firefox 'cause I see it in Safari too. http://64.233.179.104/search?q=cache:LyU6jny6pZcJ:twiki.org/cgi-bin/view/Plugins.EditTablePlugin+edittableplugin+sort&hl=en

-- KenMankoff - 15 Dec 2004

Google inserts a table before the DOCTYPE declaration. This pushes the page contents down, while the left bar has an absolute position (which is necessay for Explorer on Windows to render the content part right).

-- ArthurClemens - 15 Dec 2004