22 May
2012
22 May
'12
4:14 a.m.
Hello friends!
This kind of progressive disclosure mechanism that
you've used for the
Desktop version is good for the mobile versions, when the space is
limited.
But on desktops I think is gonna be very disruptive for the user to
hide/show such large portions of UI, especially on hover events (which can
be triggered by accident). On desktop you have lots of space to use and
the
navigation/tools elements should be visible and accessible. So your
desktop
version would work better as a mobile version, but on landscape.
Yea, I was debating that as well. Maybe a delayed response would serve
better, or would the community rather have everything visible all the time?
On the 'content is the king' note, I just wanted to state that XWiki is an
application wiki. So you need to have in mind that
'content' means not
just
text, but application content: forms, links, text, attachments, etc. The
'content' thing is the hard part in representing it in a responsive
manner.
Thank you for the link, it will definitely help when fleshing out the
content.
For a truly responsive skin, might be interesting to consider some
design alternatives to the traditional -- such as
"windows metro" :
http://en.wikipedia.org/wiki/Metro_(design_language)
Interestingly, that was the original inspiration for the project. That's
why you have all those hidden mouse over events aha. It also takes some
aspect of the charm bar as well (from windows 8)--where all the page
navigation buttons are on the right. Also the huge fonts aha.
Alternatley, the technique could also be used to break up a
traditional wiki document of linear sections, into a
"metro style
panel" of horizontal pages. So in order to read within the section,
you'd swipe downward till you hit bottom of the section. But there'd
be a hint of the section header following and preceding to the right
and left. To go to the new section of a document, you'd therefore
sweep rightward; to go to previous you'd sweep left.
I thought this was a great solution for mobile where gestures can be made.
However, I think in a traditional desktop/mouse combo this would become an
issue since if we account for the lowest common denominator (no do
everything mouse), only one method of navigation is available--the scroll
wheel. This means that only up and down or left to right can be chosen. I
do agree that it is a very unique problem solution that they came up with
though. If you have any idea on how to go about the limitation of the
scroll wheel, i'd be interested!
The following document talks about going from "website to metro-styled
app" but the same concept could be used to use a
skin to transform
existing Wiki/Website layout to a mobile-friendly metro-styled design:
http://msdn.microsoft.com/en-us/library/windows/apps/hh868264.aspx
Thank you for all the links, they are definitely very insightful. On a side
note, I do like the explorations microsoft is doing (using windows phone
myself atm).
For mobiles, I think we need to test at least on WebKit and opera mini
on the devices we have (and IE if we can get hold on a
windows phone).
For desktops, the usual bag.
Yes, i think opera mini (with its limitation) is a good starting point.
And webkit because of its pervasiveness. I do have a windows phone to
test--this is the one that i'm worried about the most since they do some
weird proprietary stuff. For example, fonts are changed by the browser
itself to make it readable (i think) and some scripts do not work (even
those that work on desktop ie).
- The top menu/navigation is wrong IMO (c.f. Desktop4) Why not forget
about it and integrate its feature with the tools on
the right ? (just
a suggestion)
Originally I wanted to separate the two because the top navigation is a
"global" navigation and serves as a bread crumb, where as the right is more
page specific navigation. Do you think this is irrelevant? I will take this
into account, and think about how to best integrate the two if any.
- IMO you don't have to have "everything" on mobile. There are actions
that does not make much sense doing on a mobile, like
print preview,
etc. "Responsive" or "Adaptive" should also be interpreted in terms
of
feature I think. What do you think ?
BTW the GSoC title says "Responsive skin" ;
but in terms of
implementation I have nothing against what LukeW calls "RESS"
(http://www.lukew.com/ff/entry.asp?1392) which basically says it's OK
to have some part of templates be device specific.
I briefly touched upon this, iirc, in the proposal (not the RESS
implementation specifically). You are right, some actions like print
are unnecessary for mobile. In this specific instance, I should have used
the more open term "export" for that oops. But in any regards, i myself am
not very sure of how much should be specifically hidden and its value.
Since unless we use RESS, the browser already have downloaded the files, it
serves no advantage for data reasons or other to hide something downloaded.
It might clean things up, but it doesn't add much beyond that. I was
attempting to try and give the "full experience" as much as possible
(unless it does hinder the experience). I know in most circumstance
printing would not be available, but who knows someone out there may be
able to (eg. google cloud print) and I don't want them to feel like this is
a gimped down version of XWIKI. But I definitely do see your point, what
does the community think about this?
- What's the purpose of the combo boxes on your mobile design ? If
it's navigation, it's wrong, it won't
scale with a lot of entries.
I'm not exactly sure what you mean by combo boxes? If it's the drop down,
it is to natively use the drop down chooser available on mobile devices to
allow for more finger friendly interaction. implementation [1], examples
[2] [3].
- You're missing the search box which I think is very central. I'd go
as far as saying the search box should be the one stop
shop for
navigation when you're on a mobile.
oops, i forgot about this. I am now making a check list of things needed
to make sure this doesn't happen again.
Finally, a revised timeline [4]. What does the community think?
Thanks all! Such a learning experience, thanks again for having me.
Jonathan Solichin
[1] http://css-tricks.com/convert-menu-to-dropdown/
[2] http://open.blogs.nytimes.com/tag/ipad/
[3] http://qph.cf.quoracdn.net/main-qimg-047773f000eeb9037febd55aff32d10c
[4] http://dev.xwiki.org/xwiki/bin/view/Design/ResponsiveSkin