Enochs Fish and Chips, Llandudno
Earlier in the year we did the identity, branding, and print work for Enoch’s, our favourite local Fish & Chip shop. Now, we’ve just launched Enoch’s new website – and we’re rather proud of it! We were determined to push the boat out for this project to reflect the passion and quality of Enoch’s itself. What we’ve shipped is a website that looks great on mobile phones and big computers, with a fun nautical theme and – if you’ve got a nice new computer or mobile phone – some playful animations too!
Thanks to the enthusiasm of Danny, who commissioned the work, we were able to take this project as an opportunity to see how far we could push a modern website whilst staying within best-practices for web standards and accessibility. So we’ve used no Flash or any other creaky insecure plug-in’s to achieve the animation; this is pure CSS3 and HTML5, which Google and users alike will love. And we’ve been able to create a site that changes its layout to display the content as perfectly as possible whether you’re on an old phone, a new phone, a tablet device, or a desktop. Not that you have to try the site on those devices to see what I mean, just try resizing your browser on the computer – you’ll see how the layout changes.
What’s that? You don’t see the layout change, or any animation? Hello there my Internet Explorer using friend! Don’t worry, this is expected and indeed intentional – Internet Explorer is something of the black sheep of the internet family, and after a few years of delinquency it’s been put in “remedial classes” to catch up with the other kids. It can’t do animation or fancy adjusting layouts just yet. But IE’s had a change of attitude and has been studying hard – the next version will get all this fanciness too. Meanwhile, you get to see the site as desktop users would and get to enjoy a static non-animated version. You can always download a new browser if you like, there’s Google Chrome, Firefox, Opera, or Safari you might enjoy.
OK, you want to hear more about the technical aspects? Here we go:
This site uses a mobile-first approach to create a responsive design. Which means the site is as efficient and fast as I can make it for any given user, and it also displays the content appropriately for any user too. No more having to zoom in-and-out of a desktop-size website on your mobile phone. No more mobile specific website and another desktop-specific website. This is just one website, that squeezes itself and re-arranges to fit whatever device you’re looking at it on.
This is a design lead site too, to fit in with Enoch’s existing themes and design for the shop and print work. Which means it has rather a lot of graphics. We’ve used cunning design and fancy-pants image compression to shrink this down to acceptable file sizes, which mean the site is between 700kb and 1Mb to load (depending on your screen size). That’s on the larger side of an average website at the moment, and although bigger than we’d normally like it’s a trade off we all felt worth it in this case.
The site itself has a small and simple Content Management System that allows Danny to edit the text and add new news items, as well as display his latest Tweet. We chose Perch which fitted the bill perfectly.
What I did
Everything except the visual design of the PSD. I adapted that visual to work as a real website, created image assets, built the site, conceived and wrote the animations etc.