Jump to content

Muesli Café

diogo

By diogo,
in Showcase

 Share

Recommended Posts

diogo Hero Member

diogo

Posted
Posted

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 :) 

  • Like 19
Link to comment
Share on other sites
diogo Hero Member

diogo

Posted
  • Author
Posted

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 :)

Link to comment
Share on other sites
Christophe Hero Member

Christophe

Posted
Posted

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!

  • Like 1
Link to comment
Share on other sites
SiNNuT Hero Member

SiNNuT

Posted
Posted

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'.

  • Like 2
Link to comment
Share on other sites
diogo Hero Member

diogo

Posted
  • Author
Posted

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!

  • Like 3
Link to comment
Share on other sites
Martijn Geerts Hero Member

Martijn Geerts

Posted
Posted

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.

  • Like 1
Link to comment
Share on other sites
diogo Hero Member

diogo

Posted
  • Author
Posted

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
}
Link to comment
Share on other sites
felix Sr. Member

felix

Posted
Posted

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.

  • Like 3
Link to comment
Share on other sites
Nico Knoll Hero Member

Nico Knoll

Posted
Posted

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;
}
Link to comment
Share on other sites
diogo Hero Member

diogo

Posted
  • Author
Posted

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 :)

  • Like 4
Link to comment
Share on other sites
diogo Hero Member

diogo

Posted
  • Author
Posted

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 :)

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...