maemo.org mock-up design/ideas
 

I spent some time to design and animate an inspired from the current maemo.org theme mock-up with some ideas i had in mind lately. You can check them out and tell me what do you think (keep in mind that they are WiP, i just wanted to get them out before the Summit)?

http://bundyo.org/maemo/site/
http://bundyo.org/maemo/site/index2.html

The first one is more-dynamic oriented with every panel separately downloaded and controlled. There are some panel controls if you click on the title. This one is slower on a tablet (as expected :))

The second one has a "dropdown breadcrumbs" kind of navigation that seems to me is easier to navigate than the normal breadcrumbs and is more flexible (hopefully). The More crumb is kind of a look-ahead one - using it i removed the side navigation completely. If that's a good idea is for you to tell me :)

The first one is more javascript oriented, the second one is just HTML/CSS (excluding the menu). The two are part of the whole idea, but i just wanted to test if no javascript is going to be faster.

EDIT: I should mention that it's not working in IE6 yet. It will though.

Re: maemo.org mock-up design/ideas
 

Pretty, but looks a little heavy for my liking, and the padding around the sides is just gross.

Cut down the js by about half (so it runs on the tablets smoothly) and we'll talk.

Ignoring the code-side of things, the theme is fantastic.

Re: maemo.org mock-up design/ideas
 

Which padding? Inside or outside?

Re: maemo.org mock-up design/ideas
 

Hi,

I agree with GeneralAntilles on the padding, does not work for me.

I did not view it on my IT so I am curious to see how it views on there.

Overall, very nice.


David

Re: maemo.org mock-up design/ideas
 

Hi,


My post was referring to the outside border you have going on.


David

Re: maemo.org mock-up design/ideas
 

The whitespace on either side of the content that serves no purpose but to prevent you from using screen real-estate effectively. ;)

Re: maemo.org mock-up design/ideas
 

Yeah, i'll probably end up loading all on one pass and not relying on js that much. Overall since i've tried to do other things with js on the tablet, this one is doing kinda well...

About the padding - its resizing to a limit, so you won't loose so much space on an ITT. On a desktop is more though, but reading long rows is not that easy... maybe more colums on a desktop.

Re: maemo.org mock-up design/ideas
 

Bundyo, I LOVE the look and that cool animated menu. :D

Re: maemo.org mock-up design/ideas
 

Looks good

Re: maemo.org mock-up design/ideas
 

Bundyo,

I Love the look. I admire the work that you have done and know first hand how hard it is to create a fresh look. And, then after you like it, the audience is unleashed on it sometimes attacking the very items you like most. But I guess that is the power of community and you can't make everyone happy.

Kudos!

Re: maemo.org mock-up design/ideas
 

On GeneralAntilles' request, I have spent some time designing the lite version of the maemo.org site. The basic layout can be seen here:

http://fms.komkon.org/MaemoMain.html

Please note that it is layout only (not much graphics) and it includes all pages on one page. Should work very well on a tablet or an S60 phone. Still work in progress though.

Re: maemo.org mock-up design/ideas
 

Just had a quick look, and liked it, except on my laptop the brown/pink font colour is a bit hard to read on the white background. A little bit darker I'd prefer. On NIT it looks great.

Re: maemo.org mock-up design/ideas
 

Looks good I just had one question I though a few months ago a lot of people didn't like having 2 layouts for one website because everyone said a well designed website didn't need a lite version. Have we finally decided that the full web on the NIT isn't really all that full? Don't get me wrong I love both ideas and I love the idea of a lite version. I agree that its needed thats why I did the minimalistic theme for itT and I am working on lite/tablets version of all my sites.

I was just wondering if the community is shifting its view, and we are going to start making tablet version websites?

Re: maemo.org mock-up design/ideas
 

No.

No.

Re: maemo.org mock-up design/ideas
 

So why 2 maemo.org layouts why not one that just runs well on tablets?

Re: maemo.org mock-up design/ideas
 

@Bundyo: I really like the first mockup (even if I still have to test it on the tablet), really. Totally my tastes.

But you should rework your HTML. To test the HTML of a website, I launch Firefox and use View -> no style to see the page without the CSS. If the website is still readable and you can still use it, it's ok (see the actual maemo.org for example).

I keep in mind that it's only a mockup, but give it a try and you'll see how easier it is to build a clear CSS.

Keep up the good work!

Re: maemo.org mock-up design/ideas
 

A very good point, but I don't think Bundyo should worry too much about it for the mockup. It'll likely need a bit of work to mesh with Midgard, so the HTML can be cleaned up then.

I'm more worried about style and layout.

Re: maemo.org mock-up design/ideas
 

I like it for the most part, nice and fresh.

The only thing that bothers me (and only slightly) are the colors. It's a bit too bright for the most part (for my tastes at least).

If you're going to keep the colors, at least make the text a bit darker... add some contrast :)


Otherwise, I don't mind the js, infact I like it. It's effective, not slow at all; an efficient way to organize all that navigation (we can argue back and forth all day on this, but in my opinion it works)

Personal verdict: 87%

Re: maemo.org mock-up design/ideas
 

Have you tried it on the tablet? Or on a slow computer? JS for the sake of JS is a bad plan.

Re: maemo.org mock-up design/ideas
 

If I could add something, I would try to avoid any behavior based on the "mouse over" event, since the tablet doesn't handle it (yet).

I just took a look at it on the tablet and it looks really awesome, and quick.
Good work!

Re: maemo.org mock-up design/ideas
 

No I haven't, and I agree with you. For now.


JS is slow. For now.

Google is changing that. Chrome has a finetuned js parser/engine that allows websites to draw way faster than otherwise (opera/FF/IE ...). Google pushed the innovation. Now Mozilla just released an equivalent engine (still in alpha i believe) on Firefox 3.1 (dev branch?) that beats the socks off of chrome.....

Before long, js will execute as fast as a plain html site does on lynx.

Now, add the fact that tablets are getting a hefty processor upgrade.... I'm pretty confident that heavy js sites loading fast on the tablet will become the norm soon.


My point is: Why design for the past, when the future is so close?

(ok, that sounded cheasy, I admit :p)

Re: maemo.org mock-up design/ideas
 

Because not everybody can afford to buy the latest and greatest (there are a lot of people still using the 770 as their primary machine).

The better question is: Why make things unnecessarily heavy for no benefit?

Re: maemo.org mock-up design/ideas
 

Absolutely right. I'm just saying that if we don't push ahead (by definition, leaving someone behind, like all those lynx users :p ), we're just slowing down the rate of technological "evolution".


But ok, let's talk about the 770. Even though the processor is very unlikely to ever get upgraded (fancy some soldering?), what about a solution in software? A new browser pushed to the 770 that is highly optimized for js parsing?

Hell, I think that would qualify as a major update for the 3 year old device...


I agree, unnecessarily heavy == no benefit. But I just don't see that in the mockup site Bundyo presented (maybe Digg, not maemo). Could be more simple, but I don't see it as "too much" yet.

Re: maemo.org mock-up design/ideas
 

Yeah, well, feel free to work on that. ;)

Re: maemo.org mock-up design/ideas
 

I'll let you know when I'm done then ;)

Re: maemo.org mock-up design/ideas
 

I have not been designing this layout for the NIT only. Rather, I have not been aware that Bundyo worked on the same task.

Our good General here asked for people to create a new light layout for maemo.org that would be easy to navigate and also easy on system resources. It is supposed to work equally well on both the desktop and NITs, so there is no need for two layouts. So I created exactly what I was asked to: a JavaScript-free layout with the bare minimum of CSS that also scales well (try resizing your browser window) and gives direct access to all the essential stuff.

How well it came out? Well, check it out and judge for yourself.

Re: maemo.org mock-up design/ideas
 

Hello from Berlin first. :)

No one asked me to do anything. I'm doing it because i wanted to do it. I'm having some ideas and better to share them than to ignore them.

JS is not for the sake of using it. Every panel is an independent object and loads its own contents and calculates its own overlays. All this can be removed and calculated on the server, but it will lose part of its flexibility. Also only one overlay can be used for the panels, but that will slow down showing it, since it has to calculate where it is shown. Anyway, this is only for the first page, the internal one is almost only html and css and is much faster.

About the bright look - since the look is based mostly on css, almost nothing can stop me to make a dark skin that can be changeable from the options (only my free time :)).

@Boke: That should wait for after IE6 support. :) I should say that even now it is quite readable without css.

Re: maemo.org mock-up design/ideas
 

Thats cool I had no problem with it I just got confused and thought that one person was working on regular version and one on tablet. I talked to GA on IRC and he corrected me. Both layouts look real good.

Re: maemo.org mock-up design/ideas
 

The look seems less important than coming up with the right use cases (although dneary's probably got a fairly close set, IMHO). And, until the use cases & information architecture are decided on, designs are - at best - pretty screenshots of what might happen. A true design has to be based on the use cases & information layout, not the other way round.

Re: maemo.org mock-up design/ideas
 

As a general rule I don't like pages with padding on the side (the part with only a green background), it only leads to a horizontal scroll bar when zoomed up enough so that the text (the content) fills the screen.

Re: maemo.org mock-up design/ideas
 

Since maemo-community (and the other maemo-* mailing lists) is down, the IRC meeting helped clarify the use cases and confirmed that maemo.nokia.com will be the primary end-user and developer reference site, with maemo.org being the community and for more adventurous end-users.

I outlined my ideas from the meeting here:

http://lists.maemo.org/pipermail/mae...er/000955.html

...and have produced a mockup. Key features:

Small links
And I mean pervasive. The overall outline and top-bar should be present on *.maemo.org sites. I've used the term 'Add-ons' rather than 'Downloads', because things added to the tablet'll be coming through Application Manager rather than directly downloaded. "Extras" is nice, but too general at the top-level.

Big links
These are to guide people who end-up here from Google or maemo.nokia.com. High-level, simple English. They'll go to the level 1 pages the same as the pervasive links at the top.

Swarming
The formatting of the portlets capturing this swarm information is sub-optimal, but Inkscape ain't the best for doing DTP. Hopefully, you can get the gist and look past the over-simplified detail.

The portlets correspond to the easy-to-use buttons above, + an about box + news & events. Content is syndicated from a VARIETY of sources, weighted by activity/newness/etc. and sorted into the buckets. For example, the "latest community activity" is showing threads from maemo-users, maemo-community and pages which have been recently changed a few times in Category: Users and Category: Community in the wiki.

Similarly, latest developer activity aggregates content from -developers and Category: Development in the wiki.

These lists should be better styled, possibly including dates - and maybe even mini-icons as bullet points to represent the source of the information.

Anyway, this is close to what's in my head at the moment. If nothing else, hopefully it'll inspire some discussion.

Re: maemo.org mock-up design/ideas
 

I really would appreciate a design that can be viewed at 800 pixels wide without horizontal scrolling!

Re: maemo.org mock-up design/ideas
 

Yes, a fluid layout is the plan. :)

Re: maemo.org mock-up design/ideas
 

Absolutely. Any implementation which isn't fluid should be binned. But we're at the information architecture & mock-up stage; implementation comes later :-)

Re: maemo.org mock-up design/ideas
 

IMHO:

We need to stay away from "business"-oriented designs and designs that lean towards the development side of things... The most recent mock-up that Jaffa linked to has much promise, but the top (secondary header area?) needs a little work.

We really do need to stew on Jaffa's wonderful summary of the IRC meeting for a while longer before submitting a bunch of mock-up ideas:

http://lists.maemo.org/pipermail/mae...er/000955.html

Think simple. Think non-technical. Think intuitive.

People need to be surprised by the new site, I think.

Tim

Re: maemo.org mock-up design/ideas
 

Followup:

http://samoff.maemobox.org/maemo_redesign/

Comments? Suggestions?

Tim

Re: maemo.org mock-up design/ideas
 

Another approach:

http://samoff.maemobox.org/maemo_red..._idea_0007.png

-T.

Re: maemo.org mock-up design/ideas
 

This will not look well on a tablet. In fact, it does not look well on the desktop: it wastes a lot of screen estate on the right side.

Re: maemo.org mock-up design/ideas
 

Actually, the main content is made to fit within the 700px of a non-maximized browser... The content on the right is less important and can be scrolled to -- and, the design is meant to be fluid. But, in any case, it's just a mockup, so thanks for the feedback!

Here's a third idea (it's getting closer):

http://samoff.maemobox.org/maemo_red...idea_0008b.png

-T.

Re: maemo.org mock-up design/ideas
 

Same thing: avoid the long column + short column layout. It wastes space. Instead, break your page into 2-3 equal-sized columns and make them resize fluidly. Also, I would avoid shadows, fancy corners, and other similar stuff: a lot of people are likely to load this page on their tablets connected via GPRS, EDGE, or 3G. A lot of them pay per-MB rates. The above visual elements are pretty useless and just add to the traffic.

Now, as far as content is concerned: I see that you have following content at the page:
1. Two featured applications ("pearls")
2. Menu of important links
3. About Maemo blurb
4. Announcements at the bottom
5. Bad photo of some guy with a number
6. Some inline ads

Of these 6, only #2 and #4 are of any use to a regular maemo.org visitor. The rest is as good as decorations. Furthermore, #4 is at the very bottom and #2 links are named in such a way that only a geek will understand what they mean (Bugzilla, Wiki, Garage). At this point, you can probably guess where I am leading this...

Anyway, I do not see how this page is useful for a regular maemo.org visitor. I also do not see myself using it on the tablet.