On Tue, Jan 15, 2013 at 5:42 PM, Jon Robson <jrobson(a)wikimedia.org> wrote:
Thanks for this Brion this is very useful.
\o/
All I'd say is let's try and keep the app and
mobile web designs as
closely aligned as possible. I worry about our bandwidth if we end up
managing two radically different designs. There is no reason why the
mobile app cannot have the same styling as the mobile site and this
also will help promote the brand of the app and show that it is
official due to looking the same. For instance in this mockup the
search bar goes in place of Wikipedia branding. If we were to do this
for the app I would also want us to do this in mobile web.
I don't think we should be too afraid of having some differences between
platforms; even big brands like Facebook have at times significant
differences between their mobile web, iOS, and Android experiences but they
definitely share common branding and you wouldn't confuse them with
something else.
Sometimes it'll be something subtle like using a different default font in
UI, or round versus sharp rectangles. Sometimes it'll be a totally
different implementation of a feature that uses platform-specific widgets
and workflows.
We can also update on different schedules: try something on the web before
introducing it in the app, or try it in the app before introducing it on
the web. We should consider this flexibility a strength, not a weakness.
I also see no reason why the app would need to look different from the
mobile web. There are of course a few
exceptions/constraints (e.g.
native app menus and back and forward arrows in the top navigation bar
- these would not be needed on mobile web but I don't see any problems
with these being removed from the web versions design.
Talking with Yuvi a while back I understood that the native apps can
use a web view for UI and thus the same styling. Is this still the
plan?
Basically anything *inside* the page content area will be HTML and we'll
most likely want to use common JS and CSS between MobileFrontend and the
app. That includes but is not limited to:
* content style
* collapsible sections
* reference popups
But the toolbar, search, menus etc we want to do using native widgets for
best performance and integration. This means their implementation won't be
with HTML/CSS so we'll need to maintain the layout and styling separately
for each port... and they may well differ a bit.
If so how best can we keep as much of the styling in sync
between projects as possible? I'd hate to get to
the state where we
have unmanageable forks of css files on both github and gerrit.
With the current PhoneGap/Cordova app we actually import MobileFrontend as
a git submodule to reuse some of the styles and scripts for the content
area... for the stuff that will be implemented in common, we'll probably
keep doing that.
-- brion
On Tue, Jan 15, 2013 at 5:26 PM, Brion Vibber <bvibber(a)wikimedia.org>
wrote:
It'll probably be a while before we start
work on the new native
Wikipedia
apps, but it's worth thinking about design
now. :) I took some time
today to
throw together a quick mockup of an updated main
app UI, based on what
we've
been doing for the mobile web site:
http://leuksman.com/misc/wikipedia-app-mockup/framed.html
Source on github:
https://github.com/brion/wikipedia-app-mockup
Screen sizes for iPhones, iPads, and Nexus phone and tablet devices are
switchable so you can see how the UI fits to different devices, and you
can
rotate between portrait and landscape mode. You
can click through to
articles, but note that section collapsing and search are not fully
implemented -- it's a mockup, not a real app. ;)
First I wanted to check if this sort of mockup is a useful tool for
visualizing for you guys. :) I figure it is, and we can make other future
mockups similarly.
Second, just getting some feedback on ideas in the current mockup:
* this copies the "hamburger" menu from the mobile web site for
general-app
options. Don't worry too much about the
contents of the menus at this
stage.
* a similar page options menu on the right side
is opened from an icon
*inside* the content area
* I've replaced the search field with the branded Wikipedia logo and a
search *icon* which would trigger full-screen search (or a popout dialog
on
tablets, perhaps)
* Back and forward buttons are placed next to the search, I'm still not
sure
about that.
I'm also considering doing back/forward through left/right swipes to
free up
icon space, but this might not be discoverable.
(We could stick
back/forward
in page options or app menu maybe).
-- brion
_______________________________________________
Design mailing list
Design(a)lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/design
_______________________________________________
Design mailing list
Design(a)lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/design