The Westville Hotel – a responsive web design

Posted by on Feb 15, 2012 in Design, Mobile, work | No Comments

It’s an absolute age (well, just over 4 months) since I wrote this post saying that I was developing a responsive website for the Westville Hotel, in Enniskillen.  Well, after several changes of staff with the client, and at least two complete redesigns, we’ve finally launched this morning!

Exciting stuff.

So, yes, it’s a responsive site.  What does this mean?  Well, it means that the site will meet the user no matter what device it is accessed on.  So, the layout changes depending on whether it’s being accessed via a smartphone, a tablet, or a lovely 27 inch monitor.  The code base stays the same – this isn’t a separate site – it just adapts to it’s environment.  Smart.

I firmly believe that this is the way the web should be built.  It’s the only way that doesn’t involve duplicated content, or some huge compromise of functionality.

This example is not perfect – notably, the booking engine is hosted by a 3rd party which does not provide a responsive experience (which is hugely frustrating, but we can’t do anything about that yet.  Yet.) – and the sign up form for the email newsletter needs some work on the lower screen sizes, but it’s a huge step in the right direction.

Check it out.

westville-hotel-website-redesign

As Above, So Below

Posted by on Jan 26, 2012 in Design, Everything Else | No Comments

Sometimes I’m just about the luckiest person I know.  One of those times was yesterday when the most deliciously colourful, sumptuous and beautiful piece of artwork arrived on my doorstep.  It came courtesy of the Kenspeckle Letterpress.  It’s hard to do it justice on such a small web page.  In real life it measures 4ft by 3ft.  That’s huge!  Laurena and I are both so thrilled with it.

So, I know, I know … ‘Where an I get mine?’ … well, just here as a matter of fact: As Above, So Below.  Ours was a custom size, so you’d have to get in touch with Kenspeckle if you wanted one that large (they go up to 5 feet wide!) … but it’d be stunning at any size.

(Lara sees it as trees.  Jonah sees it as rain – the Irish in him, I first saw it as river delta’s but now can’t get past trees.  I’ll update later with Laurena’s take!)

as-above-so-below

Retail Website for Belleek Outlet Shopping

Posted by on Dec 19, 2011 in CSS, Design, HTML5, work | No Comments

This is the first hyper-local project I’ve worked on in a while … but it’s fun to get this local sometimes!  So … let me tell you a little story …

There was a shop here in Belleek that had traded for 50 years.  Owned and run by 2 brothers, McGraths stocked a seemingly random assortment of things you might never need but were perhaps tickling somewhere at the back of your mind ( ‘… y’know, I’ve never owned a Bodhrán … perhaps now’s the time.  Or, I could get that pair of wellies I’ve always wanted’).

Obviously, they did this successfully enough, but the thing I will always remember it for were for it’s shop dummies.  Writing this I cannot believe I never took a photo of them, but trust me – they’ll live long in my memory.  They were all blessed with a deathly green hue more at home in some zombie movie.  Some had 4 fingers on each hand – others fewer.  Their hair styling was, well, agricultural.  But dammit, they had personality.

Anyway … brushing all of that aside, in stepped Belleek Outlet Shopping and with them a breath of modernity.  It’s a 3 phase development – phases 1 (menswear, ladies wear, accessories) and 2 (shoes, bags) are up and running, and we just launched the website too.  Good stuff.

It’s not often that websites I work on are supported by a national TV Ad campaign, but they advertised throughout the Rugby World Cup in the autumn and also the X-Factor.

The whole thing has been such a boon to our local area.  On a Saturday it’s now often standing room only in the local coffee shop and it’s great to see lots of their carrier bags swinging merrily from shoppers hands.  A small village like Belleek needs enterprises like this and I wish them every success.

belleek-outlet-shopping

Mobile web design considerations

Posted by on Dec 9, 2011 in Design, Mobile, work | No Comments

Have just written a lengthy page on mobile web design considerations … I’ve got it as a page, rather than as a regular post because it will eventually feature more prominently on the site … but for now, that’s where it is.  I’m gearing up for some changes here at TickTock – 2012 is going to be different for me … I’m going to be undergoing a re-alignment in terms of the projects I’ll be working on and in terms of the clients I work with.  More of which soon enough – suffice to say, I’ll be doing a lot more work in mobile web design … so I thought it best to have some general information available to people on their options: check it out.

Apple Store in Grand Central

Posted by on Dec 8, 2011 in Design, On the interwebs | No Comments

For 3 extremely memorable years, I was lucky enough to walk through Grand Central Station, NYC twice a day, almost every day.  To say it’s an inspiring building would be damning it with faint praise as well as stating the bleeding obvious.  It’s one of my favourite buildings and so much of it is so perfectly suited to it’s primary uses – it’s like a cathedral for commuters, tourists, diners, hangers-around … it’s wonderful.

And now it has an Apple store.  There must have been so many constraints placed on Apple when they were designing this particular store – I’m sure everything needed to go through many layers of bureaucracy and that hundreds of hoops were jumped through.  But the result is stunning – and result in a store that both looks like a completely natural fit and one that has been there for ever.  Beautiful.

(via)

The Apple Store in Grand Central, NYC

 

Recent reading and useful links from around and about

Posted by on Oct 27, 2011 in Design, Mobile, On the interwebs | No Comments

So, over the week I build up a collection of open tabs in my browser which need reading … and finally, I had a little bit of time this morning to finish them off.  Listed below for your clicking pleasure:

  • First off, a series of three articles from .net magazine (y’know, I wish they’d rename … I keep getting horrible Microsoft framework flashbacks) in their ‘Insiders Guide’ feature.  It’s the ‘Insiders Guide to a successful website’ – the three articles covering design, build and promote.  A good breakdown from Laurence McCahill – co-founder of Spook Studio.
  • Secondly, a couple of bits for the responsive minded amongst us … this great guide on ‘Essential Considerations for crafting quality media queries‘  Such a simple thing, a little media query but – apparently – an awful lot to consider.  Certainly, discussion about break points is necessary – I’m working on a responsive project at the moment and have settled on just 2 break points (tablet and iPhone) – but this will change from project to project … and with the increasing proliferation of devices.
  • Then, the best article I think I’ve ever read on the why and the how (in terms of the considerations – rather than the nuts and bolts) you should start your responsive project – this from Elaine Simpson at UX Booth: How to design a responsive mobile website.
  • Finally, a little bit for us web designers – how to be your own best promoter.  It’s not often we get to work ‘on’ our business rather than ‘in’ our business – but here are a few tips on how to do some of your own marketing.

That’s it for now.  I’m still working away on the responsive project I blogged about the other week … it really should be launching soon and when it does I’ll be able to write about it properly again!

Designing a facebook page for your business

Posted by on Oct 21, 2011 in CSS, Design, HTML5, Social Media, Web Development | No Comments

Well, this is a topic that comes up increasingly – designing a facebook page for your business.  Okay, I know I’m behind with my own efforts – and facebook has just changed how they allow you to interact with your business pages (it gives us much more flexibility – but the change is a bit of a hassle) … so, y’know, it’s in the pipeline …

However – have no fear … noupe.com to the rescue with this nice long Video specifically on designing and programming a facebook landing page.  Thanks noupe!  (I imagine that facebook readers will have to click through to the blog post to view the video … what with me not mastering how to embed video yet … )

How to Design and Program a Facebook Landing Page from NoupeMag on Vimeo.

Front end coding for a responsive web

Posted by on Oct 5, 2011 in Case Studies, CSS, Design, HTML5, Mobile | No Comments

So then, the time has come to start a client project from scratch using purely responsive techniques (as defined by Ethan Marcotte’s book Responsive Web Design).  I’ve retro-fitted some responsive techniques to previous client sites, but this will be the first ‘responsive’ project I’m starting from scratch.  The three core ‘ingredients’ for this responsive website are:

  1. A flexible, grid based layout
  2. Flexible images and media
  3. Media queries

If, at this point you’re going ‘huh, what?’, then in essence I want to create a website that responds to the restraints and opportunities offered by the readers device – using the same code base.  So, rather than serving a separate, mobile version of a website, I’m going to code one version that will work across devices.  That’s the plan anyway.

What am I working with?

To help out with this, I’ll be using the Less.app – a pre-processor for CSS, cutting down my coding time immeasurably (that’s the theory), and the Semantic Grid – developed by the same guy as Less.app.  Everything will be hand coded – and then converted into a WordPress theme.

And the project?

So, the client is The Westville Hotel – and below is a JPG of the design – with the 960px grid super-imposed on top.

Westville Hotel Website Re-Design

My aim is to blog through the different stages of the development … the first stage will be to fire up Less.app and start working with the Semantic Grid.  I’ll let you know how I get on …

Amazons New Kindles – analysis from John Gruber

Posted by on Sep 30, 2011 in Design, On the interwebs | No Comments

Typically astute and interesting reading from John Gruber following the announcement of Amazons New Kindles.

I don’t own a Kindle, but if I was going to buy one – or, perhaps, y’know, maybe get one for Christmas – the new Kindle touch seems ideal.  I love the e-ink of Kindle’s that I have seen in use.

As Gruber points out, the Kindle Fire (the tablet version with web browser), is the first tablet that doesn’t take the iPad on on spec – and offers something that none of the previous round of iPad competitors do: content.

It’s all about the content, though. That’s the difference that other tablet makers missed. Motorola, Samsung, RIM — they seem to be chasing the iPad on specs, building the best tablet they can manage at the same starting price of around $500. But they have no clear message telling people what you can do with them.

Daring Fireball: Amazons New Kindles

The thing that still prevents me though is that the price of an e-book is still higher than the price of a paperback.  Given that distribution costs must surely be lower (even with all the new fancy cloud storage) and that you don’t actually have to print the damn thing, I don’t see why they can’t at least bring the price point to the same level.  Maybe they will.

And actually, thinking about it, outside of gifts most of my books are bought 2nd hand from either charity stores or from greenmetropolis.com.  So.

Site Launch: Angelas Bella Flora – lovely florist in Duluth

Posted by on Sep 26, 2011 in CSS, Design, work | One Comment

Ah – so, after a good few months in design & development, we were able to launch Angela’s Bella Flora website last week.  I’ve blogged about this before whilst the site was in development and the good news is, it still looks gorgeous!

The photography, the design, the products, the overall feel of the site – is just wonderful.  It’s been a pleasure to work on it.

Abf final

For those who are interested, the site has been built using PHP.  The shopping cart itself is custom built – but the guts of it comes from a blog post that is now 6 years old (! – hard to credit, I know) from Matthew Pennell.  It’s a really handy little cart script – sure, it doesn’t do everything we needed, but that’s not the intention, it provides a solid enough base to begin with.

For the first time, I added a little AJAX sauce to the shopping cart … those viewers who have javascript enabled on their browser can add products to the cart without leaving the product page, which is nice – but, importantly, there’s a fall back in place for those who don’t have javascript enabled.  Actually, throughout the site there’s a series of nice little javascript enhancements – some subtle scrolling, some smooth show/hide bits and bobs.

I’m proud of the development work, and thrilled once again to have worked with such a talented team on the project – so thanks again to Marian who did all of the design work for the site, and for the ultra patient, enthusiastic and talented team at Angela’s Bella Flora – both Angela herself and Bonnie who have lived and breathed this project for a good while now.

x

Receive our free guide to better email marketing

Subscribe to our infrequent newsletter and receive our guide to better email marketing. This useful list of 7 golden tips covers the following ...