Re: [xwiki-devs] [GSoC] Responsive Skin
Hello friends, Thank you, glad to hear that I am getting somewhere Here is a better version of the sidebar: http://jssolichin.com/public/4/4.%20Home-alt.png The boxes with the x will be icons. having those I think will help inform the reader what is available, instead of the previous metro like overflow. It will also allow a space for numbers showing how much content is available in that section. When you hover over that section, it will still reveal the hover nav in the last mock up to allow for easier clicking and clarity (as to what the icons are): http://jssolichin.com/public/4/3.%20Home-navhover.png I know that the icons will not fit with longer section names like comments, so the icon might be placed above the section name, or be smaller. On that point, I would just like to mention that i'm hoping to also allow the reader to resize the sidebar size fluidly. So if they are reading the comments section, they can devote more space to it. This will, however, be disabled in the mobile version. * The way the navigation links are organized/grouped together is a bit
weird (the upper part with wiki/space/page links)
Visually, I'm not sure if it came through in the wireframe, but i'm imagining it like the iphone folder [1], where we have the breadcrumb/nav (wiki/space/pages) always visible, then when the user clicks it, it reveals the "watch page, access rights, etc." By iphone folder like i mean, it pushes everything down and visually seems to reveal something underneath. But that last point is trivial. More technically, since the navigation is vertical, the breadcrumb style is a bit unclear, and do need to be more refined. Right now i'm thinking maybe a folder esque structure: x wiki \_ x space \_x pages but I feel like that might get to cluttered. Maybe we should just remove the breadcrumb navigation and just have it like in the lyrebird where it appears as part of the content and not as a "global nav?" What does the community think? * On the desktop you probably don't want that inner scroller, but
rather have the right panel fixed and keep the page's natural scroll.
You're right, that would make sense. I think the right solution would be to make the right sidebar scroll like the chatlist window on facebook where if you hover over the area, it will reveal a scroll bar indicator to show your vertical location and allow you to scroll that section using the mouse wheel. Do you guys think it will be ok that we do not have the up and down arrow? or would that be bad usability. I personally think it will be fine since even sites like gmail uses a non native scroll indicator without the up and down arrow--it's just prettier. The menu part still needs to be refined Did I address it earlier in this email, or am I still missing something? Can you clarify specifically which point for me to work at?
Putting the menu on the left would be more familiar to mobile users (the
nav menu is usually on the right in all the mobile apps I regularly use). Maybe we don't want to be like every other app ;p I don't know, I think we can try it out on the right and see how it feels. Same for the desktop in fact ; though I think it's going to feel more natural on the right in that case.
I think both points are valid. I personally chose the right side because I feel like when you land on a page, you want to read content first. But I do know what you mean, left is the traditional side and is used in giant sites like gmail, facebook, hotmail and so forth. I think we should get more input on this.
Jonathan: I don't remember whether Jérôme pointed you to his lyrebird work:
http://www.velociter.fr/journal/lyrebird-a-xwiki-skin-based-on-bootstrap-css...
it could be an additional source of inspiration for you. I don't remember I did. Let me fix the link :
http://www.velociter.fr/journal/lyrebird-a-xwiki-skin-based-on-bootstrap-css Also, sources are on github : https://github.com/jvelo/Lyrebird<https://github.com/jvelo/Lyrebird;cid=1338111304826-974>
Thank you, this will be a wonderful resource! Let me know what you guys think. Best, Jonathan Solichin [1] http://media.tecca.com/2011/02/17/mh-630-iphone-folder-header-630w.jpg
On Sun, May 27, 2012 at 12:06 PM, Jonathan Solichin <[email protected]>wrote:
Hello friends,
Thank you, glad to hear that I am getting somewhere
Here is a better version of the sidebar: http://jssolichin.com/public/4/4.%20Home-alt.png
The boxes with the x will be icons. having those I think will help inform the reader what is available, instead of the previous metro like overflow. It will also allow a space for numbers showing how much content is available in that section. When you hover over that section, it will still reveal the hover nav in the last mock up to allow for easier clicking and clarity (as to what the icons are):
http://jssolichin.com/public/4/3.%20Home-navhover.png
I know that the icons will not fit with longer section names like comments, so the icon might be placed above the section name, or be smaller. On that point, I would just like to mention that i'm hoping to also allow the reader to resize the sidebar size fluidly. So if they are reading the comments section, they can devote more space to it. This will, however, be disabled in the mobile version.
* The way the navigation links are organized/grouped together is a bit
weird (the upper part with wiki/space/page links)
Visually, I'm not sure if it came through in the wireframe, but i'm imagining it like the iphone folder [1], where we have the breadcrumb/nav (wiki/space/pages) always visible, then when the user clicks it, it reveals the "watch page, access rights, etc." By iphone folder like i mean, it pushes everything down and visually seems to reveal something underneath. But that last point is trivial.
More technically, since the navigation is vertical, the breadcrumb style is a bit unclear, and do need to be more refined. Right now i'm thinking maybe a folder esque structure: x wiki \_ x space \_x pages
but I feel like that might get to cluttered. Maybe we should just remove the breadcrumb navigation and just have it like in the lyrebird where it appears as part of the content and not as a "global nav?" What does the community think?
* On the desktop you probably don't want that inner scroller, but
rather have the right panel fixed and keep the page's natural scroll.
You're right, that would make sense. I think the right solution would be to make the right sidebar scroll like the chatlist window on facebook where if you hover over the area, it will reveal a scroll bar indicator to show your vertical location and allow you to scroll that section using the mouse wheel.
Do you guys think it will be ok that we do not have the up and down arrow? or would that be bad usability. I personally think it will be fine since even sites like gmail uses a non native scroll indicator without the up and down arrow--it's just prettier.
I don't have any issue with a JS scroller to make it beautiful, as long as it preserve native behavior (keyboard, etc.) and that it degrades nicely when JS is not present. Jerome
The menu part still needs to be refined
Did I address it earlier in this email, or am I still missing something? Can you clarify specifically which point for me to work at?
Putting the menu on the left would be more familiar to mobile users (the
nav menu is usually on the right in all the mobile apps I regularly use). Maybe we don't want to be like every other app ;p I don't know, I think we can try it out on the right and see how it feels. Same for the desktop in fact ; though I think it's going to feel more natural on the right in that case.
I think both points are valid. I personally chose the right side because I feel like when you land on a page, you want to read content first. But I do know what you mean, left is the traditional side and is used in giant sites like gmail, facebook, hotmail and so forth. I think we should get more input on this.
Jonathan: I don't remember whether Jérôme pointed you to his lyrebird work:
http://www.velociter.fr/journal/lyrebird-a-xwiki-skin-based-on-bootstrap-css...
it could be an additional source of inspiration for you. I don't remember I did. Let me fix the link :
http://www.velociter.fr/journal/lyrebird-a-xwiki-skin-based-on-bootstrap-css
Also, sources are on github : https://github.com/jvelo/Lyrebird<; https://github.com/jvelo/Lyrebird;cid=1338111304826-974>
Thank you, this will be a wonderful resource!
Let me know what you guys think.
Best, Jonathan Solichin
[1] http://media.tecca.com/2011/02/17/mh-630-iphone-folder-header-630w.jpg _______________________________________________ devs mailing list [email protected] http://lists.xwiki.org/mailman/listinfo/devs
-- Jérôme Velociter Winesquare http://www.winesquare.net/
participants (2)
-
Jerome Velociter -
Jonathan Solichin