All posts tagged web

7 Posts

Why Design Matters

I don’t know if you own an Apple iPhone or an iPad but you only have to pick them up and touch them to realise that they are designed with a genius that goes beyond the physical. They are intuitive and work with an understanding that blends the human experience with technology.

Steve Jobs is maybe “the” design genius of the information age and has made major impact on several industries with his technology designs and creations including;

  1. The personal computer industry with Apple in the 1980′s
  2. The movie animation industry with Pixar in 1986 when he bought the company for $5 million from George Lucas (all of its movies are among the top 50 grossing movies of all time and have generated over $6.3 billion in revenue)
  3. The music industry with the iPod and the Apple iTunes store
  4. The mobile phone industry with the Apple iPhone and Apps store
  5. The publishing industry with the iPad (the fastest selling technology device in history)

In 1996 Steve Jobs was interviewed by “Wired Magazine” and he said this about design.

“Design is a funny word. Some people think design means how it “looks”. But of course if you dig deeper , its really how it “works”. The design of the Mac wasn’t what it looked like, although that was part of it. To design something really well, you have to “get it”. You have to really “grok ” what it’s all about. It takes a passionate comittment to really thoroughly understand something, chew it , not just quickly swallow it. Most people don’t take the time to do that.”

The term “Grok” by the way is a real word and not a “Jobian” expression.

It means according to the Oxford English Dictionary “to understand intuitively or by empathy; to establish rapport with” and “to empathize or communicate sympathetically with).

Wikipedia says “To grok is to share the same reality or line of thinking with another physical or conceptual entity“.

Author Robert A. Heinlein coined the term in his best-selling 1961 book Stranger in a Strange Land. In Heinlein’s view, grokking is the intermingling of intelligence that necessarily affects both the observer and the observed.

I am immersed and enmeshed in the web industry both personally and professionally and have the pleasure and privilege to work with people and their companies with their online stores, web design and digital marketing projects.

The constant challenge is to get under their skin and understand intuitively and empathically what they are trying to achieve and how they want to communicate to their audience. The websites we design and the solution we build need to go beyond the skin deep look and feel and provide the user with an experience that solves their problems and makes life a little easier. In essence we are trying to change the world in our small way.

The genius in design is to ask enough questions and spend enough time so that we “get it” and blend the technology with the human so we can provide an experience that goes beyond the ordinary and into the realm of of intuition and maybe a little magic.

Do you get under your customers skin?

Original article by Jeff Bullas

Responsive vs. Adaptive

What’s the difference between adaptive and responsive web design?

In the world of web design, the only thing harder than keeping up with the ever-evolving standards in HTML, CSS, and other technologies, is keeping up with the vocabulary! Among the latest hot new terms in web design: Responsive Design and Adaptive Design.

What do Responsive and Adaptive web design have in common? Both responsive and adaptive web design are essentially about creating web designs that are optimized for the size of the screen or the type of device that is used to view them.

The basic concept is that instead of creating one web page designed for one target screen size, you create a web designed for multiple screen sizes, most commonly to work well on at least three different screen sizes — a small mobile screen, a tablet-sized screen, and a larger desktop computer monitor. Of course the new mini-tablets might also cause us some headaches now… but for now, lets assume it’s just the Fixed, Tablet and Mobile designs – which is how I’m directing my teams and my clients.

In recent years, most web designers have created page designs that are 960 pixels wide so that they fit comfortably on a computer monitor that is 1024 by 768. But today, you need to design for everything from a 320-pixel iPhone to giant HD TV screens, which are increasingly being used to surf the web thanks to Google and Apple TV devices.

Responsive designs respond to changes in the size of a browser window by fluidly ajusting the width to fit the space available. Thus, as you drag the side of a browser to make it larger or smaller, you’ll see the design change in realtime. Changes to a responsive design includes adjusting the size and positioning of elements to better fit the space available as you see in this example.

Adaptive designs are generally based on a defined set rules based on device capabilities, as well as screen size. As a result, the change to the design may be more dramatic, and there may be many variations. Using device targeting, you can adapt a web page to include multiple versions of images or to remove video from the smallest screens. In many case, you may not even be able to tell that a website is designed using an adaptive approach if you only view it in a desktop web browser. The most advanced adaptive web designs, such as the one American Airlines created at, use a sophisticated auto-detection script to identify each device that visits the site and then deliver the best version of the site, adapted to display based on the size and capabilities of each device.

If you have developed a fully adaptive mobile web design strategy, you may deliver a page that includes multimedia (video, audio, aniation) to your desktop users, and then adapt that entire page design to more limited mobile devices by not only changing the design, but also removinge the video and large images before you ever serve the page to low-end cell phones. Similarly, you might make the phone number and directions more prominent in the version designed for mobile phones, while featuring a video introduction, more prominently for desktop users.

Adaptive web sites may look dramatically different from one device to another, adapting not only to the screen size, but to the capabilities of the device.

A little history and credit for Adaptive and Responsive Design

The term Responsive Design is generally credited to Ethan Marcote.

The term Adaptive Design has been around a lot longer, but some give credit for this term to Aaron Gustafson who wrote a book called Adaptive Design.

Another terms get tossed around when we talk about mobile design “Mobile First.”

Luke Wroblewski deserves credit for the term Mobile First, which means designing the mobile version of a site before you design the larger, desktop version (historically most sites were designed the other way around).

Article source: Digital Family

What is experience?

Experience is … a kind of huge spider-web of the finest silken threads suspended in the chamber of consciousness, and catching every air-borne particle in its tissue — Henry James

The apprehension of an object, thought, or emotion through the senses or mind: a child’s first experience of snow.

Active participation in events or activities, leading to the accumulation of knowledge or skill: a lesson taught by experience; a carpenter with experience in roof repair.

The knowledge or skill so derived.

An event or a series of events participated in or lived through. The totality of such events in the past of an individual or group.

To participate in personally; undergo: experience a great adventure; experienced loneliness.

To most men, experience is like the stern light of a ship, which illumines only the track it has passed — Samuel Taylor Coleridge

a particular incident, feeling, etc., that a person has undergone an experience to remember
accumulated knowledge, esp of practical matters a man of experience

Experience is like medicine; some persons require larger doses of it than others, and do not like to take it pure, but a little disguised and better adapted to taste — Lord Acton

the totality of characteristics, both past and present, that make up the particular quality of a person, place, or people
the impact made on an individual by the culture of a people, nation, etc. the American experience

Experience seems to be like the shining of a bright lantern. It suddenly makes clear in the mind what was already there, perhaps, but dim — Walter De La Mare

the content of a perception regarded as independent of whether the apparent object actually exists Compare sense datum
the faculty by which a person acquires knowledge of contingent facts about the world, as contrasted with reason
the totality of a person’s perceptions, feelings, and memories

to participate in or undergo
to be emotionally or aesthetically moved by; feel to experience beauty

A new element in her experience; like a chapter in a book — Henry Van Dyke

Viral Loop – Pass the bucks

I’ve mentioned Viral Loops before in a couple of posts. Since I started talking about it a lot of people have been asking me to ‘do it for them’ like it’s some sort of silver bullet you can just load into any digital gun & fire at a target which makes me chuckle every time. In reality my theory is that sites and content that go viral are more a product of the ‘when’ and ‘where’ rather than the ‘what’. It’s about being in the right place at the right time – call it ‘fluke’ if you want. Most videos that go viral on YouTube were never designed to do so & the ones that were engineered by an agency and go ‘viral’ have spent money with a company like Rubber Republic to get people to view them and I don’t classify those as viral, I classify that as paid-for-media (old school advertising to you & me!). Most websites that go viral have a built in loop for sure, but there is also a lot of luck & right-time-right-place about them.

There are obviously some conditions you can promote within your agency or organisation or start-up that MIGHT have the desired effect… but don’t put all your eggs in these baskets because chances are if the time that you launch isn’t ripe for you product or content it won’t make any difference how potent your viral idea is or how rigorous your viral loop mechanics are:

  • Viral content has to be web based – It just belongs in the frictionless world of the internet. Too many people are asking me how they can create an offline viral idea… sure you can seed stuff offline to raise awareness (more paid-for-media / advertising!) but don’t bother trying to create an offline viral loop. It’s just silly. Use the internet – it’s what it’s there for!
  • It’s GOT to be FREE – Users need to consume your product or content at no charge; after aggregating a mass audience you may be able to overlay various revenue generators… but nothing that you had to initially pay for ever went viral. Fact.
  • Think about organizational technology – The kind of sites that don’t create content, their users do. They simply organise it, but facilitating can lead to a mass audience – just ask Google!
  • It’s almost always about the network effect – The more people who join, the more people there are to have an incentive to join… Every time I talk to clients or colleagues about viral loops I keep on hammering home the point that it’s NOT about the person you recruit to your website, it’s about the people that person knows.
  • Your site HAS to have built in virility – Users will spread a product purely out of their own self-interest and, in the process, offer a powerful word-of-mouth endorsement to each subsequent users… but without the thought about how that invisible virility works right up front you’ll probably lose the opportunity. Apple have recently done it to perfection with PING. I happen to think it’s growing into something of an interesting product is that PING thing (and with the looming downfall of Spotify it’s set to take the main social music crown) because for months now I’ve been sending out Tweets from Itunes and I didn’t even realise I was doing it… how crafty is that… It’s damn annoying but quite quite brilliant. I was telling my 600 odd followers on Twitter what I was buying on iTunes and I had no idea.
  • Remember that a point of non-displacement (or a tipping point to quote Gladwell) is that moment when it’s nearly impossible for a competitor to take a company down. Here’s the harsh facts of life amigos… if you’ve got this big bold viral idea (be it content or a new service) and someone is already out there and it’s got a million subscribers or it’s had a bajillion hits… then don’t bother wasting your time doing it yourself. I’m serious too! The point of non-displacement is a serious fact and reality. You cannot displace something that’s already ubiquitous in peoples lives even with an idea that is 100 times better.

There’s not much more to say really except give up on the idea of ‘planning a big viral event’. It just doesn’t work like that. You can’t BUY virility (well you can, but it’s not viral at all, it’s advertising – a rose by any other name blah blah) and you can’t spoof it. It won’t JUST HAPPEN and if it does it’ll probably happen by accident. So stop trying, sit back, do creative things & play by the rules… you never know, it might happen by accident and all that glory will be yours!

The Ten Commandments Of User Experience

Nice presentation from Nick Finck, Director of UX at Blue Flavor, about the 10 major principals of User Experience. Check out Nicks blog at

  1. The user is always right
  2. Understand the user
  3. Avoid solutioneering
  4. Form follows function
  5. Content is king
  6. Innovate, do not imitate
  7. Access is for everyone
  8. Plan before you design
  9. Understand the goal
  10. Learn from failure

15 Principles of successful web apps

Please note the last 5 principals have been cribbed from ‘Shortboredsurfer and great principals they are too. It’s not my intention to claim them as my own, just compile them with the others I collected to provide a list I think is the most useful.

The following functional principals, along with the measurements of Usefulness, Findability, Accessibility, Desirability, Usability and Credibility are my little list of ‘must-haves’ when designing stuff. I’ll likely continue to add stuff to the list when I find it. So keep checking back.

1. Speed

First and foremost, we believe that speed is more than a feature. Speed is the most important feature. If your application is slow, people won’t use it. I see this more with mainstream users than I do with power users.

2. Instant Utility

What this means is the service is instantly useful to you. If you build a service and the user has to spend an our configuring the service, setting it up, importing contacts, doing a lot of data entry, I don’t think people are going to – most people aren’t going to put up with that. The service has to be useful right from the start.

3. Software is Media

This is one that I got a lot of questions on. My view is that software is media today. Particularly consumer software, when people use it, they approach your software in the same way they would approach media. When I say media, I’m talking about a magazine, or a newspaper or a TV show. Software and web applications, Apps and gadgets need to have an attitude, and a style and uniqueness.

4. Less is More

Less is more, and I really believe this, particularly early on when you launch something. Over time, you can grow the utility of your service, and Facebook today probably offers 20 or 30 different features of significance in their service. But, when they launched, it was really quite simplistic. I think that’s true of most great services.

5. Make it Programmable

Talking to a group of web app developers, I think this probably goes without saying, but I think it’s important to make your application programmable, and make it possible that others can build on top of or connect to or add value to, in some way, your web application. That means API’s, and in my opinion read/write API’s.

6. Make it Personal

Personal means many things to many people, but essentially, it’s a lot like the prior slide. You want third-party developers to infuse your application with their energy. You also want to make your application infused with your users’ energy. The more of their data and their personality and energy that they can contribute to your application, the more ownership that they feel of it, and the more likely they are to advocate it and become, in effect, your marketing force. It’s very important to make your application personal for everybody. Clearly, user-generated content lets people start to feel ownership of your web application better.

7. Discoverabilty

When you launch a web app, it’s a needle in a haystack. There are hundreds of thousands, if not millions of web apps out there on the World Wide Web, and how is anybody ever going to find yours? At its base level, for me, this means search engine optimization. You have to understand search engine optimization and you have to understand the rules; you’ve got to know how to do it. You have to build your application from the ground up to be discovered by Google, and optimized for Google.

8. Clean

Clean, to me, means that the application cannot be busy on the page. You need to be able to look at it and not be bothered with lots of stuff. It’s white space, or dark space; it doesn’t really matter whether it’s white or dark, but lots of space. I think big fonts, not too much functionality presented on any one page. Make it very inviting, and make it so the people know, right away, what they need to do.

9. Playful

Last but not least, is playful. We have 6 words that we live by at Union Square Ventures. Only one of them actually made it into this deck. The 6 words are: mobile, social, global, playful, intelligent, and I’m forgetting what the last one is so I’m going to fail today, but in any case, that’s kind of what we think about thematically in terms of web apps. Only one of them made it onto this slide deck, and that’s “playful”.

10. Viral

Viral conjures up visions of Old Spice Man, but it’s more than that – It’s the power of pass-it-on… being able to share things with your peers, friends and family and let them join you in the experience and then tell their peers, friends and family to expand their experience too. It’s not about chuckling at a video on YouTube and emailing a link or Tweeting a response, it’s purer than that – Viral is about joining in and taking other people along for a ride. Here are the golden rules of viral:

  • Web-based – Viral loops are far better suited to the frictionless world of the internet
  • Free – Users consume the product at no charge; after aggregating a mass audience, you may be able to overlay various revenue generators
  • Organizational technology – These sites don’t create content, their users do. They simple organize it, but facilitating can lead to a mass audience – Just ask Google.
  • Built in virality – Users spread the product purely out of their own self-interest and, in the process, offer a powerful word-of-mouth endorsement to each subsequent user.
  • Network effects – The more people who join, the more people there are who have an incentive to join
  • A point of non-displacement – A tipping point, after which it’s nearly impossible to take a company down.

11. Match Experience & Expectations

When using a product or service for the first time there is likely to be an element of learning needed to get to grips with it. This learning curve can often be an uncomfortable experience especially if the proposition doesn’t feel familiar. Match your audience’s prior experiences and expectations is achieved by using common conventions or UI patterns.

12. Cognitive load

Cognition is the scientific term for the “process of thought”. When designing interactions we need to minimise the amount of “thinking work” required to complete a particular task. Another way of putting it is that a good assistant uses their skills to help the master focus on their skills.

13. Functional Layering

The Pareto principle (also known as the 80-20 rule), in the context of interaction design, is the rule that 20% of the functionality is used 80% of the time. Therefore we should make the most common or important functions easiest to find. We can do this by hiding or reducing the prominence of infrequently used or advanced functions.

14. Mousing

In my daily interactions ‘mousing’ is becoming less of an issue as I begin to rely more on touch screen interfaces such as my iPhone and iPad. However, in the classic desktop environment ‘mousing’ relates to the ease in which you are able to move between controls, which is described best through Fitts’ law.

Fitts’ law is a model of human movement in human-computer interaction (HCI) and ergonomics which predicts that the time required to click an object is proportional to the distance and inversely proportional to the object size.
With key functions or sequential mouse-operated controls we need to maximise the size of the controls and minimise the distance between them. This not only improves efficiency but in certain instances can reduce the risk of error.

15. Hierarchy of Control

The hierarchy of influence between elements should be clearly apparent. Generally, controls which affect an object, should be grouped with the object, such as zoom controls on a map.

Controls which influence a group of objects should be associated with the entire group, forming a hierarchy.


There’s an interesting view of the future of digital media consumption I’ve been hearing bits and pieces about codenamed “EPIC”.

The ‘Evolving Personalized Information Construct’.

The basic vision is that at some point there needs to be a new type of media browser or a future evolution of something like Firefox which becomes the system by which our sprawling, chaotic mediascape is filtered, ordered and delivered to us in a totally new, digestible way. It’s not even beyond the realms of possibility that good old reliable uncle Google is already working on it.

EPIC would produce a custom content package for each user, using his or her choices, consumption habits, interests, demographics, social network etc – to shape a personalised view of the web. Essentially hide anything out there that isn’t relevant. Give every user a blank canvas and let them dictate their own Internet. It’s not an impossible dream, I mean Amazon already do it on a microlevel, just take the theory and make it about everything. The semantic web is an emerging dream & the technology is there, it’s more a question of when, what & who.

I’ve had a keen interest in the emerging area of ‘APML’ (Attention Profiling Markup Language) for a while now and although it’s not right, it does show intent. APML is an XML-based format for capturing a person’s interests and dislikes allowing people to share their own personal attention profile in much the same way that OPML allows the exchange of reading lists between news readers. The idea behind APML is to compress all forms of attention data into a portable file format containing a description of the user’s rated interests. Compatible websites can use this portable file to tailor it’s own content to better suit the visitors interests. Makes a lot of sense, it just won’t ever become widely adopted because too much effort is involved to make it a ubiquitous service with end-users and content providers.

EPIC on the other hand sets out a vision that is entirely ubiquitous because it’s the vehicle for browsing that learns and reacts and not some portable user-file.

I love the label EPIC too! It’s bold.

Choose post category