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@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@lists.wikimedia.org
> https://lists.wikimedia.org/mailman/listinfo/design
>

_______________________________________________
Design mailing list
Design@lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/design