Editing Appropedia talk:User experience

== Clean boxes ==
 
I took this code from [[wikieducator:User:KTucker]] (and added different links) - I like the clean, compact look, and I can imagine using this style for boxes on the main page, maybe with a different font size.

{| align="center" width="25%" style="border-radius: 1em; -moz-border-radius: 1em; -webkit-border-radius: 1em; box-shadow: 0.1em 0.1em 0.5em rgba(0,0,0,0.75); -moz-box-shadow: 0.1em 0.1em 0.5em rgba(0,0,0,0.75); -webkit-box-shadow: 0.1em 0.1em 0.5em rgba(0,0,0,0.75);; color:midnightblue; background-color:#F0E68C"
! Example links
|- style = "color: navy; background-color:lightyellow;"
|
<small>
* [[Appropedia:Service learning|Service learning]]
* [[Appropedia:Portals/Intros|Portals overview]]
* [[Water]] 
* [[Solar]]:
** [[Passive solar]]
** [[Solar hot water]]
** [[Photovoltaics]]
** [[Solar thermal]]
** [[Solar thermal enhancements to conventional power plants]]
</small>
|}

If we use such a style extensively, we can make a new template to add to those at [[Help:Notices]]. Wikieducator has a template just for the style parameters, called <nowiki>{{</nowiki>[[Template:Round_corners|round corners]]<nowiki>}}</nowiki> - that's another useful approach.) --[[User:Chriswaterguy|Chriswaterguy]] 18:09, 7 December 2011 (PST)

:As I understand it, {{tl|Box-header-watch}} already can do what you describe, except for rounded corners, which don't render for all browsers.  At the Kivapedia Main Page, I made the "edit" link color the same as the header background, so readers wouldn't notice, but admins had quick edit access.  A parameter like that could be added here. --[[User:RichardF|RichardF]] 07:43, 8 December 2011 (PST)

== Expandable sections ==

The expandable sections are also nicely done on [[wikieducator:User:KTucker]] - might be great for the main page. See my proof of concept at [[Appropedia:User experience/Dropdowns]]. (Needs to be on a page with <nowiki>__NOEDITSECTION__  & __NOTOC__</nowiki> magic words, so I gave it its own page.) --[[User:Chriswaterguy|Chriswaterguy]] 18:09, 7 December 2011 (PST)

:The {{tl|Navboxes}} and {{tl|Navbox}} templates also allow for very complex collapsible combinations.

{{Navboxes
  |title = A handy navbox for collecting handy navboxes
  |list= {{Solar footer}} {{Water footer}}
}}

The {{tl|Box-header-watch}} template is set to  <nowiki>__NOEDITSECTION__  & __NOTOC__</nowiki> by default, but the "TOC" & "EDIT" parameters can be set to allow them on a regular page as a level 2 header, e.g.,

<pre>
{{Portal:Projects/box-header|<big>[[Portal:Projects|The Projects Portal]]</big>|Portal:Projects/Intro||TOC=yes|EDIT=yes}}
{{Portal:Projects/Intro}}
{{Portal:Projects/box-footer}}
</pre> 

--[[User:RichardF|RichardF]] 07:58, 8 December 2011 (PST)

:Looking at {{tl|pv project}}, I was thinking it would help to move the "v • d • e" links into the hidden part of the template. I find my eye is drawn to them, and my brain has to process them before I realize that they're not relevant to what I want right now. If they're placed at the bottom of the template, there's even an argument for expanding the links to say "view template • discuss • edit". Thoughts? --[[User:Chriswaterguy|Chriswaterguy]] 23:21, 18 December 2011 (PST)

== Navigation and readability ideas ==

A friend of Appropedia, Peter Campbell of Greenlivingpedia, has made a Google Site - "Kitesurfing Handbook" It has some simple but interesting usability features, as seen at the [http://kitesurfing-handbook.peterskiteboarding.com/progression/the-basics Basics] page: 
* "Page at a glance" box. I really like this - I think it really helps the viewer to see what's going on.
* "Previous-Home-Next" buttons at bottom. Relevant to some sets of pages. 
--[[User:Chriswaterguy|Chriswaterguy]] 23:29, 18 December 2011 (PST)
@@ Line 23: / Line 23: @@
 :As I understand it, {{tl|Box-header-watch}} already can do what you describe, except for rounded corners, which don't render for all browsers.  At the Kivapedia Main Page, I made the "edit" link color the same as the header background, so readers wouldn't notice, but admins had quick edit access.  A parameter like that could be added here. --[[User:RichardF|RichardF]] 07:43, 8 December 2011 (PST)
-::Do you know if the round corner rendering is failsafe? I.e. if it doesn't render, does it still come out looking decent in that browser?
-::The 3D effects seem to be important too, as with the shadows around the edges of the box above. I was talking with an old friend who does web development, and he mentioned using 3D effects on the edges of a page. And of course we evolved to look at 3D objects :-). --[[User:Chriswaterguy|Chriswaterguy]] 23:17, 18 December 2011 (PST)
 == Expandable sections ==