The mobile landscape today is all but monopolized by WebKit, as a result, most of the tooling and infrastructure to support mobile web development on the frontend is taking place in the WebKit Inspector, so I’ll focus on it, and take a deep dive into its entire feature-set and how and when to use it.

Google and the Chrome team have been pumping a ton of resources into the WebKit Inspector. The changes have enabled a whole new class of complex and ambitious applications that would have otherwise collapsed on their own weight. This is great news, of course, but as I talk to more and more web developers about their process and tooling, it became clear to me that many of them haven’t caught up with the changes or aren’t making effective use of the tooling available. This blog post attempts to remedy that, not only by walking you through the inspector’s feature set, but also highlighting certain techniques for bug hunting and feature development that I’ve found to be indispensable.

Design is in the details. With all our icons designed, it was time for us to create our font. We decided we needed two sizes of each icon. One size, 16px, would be optimized for its exact size. At 16px the details are limited so every pixel was important. Since the icons were designed for such a small space, they don't really scale well. To take care of that our second size, 32px, would be designed with more detail so that it could be scaled up for many purposes.

Having planned out or icon strategy, we embarked on the adventure that was putting together our font. For this, we used an application called Glyphs.

I’ve decided to migrate from Aperture to Lightroom.  A task that I thought should be relatively easy and straight forward.  Searching the web on moving from Aperture to Lightroom yielded many questions, but very few answers.  This how-to demonstrates how I’ve done the migration.  It’s not as hard as you think.
My scenario is as follows:  Running Apple Aperture 3 with a managed library.  If you are running Aperture 2 or have referenced files, the steps you need to take may differ slightly.
Step one:  Backup your Aperture Library!  In my case, I have 2 Aperture Vaults created. Each on a separate  external hard drive.  I simply update the vaults, and my library is backed up.  I would not rely on Time Machine for this backup.  If you don’t have a vault created, I suggest creating one.
In my library, I have RAW files, Adjusted RAW files, TIFFs, JPGs and some PSD and PDF files.  If you were to simply export your RAW Masters, any adjustments you have made (cropping, exposure, sharpness, etc..) won’t be exported.  So all your hard work isn’t lost, you will need to export your adjusted RAW files as TIFFs.  We also want to minimize the creation of duplicates, as well as maintain keywords and star ratings.

"Which CSS preprocessor language should I choose?" is a hot topic lately. I've been asked in person several times and an online debate has been popping up every few days it seems. It's nice that the conversation has largely turned from whether or not preprocessing is a good idea to which one language is best. Let's do this thing.

Really short answer: SASS

I’ve seen a lot of discussion recently on what the difference is between Agile UX and Lean UX. I am happy to plead guilty to having used these terms interchangeably, as it would seem that they are both talking about a more light-weight and iterative UX practice. But when I was recently asked to participate in a Lean UX Roundtable panel, I thought it would be a good opportunity to show that they, in my opinion, really are not the same.

Compatibility tables for support of HTML5, CSS3, SVG and more in desktop and mobile browsers.

Process is for fast food restaurants. I’m much more interested in skill. 

Skilled people without a process will always find a way to get things done. Skill begets process. But process doesn’t beget skill. Following a recipe won’t make you a great chef – it just means you can make a competent bolognese. Great chefs don’t need cookery books. They know their medium and their ingredients so well that they can find excellent combinations as they go. The recipe becomes a natural by-product of their work.

Sure, if you have a low-skilled team, or inefficiencies and costs are your top priority, process matters. But for knowledge workers, skill is more important. The best people don't care whether agile/waterfall/lean is the flavor of the month, or what job title they should hold. Instead, they care about practicing their craft, and being better than they were yesterday.

When nudging vector points, Photoshop exhibits some strange behaviour, linked to how far you’re currently zoomed in. At 100%, nudging using the arrow keys will move your vector point exactly 1 pixel. At 200%, nudging moves the point half a pixel. At 300%, it’ll move a third of a pixel.

The behaviour seems intentional, but it’s not usually what I’m after. Most of the time I want to nudge in whole pixel increments. Here’s how you can do that, without zooming out to 100%.

Style Tiles are a design deliverable consisting of fonts, colors and interface elements that communicate the essence of a visual brand for the web.

They help form a common visual language between the designers and the stakeholders and provide a catalyst for discussions around the preferences and goals of the client.

GEL (Global Experience Language) is the user experience and visual design language for designers creating the next generation of digital services for the BBC. This blog aims to follow the progress of this ambitious initiative.

Starbucks web style guide.

Last year, I started bookmarking front-end style guides for an article I was writing for 24 ways. When the article was published, I got loads of great recommendations of others to include in the list. So I just wanted to write a little bit about some of the ones I didn’t talk about in the article, and the things that I like about them.

In my experience, creating a pattern library for any project is immensely valuable, whether you’re working in a team of two or a team of two hundred. I’ve found they work well as the next step after Style Tiles: a way of translating the visual vocabulary of a site into markup and CSS without getting bogged down in the specifics of page structure or layout (very handy for a Content First approach). The modularity of a pattern library enforces a healthy separation of concerns.

Over the last several years a large number of Agile practitioners have begun to include thinking from Lean Manufacturing in their Agile approaches. Initially led by Tom & Mary Poppendiek in their book Lean Software Development, you’ll now find practitioners world wide talking about and making lean process changes to their Agile approaches. Recently I’ve heard lots of discussion about Kanban style development — an approach that breaks that breaks the primary rule of today’s common agile practice: the fixed development time-box. While lots have been writing and talking about it, David Anderson lead early charges into this space and still works hard has a thought leader.

Some say it's jargon, some say it's not even a real job. What exactly is this thing so many call "User Experience Design"? This may sound like an odd thing for a guy with User Experience Designer on his resumé to question. First, that title was given to me. Second, it's semantic. It gets the job done. But recently (even more so as UX Design picks up traction within the general public) it's become more of a roadblock than a suitable title.

iOS UI Patterns is an inexhaustible collection of categorized screenshots of various iOS apps. Very useful for designers looking for inspiration and common conventions for an otherwise new UI paradigm.

In Multi-Device Layout Patterns I outlined a number of emergent design patterns for screen layouts designed to render well across different sized screens. Of these, the Off Canvas pattern had few existing examples so I asked if anyone would be interested in developing it further. Jason Weaver took me up on it and created a very compelling example of the technique in action.

Iterations are key to successful design. They help reduce risk by letting us get all the bad ideas out of our system early, keeping only the best of the best.

Unfortunately, we’ve found that many teams don’t know how to iterate effectively. Good iteration is a deliberate activity, with four important stages: planning, implementing, measuring, and learning. The best teams focus on each stage appropriately, making sure they get the most out of it. While iterations can be very short, (we’ve seen teams that can iterate a dozen times in a single day,) the best teams don’t short change any of the stages.

Agile teams are trying to iterate in multi-week sprints and their costs are too high. A six-person team working on a three-week sprint is investing 90 person-days of effort. If they get to the end of that sprint and discover they’ve built something the users can’t use, they’ve wasted a lot of effort for that discovery.

Viget's redesign posts shows style guides, page flows, wireframes, and a lot of other stuff that is good to reference as my team works through projects.

Changing generated content text with media queries.

These principles describe how best startup teams have always worked. By attempting to describe Lean UX, we hope the approach can be repeated,  taught, and practiced deliberately to make startup teams more successful, more quickly.

User experience design for the Web (and its siblings, interaction design, UI design, et al) has traditionally been a deliverables-based practice. Wireframes, site maps, flow diagrams, content inventories, taxonomies, mockups and the ever-sacred specifications document (aka “The Spec”) helped define the practice in its infancy. These deliverables crystallized the value that the UX discipline brought to an organization.

Lean Startup, User Experience Design and Agile Development are all approaches to improve your odds of creating successful products. Are they mutually exclusive, or can you assemble them together to make a lean, mean product machine?

In November Pathfinder’s Bernhard Kappe, Amy Willis and Reid MacTavish gave a sold out talk at the Chicago Product Management Association to share their lessons learned in making products with Lean + UX + Agile methodology. We have produced a video of the event including the slides with a narrative voice over for your enjoyment.

The Responsive grid generator
Created by Erskine Design

In my six months as a signal, I’ve worked with Jason F. on numerous design explorations for the new Basecamp. These sessions are always fun, and a few of them helped transform difficult problems into the UI you’re using in the final product. (One famously tricky one was the new Projects screen.) Our design process isn’t formal, but we’re fast and methodical. We scope most of our work into a week or two.

One of our recent explorations was a UI for adding groups or departments inside a company — such as the Marketing and HR groups inside Acme Widgets. This turned out to be a great example of how an exploration can produce an entirely different result than you originally expected.

Ben is the CEO and co-founder of MailChimp.com, one of the most successful e-mail marketing companies around, with over 1.2 million users. They were recently featured in "Fast Company" for their non-traditional corporate culture and creative environment. In this Creative Mornings presentation, Ben talks about the history of the company and what he does as a manager to cultivate such a creative culture.

I regularly come back to my own daily schedule to re-evaluate it and see if it is serving me as well as it should be. Because schedules, like finances, make excellent slaves but horrible masters. I should be the one who sets my schedule and budgets my time just like I should be the one budgeting my finances. A schedule, like a budget, is there for the purpose of serving my goals so that the minutes don’t get away from me and I end up squandering my time.

What I like about Ben Franklin’s daily schedule was how open it was. It was a rigid routine but it was very forgiving for all the nuances and variables that each day’s tasks and priorities seem to bring.

Being good at programming is insufficient qualification for becoming a world class software project manager/leader. Too often, we take our best coders and turn them into incompetent managers because it seems like a logical next step, and because we don't pay adequate attention to what we really want from these critical executives. (Hint, this is about many fields, not merely software).

What I love about the creative process, and this may sound naive, is this idea that one day there is no idea, and no solution, but then the next day there is an idea. Where you see the most dramatic shift is when you transition from an abstract idea to a slightly more material conversation. But when you make a 3D model, however crude, you bring form to a nebulous idea and everything changes — the entire process shifts. It galvanises and brings focus from a broad group of people. It’s a remarkable process.

There is a time and place for the purposeful noisiness of busy. The work surrounding a group of people building an impressive thing contains essential and unavoidable busy and you will be rewarded for consistently performing this work well. This positive feedback can feed the erroneous assumption, “Well, the more busy I am, the more rewards forthcoming.” This is compounded by the insidious fact that part of being busy is you aren’t actually aware that you’re busy because you’re too busy being busy. You have no internal measurement of the amount of time you’ve actually spent being busy.

A healthy product company is, confusingly, one at odds with itself. There is a healthy part which is attempting to normalize and to create predictability, and there needs to be another part that is tasked with building something new that is going to disrupt and eventually destroy that normality.

Failure to create some form of predictability will result in chaos. Failure to create some sort of well-maintained Barbaric chaos inside the company guarantees that a fast-moving, ambitious, risk-taking and ruthless someone else - someone outside the company will invade, because they know what you forgot: hacking is important.

Poll Everywhere replaces expensive proprietary audience response hardware with standard web technology. It's the easiest way to gather live responses in any venue: conferences, presentations, classrooms, radio, tv, print — anywhere. It can help you to raise money by letting people pledge via text messaging. And because it works internationally with texting, web, or Twitter, its simplicity and flexibility are earning rave reviews.

Your first design may be the best, but you won’t know until you can’t find a better one.

In a single collection, Font Awesome is a pictographic language of web-related actions.

Dealing with grids in Photoshop is a pain.

With GuideGuide, it doesn’t have to be. Pixel accurate columns, rows, midpoints, and baselines can be created based on your document or marquee with the click of a button. Frequently used guide sets can be saved for repeat use. Grids can use multiple types of measurements. Best of all it’s free. Honestly, if you haven’t started downloading it by now, you’re probably a masochist. Weirdo…

I discovered an interesting way to keep (store) a CSS style on an element using CSS transitions.

The Photoshop Etiquette Manifesto for Web Designers is a collection of ways to improve the clarity of a PSD when transferred. You stay organized, your developer stays happy. Fist bumps all around.

A collection of thoughts, experiences, ideas that I like, and ideas that I have been experimenting with over the last year. It covers HTML semantics, components and approaches to front-end architecture, class naming patterns, and HTTP compression.

To get a sense of emerging responsive design layout patterns, I combed through all the examples curated on the Media Queries gallery site several times. I looked for what high-level patterns showed up most frequently and tried to avoid defining separate patterns where there were only small differences.

To make sure your features are worthwhile look at how many of your customers will be using the feature, and how often. This gives you a sense of what’s valuable. Let’s start with the following diagram.

Top and left navigations are typical on large screens, but lack of screen real estate on small screens makes for an interesting challenge. As responsive design becomes more popular, it’s worth looking at the various ways of handling navigation for small screen sizes. Mobile web navigation must strike a balance between quick access to a site’s information and unobtrusiveness.

Here’s some of the more popular techniques for handling navigation in responsive designs:

UI Prototyping Tool Made Beautiful - Create Interactive Wireframes & High Fidelity Prototypes

CoffeeScript is a little language that compiles into JavaScript. Underneath all those awkward braces and semicolons, JavaScript has always had a gorgeous object model at its heart. CoffeeScript is an attempt to expose the good parts of JavaScript in a simple way.

Sam Stephenson, of 37signals and Prototype.js, gives a 45-minute introductory walk through CoffeeScript, it’s uses and benefits, at the Future of Web Apps London, 2011.

Does this naming approach help visualize a responsive layout? It really depends on how your brain is wired, but abstracting grid class names certainly doesn't cast a veil on your mental representation of a given layout. And also, there is a certain richness to this approach, creativity-wise, as one can think in terms of proportion associations, and perceive one’s work in a more abstract way. There is also a reusability argument to take into account, as one can easily modify one’s layout appearance without having to alter the mark-up to make it account for CSS decisions.

Designing for responsive websites can be a bit challenging at first because the process is so different.

As designers, we’ve gotten used to building pixel-perfect mockups as our web blueprints. But responsive design takes a different approach.

A designer’s role is no longer to produce a mockup and then pass it off to the developer because responsive design is not just a two step process, it is a series of revisions. Most of which are made in the browser. It is a collaborative effort between the designer and developer, no longer two separate tasks.

Here are some tips and a general workflow to make the transition from designing static sites to designing responsive ones a little easier.

This document contains guidelines for web applications built by the Creative Technology (front end engineering) practice of Isobar US. It is to be readily available to anyone who wishes to check the iterative progress of our best practices.

Collect, test, and experiment with interface pattern pairings of CSS & HTML. Pears is an open source WordPress theme, enabling people like you to get your own pattern library up and running quickly.

Amazon neither invented nor appropriated its basic strategies from Best Buy or anyone else.  It simply does what consumers want.  Best Buy does what would be most convenient for the company for consumers to want but don’t, then crosses its fingers and prays.

Want to achieve a dramatic innovation in your design’s user experience? That’s easy. Just increase the hours of exposure to real users that your design team has.

In our research, we found successful design teams have each team member spend a minimum of two hours every six weeks watch real users interacting with either their design or a competitor’s design. The most successful teams have even more frequent exposure hours.

Perhaps one of the most talked about websites in the last 12 months has been Nike Better World. It’s been featured in countless Web design galleries, and it still stands as an example of what a great idea and some clever design and development techniques can produce.

In this article, we’ll talk to the team behind Nike Better World to find out how the website was made. We’ll look at exactly how it was put together, and then use similar techniques to create our own parallax scrolling website. Finally, we’ll look at other websites that employ this technique to hopefully inspire you to build on these ideas and create your own variation.

A couple of months ago, I created a jQuery Vertical Parallax Demo that manipulated CSS to make multiple backgrounds move at different speeds relative to the users movement of the scroll bar. This type of effect is slowly appearing across various websites on the web, achieved using many different techniques. Nikebetterworld took the idea to a new level.

In today’s tutorial, we’re going to take the original jQuery Parallax script I wrote and recreate a webpage similar to Nikebetterworld.

3D transforms are awesome, but they're even cooler with lighting effects! The specular highlights are created with CSS gradients and masks. The cast shadow relies on box shadows and transforms. (Best in Safari)

Octopress is a framework designed by Brandon Mathis for Jekyll, the blog aware static site generator powering Github Pages. To start blogging with Jekyll, you have to write your own HTML templates, CSS, Javascripts and set up your configuration. But with Octopress All of that is already taken care of. Simply clone or fork Octopress, install dependencies and the theme, and you’re set.

Perch is a really little content management system for when you (or your clients) need to edit content without the hassle of setting up a big CMS.

Tutorials

Here are some tutorials that you might find useful:

Recreate NikeBetterWorld Parallax
Behind the Scenes of NikeBetterWorld
Building Parallax Scrolling Storytelling Framework
Parallax Scrolling jQuery Plugin
jParallax Plugin

Web Symbols is a set of vector html-compliant typefaces, so it might be used in any size, color and browser (okey, mostly — but IE7 for sure).

Making something obvious has a cost. You can’t make everything obvious because you have limited resources. I’m not talking money—although that may be part of it too. I’m primarily talking screen real estate, attention span, comprehension, etc.

Making something obvious is expensive because it often means you have to make a whole bunch of other things less obvious. Obvious dominates and only one thing can truly dominate at a time. It may be worth it to make that one thing completely obvious, but it’s still expensive.

Collections of icon web fonts.

Fico is a font with 52* simple, commonly used icons and glyphs, served on the web via @font-face.

Tool from CSS-Tricks to demonstrate the power and flexibility of icon fonts.

Traditionally, bitmap formats such as PNG have been the standard way of delivering iconography on websites. They’re quick and easy, and it also ensures they’re as pixel crisp as possible. Bitmaps have two drawbacks, however: multiple HTTP requests, affecting the page’s loading performance; and a lack of scalability, noticeable when the page is zoomed or viewed on a screen with a high pixel density, such as the iPhone 4 and 4S.

Time is finite, but we act as if it were otherwise, assuming that longer hours always lead to increased productivity. But in reality our bodies are designed to pulse and pause – to expend energy and then renew it.

Preboot is a super awesome pack of mixins and variables to be used in conjunction with LESS, a CSS preprocessor for faster and easier web development.

Many of the review articles out there do a good job of providing an in-depth look at syntax and general usage, but I'd like to take a different angle—highlight one difference that isn't written about all that much, and present a few features of LESS that have have proved very valuable on recent projects.

Kickoff lets you collaborate with your team in an elegant way, giving you the right tools for a clutter free, real time experience both online and offline.

We hear and talk a lot about card sorting in various forms, and how it can be used as input on a hierarchy or classification system (or a taxonomy, if you like more technical words). We hear that we should test our hierarchies, but we don’t talk about how. Of course, we can test them as part of a standard usability test, but on the screen there a lot of things competing for a user’s attention. How do we tell if a problem is a result of the classification or the way the interface is presented?

This analysis leads to an important conclusion. Whether you’re a student or well along in your career, if your goal is to build a remarkable life, then busyness and exhaustion should be your enemy. If you’re chronically stressed and up late working, you’re doing something wrong. You’re the average players from the Universität der Künste — not the elite. You’ve built a life around hard to do work, not hard work.

The solution suggested by this research, as well as my own, is as simple as it is startling: Do less. But do what you do with complete and hard focus. Then when you’re done be done, and go enjoy the rest of the day.

Sometimes when I’m giving feedback on a UI, and I’m pointing out a spacing detail, I upload a little screenshot to Basecamp or Campfire to help make sure the feedback is clear.

I wanted to share a little tweak to the feedback which I think is ultimately more useful. In this example I’m pointing out that the space above and below an element is not equal (and I think it should be).

The asynchronous loading patterns that we’ll discuss in this post provide a useful alternative in situations where you must eliminate any possibility that a problem loading the kit could interfere with loading the rest of the page. Asynchronous patterns are longer, more difficult to implement, and require extra work to avoid the FOUT. But these approaches ensure that your page won’t wait for the kit in the unlikely event that something goes wrong somewhere between the font network and the user.

Removing these fonts from the stack allows me to see what my page will look like when the fallback fonts are used. Georgia isn’t a bad fallback, but at a given font-size it looks bigger than Lapture. In order to make my fallback fonts look less obtrusive, I needed to add fallback styles for a smaller font-size and increased line-height when the fallback fonts are used:

A Practical Guide to Designing for the Web aims to teach you techniques for designing your website using the principles of graphic design.

Featuring five sections, each covering a core aspect of graphic design: Getting Started, Research, Typography, Colour, and Layout.

Learn solid graphic design theory that you can simply apply to your designs, making the difference from a good design to a great one.

Sites have improved, and we now know much more about e-tailing usability. Today, poor content is the main cause of user failure.

Writing for mobile readers requires even harsher editing than writing for the Web. Mobile use implies less patience for filler copy.

This is a mirror of Mark Pilgim's site that was recently removed from the internet.

For designers at Viget, Mood Boards are consistently among our favorite topics to discuss and deliverables to create. I wanted to shed a little more light on the subject to talk about some variations of the practice and how we look at them at Viget. Essentially, mood boards aren't a one-size-fits-all kind of thing and we have different approaches to them. Ultimately, we always have the same goal in mind – to start broad in efforts to get early feedback that will allow us to narrow our focus as we begin to work on the details of a design. I originally approached this subject back in 2008 looking at two variations of mood boards. Since then, our two variations have morphed into three. Here are some examples that illustrate what we mean.

The above is, of course, a starting point: there are myriad other challenges that face the liquid web designer, most of which arise when you introduce fixed content (such as images, Flash, and so forth) into a fluid framework. I’ve been experimenting with a few possible solutions on my blog, but other, better workarounds are still out there.

And finally, I don’t pretend that design is easy, whether it’s fixed or fluid. But given all that we’ve achieved over the past few years—moving past tables, evangelizing standards in our companies and in our shared industry, demanding better standards of our browsers and our peers—I do wish we’d bend some of that ingenuity to break out of our reliance on “minimum screen resolution.” After all, our users’ browsing habits aren’t as fixed as our comps would suggest. I hope the promise of fluid grids has fired your imagination, and I’m excited to see how you improve on the technique. Our users will be, too.

In recent years, I’ve been meeting with more companies that request “an iPhone website” as part of their project. It’s an interesting phrase: At face value, of course, it speaks to mobile WebKit’s quality as a browser, as well as a powerful business case for thinking beyond the desktop. But as designers, I think we often take comfort in such explicit requirements, as they allow us to compartmentalize the problems before us. We can quarantine the mobile experience on separate subdomains, spaces distinct and separate from “the non-iPhone website.” But what’s next? An iPad website? An N90 website? Can we really continue to commit to supporting each new user agent with its own bespoke experience? At some point, this starts to feel like a zero sum game. But how can we—and our designs—adapt?