The Case for a Dedicated Mobile Website

Posted by on Oct 7, 2013 in Mobile, Wordpress | No Comments

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. 

 Momentum Events - Mobile Templates

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. 

Using good responsive design techniques – and a true ‘mobile first’ approach, you could deliver much of this: if it is simply a matter of loading more content as screen resolutions increase, and changing the styles as you go, then you can use perfectly solid (albeit javascript dependent) responsive techniques to achieve this.

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.

Why Facebook and TickTock struggle with mobile apps

Posted by on Jun 24, 2013 in Mobile, Social Media, Web Development | No Comments

I read this short piece the other day: Why the Facebook innovation machine doesn’t work on mobile devices. It’s an interesting read and I couldn’t help draw parallels with my brief (and aborted) foray into mobile app development. (And I refer here specifically to mobile apps – apps you download in an app store, and not mobile websites … confused on the difference? Check out my post on Mobile Design Considerations.)

The article suggests that Facebook’s problems on mobile are, in essence, due to the difficulties of the process for creating, releasing and updating their mobile app.  If you want to release an update to your app there is one major constrictions that just doesn’t apply on the web: you have to release to your entire user base in one hit.

fb-mobile-app

If Facebook want to test anything on their site – the size, colour, position, whatever of a button, a sentence of text, or whatever, they can release that update to a tiny fraction of their audience, get instant feedback from their analytics team, adjust, iterate, re-release to a larger (or smaller) section of their audience, and repeat the process. Any debates that arise or decisions that need to be made, can instantly be informed by a slew of data from their 1bn plus users.

However, with mobile apps, Apple and Google control the distribution – and the app gets distributed in one hit, to everyone. That means the only people who have tested the update are likely to be Facebook employees. Not ideal.

Recently, I developed a mobile app with a colleague of mine. It was a simple enough app – a note taking, storing, and organising app for physiotherapists (helping them to meet their continuing professional development requirements). It’s simple enough – if it had been developed as a website, it was maybe 20 hours work tops. But as an app … well, the process was so frustrating. You can’t write a couple of lines of code and refresh a browser to see how it works. You write a couple of lines and have to recompile the whole app – sending it to an emulator that could (and does) crash constantly. Errors can appear that weren’t there before in identical code, and you have no easy way of telling what piece of code has crashed your app. What you end up doing is writing a lot of code in one hit – because compiling is time consuming – and then spending inordinate lengths of time debugging, before recompiling.

Compared with developing for the web, developing apps is hard. Really hard. It’s one reason why I think that, eventually, mobile apps using HTML5 rather than native technologies will win the day (although that’s some way off yet). And it’s one reason why Facebook (and TickTock) continue to struggle with mobile apps.

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.  

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.

Posted by on Nov 7, 2012 in HTML5, Mobile, On the interwebs | No Comments

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.

IE10 released

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:

Learning iOS app development – some resources

Posted by on Jul 10, 2012 in iOS, Mobile | No Comments

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.

stanford

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:

phonegap

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:

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

claremont_old

New Design

claremont_new

And on the iPhone

claremont_phone

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:

vitesse

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.)

leaked-in

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.

 Redefined%20%7C%20Trent%20Walton

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

sign-language-search-engine

  • 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

Posted by on Apr 26, 2012 in Design, HTML5, Mobile | No Comments

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.

uni-cal-responsive

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.

dconstruct-rwd

I’ll be keeping an eye on the Media Queries gallery for sure.

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

An evolving work practice – HTML5, Modular CSS, using the LESS app

Posted by on Dec 15, 2011 in CSS, Mobile, work | No Comments

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.

html5-for-designers

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.

html5-reset-templates

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.

RWD-responsive-web-design-ethan-marcotte-book

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.)

skitched

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!

 

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 ...