Sometimes, a responsive web design is not the most appropriate way to develop a company’s mobile presence. There, I said it. Recently, all the talk is about responsive design – justifiably for the most part; it is a genuinely significant change for a lot of clients who now need to consider how and where their websites are viewed, beyond the desktop. And for web designers it’s probably the most significant change in development practices since we all decided that HTML and CSS were a better way to build sites than Flash. But it’s not always appropriate.
A recent case in point is the work I’ve been doing for Momentum Events. It’s a big WordPress site with a lot of custom plugins, a lot of content, a lot of assets (PDF downloads, etc.), a lot of traffic, and a good number of mobile users.
We took the decision to design & develop separate desktop and mobile sites. In this way, we would serve up code bases that were substantively different from each other (something made straightforward with WordPress and the addition of the excellent ‘Any Mobile Theme Switcher Pro‘ plugin) and provide tailored user experiences as a result.
But why? Why didn’t we do the same thing – but with a responsive design?
Well, okay, we could have. Mostly. But here’s the thing: pages are big, and mobiles are slow. The home page for Momentum has 22 images on it … most of them are ‘lazily loaded’ so they don’t exert a page weight immediately – i.e. they don’t impact download time of the page – but still, on a mobile device, that’s going to slow the site down considerably. (A common mistake when developing for mobile is assuming that everyone everywhere has a decent connection. Well, I’m in rural Ireland, my client is in Manhattan … I can tell you this: we have very different expectations of our mobile network speeds!)
Additionally, the home page connects to LinkedIn, Twitter, Facebook and Google Plus. That’s a lot of external connections that we don’t have control over. Again, these will be loaded in such a way as to not impact the download of the home page – but on a mobile device, they’ll potentially create a ‘stuttering’ experience whilst the connections are made.
A page size of a few Mb’s is not ideal on a desktop browser … but on a mobile browser it becomes downright irresponsible. As Brad Frost points out:
One of the biggest challenges of creating responsive web designs is the balancing act of delivering a full experience while still maintaining a snappy user experience across the board
Across the board, only 3% of small screen versions of websites are significantly lighter than their desktop equivalents. That’s not good.
But yes, we could have developed our site to be within that 3% (and given ourselves shiny apples and gold stars as reward). But still – we chose a dedicated site.
For us, it came down to context and relevance in the end. Our feeling was that – for business users looking to find out about business conferences – we wanted to present different information – information that was more relevant – in a mobile context. So, the home page of the site for the desktop version talks about ‘big picture’ things (mission statements, business partners, company brochure) as well as the events themselves … but the mobile version of the home page – that’s all about the events. Just a simple list of events that makes it super easy to get right into the guts of the content.
A dedicated event page of the desktop version – again, that has a richer experience for the user: speaker photos, connection information, twitter stream, LinkedIn Group information, and so on. The mobile version of the same page is much much lighter – and arguably more focussed.
However, if you want to serve up substantively different content to different devices then perhaps a dedicated mobile site is the way to go after all. You can achieve it quite readily, without a lot of the attendant headaches you may get when attempting the same effect responsively.
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.
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
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.
- 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.
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 …
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.
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!
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.
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′.
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.)
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.