I’m getting bored of people publicly yelling and complaining at people who have build something great that only works in a limited set of browsers.

“Uh noes, you can’t ignore [insert browser of your choice here, i.e. Opera]! You’re fighting the open web!”

There, I said it. A couple years ago, as a developer, I could see their argument. Open, interoperable, non-monopolistic and awesome and all. A couple months ago, I was angry. And now I’m just bored.

Imagine somebody grants you a budget of three months development time, and it’s up to you to make the right compromises. You can either create an ‘okay’ product that runs on 95% of today’s browsers. Or instead, you create something unbelievably great that runs on 70%. What would you pick? And no, you absolutely cannot have both. I spent too much time with outdated browsers to still believe there’s a way to achieve both.

I find it amazing that many people will pick the ‘okay’ product, just because the ‘open web ethics’ demand it. If you are creating a consumer point, there is absolutely no reason to go that route. None. Let me repeat that, as it is important. You should always – always focussing on creating a great product. Great in absolute terms, not relative to the browser. Achieving 15fps in a game on IE7 is not great. It’s great relative to what the browser can offer. In the case of a game, your baseline is 60fps.

You don’t want people to play your game at 15fps. “Their game is so great it only runs on latest browsers” almost definitely sound better than “Many people complain about the bad performance in their favorite browser.”. Hell, maybe your favorite reporter is using IE7. It unfortunately doesn’t stop here, as there is more harm to be done supporting outdated browsers. Progressive enhancement almost never works. I guarantee you that if IE7 is your baseline, you won’t be using all the cool features you get with, say, Firefox 7. And another project that focusses on the right compromises will always win.

So please, please, please! Focus on creating absolutely great products. Literally.

What is Progressive Enhancement?

First, let’s discuss what I’m actually talking about. Progressive enhancement is a programming concept that simply says you should start building your product or website with the “Lowest common multiple approach”, so it runs in browsers like Internet Explorer 6 or with JavaScript disabled, and then continue to enhance functionality, interaction and UI for more capable browsers, devices and users. When well executed, this means that your site is targeted and usable by a maximum audience.

..but isn’t this awesome?

Indeed it is! That’s what’s great about progressive enhancement. It makes sure your website runs on every device or browser if executed well, which is definitely something admirable. It also has a multitude of positive side effects – such as possible accessibility benefits and it is really well suited for a junior programmer, as it teaches the layers of a web app in a direct way. … so what am I complaining about?

PE limits creativity

My first thesis is actually very easy to explain and to follow. So you’re a student of a famous painter, and you’re learning how to draw basic forms. After the art class, the teacher decides to draw something in front of the class to show off his skills. Unfortunately, all canvasses are used by the class, so he has to pick yours and paint on top of it. I’m pretty sure he succeeded in making it awesome based on your painting, but what if he had a clear white canvas to start with?

I’m positive that most people will come to my conclusion that the second painting would have been truly his, unleashing all his creativity. The situation is, as you might imagine, extremely similar with progressive enhancement. Since you always improve upon the lowest layer of your implementation, you’re not inventing new user interfaces, new metaphors or interactions – you’re merely improving the old ones. Even more unfortunate is the fact that we accepted to live with this fact. It is pretty likely you wouldn’t even have noticed this if you didn’t read about it here.

So we want to start drawing on a clear white canvas. Wouldn’t Graceful Degradation fit the bill?

Graceful degradation

Graceful degradation is basically the opposite of PE. It says “start on a free canvas and build crazy shit, then make sure it runs in less charming situations”. While in theory definitely a great improvement to PE, it doesn’t always work out, since there are many complex UX patterns and ideas that cannot be reproduced easily in a lower metaphor. In general you could therefore say that it also simply requires a lot more time than PE. That being said, I still use GD to a great extent in many of my projects, and I’m pretty happy with most outcomes.

You are the problem!

Uh well…not personally. Let me explain: I fully endorse the concepts of Progressive Enhancement and Graceful Degradation. In fact, PE for instance is a vital concept for jQuery UI to follow and implement. The real problem comes with the usage. Web developers misuse PE and GD to a great extent. And it is very easy to follow the wrong path if every “Best practise” powerpoint slide tells you to always follow PE. Let me make that crystal clear: “Always follow” = guaranteed misuse of PE.

So what? I should just screw IE6?

Actually yes, you should screw IE6. …errr, let’s start over: First off, in many instances, you will never need an alternative. If you’re targetting iPhone Safari as platform for your web app for instance, or if you’re working on an intranet application to be used with only a single browser. However, there is a great alternative to PE & GD: Instead of adding layers on top of your current site or app and let it become a big fat hard to maintain blurb, how about developing a second client? I will argue that it doesn’t take longer than the GD approach, and quite important players have done so: Gmail, anyone?

The bottom line: Start thinking!

As mentioned, it is really not a problem of the concepts themselves, but of how they’re used. If you’re reading this, give it some serious thought and start thinking yourself. Think back in time and look at the projects you’ve done so far. Is there a chance to improve your workflow by not following every best practice advise blindly? I bet!

First of all, forget about the crap clear your mind about what you know and learned about productivity music or sounds. Things like “listen to nature’s tunes” and the likes. This might be a good, but too general advice. Also don’t think about music that helps you relax or focus. What you essentially are looking for is music that let’s you *perform* well.

So how to find what you need? Listening to a thousand songs while working and then trying to guess what worked best usually doesn’t work: Simply because your job is probably too complex and not repetitive enough to give you a clear idea of which 3 minute song actually worked best.

All hope is not lost though – the answer is simple. Find something that you deeply want to achieve or perform well on, but is simple and repetitive enough to actually feel and catch the results immediately. Tetris, anyone?

Games

Yes, I’m talking about videogames. The sort that is highly addictive and entertaining and lets you run after a certain achievement for hours. The most famous candidate here is Tetris – if you’re looking for something “fresher” on the iPhone, try Doodlejump! My personal choice features a jumping character with only one target: Jumping higher and higher.

With the aid of Doodlejump, my iPhone and my portable music library, I immediately see results when I’m listening to a song that works. Yes, it’s dead simple. Yes, grab your phone and try now! Enjoy!

Walt Disney was not only known as great entrepreneur, but also as an individual who could switch easily between many different roles . Quoted from Wikipedia, he was “film producer, director, screenwriter, voice actor, animator, entrepreneur, entertainer, international icon and philanthropist“, and that’s only his official roles. The Walt Disney method essentially strips it down to three, sometimes four roles: The dreamer, the realist, the spoiler and the neutral. It is a highly effective creative method inspired by Disney, and can handle almost any product creation process. Before I’m going to explain how it can be applied to the web development world, I’ll first explain the basics.

The Disney method explained

Essentially a role playing strategy, the Disney method is said to work best with four different roles (I usually skip the forth though..):

• Dreamer (visionary, delivering ideas)
• Realist (doer)
• Spoiler (critic)
• Neutral (consultant, reviewer)

Take four chairs and mark them with above roles. As single technique, it is recommended to start within the neutral position to analyze the problem. I, however, recommend to start as dreamer , since there’s in fact not always a problem you want to solve. When you’re sitting on the first chair, you start brainstorming until you have a beautiful complete vision. As soon as the dreamer in you is happy, you move on to the next chair, taking the role of the realist. You analyze the dreamer’s ideas and make sure they’re implementable, or strip them down accordingly. When you think it works out, you pass your product to the critic, who will then try to find anything possibly wrong with it. When the though review is done, take a deep breath as neutral consultant to review everything from a bird’s perspective, and explore if every chair role is happy. If they’re not, simply continue your circle: Pass the dreamer the finished implementation and critique, and let him explore different or additional directions. Do those steps, until everyone is considerably happy with the product.

The whole strategy can of course also be applied to groups of people, meaning you have a full discussion going on between the roles, and every couple minutes you move places. However, I highly suggest trying out the single variant, because it proved to be much more effective for me personally.

Applying it the web development

As already mentioned, the Disney method can be applied to almost any situation. Let’s apply our roles to the web development world and see how they would look like:

• Dreamer becomes Designer, Prototyper
• Realist becomes Engineer
• Spoilers become your users, investors

Note that I skipped the neutral role, because the new spoiler is essentially both, and it allows for faster iteration. Now that we have a fully working cycle for a web development situation, let’s narrow it down and focus on individual implementation aspecs:

Going into detail: Implementation roles

If it’s not working well enough on a high level like above, you can always narrow it down to more granular roles. As an example, I’m taking the engineer role, and splitting it up into three:

• Model
• View
• Controller

or how about this one:

• Rapid prototyper
• Frontend engineer
• Backend engineer
• Performance Guru

As you can see, there are endless possibilities.

Now why should I do it anyway?

The whole point about the Disney method is that it allows you to understand your co-workers, the flow of a product, and the most effective path to your end goal. It gives you the chance to have a look at each role’s unique perspective, how they see themselves and others around them, and when mastered, gives you a bird eye or global view that incredibly improves your leadership or individual role. If you do it a couple times, it’s very likely you start projecting your 4 chairs on your actual co-workers and naturally improve the workflow.

Switching between different roles is a unique and highly rewarding skill. I personally believe that this particular skill let Disney become the legend he is today. If Walt Disney was running a web business, he would simply add a couple more roles to his mind model and start to build up highly successful web products.

Now go ahead and grab some chairs!

Dedication

When you are motivated, you start working on something. But to actually finish the job, you need dedication. Unfortunately, dedication and motivation are a bit hard to describe individually, but let’s try with some metaphors. Imagine drinking a bottle of cold water after a crazily hot day. The motivation in this case is the bottle. The technique you use to get it into your body (hopefully through swallowing) is the first part of the dedication – you’re making sure the motivation is converted into something that gets the job done. Unfortunately, you need to drink again in a couple hours – to think about it, and get a new bottle of water in advance, is the second part. So in other words, the two fundamental pieces of dedication consist of converting your motivation into creative energy and maintaining the motivated state.

Focus & Distraction

Focus and distraction is often considered as good and evil, but there’s a little twist to it. In general of course, you need to focus on your current task to keep being dedicated, and the worst thing that can happen then is to loose that focus again. Especially for most us (the internet generation), distraction is a real problem. The Web 2.0 gave us thousands and thousands of new opportunities to get distracted. Don’t worry though – there’s an answer to every problem.

Here’s a example list of things that will likely make you forget about your task, and how to solve them effectively:

• Twitter
  Ok, this one is simple. First off, do not twitter in the middle of a task, unless it’s specifically related to solving the task. For instance, if you have a technical question that you can’t solve, it’s perfectly fine to ask for it through twitter. Secondly, try to get twitter off your PC, and onto another device, and only use it from there (i.e. your phone). It helps you to completely (re)move the focus.
• Social communities
  Again, think about if using this particular community helps solve your specific task. If it doesn’t (Facebook for instance likely is a good candidate for wasted time – unless of course you’re developing a FB app), then simply don’t use it. If the community can actually help you getting your work done, then that’s great!
• Family (if you’re working remotely)
  It is extremely important to have a seperate office with a door that you can close. Make sure the process is the same than driving to another city – and make sure your family knows about how important it is not to get you distracted. Have them understand you’re collaborating with collegues online and via Skype, and let them contact you only if it’s really urgent.
• Instant messanging
  Set up seperate groups or accounts for work and freetime. Set your status to ‘Working’, and let your coworkers know that this is just to tell people you’re ‘in the office’.  Do not answer to IM’s from other contacts – or tell them politely that you can’t chat during business hours.
• RSS Feeds
  This one is dangerous, since chances are that most of the information is somehow important and relevant to you and your job, but not in this exact moment. That’s why I suggest to make sure to only open your newsreader once a day – after all, you wouldn’t bring a printed newspaper to the office and peek at it every half hour, would you?
• Everything else in your head
  To clear your entire head from everything else, I still highly suggest the GTD (‘Getting things done’) method and sort everything you have in your head into seperate todo lists that you can access at anytime. This basically is the essence of GTD.

Positively distracted

As mentioned above, it is possible to use distration as a tool to keep motivation and dedication flowing, and I highly suggest to use at least one or two of the following examples to relax during work hours, or to get into a different thinking mode.

• Music
  Music can be very inspiring and motivating if used right. Make sure though not to listen to audio books and songs that are focussing solely on the text – since listening actively distracts you too much.
• Collegues
  Talk to your collegues every hour or two, even if you think they can’t solve your problem. Ask them what they’re working on. It’ll most likely move your brain waves into another direction, and you’ll get fresh new ideas. Also try pair programming of you’re a programmer!
• Walking around in the office
  This especially goes well with pinging collegues. Don’t just shout around in the room, but relax your muscles a bit by getting out of your chair and walking around a bit. If you think it looks too silly, go outside and grab something to drink.

Goal orientation

Of course, there are thousand more ways to keep you in the flow, but some of them I feel are especially helpful. First off, try to split up your current task in the smallest possible pieces to work them off easily and always have an immediate feeling of accomplishment. Second, try to think about the goal! If you’re paid hourly for your work and your objective is money, think about what you earned already in the next couple of hours, and how much you’ll earn in the next ones. If you work in a team, think about how much your current work will help other people finish their job, and how much they’ll like you for it. There are many individual goals if you think about it, and those two are very generic, so try to apply them.

See you soon!

It gets lost.

This blog post is a wonderful example. If I hadn’t realized the fact above, you’d never read about this – since it’s a short blog post, but too long for Twitter. The constraint that you’re setting on yourself is dangerous, and you can see it here on this blog. I love talking about what I do, and I talk to people everyday, but as a matter of fact, very few things end up here.

The key to remember is that what counts is always quality, not quantity. If you have something in your mind that you think provides real value, then please write about it. Yes, even if it’s just one character more than your tweet can hold.

See you soon with more short blog posts!

‘How to change the world‘ sounds a bit high level, but everyone with high ambitions in his personal and business life is likely to share a common vision of wanting to work on something that makes a significant impact. To start off, it could of course also be read as ‘How to change yourself to change the world‘. The first entry in this series, and the most important one of all is motivation. But let’s first explain the order of how things work.

The productivity cycle

Visualization of the productivity cycle

Being productive is something many people can’t grasp easily. There are however a couple of directions to follow, and I personally call it the productivity cycle. I’ll go into detail for each of these in subsequent blog posts.

1. Inspiration
2. Motivation (today’s topic)
3. Dedication
4. Communication
5. Recreation

Very quick explanation: Before you can even start to work on anything, you have to be inspired. When you are inspired, you have to become really motivated to start working on it, and then you need dedication to stay on focus and do the job. After a couple hours, you need a recreation phase to start over with the whole process, but before that, make sure you communicate today’s work with your boss, comrades, coworkers to maximize the impact (sometimes you can leave out inspiration and motivation on the next cycles for a couple days).

Why motivation?

People who truly internalize those fundamentals can solve more tasks in 4 hours than a ‘normal’ worker could finish in 12. Even better, the guru won’t be exhausted mentally. Obviously, it’s a long way, but if you get today’s topic right, chances are that the others will come to you automatically.

That being said, off all things, motivation is the trickiest to master. You know it yourself. Even if you really love your job, you’re only motivated randomly, and it comes and goes. And when you’re not motivated, everything seems to take longer. Wait – it doesn’t seem to take longer, it does take longer! It happens to me all the time: I have this great idea (->Inspiration), I start working on it, get distracted, and the motivation’s gone. At that point, I still enjoy the original idea, but somehow my killer energy is gone. Sounds familiar? Don’t worry, all hope is not lost my friend!

Getting motivated

1. Set a goal

   If you don’t know your goal, you’re drifting and chances are you’ll circle around with your efforts and thoughts. If you have a great inspiration and a following idea, set yourself a uber nice but realistic goal, best with an attached date. Deadlines generate pressure, but no deadlines make you idle – the first is always preferable.

2. Make sure the outcome justifies the effort

   Only very few people like to work on projects just for the sake of their own satisfaction, most likely you have a greater objective. In many cases it’s money, but it can also be reputation, fame, power or the greater good. Whatever works for you, but make sure thinking about the possible outcome makes you feel great – it’s a motivational key factor.

3. Enlightening your office enlightens your thoughts

   This one is a very practical advice. Most living beings, including humans, need light, preferably sunlight (with more ‘blue‘ in it) to stay awake and feel comfortable. Scientists have proven already the receptors that fire off when light reaches our eyes stop the production of the sleep inducing hormone melantonin. But even if you forget science, light is, like fire, one of the greatest phenomena for all cultures. It gives us security and warmth, and it often stands as a symbol for intelligence. So start using it!

4. Communicate

   I can’t stress this one enough, being the most useful resource of all. Talk to people that likely want to listen to your ideas. It could be your wife, your children, your collegues or you best friend. Meet all those people before you start a big project, and encourage them to participate in a discussion. You will receive positive and negative critism, doubt and more inspirations, but most often they’ll back you up and encourage you. Even better, it works for the inspirational part of the productivity cycle as well. Remember those times when you met a former collegue for dinner and got your brain spinning again? It’s no coincidence. Inspiration through communication will be discussed in detail when we cover the topic.

Keep being motivated

So you’re motivated now. Excellent! The next step is to keep being motivated, or how I call it in the productivity cycle, dedication. It’s the next topic I will cover, along with the first missing piece – how do you actually find out what you’d like to do (read inspiration). See you soon!

What’s it all about?

For real people to actually use your application in daily life, it’s not enough to bundle it with a nice UI and a bunch of cool features, it has to be really responsive as well. The reasoning is simple – people hate to wait. People hate to wait in
lines (except the British, hehe), they hate to wait for their salary, they hate to wait for the weekend to arrive and they
hate to wait for the next season of their beloved TV series. Ok, sometimes the anger can transform into excitement (and vica versa) – but raise your hopes too much, this seldom happens in the case of web apps. Yes, people hate to wait after the click.

Responsiveness is often described by how quickly an application reacts upon a user triggered action. Basically everything we do in the web is interaction- the website or application waits for an user action and then replies. There has been already a lot of research on today’s topic, concluding for instance that people already get the feeling they’re waiting if the result doesn’t come up in less than 0.5 seconds. But the answer to the problem is the tricky bit.

The obvious solution: Performance optimizations

Many of todays apps and websites are Ajax driven, to the extend that a user initiated action triggers a request to the server. This is why the most obvious solution coming to mind is to improve the time each request takes. Be careful though – this is also exactly why responsiveness is so often forgotten in the frontend planning. People tend to think of it as something non-visual, therefore they let the backend guys do the work.

Now after you speeded up the requests and your backend, you have to take the frontend really serious. The JavaScript powering your website is often the most visible bottleneck because it’s directly happening on the client, even before any backend request can happen. And it’s not only JavaScript – heavy usage of CSS Frameworks (especially resets) for instance can horribly slow down any application as well. Remember – if your frontend performs bad, the backend guys don’t even have a chance to make up for it. Of course I could go into detail how to actually optimize your code, but that’s content for another blog post.

Transparency and disguise

In the last couple years I noticed a general pattern when designing a responsive experience. There are essentially two ways to tackle it: The first is total transparency – the user should never be clueless, and if the application is in a loading state, tell it to your user so he doesn’t get annoyed too much. The second, and to me the one with almost unlimited potential is illusion.

Fixing the experience without fixing the implementation

Something only very few people I met realized is that an application can be improved even without fixing the implementation. There is really only one thing that matters to the user – how the application feels. Yes, let me repeat that: Your implementation doesn’t have to be responsive – it just has to feel that way.

Apple – masters of illusion

The best way to describe what I mean by making your application *feel* responsive is through a perfect example. It’s the best illusion of responsiveness I’ve seen so far. I’m talking about the iPhone.

The iPhone runs a very sophisticated operating system based on Mac OS X, with thousands of API’s for developers to use. Combined with the fact that the iPhone isn’t running particularly fast hardware (more than a standard cellphone, but way less than any netbook), simple performance optimizations could only get you so far here, and this is is where the magic comes in.

Almost every interaction on the iPhone uses an animation to transition from one state to another. You’ll see animations when you launch or quit applications, when you slide through screens and on many other instances, sometimes so tiny you don’t realize it. Since they’re very well integrated into the general flow of the interaction, they not only excite users but serve as visual cue helpers that let the user ‘grasp’ what’s happening. But the key is what happens during the animation: Any application you launch or close on the iPhone needs time to initialize and to de-initialize. You guessed it already: It’s all done when the user is distracted by a beautiful zoom effect. How cool is that?

As a summary: At the cost of slowing down the operating system in technical terms (every animation takes a fixed amount of time), Apple improved the whole user experience and made the iPhone feel extremely responsive .

Loading indicators

As a conclusion to the illusion technique, in 90% of all cases a loading indicator is evil. Why on earth would you want to highlight the slow parts of your application? That being said, a loading indicator is always better than a frozen state and a clueless user. As a general rule, only add a loading indicator to your application if all other improvements fail. For instance, there are situations where you absolutely can’t predict when the result will arrive. Imagine a multiplayer game with two players, and you’re waiting for the other player to select his character. In this case you have to notify the user that the game is waiting for a response.

See you next time!