A new website for a Bella Italia - a brand we've been working with for years. It's responsive and even works on IE8! Lots of colours, textures and some subtle (and not so subtle) animations and transitions.
Take a look at the live site:
We've also updated our case studies page:
4 months ago
I know this is probably going to boil a few people's blood, mainly the Engage team, but I'm just going to come out and say it...
Can a website be called responsive if a portion of the market is being served different content?
Visiting on a smartphone, the traffic is thrown to the Pocket Diner web-app. Sure, it's the same URL (which is many people's quarm with m-dot websites), but it's very different in terms of content...and to some extent style.
I thought the core concept behind responsive was to serve the same HTML but tweak the layout with media queries? To me, if it does anything but...it's not responsive; at least in the truest sense of the term.
Don't get me wrong, I actually really like the style of the desktop website, but I just don't think this Pocket Diner thing is really cutting it in 2013.
@Jason Hobbs We've had a few thoughts on the subject - Durham wrote a blog post even: www.engageinteractive.co.uk/blog/is-responsive-web-design-really-the-future
I think you are right - if a website serves different content for every screen size it's not responsive - but in this case as we do cater for tablet devices and upward, even though it is not fully responsive, it still qualifies as a responsive website.
Personally, I have an issue with the idea that you should use the same markup.
Firstly, there is a reason that websites these days have big full size photo backgrounds and that 'flat' design is a trend: It's easier to make it responsive. Bella Italia's brand is busy, colourful, full of textures and irregular shapes. The markup to pull that off on desktop is not the same markup I would use on a mobile. I could give it a go, but really I'd much rather give a fully custom experience that is tailored specifically to your device.
Which leads into my second point: If you're using a mobile phone to view a restaurant website, we can look at statistics and make some pretty strong assumptions that you're after quite specific information, and fast. A desktop user acts very differently. To that end, on the mobile we want to get them to the location information and menus as quick as possible and on desktop we want to provide a broader view of all the information the brand has to offer.
I like using car analogies when talking about websites, so here's a new one:
If you were going to go drive on a beach, then race round a circuit, would you rather use a dune buggy followed by an F1 car or a weird mashup of the two that works ok, but it's not great at either?
Couldn't agree more with what @Engage Interactive has just said.
its great :)
@Engage Interactive I did read that article when it came out (although I don't think I went as far to comment).
I did see the MQ tweaks you did to consider mid-range screens, and they do work...I just still don't see why you couldn't do the same for smartphone. You've proven you can do it, so why not go whole hog?
The smartphone version, to me, just feels like you're selling the brand a bit short for the sake of, as you say it, "giving users to information quicker". I'd argue that it can be done just as well with a responsive design and therefore retain the aesthetic.
Could you not carry through some of that Bella Italia charm? Perhaps not to the same extent of jaunty boxes and textures, but enough for the brand to shine through...at least more than what Pocket Diner achieves.
Whilst I agree that use cases do sometimes sit in certain camps (eg. map / postcode on smartphone), it's an assumption to say that's always the case; so it shouldn't be set in stone. I don't like the idea of pushing a user into watered-down web-app because I assume that they're after one thing. The fact that two links on the Bella Italia smartphone version link back to the main site proves that the web-app isn't nailing everything you (or the client) wants.
Your analogy would've worked well when responsive was in its infancy, but fact is, that weird mash-up of a dune buggy and F1 car can now give the two separate vehicles a run for its money.
@Jason Hobbs I'm not saying we couldn't have done the same for smartphones, we can (and we do) but in this project, the brief was not to build a responsive website. Considering the timescales, the fact that we made it responsive to the point we did was a pleasant surprise for our client.
Who knows, perhaps we will eventually build them a more custom mobile version of the site but I'm pretty sure we'll write custom code for mobile and not just make it another media query on the desktop site. That's just a waste of time, effort and markup for this site. Plus, we'd be able to do much more with the charm if we didn't have to work it into the desktop markup.
The 'assumption' that mobile users sit in certain camps isn't an assumption at all. We looked at the statistics; it's closer to being a fact if anything. On another site, who knows, but for Bella Italia this is how it should be. We like to view each project as a unique entity rather than attempt a one-size-fits-all solution.
And, yes, your mashup car may well give me a run for my money, you'd perhaps even get close, but in the end, I win ;)
Great Job @Engage Interactive. Love the detailed case study page too. A great accompaniment to the story of the site.
Excellent work guys, I really like the colour scheme used.
Most of the sites we create tend to be mobile now, mainly because it has fitted in well with the requirements of our clients, in some cases re-working older sites to be mobile as their business developed to need this.
I think this is an important point you make here:
"We like to view each project as a unique entity rather than attempt a one-size-fits-all solution."
It often seems the case that people rush into the design/development stages before researching and trying to fully understand the client’s needs which are unique in each case.
about 1 month ago
keyboard shortcuts: ← previous shot → next shot L or F like
Show and tell for designers
What are you working on? Dribbble is a community of designers sharing screenshots of their work, process, and projects.
Copyright © 2009–2014 Dribbble LLC. All screenshots © their respective owners. Shipped from Salem, Mass. USA.