Muesli Café

[diogo]

Hi all,

This one is special because it's for a project of ours, Erika and mine.

http://muesli-cafe.com/

We are starting a crowdfunding campaign to open a breakfast place in Porto where we will serve muesli. This is quite a bold attempt because muesli is not common at all in Portugal and it will take a good communication effort from our part.

We will need all the help we can get, if you guys want to contribute here's the project's crowdfunding page http://ppl.com.pt/en/prj/muesli-cafe-porto and you will be all welcome to Porto to taste our delicacies

It will be great if we make it  

[Joss]

Love the concept.

I haven't any spare cache, but if you want any thing cooking/serving wise, let me know.

Send me more info and I will put it on my food blog, however

http://foodloversdiary.com

EDIT:

hahaha - I mean CASH, not cache!

[adrian]

Love it diogo! The video is awesome!

Big muesli and granola fan here, so if I ever make it back to Portugal, I'll visit for sure!

PS Shouldn't the links to http://ppl.com.pt/ go direct to your campaign?

[diogo]

Thanks guys!

Joss, I will send you more info for sure as soon as I can. Would be great to be featured in your blog

Adrian, they should of course. I put them there before we published on the PPL site and we didn't know the URL back then, I guess I forgot to change it. Fixed now.

Thanks for your kind words, you're welcome to Portugal at any time

[Christophe]

Hello diogo ,

I've just noticed several things, I don't know if it's on purpose. And if it's just the GNU/Linux versions.

When using Firefox 32.0 and Chromium 37 (LinuxMint) - I'll also check on Windows 7 later -, each time I hover the EN (or PT) link the font changes.

The same occurs with the top-left menu links.

Is it also "normal" that when scrolling down the homepage, for example, the 4 menu links "merge"? It seems to be because of:

.collapsed #menu li:nth-child(n+2) {

    margin-top: -0.97em;

}

When hovering the "merged" links, they become 4 separated links again.

Perhaps the menu links could just become smaller when "Ajude-nos a abrir um novo espaço de pequeno-almoço no Porto. Só temos 86 dias." becomes smaller. Just an idea (but perhaps it's an artistic choice ).

In Chromium, the "active" top-left menu link becomes bold, but not in Firefox.

Nice pictures!

[felix]

i think it's intentional the links merge when scrolling and i love the effect (the site is about a food that is made of mixed cereals... you know?).

great site and big ups (i do love muesli, too).

[Osorio]

Great site for a special project
I really like the video and the lettering.js stuff you did to the menu.

But the link to the campaign still doesn't seem to be there?

[DaveP]

I love the way the menu works - never seen that done before. Good luck with the project.

[SiNNuT]

Lovely site but unlike most i don't particularly like the menu. On mouse hover the expanding works. But on touch devices such as my smart-phone to me it doesn't work that well. Tapping the garbled letters you would maybe expect it to expand, and most of the times it does, but it also takes you to a page you are not even aware you clicked, like contacto or crowdfunding. Sometimes it seems to stop to function altogether. This is on Android 4.4.4 and recent Chrome and Firefox versions. It feels a bit random and unintuitive. I'm not sure a main navigational element should be this 'experimental'.

[onjegolders]

Awesome.

[diogo]

I've just noticed several things

Ya, those were on purpose. Quite difficult to achieve actually

The menu item not getting bold in Firefox it's a problem though. I'm using text stroke because the bold was too strong, and apparently FF is not liking it. I'll look into it, thanks for reporting.

i think it's intentional the links merge when scrolling and i love the effect (the site is about a food that is made of mixed cereals... you know?)

That's actually a great way of seeing it, but I confess it wasn't our intention

The whole concept of the corporate image revolves around handmade and individually done, thus the random and clumsy nature of all elements. The intention is that the menu also has this analog feeling.

But the link to the campaign still doesn't seem to be there?

Yep, that one escaped my falcon eyes. Fixed now, thanks!

But on touch devices such as my smart-phone to me it doesn't work that well.

I was aware of some problems with the touch, and tried already to fix them. I stopped when I was completely lost in the JS events and had to do other stuff, but will come back to it as soon as I can.

Awesome.

Thanks for all your comments guys!

[totoff]

Awesome - as all of your work.I LOVE the collapsing menu! Great idea.

Good luck!

[Nico Knoll]

Love this! And really nice video (I want a drawing of me now, too ^^). I donated 5€ and hope to see my name in your cafe the next time I go to porto

[diogo]

Thanks Nico!!

(I want a drawing of me now, too ^^)

Sure, here you go

[thistimj]

Really like the site. The pictures are fantastic! The video is great as well. Good luck with your endeavors!

[Martijn Geerts]

What a awesome decision you made there Diogo! Wish you all what needed to make this a success. Great web BTW. 

About the 'menu issue':  

This week i've done the the 'same' menu. I inserted an extra element, the only thing that element does is opening/closing the menu. Now when the menu has the class 'closed' trigger a click on the extra element, the extra element opens the menu, after that the menu click returns false.

[diogo]

Thanks guys.

@Martijn, I 'solved' the menu problem by disabling the collapsing on touch devices. Not ideal, but it will have to do for one week, since I will be away from the computer.

If anyone need to do something similar, it's really simple but probably it also disables the collapsing in devices that are both touch and mouse:

var is_touch_device = 'ontouchstart' in document.documentElement;

if(is_touch_device) {
    // do things for touch devices
} else {
    // do thing for other devices
}

[felix]

Diogo: this check won't work in chrome as it reports beeing touch enabled always (no matter if the device itself supports touch or not).
You might want to have a look at detectizr which is an add-on for modernizer that detects the  device, device model, screen size, operating system, and browser details and (like modernizr) adds the respective classes to the html-tag so you can use them for your touch/non-touch handling.

[Nico Knoll]

You could do it like this:

var isMobile;

// Identify if visitor on mobile with lame sniffing to remove parallaxing title
if( navigator.userAgent.match(/Android/i) ||
	navigator.userAgent.match(/webOS/i) ||
	navigator.userAgent.match(/iPhone/i) ||
	navigator.userAgent.match(/iPod/i) ||
	navigator.userAgent.match(/iPad/i) ||
	navigator.userAgent.match(/BlackBerry/)
){
  isMobile = true;
}

[Joss]

http://www.foodloversdiary.com/good-stuff/the-bowl-of-good-food-we-can-all-invest-in/

and...

https://twitter.com/foodloversdiary/status/524323670630469634

In case anyone wants to retweet...

[diogo]

Thanks a lot Joss! Love the article

[onjegolders]

Great article Joss! And yes this is well worth funding (I'm sure Diogo will offer a free illustration for any PW donations )

Small typo = "flair/flare"

[netcarver]

@diogo

Perhaps onjegolders is onto something (offering an illustration or illustrations) for potential donors who are not in Porto and can't benefit from your rewards with local delivery.

[diogo]

Sorry netcarver, this will be a late answer.

The reason we offer mueslis, and not other things is because our product is really the best we can offer without spending too much of the money that will come if the campaign goes well. We thought of alternatives, but they would either be too expensive, or take too much of our work and energy in a time when we will be completely focused in opening the café. Offering our own product is always the best balance between more value and less spendings in any business, right?

Of course we thought about people that won't be in Porto. We thought of sending our very nice postcards for instance, but only sending them to everyone (if we get all the money we need, we are necessarily talking about lots of people) would make it too expensive for the real value of it. That's why we have the symbolic offer of writing all the names somewhere in the café, and saying that there is no limit to using the muesli vouchers, like this people can use it at any time that they come to Porto.

Of course we can make an exception for PW users, and I love André's idea. There will be for sure a hand drawn surprise for all of you that contribute, even if with 1 euro

edit: And we sure need everyone's help at this point!! Thanks for the heads up André!

By the way, great news, we were featured on the website of one of the main Portuguese newspapers http://p3.publico.pt/vicios/gula/14236/casal-de-designers-quer-abrir-um-muesli-cafe-no-porto

[diogo]

A more technical note:

In Chromium, the "active" top-left menu link becomes bold, but not in Firefox.

I was using webkit's text-sroke to simulate the bold, since the Hannah typeface doesn't have bold, and the browsers simulated bold is too strong, but unfortunately it only works in webkit browsers (of course). I fixed this now by using multiple text shadows instead. It's a nice little hack actually