It’s shaping up to be a busy summer at TickTockDesign … and I’m not talking about the kids being off school for 9 weeks. (NINE!)
About to hit the streets is the new website for Claremont Insurance Companies – a General Insurance agency based in Walnut Creek, California. There is some connection in this … for about a year I lived in Walnut Creek, California (it’s in Northern California – east of San Francisco) and made many great friends there. Sometimes friends come back with work for you – and that was the case here.
The design is nice and fresh – giving the corporate image a much needed lift. The whole site has been developed using WordPress which has become my go-to content management system thanks to it’s increasingly flexible approach to content management. Augmented by a couple of excellent plugins (Easy Content Types and Advanced Custom Fields) there really is very little it can’t do.
The new design is responsive – it’ll adapt to smaller screen sizes, although primarily optimised for the iPad and iPhone it’ll behave nicely with Android phones and tablets too. I’ve got before and after shots here:
And on the iPhone
Next on the block …
Claremont should go live in the next week or so. Following that a couple of projects shrouded in mystery (oooh …. ) Sort of. I’ve got one project for the manufacturer of a specialist cycling product. It’s good working with inventors – they’re passionate, knowledgeable and focused. This project won’t see the light of day until January at the earliest I’d estimate – but it’s a fun one to be involved with and lots of interesting design possibilities.
The next is a huge, sprawling website for an event organiser. In a previous life I worked at a couple of conference companies … now, I’m working on a site to launch a new one. It’s exciting – the energy of the start up and an industry with which I’m extremely familiar. Lots of WordPress-y goodness with this one too.
In between times, I’m doing some work for the crowd that manufacturers the engine for the new Morgan 3 Wheeler … If I can wangle a test drive, I’ll let you know! For now, the design will have to suffice:
So, that’s about all that’s happening. As I say, a busy summer ahead. WIll keep you posted as the sites progress and launch!
I haven’t done a round up post in a while but I’ve been out of the office for a few days and have come back to a mountain of RSS links – much of it extremely useful … so, here goes:
- LeakedIn - worried that your LinkedIn password was one of 6.5million that were leaked this week, check with LeakedIn
At first glance, you’ll be thinking ‘why would I enter my password into this site?’ – and that’s a correct concern. But the site has been set up by (among others) Chris Shiflett a web security expert and authority on all manner of things. The worst of it is that if your LinkedIn password has been cracked well, you’re not going to be able to use that password any more for any site. Cracked passwords will get added to ‘hacker dictionaries’ and will undoubtedly be used to populate ‘Rainbow Tables‘ (tools that hackers use for decrypting passwords). Chris has a more detailed explanation here. (My password was one of the ones cracked. It wasn’t a strong password – and it was one I use on about a dozen sites … I’m now in the process of updating all of those sites with new, stronger passwords.)
- Design Process in the Responsive Age - one for the coders.
Adapting our working practices to incorporate responsive web design – without adding a huge overhead to our clients, is a challenge many of us face right now. Smashing Magazine have a good run down of how you might approach this. The idea of a ‘priority guide’ is a good one – but this shouldn’t be new. If you’re designing websites now and not taking note of elements that should be given priority over others, then you’re doing it wrong. What is important though is that the move to smaller screens brings this back to the forefront of our attention. It’s a good article.
More interesting perhaps is Trent Walton’s article addressing a broader set of circumstances: designing responsive sites effectively. Switching a designer’s viewpoint from pixels to proportions is a good way to start. Switching the clients perspective from pixels to proportions is a tougher challenge – but it’s our challenge, and maybe designing in the browser is one way to do it.
Also related, front end style guides advocates designers developing their own code library for front end styles. As Anna argues, it makes designs easier to test, leads to a better workflow and provides a useful reference through a project. Creating one page with all your elements on it also allows you to test responsively before you start throwing elements into a page.
Jeremy Keith has done something similar (I attended his workshop in Belfast earlier this year and this was a really strong take away). And while we’re here, you can check out Starbuck’s style guide and marvel at how Twitter’s Boot Strap handles all of it’s components.
That’s enough of that.
- this is neat … a search engine for sign language … just type in the word you’re after and you get a video demonstration of that word in American Sign Language
- this guy is tweeting from space. That’s right SPACE.
- Mobile navigation issues … One of the challenges of mobile web design is what to do with the navigation.
Most websites have some sort of horizontal navigation across the top of the screen. When acting responsively, it has become common place to replace that with a ‘select’ form element – allowing the navigation to take up much less screen real estate, whilst users can still quickly select the page they’re after. Fine. It’s what I did with the Gerard O’Brien accountancy website. It works okay – but it’s just one of the patterns that is becoming commonplace. There are more here.
However, one that I’m really fond of is demonstrated by Roger Johansson – in which the navigation is still an unordered list (rather than being converted into a form element), but you only see the currently active item, and the rest of the menu is viewable via a little toggle link. Nicely done.
Whilst we’re back talking about mobile design issues – google has released it’s guidelines to web developers for building smartphone optimised websites. Nice to see that they advocate responsive design.
I think that’s it for now …
So, most of these links and articles are concerning Responsive Web Design – a particular focus of mine at the moment as my second large responsive project gets underway. The first was for a Fermanagh based hotel – the second for a new project from the people behind Donegal Cottage Holidays which is going to be based entirely around WordPress. Using WordPress for Responsive Design does not inherently cause any problems … you can create themes for it without the CMS part of WordPress getting in the way. The bigger challenge however is that this website will be opened up to users who – to a degree – will be able to add their own content and edit their images etc. So, keeping it responsive will be the challenge.
Anyway, this has been my recent reading:
5 tips for building a responsive wordpress site – as you can imagine, this is required reading for me right now!
Working out a responsive web design workflow is also hugely challenging. The old methods of wire framing, designing and coding aren’t necessarily appropriate. Mark Boulton here gives his thoughts as clearly as ever.
Some responsive navigation patterns nicely explained by Brad Frost. In short – what do you do with all that navigation when you’re working a smaller screen?
A massive list of Mobile Design Resources – does exactly what it says on the tin.
Luke Wroblewski wrote the excellent Mobile First book and he’s as prolific as ever over on his blog with a series of excellent conference notes: The future of CSS, Adaptive Web Content and Busting Mobile Myths – all talks given (not by Luke) at recent events that Luke has then typed up for those of us unable to, y’know, just fly to Seattle for these things.
Finally, recently on The Big Web Show – a great podcast covering ‘all things web’, Kristofer Layon joined Jeffrey Zeldman and talked about ‘Mobilizing Web Sites: Strategies for Mobile Web Implementation‘ – Kristofer’s recent book.
So, plenty of reading to do!