The Cheese Hub – site launch
Cheese and websites … two of my favourite things, and brought together so wonderfully with this deceptively simple little ecommerce project: The Cheese Hub.
They’re business based in Leitrim that have some lovely looking hampers and a really interesting business in cheese maturation for local producers.
Shelves and shelves of maturing cheese line their walls – a great way to support local businesses who might be wanting to diversify their farm-based income. Those producers can now outsource the labour intensive and space demanding ripening, maturing, cutting and packaging functions of the operation. Good stuff. (I’m hoping I’m saying all the right things here and that maybe a little cheese might come my way this Christmas …)
Check out the site – both on your computer, and your hand held device of choice.
Internet Explorer 10 nearly released. The web breathes slightly easier.
The word on the browser street is that IE10 is going to be a doozy. In terms of it’s support for HTML5 and CSS3 (the stuff that makes modern websites), it promises to finally bring the IE family up to a level with Chrome, Firefox, and Safari. Allegedly. IE9 was a good step in the right direction for Microsoft. IE10 should be a huge leap.
But it’s not here yet. October 26th saw the release of Windows 8, the new Microsoft Operating System that – confusingly – comes in two versions: one for tablets (specifically, Microsoft’s own new tablet – The Surface) and one for the desktop. IE10 serves them both, but the release of the browser itself has been delayed.
(If you’re into this sort of thing, here’s a 14 page review of Windows 8).
What does IE10 mean for consumers?
Well, it should mean faster browsing, more secure browsing – and a more robust mobile experience. Despite some quirks with something Microsoft call ‘Snap Mode’, IE10 should provide a more reliable interpretation of media queries (one of the building blocks for responsive web design).
What it might also mean is that people stop using IE8. IE9 is already 19 months old. IE8 was released in March 2009. Three and a half years ago. Come on people, time to drop it. IE8 is the last IE browser that really sucked, and with the launch of IE10 I expect a bunch of big web services to announce they’re no longer supporting IE8. (Google has already done so, and the jQuery team will likely follow).
Still, all that said, IE10 will not be available to the majority of Windows users for some time yet. Windows 7 holds approximately 53% of the OS market. XP a little over 25%. Dropping IE8 altogether is probably premature – unless you’re google and can just do whatever you please – but it’s on the way. And then we can all breathe a little easier.
Useful Links, if you’re into the techy / web design stuff:
- IE10 Snap Mode and Responsive Design
- Windows 8 and Microsoft Surface: IE10 meets modern mobile HTML5
Learning iOS app development – some resources
Earlier this year, my physiotherapist wife was selected for an audit by the professional body that regulates Health Professions in the UK. The process is quite daunting. She is required to undertake and document regular training and educational development. Documenting this can become quite a burden – she needs to list every ‘learning outcome’, demonstrate that the outcome has then been implemented in her work, document articles she has read – how these then apply to her daily work, etc. etc. It’s quite a large undertaking.
Rather than do all of that at the time of being audited (the process of retrospectively going over all your training and articles read, and how these have applied specifically to your work practices is not easy …) wouldn’t it be great if there were a smartphone app that could be used to document it all for you and export it in an HPC friendly way? Of course it would.
So, I’m undertaking the rather long process of learning how to write smartphone apps – and I’ve collected a few resources along the way that might help someone else:
- The best, free, resource I’ve found so far (although it’s iPhone specific) is from Stanford University. It’s their lecture series in iPhone Application development … all the lectures and associated materials are available online: Stanford University iPhone Development Course. How cool is that? You can download everything on iTunes.
- Then, in the ‘very cheap and useful’ category comes Tinkerlearn who have some very cheap (you can buy the whole course for $14.99) courses that cover the basics of programming and implementing iPhone apps. Good stuff.
Of course, the approach you take to app development depends on your starting point … if, like me, you’re coming at it from an HTML5 / CSS / Javascript standpoint then working with a ‘wrapper app’ like PhoneGap or Titanium Appcelerator is probably a good bet – so resources for these have also been helpful:
- the mobile tuts plus Phone Gap series is probably the best tutorial I’ve read – follow it to build your own PhoneGap app
- although the PhoneGap docs themselves are also pretty user friendly
- for Titanium Appcelerator, there’s a dedicated site for learning Titanium, it seems okay, but the doc site itself was more helpful
Realistically though, Sencha Touch is probably the most friendly way for a web designer to work on iOS / Android apps … it is certainly packaged that way and I’ve found some really useful information on it:
- this series of tutorials from the Miami Coder was certainly the stand out learning resource for me
- although this tutorial on setting up my mac for Sencha Touch development was a pre-requisite!
- and these twovideos on the MVC approach to Sencha Touch covered everything I need to know (hopefully) about the general approach to working with Sencha Touch
I’m at the point right now where I haven’t fully determined how I’m going to do this. The geek in me wants to learn Objective-C and code proper iPhone apps. The pragmatist in me wants to just go with Sencha Touch as an all in one solution that leverages my existing skill set. The ‘hoping to please everyone’ part of me thinks that Phone Gap or Titanium will allow me to have a foot in both camps. The pragmatist will probably win out and I hope to write more soon about how I’m getting on with my first app.
New work and upcoming projects
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:
Old Design
New Design
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!
Around and about – useful links on responsive design, design process, and other bits
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 …
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.
The Westville Hotel – a responsive web design
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.
An evolving work practice – HTML5, Modular CSS, using the LESS app
I’ve been thinking a lot lately about how I build websites – the process and the code base I use for each projects – both of which have recently undergone the sort of evolutionary leap more commonly found in X-men movies.
It started with a need to familiarise myself with HTML5 at the beginning of the year (yes, this is a 12 month evolution!) – brought on by the usual need / desire to stay current and focused. From Jeremy Keith’s excellent book ‘HTML5 For Web Designers‘ (also available for free here) to the wonderful online resource ‘Dive into HTML5‘ I kind of felt comfortable enough to begin using it as my default doctype for new projects – and converted some of the more straightforward client sites.
So, ticked that box. For previous doctypes, I’d built up a collection of Coda snippets which helped me start new websites – it was fine, a bit of Eric Meyer reset here, a little bit of media queries there … no bother. However, along came HTML5 Boilerplate which promised to be a bit of a game changer … a complete ‘rock solid default template for HTML5′.
But however wonderful it looks, it was just too much ‘stuff’ for me … download a copy and you have everything – and I mean *everything* – you could ever want to build an HTML5 website. But, driver beware. If you don’t understand everything, don’t use everything. If you don’t fully understand what makes up the component parts of a system like this, don’t use it – you’re just kidding yourself. Like using jQuery without understanding Javascript. You don’t do that, right? Right.
It was too much – but then, hah! – I found HTML5 Reset. That’s more like it – “A simple set of templates for any project”. This was basically an extension of the snippets I was already using … stylesheets with built in media queries, a directory structure that kept things nice and simple, some CSS resetting, and a neat inclusion of jQuery libraries, Modernizr.js and other little tweaks to keep your project nice and consistent across browsers. Fab.
So – there I was, HTML5 ready. Ah – then, Mr. Marcotte stepped up with another game changer – his gem of a book on Responsive Web Design arrived and lo: more new process goodness to incorporate. But it’s all good – this is why we’re here: to learn cool new things to do, great new ways to do things. And so forth. But yes – a process that hadn’t changed much in about 3 years was getting a radical overhaul.
Turned out then, that the final piece in the puzzle was using the LESS app for my CSS development.
Less is a CSS pre-processor … but what that really means is that it makes developing in CSS that much easier. By extending CSS to include variables, Mix-ins, nested rules, etc. it allows CSS to behave much more like a programming language than a mark up language. You can specify variables for colour, border-radius, background gradients … so that just by including the variables in your .less file, they get automatically expanded and generated in the CSS file. It’s cool – and it saves so much time. (I think of it as being like jQuery though … learn the CSS first, and then start using this tool. Again, you need to know why the tool makes sense.)
I’ve been using Less.App in conjunction with the Semantic Grid System which allows me to set up flexible, responsive layouts in double-quick time. It’s all a god send.
So, there you have it … a brief summary of an evolving work practice. As I get more into projects using these tools I’m sure it will evolve (I’m looking at you, Code Kit) but I doubt I’ll see such massive shifts again in the next couple of years.
Phew!
Mobile web design considerations
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.
Recent reading and useful links from around and about
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!