Great to see so much responsive web design going on
It’s great to see more and more responsive web design going on … and this wonderful showcase highlights some of the best current work.
This example from the University of California in San Diego is lovely – a good, strict responsive grid. Â It doesn’t try to do too much, but each screen resolution looks native and as if it were built specifically for that screen size. Â Perhaps the navigation, at the smallest width, is a bit clunky – but it’s very effective and overall a really good example.
You might expect it from dConstruct – a digital media conference that takes place in Brighton each year – but this is still a wonderful example. Â If you define responsive web design as having fluid grid, flexible images, and media queries – then this does the lot extremely well. Â A nice example all round.
I’ll be keeping an eye on the Media Queries gallery for sure.
Retail Website for Belleek Outlet Shopping
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.
Front end coding for a responsive web
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:
- A flexible, grid based layout
- Flexible images and media
- 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.
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 …
Mobile Development testing with Ripple
So – this looks interesting … a plugin for google Chrome browser for emulating mobile environments. Â Whenever I work on mobile websites perhaps the biggest challenge is testing across devices – and being able to use the desktop for geo-location services and the like. Â Ripple seems to overcome that difficulty:
Ripple is a multi-platform mobile environment emulator that runs in a web browser and is custom-tailored to HTML5 mobile application testing. Ripple aims to reduce the challenges being faced by mobile developers caused by today’s platform fragmentation in the marketplace.
It offers the ability to look under the hood of your mobile applications, gaining full visibility into what your it is doing. It also allows for the use of existing tools to perform JavaScript debugging, HTML DOM inspection, automated testing, as well as multiple device and screen resolution emulation in real-time without having to redeploy the mobile application or restart the emulator.
Ripple is built as a Chrome extension, running as part of the Chrome browser and takes advantage of our back-end services to perform some of the more complex operations.
They have some demo apps set up (for which you’ll need the extension installed and to be running Chrome) … looks good.
