Design

Aug 17, 2010

Adobe fonts come to Typekit

Phil Powell Design, Web 0 Comment

Bryan Mason announces a partnership with Adobe which brings a set of popular Adobe fonts to Typekit:

Adobe and Typekit are teaming up to bring some of the world’s most popular, recognizable, and respected fonts to the web. Starting today, you’ll be able to use classics like Adobe Garamond, News Gothic, Myriad, and Minion plus many more on your website — all of them newly optimized and hinted for the screen.

Although there are only twenty-six fonts being added to the collection, they include some of the most popular and elegant fonts in use today. The fact that Adobe have taken the effort to ensure they are properly hinted for screen use is another bonus:

We’ve been using these fonts internally here at Typekit for a few weeks and the quality is simply amazing. These are the original cuts of the celebrated typefaces you’ve been waiting for, not reproductions or knockoffs of their designs. That means you can use them with the assurance that your creative work is being presented with all the accuracy and technical detail the print world has known for decades.

I’ve been watching the evolution of Typekit for a while now, but haven’t used it in any production work yet. This may just be the tipping point where many people take a second, serious look at Typekit as a viable tool for bringing elegant typography to their web designs – $49 per year is a pretty good deal, particularly when you compare the cost of the average font license.

Apr 15, 2010

Apple’s iPad: easy reading for the blind

Phil Powell Accessibility, Design 1 Comment

Here’s a really interesting piece on Forbes about the iPad being hailed as a great e-reader for the blind.

Ask any PC-loving computer nerd why Apple products have become the de facto choice of the masses, and you’ll likely hear something like, “People buy Apple products because they’re pretty.” That may be true for many, but one group of consumers who care little for Apple’s prodigious aesthetics are the blind.

They care more about how Apple products actually work. And while the iPad may be Apple’s most controversial launch in recent memory, the blind community is unanimous in its support.

This resonates with what I wrote recently in a piece about adaptive accessibility. Apple really do take accessible, functional design seriously – not just as an afterthought, or a secondary consideration. Accessible functionality is built right in to the very core of their design of software and software interaction. The very fact that Apple invested time and energy in making Voiceover a core element of OS X at an early stage, has allowed the technology to improve and proliferate, so that it can be seamlessly integrated into cutting-edge devices like the iPhone and, now, the iPad.

I would even go so far as to say that this kind of attention to accessibility for all is what makes Apple’s mobile products so successful as market-leaders: the benefits of accessible design are experienced and appreciated by all; accessible design enhances everyone’s experience.

First, consider what an e-reader represents to the blind community. The concept of an affordable, portable device that allows the visually impaired to consume media easily and without special consideration is an exciting proposition, but one never fully realized.

The iPhone and the iPad are both adaptive devices. Most people will never use the accessible features they provide; probably never even know that they exist. But the ability for users to adapt their use of the device to meet their own specific needs is what is so empowering. These aren’t specialist, assistive devices: they are desirable, cutting-edge consumer products. They make disabled people feel included; perhaps even makes them no longer disabled. This is a really fantastic thing.

Computer nerds, tech columnists and the general public may not know where the iPad fits into the existing media consumption landscape–but the blind and visually impaired see it as the only e-reader worth owning. Call it further proof that Apple is more than just a pretty face.

And I don’t think it’s just blind users who are going to benefit from these kinds of advances in consumer technology – touch interfaces might be a huge win for people who have been constrained by having to use a mouse and keyboard. Gestures can be a much quicker and more intuitive way to navigate within a digital space – why do you think the scroll-wheel became so popular?

Apr 6, 2010

Adapting to accessibility

Phil Powell Accessibility, Design, Web 3 Comments

This is the text of a piece I wrote, which originally appeared on the Boagworld podcast, episode 205, and as a Boagworld Bitesize article in March 2010. It’s a follow-up to a piece I wrote on this blog in October 2009.

Let me get this out of the way at the start: I’m a disabled web user, registered as severely sight impaired. I’m also a web designer and developer – have been for over 10 years. I’m not just a tinkerer: I’ve worked for the likes of Audi, Levi’s, Adidas and even won a few awards for my work with U2.

In the early days, like many of us, I didn’t take issues of accessibility as seriously as I ought to have done (I committed my fair share of usability sins and implemented some really bad design decisions). But, I saw the error of my ways, and nowadays I’m a loud advocate for good standards and better accessibility. And, as both a disabled web user and a web practitioner, I think I have some useful insights to offer on how we might make the web a more accessible place, not just for those who are disabled, but for everybody.

We’ve come a long way

There have been fantastic advances in improving access to the web over the past ten years or so. The wider adoption of web standards by both browser vendors and web practitioners has bought huge benefits to all types of disabled users. These advances have helped to inform trends in web design and development in a myriad of positive ways.

Personally, I’m finding that my web experience is steadily improving thanks to these adoptions, which is a fantastic thing. There is still some way for us to go though. I still occasionally stumble across high-traffic sites which are terribly inaccessible: code soup which makes a site unintelligible to screen readers; design treatments which bewilder anybody with learning difficulties; tiny hit areas which make for horrible target practice amongst those with motor disabilities. These aren’t old, creaking relics of a by-gone cyber-era either: they are new, high-profile commissions.

Sure, not everybody is signed up to web standards, nor is every web designer or developer experienced enough to appreciate the importance of accessibility. But from my experience, it seems that public sector and cultural organisations are the ones who are failing the most. This always baffles me a little, as you’d expect publicly-focused bodies to have a commitment (and in many cases be required) to ensure accessibility to all. Ignoring disabled members of society in the physical world is wholly unacceptable, so why do we still tolerate it in our virtual world?

Well, part of the reason, I think, is due to a slightly skewed way we think about disability. It’s often quite easy to fall into the trap of thinking of someone with a disability as part of a generalised group: someone who is blind, who is deaf, who is a wheelchair user. The fact is that not every disability is the same, and the acuteness and intricacies of a disability can affect people in so many varying ways. This misconception makes it a complex and confusing subject to understand, especially for people with deadlines.

But I think there’s something else we need to address.

There’s a bigger problem

Our industry isn’t innovating enough. We’re simply not being intelligent enough with our design of the web.

Now, that reads as quite a bold assertion, so I’ll try to explain where I’m coming from.

I’m a firm believer that good design should be both beautiful in it’s aesthetics and in the way it functions. But it seems that a lot of the time, when it comes to designing for the web, aesthetics and functionality are treated as two very separate disciplines. I’m generalising, but I’ll bet that the approach to the design of most web projects is still either: a great visual style which needs to function well; or a functional architecture which needs to look good. One generally informs the other.

I’d like to see the wider adoption of a new, emerging type of web design, where style and function are embraced as a single, integrated discipline. Gone are the days where a designer’s job stops when they hand over a Photoshop mockup to a site builder. And similarly, gone are the days when site builders try to design in the browser and then a visual style is conjured up around markup. Both of these approaches have their benefits, but equally, both have their failings. Can we not be a bit more inventive?

Accessibility can be beautiful

I think this is where accessibility could step in. I think accessibility can be a killer tool for some amazing design. But it needs us to look at it in a new way. As much as any of us claim to take it seriously, how often do we think about how it can be done _better_? The tendency is to just tick the boxes and then move on to another pressing task.

Rather than being a secondary consideration in the design and build of our web experiences, we can better use the disciplines of accessibility and usability as tools to inform and inspire beautiful aesthetics and functional design.

Good accessibility doesn’t just have to be something which _assists_ people with a disability. We need to flip that idea on it’s head. Accessibility should be embraced as a way to allow us _all_ to adapt our online experience to fit the way we use the web – disability or no disability. Better access to the places we visit on the web doesn’t just benefit people who are disabled, it benefits everyone.

We’re already heading there

Apple are a rare example of a company who take good design seriously and who are already doing amazing things in this field, albeit with installed software.

I have very low vision due to a rare form of albinism. My distance sight is really bad; I wouldn’t be able to recognise your face across a room. But my near vision is exceptionally good; I excel when working with pixels and detail. I predominantly do most of my work on OS X because it has so many low-level accessibility aids built right in: I can zoom the screen with keyboard shortcuts; well-adopted UI guidelines make it easy for me to understand a new app; standard controls and focus help me to navigate without a mouse; finding files, running applications and searching can all be done swiftly and easily using the keyboard.

I adopted an iPhone for the very same reasons: not because I’m an Apple fanboy, but because it brings with it the same accessible features as my operating system, features I’ve struggled to find in any other mobile device.

For me, these are amazing productivity tools. I tend to work faster and with more efficiency than my well-sighted peers, and that’s purely down to my use of accessible tools. I’ve _adapted_ my working world to not only achieve an equal footing, but my adaption allows me to be _more_ productive than many able people.

But these enhancements haven’t been developed for the sole use of people with a disability. They are elements of good, well-considered design, beautiful in both aesthetics and function, which are available to all. Try it right now: if you’re using a fairly modern version of Safari, hit CMD-F, then start typing a word, and you’ll see a perfect example of what I mean. If you’re using another browser, chances are you’re missing out on the advantages of a piece of simple, but clever, assistive design.

A subtle, but important distinction

Assistive accessibility means providing add-on tools which help people. My local Co-op print braille labels on their wine bottles: a nice bit of assistive design which helps us visually impaired lot choose our tipple. A worthy amount of effort goes into the transcription of subtitles and closed captions for TV programmes and DVDs: a service many of us don’t use, but which is an invaluable assistive tool for the hard of hearing (and incidentally a tool which is only now appearing as a feature in mainstream online video services).

Adaptive accessibility is about building things into our everyday world which aren’t used by everybody all of the time, but are available as a helper to everybody all of the time. It can be something as simple as a handrail on a stairwell: the more sprightly among us may bound up stairs two-at-a-time; those who are more elderly need the extra support; sometimes children use it; if you’re tired, lazy, carrying something heavy you might use it. You adapt your behaviour through use of the tools around you, depending on all sorts of factors.

I see no reason why this analogy can’t be translated into our experience of our online world. We’re moving away from the desktop, to devices in our pockets, on our laps, in our cars. We can go online virtually anywhere, with different distractions; different demands for our attention. We’re moving away from navigating with the keyboard and mouse, to using touch, gesture, using our voices, using our ears. This might come as a surprise to you, but us “disabled” lot are way ahead of the game when it comes to alternative ways to navigate the online world.

I don’t have any answers

So how do we start building more adaptive online experiences?

I do not have a simple answer as to how we achieve this, I’m merely posing the question and acting as an advocate for the discussion of ideas. Perhaps it involves rationalising the UI design of the web (the adoption of iPhone design conventions shows an early example of what this might mean); perhaps it means decoupling data and presentation even more than we already have, and looking at a more ubiquitous approach to design; perhaps it means we’ll see the emergence of new creative workflows, and a new breed of designer (there are plenty of “creative technologists” emerging who fit the mould). Perhaps we’ll invent new tools, services and devices which change the way we experience, and perceive, the web.

Or perhaps we’ll just keep plodding on for the next ten years, pontificating and prevaricating, waiting year on year for the ratification of standards, stifling our creativity, innovating by increments, never really being progressive, never being bold. History has taught us that freedom and inclusion can reap huge rewards for all members of our society. The world wide web has shown us an inkling of it’s potential. But unless we take a good, hard look at one of it’s core principles: access for all – then that potential may not have a chance to blossom.

Oct 20, 2009

North: website design process

Phil Powell , , , Design, Video, Web 0 Comment

I made this a while ago, but due to my slackness in updating the old blog for quite some time, it’s never made it on here.

As part of the North project we’re developing in partnership with folly I needed to produce a new web presence. It was quite a quick job, as time and resource were at a premium, but I thought it would be fun to do a screen capture of the design process. I’ve condensed the entire process, which was about 5 hours spread over 3 days, into just under three minutes.

You can watch it below, or head over to Vimeo to see it in glorious HD.

This was a really quick job, implementing a design which is flexible and which can be developed over time. The foundation is a fairly rigid grid system with a strong emphasis on typographic style. I went through three different iterations before arriving at the final blue/green version. Most of the work was done in Photoshop, with some of the graphical elements sketched in Illustrator.

I really liked the second iteration, with the paper plane sketches, but it just wasn’t cutting it with the rest of the team. I’ll shelve that idea for a future project though, as I really like the aesthetic.

I hope this is an interesting little insight into the way I develop concepts when working on a new design. Feel free to let me know what you think, and whether you found it useful/interesting.

If you want to see the finished design in all it’s HTML markup glory, or just want to know more about North, then head over to the website.

Oct 20, 2009

A new approach to web accessibility?

Phil Powell Design, Web 1 Comment

I’ve been doing a lot of thinking about web accessibility lately. A lot of that thinking has been to do with how I can improve accessibility in the work I do. I do my best to design interfaces which are logical and easy to navigate, follow accessibility guidelines where they are applicable and appropriate and make sure that I write markup which is clean and semantic. I add little accessibility flourishes wherever possible to help those who use assistive devices, and make sure that copy is written to make sense even when it’s taken out of a visual context.

Al in all, I consider myself to be a pretty responsible practitioner of web standards and web accessibility. It’s something which I consider to be of great importance and it’s become an integral part of my design and development processes. It’s not an afterthought, it’s slap-bang in the middle of every design decision: whether technical or aesthetic.

So when I came to think about what else I could do, I was at a bit of a loss. I fell like I’ve ticked all the boxes for being a responsible web practitioner, but where can I go from here?

There’s been some tremendous work carried out over the years by various working groups and researchers, to raise the bar on web accessibility. It’s great to see that good accessibility has become an example of best practice within our industry, which in turn has had a positive impact on the workflows of designers and techies alike. Some might say that accessibility has dumbed-down creativity and made the web bland – I’d argue that we just haven’t been creative enough.

I came across this note recently, from an article written by Brian Kelly, summarising a paper he has co-written:

Disability is therefore a social construct and not an attribute of an individual. In particular, resource accessibility is the matching of a resource to an individual’s needs and preferences – and is not an attribute of a resource.

That really got me thinking about our perception of accessibility, and in particular the ways in which we view the people we are trying to help.

Accessibility is generally considered to be a way of helping those members of society who have a disability. We often think of users of websites as use cases, rather than individuals: a particular demographic, in a particular geographic location, or a group who behave in a particular way or have common interests.

And it’s often quite easy to fall into the trap of thinking of someone with a disability in a similar way – as a generalised group: someone who is blind, who is deaf, who is a wheelchair user. The fact is that not every disability is the same, and the acuteness and combinations of a disability can effect people in so many different ways.

For example, it may well surprise anyone who knows me to learn that I’m registered as blind. That doesn’t mean that I have no vision, it means I have low vision. Technically, I’m referred to as “blind/severely sight impaired” – there is a point at which my clinical diagnosis puts me into a particular group and classifies me as disabled.

But I’m a web designer, I make films, I do all sorts of outdoor pursuits my doctors cringe at – how can this be? Well, the fact is that because of the complicated nature of the various eye conditions I have, although my distance sight is useless, my near vision is pretty damn good: I might not be able to see a face across a room, but when I’m working with pixels, I’m on an equal footing.

I don’t really consider myself to be disabled, because I’ve spent my whole life learning to adapt and compensate. Out of necessity and downright stubbornness, I’ve had to shape my world to make it fit my wants and needs.

And that, I think, is a good starting point for a new way of looking at web accessibility, and why Brian Kelly’s words struck home so hard.

We, as practitioners of the web, should be creating experiences which are not just accessible to all, but which are intelligently designed to be adapted to a user’s own specific preferences.

And I think this is important to start thinking about now, because the way in which we all engage and interact with the online world will continue to evolve at a rapid pace. Our experience of the web is changing: from one where we visit websites, to one where we access services and information through our personal choice of digital devices. Our experience of our online world will become ever-more personalised and ubiquitous. And if we don’t consider the wants and needs of people with disabilities, then we run the risk of marginalising huge swathes of our society.

As we develop new devices, new applications and new experiences, there’s going to be a need for a more integrated, considered and downright innovative approach to design. But by taking that leap, by daring to think about inclusiveness and allowing the design process to be informed by more than just aesthetics and one-size-fits-all usability, there might be huge benefits to be gained by everyone, able and disabled – we will all be enabled on a level footing.

If you’re sceptical about these yoghurt-knitting ideas (and yes, they’re vague, but they’re just that: ideas) then head over to the Accessibility section of Apple’s website, have a good browse around, and then ask yourself: why would one of the premiere designers of digital technology commit so much time and resource to building accessibility into their products?

Jan 15, 2009

Muji Obsession

Phil Powell Design 0 Comment

An intriguing little article from the New York Times, all about the design ethos of Muji (via James).

I always think of Muji as the kind of store likely to appeal to readers of early Nicholson Baker, a man who could wax lyrical for pages on the origami-like beauty of a milk carton spout. But in fact it’s cyberpunk sci-fi writer William Gibson who really nailed its appeal: “It calls up a wonderful Japan that doesn’t really exist,” Gibson wrote, “a Japan of the mind, where even toenail-clippers and plastic coat-hangers possess a Zen purity: functional, minimal, reasonably priced. I would very much like to visit the Japan that Muji evokes. I would vacation there and attain a new serenity, smooth and translucent, in perfect counterpoint to natural fabrics and unbleached cardboard.”

Jan 15, 2009

Announcement – Gridlet V0.1

Phil Powell , , , Design, Web 0 Comment

I’ve been using grids in my CSS designs for quite a while now, inspired by frameworks like Blueprint CSS.  Although I don’t use Blueprint for production work (using a CSS framework starts to get a bit restrictive, and I prefer to build from scratch, rather than trying to override someone else’s default), I do use the methodology in my own CSS to create structured, grid-based layouts, and consistent typography.

One of the clever things that Blueprint introduced was the idea of displaying the grid while you’re working – this proves to be an invaluable aid as you try to refine CSS rules.  But I’ve found that – as good as the theory is – it has a few drawbacks:

  1. Because it uses a background-image CSS property, it overrides any beautiful background design you might have implemented.
  2. Because it uses images, if you change your grid size, you have to generate a new custom image – a bit of a faff.
  3. You have to tweak your CSS every time you want to turn the grid on or off.

Since I work with grids more and more often, I decided to have a stab at coming up with a solution which refines the Blueprint idea, adds a dash of jQuery to produce something which is a little more flexible and user-friendly.

What I’ve come up with is a jQuery plugin called Gridlet.  Instead of using pure CSS, the plugin generates a grid on-the-fly, and it’s an improvement in the following ways:

  1. It doesn’t use images – instead it dynamically generates a grid on top of your page, so your design remains intact.
  2. Changing your grid size is as simple as changing a setting – no need to generate images.
  3. You, er, have to tweak your JS to turn it on or off (this is something I’m going to work on improving – it’s early days).

It’s also worth noting that this first version only produces horizontal grids – that’s all I need at the moment  No doubt I’lla dd vertical grid spacing as and when it’s needed.  Any comments or suggestions are appreciated.

You can download version 0.1 of Gridlet here.  I’ve only tested in Safari 3 and Firefox 3 so far.

Implementing it is really easy – you just do something like this:

$(document).ready(function() {
  $("body").gridlet();
});

If you want to override the default grid height or colour, just pass in the settings like this:

$(document).ready(function() {
  $("body").gridlet({
    height: 18,
    background: "#fcc"
  });
});

And finally, for your curiosity, here’s the source code:

(function($) {
  jQuery.fn.gridlet = function(options) {

    var opts = $.extend({}, $.fn.gridlet.defaults, options);
    var line_position = 0;
    $("<div/>").attr("id", "grid_container").appendTo("body").css({
      position: "absolute",
      top: 0,
      left: 0,
      height: "100px",
      width: "100%",
    })

    while(line_position < $("body").height())
    {
      line_position += opts.height;
      $("<div/>").css({
        position: "absolute",
        top: line_position,
        left: 0,
        height: 1,
        width: "100%",
        background: opts.background
      }).appendTo("div#grid_container")
    }

    return this;

  };

  jQuery.fn.gridlet.defaults = {
    height: 24,
    width: 24,
    background: "#ddf"
  };

})(jQuery);

Dec 23, 2008

Fontcase

Phil Powell Design 0 Comment

Isn’t it weird how sometimes you’re thinking about how you’re missing something in your work life – I’m talking specifically about a tool, a piece of software, maybe even a workflow? You’re sat there thinking about how much easier life would be, trying to imagine how you would go about filling the void to make life easier? And then, moments later, the exact thing you’ve been dreaming of appears before your eyes?

That happened this morning when I was thinking about organising fonts (I know – my lifestyle is sooo rock and roll).  I use fonts a lot – more so in recent years as I’ve develop a deeper appreciation of good typographical design.  So I’m always toying with new fonts, and working with lots of variations for different projects.

The built-in OS X Font Book is a very lame beast which doesn’t really do much for me – not enough intuitive font management in there.  At the other end of the scale Suitcase never really got me hooked because it just felt too over-powering and feature-driven – font management should be really simple, particularly since these programs are fiddling with system-level stuff (I remember a case a few years ago where a colleague accidentally deactivated one of his system fonts using Suitcase, which rendered his notebook useless since OS X wouldn’t boot – luckily that can’t happen in more recent versions of the OS).

For the past six months or so, I’ve been using FontExplorer X.  Although it’s not perfect, it has proven to be the best fit for me, with a good balance between simplicity and functionality.  But it’s still painful to use when you want to browse and select a set of fonts to experiment with for a particular project – the endless list of font families doesn’t tell me anything about the visual appearance of the fonts themselves – I have to sift through and endlessly click around to find something suitable.

What I want is an application which does three things.  Firstly, it should allow me to easily install and uninstall fonts – that’s a given.  Secondly, activation and deactivation should be a cinch – something FontExplorer does very well.  And thirdly, I want to be able to browse my fonts the way I want – I want to see the fonts themselves, not just a dry and meaningless list of font names.  Is that too much to ask?

Well, apparently not, because sitting in my RSS feed this morning came news of Fontcase, which is currently in beta.  And it looks like just the application I was imagining!  The UI design looks gorgeous – simple but functional – and the visual representation of each font is an absolute godsend.

I can’t wait to see the final, finished product.  And if it lives up to my (very demanding) expectations, then I’ll be eagerly adding this to my arsenal of design tools.

As a sidenote, the homepage for this app is a brilliant example of clean and intelligent design.  There’s no need for superfluous words to sell it – a picture of the interface tells you all you need to know.

Dec 23, 2008

Cadence

Phil Powell , , Design, Web 1 Comment

Rands has written a really interesting post all about cadence, and more specifically how the tone of language used on the Web has a direct impact on our trust.

What does a lie sound like? How do we decide to trust? There’s a reason why you can figure out in an instant whether a mail is spam or not. It’s not a single, measurable thing, but a whole set of small, invisible variables with which you can instantly make a judgment — I do not trust this mail.

You have a complex set of analytical mental muscles that help you make critical snap emotional judgments. Whether it’s a mail, a website, or a person, your brain can instantly look at 12 imperceptible aspects of a thing to determine how you should feel.

Truth, love, or lies, human has a signature cadence.

I always place a lot of emphasis on spending time developing the language of a website – the words used aren’t incidental: the language and tone should be an integral part of the design.

1 2 3 4