I’m in Belfast right now for this year’s Build conference, so I am. I spent yesterday leading a workshop on responsive enhancement—the marriage of responsive design with progressive enhancement; a content-first approach to web design.

I spent a chunk of time in the afternoon going over the thorny challenges of responsive images. Jason has been doing a great job of rounding up all the options available to you when it comes to implementing responsive images:

Responsive IMGs, Part 1,
Responsive IMGs, Part 2—an in-depth look at techniques,
Responsive IMGs, Part 3—the future of the img element.

Personally, I have two golden rules in mind when it comes to choosing a responsive image technique for a particular project:

The small image should be default.
Don’t load images twice (in other words, don’t load the small images and the larger images).

That first guideline simply stems from the mobile-first approach: instead of thinking of the desktop experience as the default, I’m assuming that people are using small screen, narrow bandwidth devices until proven otherwise.

Assuming a small-screen device by default, the problem is now how to swap out the small images for larger images on wider viewports …without downloading both images.

I like Mark’s simplified version of Scott’s original responsive image technique and I also like Andy’s contextual responsive images technique. They all share a common starting point: setting a cookie with JavaScript before any images have started loading. Then the cookie can be read on the server side to send the appropriate image (and remember, because the default is to assume a smaller screen, if JavaScript isn’t available the browser is given the safer fallback of small images).

Yoav Weiss has been doing some research into preloaders, cookies and race conditions in browsers and found out that in some situations, it’s possible that images will begin to download before the JavaScript in the head of the document has a chance to set the cookie. This means that in some cases, on first visiting a page, desktop browsers like IE9 might begin get the small images instead of the larger images, thereby violating the second rule (though, again, mobile browsers will always get the smaller images, never the larger images).

Yoav concludes:

Different browsers act differently with regard to which resources they download before/after the head scripts are done loading and running. Furthermore, that behavior is not defined in any spec, and may change with every new release. We cannot and should not count on it.

The solution seems clear: we need to standardise on browser download behaviour …which is exactly what the HTML standard is doing (along with standardising error handling).

That’s why I was surprised by Jason’s conclusion that device detection is the future-friendly img option.

Don’t get me wrong: using a service like Sencha.io SRC (formerly TinySRC)—which relies on user-agent sniffing and a device library lookup—is a perfectly reasonable solution for responsive images …for now. But I wouldn’t call it future friendly; quite the opposite. If anything, it might be the most present-friendly technique.

One issue with relying on user-agent sniffing is the danger of false positives: a tablet may get incorrectly identified as a mobile phone, a mobile browser may get incorrectly identified as a desktop browser and so on. But those are edge cases and they’re actually few and far between …for now.

The bigger issue with relying on user-agent sniffing is that you are then entering into an arms race. You can’t just plug in a device library and forget about it. The library must be constantly maintained and kept up to date. Given the almost-exponential expansion of the device and browser landscape, that’s going to get harder and harder.

Disruption will only accelerate. The quantity and diversity of connected devices—many of which we haven’t imagined yet—will explode, as will the quantity and diversity of the people around the world who use them. Our existing standards, workflows, and infrastructure won’t hold up. Today’s onslaught of devices is already pushing them to the breaking point. They can’t withstand what’s ahead.

So while I consider user-agent sniffing to be an acceptable short-term solution, I don’t think it can scale to the future onslaught—not to mention the tricky issue of the licensing landscape around device libraries.

There’s another reason why I tend to steer clear of device libraries like WURFL and Device Atlas. When you consider the way that I’m approaching responsive images, those libraries are over-engineered. They contain a massive list of mobile user-agent strings that I’ll never need. Remember, I’m taking a mobile-first approach and assuming a mobile browser by default. So if I’m going to overturn that assumption, all I need is a list of desktop user-agent strings. That’s a much less ambitious undertaking. Such a library wouldn’t need to kept updated quite as often as a mobile device listing.

Anybody fancy putting it together?

Tagged with
responsive
design
mobile
images
futurefriendly
ffly

In our ongoing research into design excellence, we’ve come across an interesting correlation. The designers who are at the top of their game are mostly people who sketch.

Even though every designer we talked with had completely different backgrounds, training, and work habits, they all shared one common element—they sketched their work. In addition, they weren’t just sketching their designs. They were sketching their notes in meetings, their conversations with their co-workers, and their understanding of their design research. Sketching was a common medium for a variety of design-related activities.

In this issue of UIEtips, we look back at an article from a year ago. We take a tour of the different activities and the sketches we saw during our research. These sketches solve a multitude of important design problems and are key to becoming a design master. I’m sure you’ll find this as interesting as I do.

Read the article, Why We Sketch.

One of the most popular workshops at last year’s User Interface Conference was Good Design Faster. The workshop had a strong sketching component. Once again we’re offering this workshop, taught by one of its original creators, Brandon Schauer. On November 9 at the User Interface 16 Conference, Brandon will show you how to bring out innovative design ideas in record time. Explore Brandon’s workshop and the 7 other fantastic workshops at UICONF.com.

How do you use sketching in your work? Is this something new or something you’ve been doing for a while? We’d love to hear about your experiences below.

Lately, I haven’t been making friends with people who work at design agencies. I think it’s something I said.

It’s definitely something I said. In fact, I can tell you exactly what I said.

However, to do that, we need to revisit some research we’ve conducted over the last few years. We’ve been looking at the process of making design decisions and realized there are five distinct styles. (If you haven’t read or seen me talk about these, go read about them now. Otherwise this won’t make a lot of sense.)

If you’re a designer, any of these styles can produce great results that delights customers. However, for many, the most advanced styles, activity-focused and experience-focused design, are the more desirable projects. That’s where the really cool stuff happens and where the biggest challenges are found.

And this is where I get in trouble with the agency folks. As we’ve been researching these five styles, we found an interesting finding: agencies can’t do activity-focused or experience-focused design.

Many do self design. Some very successful agencies make a lot of money with genius design. (And there are many that do unintentional design, but they probably shouldn’t brag about that.) However, it seems activity-focused and experience-focused design is out of reach of the agency world.

Now, many agencies try to sell themselves as doing this work. And many agencies get clients to hire them to do this work. That’s not what I’m talking about.

I’m talking about creating successful designs using these decision styles. That doesn’t happen with an agency. It can only happen in-house.

Activity-focused design takes a long time. It requires making an investment. The team accrues knowledge over a long period, studying users and their activities, implementing solutions, and seeing how those solutions work. It takes many iterations to do well.

Most agencies aren’t brought in for long-term iterative work. Eventually, all agencies leave. When they leave, the knowledge the team has gained walks out the door with them. Then the client is left with something they don’t know how to maintain or improve. The project fails.

Experience-focused design is even more difficult. The designs often require changes at touch points all over the organization. For example, for a retail business to create a seamless experience, they’ll have to change things on the web site, in the stores, at the call center, in the distribution centers, and in the merchandizing department.

Agencies can’t have this kind of reach. It takes commitment at all levels. It’s too expensive to teach an agency how your business works. They don’t have the political clout to make the hard decisions.

Sure, a company can hire an agency to give them ideas. Agencies have really smart folks with lots of great ideas. But the long-term, in-depth execution has to come from within. The company has to make the commitment to investing on their own.

Needless to say, statements like this don’t make me popular with agencies. Recently, I’ve found myself sitting in front of agency owners, defending this position. They don’t like it at all.

I could be wrong. (It’s happened before.) It could be that an agency could take over the management and operations of a business and build a fabulous design using activity-focused or experience-focused design. I haven’t found one yet, but it could happen.

I just hope that agency’s contract never ends, because then their (now former) client is screwed.

A good introduction to css box model and suitable hacks

Online media agency in Shoreditch

Desktoptopia is a desktop background manager for the mac that automatically loads and displays designer desktops on your monitor, as often as you wish.

Wallpapers, icons, themes, etc

A great set of examples of visual networks... very interesting from a design point of view.

Use Spreadshirt to create custom merchandise made to order and dispatched from Germany (a bit closer than US for the English!)

FREE Royalty-free stock photos

You never really know who is going to visit your web-site next. However, since you’d like to comfort most of your web users, you need to know their habits and the profile of your average visitor — to adapt the design and layout to your users’ needs.

A useful introduction to an advanced way to use text in menus and other website GUIs

A website colour scheme a day!

A very cool new building being built in New York. Why can't the Shard of Glass building have a cool website like this?

Stylish design magazine

A list of loads of logos and the font faces used

useful javascript functionality provides classy image veiwing

This site details all standards & guidelines for developing and delivering products and services for bbc.co.uk.

  “How did you do that?” My colleague Leigh sounded impressed. He had been working with a problem client for weeks trying to get design approval. Then I came along and was able to get signed-off in a single conference call. “Can you teach me how you did that?” he asked. I mumbled something about years of experience, but the truth was I didn’t have a clue. It just seems I can find design approval easier than most.
As I thought about it I realised there are actually quite a lot of things that have become second nature for me over the years. But I have learnt the hard way through many painful projects. Unfortunately because I started designing websites back in 1994 there was nobody around to teach me this stuff. I wish somebody could have just shown me how to avoid all of those endless revisions. Hopefully some of the advice I share with you here can help you avoid years of pain and suffering.
My first piece of advice focuses on the old adage — prevention is better than cure.
Prevention Is Better Than CureIn our enthusiasm to start a project we often don’t take the time to prepare the client. For many clients this will be their first web project. So they may not really understand what that involves or what their role is.
At our company, we pre-empt common issues and prepare the client by giving them a PDF factsheet about working with designers.
So before you leap into your next project, let me recommend you complete the following steps:
Educate the client about their role Take the time to explain to the client what you expect from them. I always make the point of telling our clients to focus on problems, not solutions. I encourage them to avoid making design suggestions, but rather to point out why they feel a design is wrong. The job then falls onto us to come up with the right solution for their problem.Take the client through a process Because many clients are not familiar with the Web design process, take the time to explain it. This has two benefits. When people are in unfamiliar territory they attempt to take control. This leads to micromanagement. By explaining your process you reassure them, giving them confidence. Second, explaining your process demonstrates you are the expert and puts you in the driver’s seat.Pre-empt common issues We all know there are certain issues that always come up. Things like “make my logo bigger“, “can we use comic sans?” or “put everything above the fold” have become standing jokes in the Web design community. Why then would we not pre-empt these issues? By talking about them upfront it makes it much harder for the client to mention them later. After all, none of us likes to be the person who is predictable, making the ‘dumb’ request. WeeNudge is a superb site for pre-empting common issues and educating your clients about the Web.
Even once your project is up and running prevention can still be better than curing. For example, when you complete a design and show it to the client you can do a lot to prevent problems from coming up.
First, you should always present the design. This is your chance to justify your approach. Refer back to previously agreed upon work. If you have used moodboards, point out how the design draws on them. The same is true for wireframes, personas or any other elements the client has signed off on. It’s hard for the client to reject a design built on elements they have already agreed upon. You must never hand over a design without explanation.
Never simply send a design to a client asking them what they think. Take the time to present the design and ask for specific feedback.
Secondly, be aware the client may show the design around. This is problematic. Although you may have been careful to explain the decision making process to the client, others will not have this background information. This inevitably means the third parties will fallback on personal opinion and potentially sway the client in the wrong direction.
The solution to this problem is not to present your design as either a static image or as a final webpage. Instead, record a short video talking the client through the design. This video can then be passed on to whoever the client wishes to show. That way whoever views it will get all the information they require to provide educated feedback.
Finally, control the kind of feedback you receive. Never ask a client what they think of the design. Ask them instead how they believe their users will react to the design or whether it meets their business objectives. You can even go as far as asking them whether the design reflects the signed-off moodboards or wireframes. If you can get them saying yes to these questions they will realize that even if they personally dislike the design it is still the right solution.
Of course, when I was able to get the design signed-off on Leigh’s project, I hadn’t had a chance to lay down any of this groundwork. So what other factors came into play that made me successful where he had failed? One was my attitude going into the discussion.
Get Your Attitude RightLeigh had been trying to get design sign-off for weeks. Both he and the client were frustrated. Battle lines had been drawn despite the fact both sides wanted the project completed.
This is a common problem. We start to see our clients as the enemy. In fact, there are many cases where bad past experience puts us on the defense from the outset. At every turn we start to build into our controls the limitations for the number of iterations and endeavors of the client’s influence. We even moan to one another how life would be better without clients.
Because of bad past experiences with clients we can often get off on the wrong foot with new clients.
It’s not surprising that design sign-off becomes a battle. We are looking for a fight even before we begin. It’s vitally important that we change this mindset and see every new client relationship as an exciting opportunity and not as a potential point of conflict.
When dealing with Leigh’s client, I had the advantage of not being on the defensive. My ego had not been bruised by rejection. You need to leave your ego at the door. Often it is worth picking your battles and letting the client win from time to time. This helps them feel their contribution is worthwhile and valued. It is when the client feels ignored or isolated from the process that conflict arises.
By getting your own attitude right, this goes a long way to establishing a good relationship with the client. This is key to successful design sign-off.
Get The Relationship RightWe would love to deny that the client is an intrinsic part of the Web design process. However, you can be the best Web designer in the world, but if the client isn’t on your side, you are wasting your time and ultimately the project will cost you money.
In theory we should all be experts in establishing good relationships with our clients. After all, we pride ourselves on empathizing with users and understanding their motivation and needs. We should then be able to apply these same skills to our clients. If we then understand their needs and motivations, it is much easier to establish a good relationship.
Working closely with them helps. The temptation is to hold the client at arm’s length and minimize their involvement in the project. However, if you want to get the client on board, you are better off working with them collaboratively. This means they will feel a sense of ownership over the design, and are more likely to sign off on it.
We find wireframing with the client is an excellent way of involving them in the process and building a better working relationship.
The other advantage of collaboration is that it makes the client feel important. It provides them with a sense of purpose in the relationship rather than just being a spare part to rubber stamp your decisions. I tell clients that it is their site and their decision, I am simply there to give advice on the best practice. This allows them the sense of control that is so important.
“But what if they make silly decisions?” you may ask. Often they will listen to you simply because you aren’t arguing with them. However when they still pursue an unwise course of action, I do not allow things to descend into a fight. Instead I make my position clear and leave the decision over to them. I have also been known to use phrases like “that is a brave decision” or “that’s an unusual approach” which is a less confrontational way of telling them they are being dumb.
Giving the client a sense of control doesn’t mean you are a doormat. In fact, I don’t believe clients want that. They want you to control the process.
Take ControlAlthough clients want to feel involved and have a sense of control, they don’t want to run the show. Most clients only interfere in the process when they feel you are out of your depth. It is important that we always appear to be the authority in the project.
I think this is the primary reason I managed to get sign-off on Leigh’s project. On our conference call I took control. I was careful not to be arrogant or push the client out, but it was clear I was in charge of the process. I achieved this using the following techniques:
I was confident Sounding confident can often be half the battle. Listen to the client and make a recommendation. Know what you think and communicate it confidently. If you sound like an expert people will treat you as one. However, be careful not to come across as arrogant. Just know your mind.I was willing to challenge When a client asks for something you disagree with, say so. That said, don’t immediately jump in with why it is wrong. Instead ask the client why they want to take a particular approach. Often the client hasn’t really thought things through and a few well placed questions will help them to conclude it isn’t sensible. Also by asking questions you demonstrate you have thought things through […]

  Productivity is a crucial asset of professional designers. Photoshop is an extremely powerful application for photo processing and image manipulation, and we can make it even more powerful by using handy tools, actions, plugins and templates to save time for solving mundane regular tasks. The better our professional tool set is, the more time we can spend to focus on the actual design process rather than the tool we are using to implement it on screen.
Here at Smashing Magazine, we’re continuously searching for recent time-saving, useful Photoshop resources for our readers, to make the search of these ever-growing techniques easier. We hope that these techniques will help you improve your design skills as well as your professional workflow when using Adobe Photoshop. A sincere thanks to all designers and developers whose articles are featured in this roundup. We respect and appreciate your contributions to the design community.
Useful Photoshop ToolsMr. StacksA small Photoshop script that can quickly generate storyboards, stacks and PDFs for project CDs, client presentations or anything else — right from the Layers Comps in your Photoshop file. The script would be useful for a series of animations, storytelling elements in a design and advertising.

Photoshop Tych PanelEvery photographer and Web designer who has spent time arranging images and photographs knows that scaling and resizing takes time. But even existing templates are unnecessary when you try out Reimund Trost’s latest little Tych Panel for Photoshop. It completely automates the n-Tych creation process, and it has a lot of layouts to choose from. The tool has been open sourced by Reimund Trost and can be freely used, modified and redistributed in any way.

Pixel Proliferation: A Toolset For Managing Screen ResolutionsThis tool will help you to manage screens resolutions more easily. The toolset contains a collection of PS5 marquee-tool presets for common screen resolutions, covering fixed-screen resolution sizes, ratios for less common resolutions and standard ratios. Also, a collection of layered CS5 PSDs provides common devices for computing and design presentations. Finally, there is a reference chart for resolutions and design landscape. Useful.

Generating CSS positions for SpritesA Photoshop plug-in by Arnau March that generates sprites with your given CSS file. You can then add the sprite locations and also create hover and click effects with the help of jQuery. You might want to check out CSS Sprite: Photoshop Script Combines Two Images for CSS Hover as well: the article presents a simple JSX Photoshop script for creating image sprites, and you can also assign a keyboard shortcut to it.

Golden CropGolden Crop is a Photoshop Script making cropping with respect to division rules (golden rule, 1/3 rule) very easy with visual guides. Requires installed Photoshop CS2, CS3, CS4 or CS5 (either x86 or amd64 version). Works on Windows and Mac.

Browser UIThe Browser UI is an action that creates a browser window around any size Photoshop document you can throw at it. The free version includes only Internet Explorer 6 UI. The deluxe edition with current versions of Chrome, Safari and Firefox is not free ($3).

Open With Photoshop 0.6An add-on for Firefox that is a new companion for Web and graphic designers to open up any Web image with Adobe Photoshop via a single and quick mouse click. A useful time saver.

foxGuide: Photoshop Guides Inside FirefoxA Firefox extension that displays horizontal and vertical guides. You can move or remove the floating guides on a webpage just the way you do it Photoshop with the help of foxGuide. Guides are useful for laying out elements symmetrically, structure a design and improving the overall layout.

Modular Grid Pattern: create a modular grid in Photoshop, Fireworks and GIMPModular Grid Pattern is application for web designers, which helps you quickly and easily to create a modular grid in Adobe Photoshop, Adobe Fireworks, GIMP, Microsoft Expression Design and other applications. The extension requires Adobe Photoshop CS5

960gs ExtendScript for Photoshop CS5The script is very raw and crashes easily with the wrong input or settings. However, it has some nice features such as disabling gutters by putting 0 for gutter width and optionally adding evenly-spaced horizontal guides.

Workspace import/export script for PhotoshopJohn Nack has written a script to enable simple importing and exporting of Photoshop workspaces. It should work in both CS4 and CS5 (although it is a little more robust in CS5), so you can use it to migrate workspaces from CS4 to CS5 in addition to using it to enable easier sharing of CS5 workspaces between machines or people.

Subpixel Hinted Font-RenderingThis technique is great for your concepts when you want to simulate actual text in your Photoshop file. Thomas Maier has saved his workflow as an action. You can download the subpixel-rendering technique and use it for free.

GuideGuide 1.0What actually started out as a script that drew guidelines at the middle of the document, turned out to become a quite helpful extension for Photoshop when working with columns, rows and midpoints in CS4 & CS5. You can download Cameron McEfee’s GuideGuide to help you find midpoints, make margins and create rows and columns much easier while working in Photoshop.

Photoshop Animation to Sprite SheetThis tool enables you to easily export a framed animation in Adobe Photoshop to a packed sprite sheet. The tool is available for Photoshop CS3 or higher. Developed by Peter Jones.
Automatic Tile CutterSome images are made of dozens to thousands of tile images, depending on the zoom level. At the distant zoom levels you only need a few images to cover a large area. Creating and then uniquely naming each of these images would be a daunting task if you had to do it by hand. Will James has solved this problem and released a batch processing script to use with Photoshop 7 or CS that will carve all the titles you need and name them exactly as you need them named.
The Image Processor ScriptThe Image Processor in Photoshop CS4 is a simple way to quickly resize and convert a bunch of images to JPEG, PSD or TIFF format. The modified script allows exporting CMYK JPEGs as CMYK, as well as support for exporting PNG images.
Further ResourcesAdobe Photoshop ScriptsTrevor Morris provides more than a dozen of free scripts for Adobe Photoshop. All scripts are commented, making them easy to modify and/or learn from. Among other scripts, you’ll find Layers to Comps, Rename Layers, Sort Layers and Distribute Layers Vertically scripts.

The Photoshop Scripting Community ForumPS-Scripts is a community for Photoshop scripting and automation. The site contains articles Members of the community release their script on the site’s forum; for instance, you can find the Smart Object links panel, Listing fonts used in PSD files (alternative), Distribute Layers. Unfortunately, the forum’s activity is quite low, although the scripts are being released quite often.

Russel Brown’s Scripts PageRussel Brown provides a number of free useful Adobe Photoshop Scripts and Panels for CS4 and CS5. Among other things, Adobe Emailer Panel, Image Processor Pro and Edit Layers in ACR scripts are available.
ScriptopediaAnother community that helps to find scripts and scripters for Photoshop and other Adobe applications. The site is frequently updated; you’ll find various scripts as well as tutorials on the site.
Useful References and ArticlesThe Photoshop Etiquette Manifesto for Web DesignersThe recently updated Photoshop Etiquette can be quite useful when wanting to improve the clarity of a PSD when transferred. This site provides you with rules that will show you examples and bonus points ranging from external as well as internal file organization to exporting and design practices.

Photoshop Secret ShortcutsThis old, yet still very useful article by Nick La provides an overview of secret (i.e. not documented) Photoshop shortcuts that the author has learned from years of experience.

Photoshop Tip: Organizing LayersDaniel Mall has thought of a super handy Photoshop file organization trick that separates layer groups for different stages of a page within the same PSD. You can prefix your layer groups with a bullet to organize your PSDs but also using a hyphen will enable you to create a horizontal divider in the context menu.

Photoshoptimize: Optimize Photoshop PerformanceTo improve the performance of Photoshop, this list of best tips will help any designer to optimize Adobe Photoshop for Mac as well as PC; from reducing cache levels to disabling export clipboard in Photoshop, and much more.

Super Crisp Font Anti-Aliasing With Sub-Pixel HintingDavid Leggett shares with us the most useful technique in creating concepts in Photoshop, especially when you’re working on a website layout in Photoshop, and want an accurate representation of what a font is going to look like in your content body. This surely helps bring the frustrating times when working with small font using anti-aliasing in Adobe Photoshop to an end.
Freebies, Goodies100+ Free HTML Email PSD TemplatesCampaignMonitor has released a large collection of freely available high quality email templates which have been thoroughly tested in more than 20 of the most popular email clients like Outlook 2010, Gmail, Lotus Notes, Apple Mail and the iPhone. They are completely free. Every template contains a Photoshop document, HTML template and a Campaign Monitor Template. The complete packages with all templates is 320 Mb.

Bottles and Cans Photoshop CS4 Actions3 exclusive Photoshop CS4 Actions that might save you some time when you are working on the next soda, wine or bottle label design.

Pricing Table PSD TemplateA free pricing table template with various button states.

Search and Email Input Text PSD TemplateA free template for search field and email input fields. You can find ne[…]

If you look at my profile page on Huffduffer, this is what you’ll see:

my details,
what I’ve huffduffed,
links to subscribe to my podcast and
my tag cloud.

That’s the core information for that page, preceded by a header with site navigation and followed by a footer with some additional links.

Because I’ve provided a URL with my details, there’s some extra information displayed in the sidebar:

my other profiles on the web, as determined by Google’s Social Graph API,
MP3s recommended by Last.fm,
my latest updates on Twitter.

It’s a similar situation if you look at a piece of audio I’ve huffduffed. The core information is:

all the details about the audio (title, description, tags),
who else has huffduffed this,
possibly-related items and
links to share and embed the audio.

In addition, because I’ve used a machine tag—book:author=cory doctorow—the sidebar contains:

related articles from The Guardian,
sales information from The New York Times,
books on Amazon.

In both cases, this supporting information isn’t essential; it’s just nice to have.

There’s a potential performance problem though. Because this extra information is coming from third-party services—and despite the fact that I’m doing some caching—it could delay the display of the whole page. So I took some time on the weekend to adjust the architecture a little bit. Now the extra information is requested with Ajax once the core information has already loaded. This is lazy loading.

Now I’ve introduced a dependency on JavaScript, which is far from ideal, but because this is just “nice to have” information, I think it’s okay if it isn’t seen by a subset of visitors.

In fact, because this extra lazy-loaded stuff takes up valuable screen real estate, I think it might be acceptable to only serve it up to visitors who have the screen real estate to accommodate it:

if ($(document).width() > 640) {
// do lazy loading here
}

So if you load my profile on a small screen, you won’t see my latest tweets or my Last.fm recommendations. Likewise if you look at something I’ve huffduffed that’s tagged with music:artist=radiohead you won’t see information from Last.fm, pictures from Flickr or albums on Amazon unless you load the page with a wide enough viewport.

Now it could be that the real issue here isn’t viewport size, but connection speed …in which case I’m making the classic error of conflating small screen size with limited bandwidth. A script like Boomerang, which attempts to measure a user’s connection speed, could be very handy in this situation.

Lazy loading is the new fold

I was chatting with James about the implications that lazy loading could have for earlier phases of the design process: wireframing, page description diagrams, and so on.

Traditionally, you’ve got only two choices when judging what content to include: either something is on the page or it isn’t. You can use hierarchy, position and contrast to emphasise or de-emphasise the content but fundamentally, it’s a binary choice. But with conditional lazy-loading there’s a third option: include some content if the user’s circumstances warrant it.

Once again, Luke’s Mobile First approach is a useful thought experiment. It can help prioritise which elements are core content and which could be lazy-loaded:

Mobile devices require software development teams to focus on only the most important data and actions in an application. There simply isn’t room in a 320 by 480 pixel screen for extraneous, unnecessary elements. You have to prioritize.


So when a team designs mobile first, the end result is an experience focused on the key tasks users want to accomplish without the extraneous detours and general interface debris that litter today’s desktop-accessed Web sites. That’s good user experience and good for business.

Sometimes there are political reasons for wanting the “extraneous detours and general interface debris.” Lazy loading for large-screen users could be the least worst option in that situation. Semantically speaking, the kind of content that might be marked up in an aside element might be a good candidate for lazy loading …if the viewport is large enough.

I have a feeling that we’re going to be seeing a lot more of lazy loading as the responsive web design revolution rolls on. Used judiciously, it could provide plenty of performance benefits. But if it’s taken too far, lazy-loading could be disastrous, resulting in sites that rely on JavaScript to load their core content—I’m looking at you, Twitter.

Tagged with
responsive
design
lazyloading
javascript
ajax
huffduffer
mobile

  Start-up organizations provide an extraordinary example of chaos organized into manageable chunks. Perhaps more than anyone else, the individuals who comprise a start-up team are required to understand their team’s goals across a variety of disciplines — research, marketing, design, development, architecture, etc. — as well as their own responsibility to move the company’s overarching objective forward. Entrepreneurs must choose the direction, designers must think through the options, and developers must cull a functional product or service, all while giving feedback to and receiving it from their colleagues.
At least, that’s the idea. Most start-ups tend to take liberties somewhere along the way. Some start-ups begin with a novel business model, whereas others begin with a beautiful design. Still others try to test things out first with a functional prototype, even if it is a bit ugly. All of them — regardless of their initial approach — adapt their process over time in order to create a well-rounded product or service. And for this reason, most of today’s start-ups describe themselves as “agile.”
Agile start-ups, as the name implies, should be capable of changing their design, development and/or business objectives on a dime. This is much easier said than done — especially for today’s user experience designers. The user experience (UX) designers who work at agile start-ups are required to do two things exceptionally well: (1) grasp the intent of the product or service being developed, and (2) effectively communicate those good intentions to end users in a language they’ll understand. Neither of these is as straightforward as it might sound.
Ideally, designers will jumpstart their design process by carefully selecting well-reasoned entrepreneurs to work with; but what happens when the designer is altogether alien to the community he is designing for? The breakneck speed of agile start-ups makes it incredibly difficult for designers to craft appropriate messages to their audience at large. Only by understanding the processes and opinions that dominate start-ups can designers begin to reach out and make a difference for the end users of their product or service.
User-Centered Design, Sans UserDesigning with a clear idea of who the users are has never been simple. Most designers who have experience with the trial by fire known as a “lean start-up” will almost vehemently agree: because there are more than a few fires to fight, adopting a big-d Design process at start-up organizations is, simply put, exceedingly difficult. Invariably, this means that most start-up organizations devolve to the point that salability reigns supreme, or form trumps function. But whereas flexible, agile environments are very good for getting those things done, good design takes time, which makes the design process of start-ups almost universally hamstrung.
Keep the levels of UX in mind. (Image: Jon and Barb)
In short, agile, user-centered design tends to ignore the aesthetic, intangible, ambient qualities that good experiences are all about. As a consequence, budding artistic directors, brand ninjas and interaction designers have been apt to worry. Without the ability to intimately understand the audience for whom they’re designing, these team members can’t do their jobs. The logical question becomes, how can they? How can designers effectively communicate with an audience they’ve yet to meet?
The textbook definition(s) of UX design yields some clue. User-centered designers are encouraged to perform design research and then create personas as well as other deliverables. Certainly those would spotlight the factors that affect a company’s relationship with its users… right? Perhaps. While research is undoubtedly necessary to the design process, its deliverables are not.
I’ve written before that designers should bootstrap their own culture of UX within an organization. In this article, I’ll take that idea one step further: in order for a start-up to effectively communicate with its target audience, a spirit of empathy must pervade its every design decision — empathy cultivated by engaging in an ongoing, outward, user-centered conversation.
Where Has All The Empathy Gone?The task of any designer who works in a start-up environment requires empathy. The designer, perhaps more than any other team member, must empathize with stakeholders (to understand the project’s business objectives), developers (to understand its technical requirements) and, of course, users (to understand the nature of the problem they’re solving), all at once. Designing with consideration for all three parties effectively frames their strife.
Valuable though it may be, however, most start-up environments discourage empathy. Consider the number of times you’ve heard something like, “We’re targeting wealthy single males, ages 45 to 55,” or “We’re just like Amazon, but for baby boomers.” Well, that’s just great. A product description like that might initially help a team grok (a word that, ironically, means “understand by empathy”) an idea, but as far as rhetoric goes, merely saying that you know what segment you’re targeting isn’t enough.
Every e-commerce company sells products. Newcomers to the space can, and often do, learn a lot by studying the desire paths paved by industry notables (indeed, entire books are written on the subject). But let’s be clear: “I want to be Amazon” doesn’t imbue the designer with empathy. Creating something that looks and feels like Amazon will, of course, look and feel like Amazon. If that website is then marketed to a wholly different crowd, then the resulting outfit will be disingenuous — the polar opposite of empathetic.
In order to create something real, unique, of lasting value and with a look and feel of its own, members of start-up teams must vacate their cubicles.
One… Erm, Three ProcessesAdding to this perceived resistance are the various processes that drive start-up organizations at any given time. A recent blog post by Whitney Hess contrasts three specific types. It’s worth noting that all of the approaches detailed below show the exact same verbs in the exact same sequence. What’s different in each is the primary action that drives change along the way.
To cite Hess:

I see a lot of products developed using the Reactive Procedure:
I’m scratching my itch.Should I keep scratching this itch?I’ll scratch this other itch.As a designer who frequently consults with agile start-ups, I concur with Whitney’s sentiments: the reactive approach (“build it and they will come”) is far and away the most common. There is, of course, a good reason for all that action: development drives change. Start-ups act in order to build an initial prototype. Prototypes, in turn, move the company — indeed, the user feedback loop — forward.
Unfortunately, the prototypes developed by most start-ups exhibit a keen lack of consideration. Who is the prototype targeted at? 40 to 50 somethings? There are certainly a lot of them. Will those 40 to 50 somethings be able to grok it? That is, will users be able to tell what it’s “all about” from the design? Because this kind of subjectivity is incredibly nebulous, prudent start-ups rely on experienced UX designers to help them uncover the answers. It’s no wonder that Whitney and I see this in our line of work.

As a user experience designer, consultant and member of the New York tech community, I instead advocate for using the Preactive Procedure:
Who’s itchy?That itch isn’t being scratched.This is how to scratch that itch.I believe that most UX designers would agree — dare I say, empathize — with Whitney’s prescribed preactive approach. Beginning with thinking — with research — is in a user-centered designer’s blood; it helps them understand their audience and voice their messages appropriately. Further still, “preactivity” appears to be the only real way for designers to gain empathy. But most start-up environments run counter to this approach. Acting and then thinking usually leaves little room for the voice of research. Has Whitney encountered a start-up that tries to reconcile the two?
As luck would have it, she has. Whitney recently worked with an entrepreneur who marches to a different beat:
Campbell McKellar, founder of Loosecubes, is the first person to make me realize that there’s something even better than the Preactive Procedure — the Proactive Procedure.

By acting sooner, you are actually achieving more. You are creating the future instead of just predicting and accommodating for it. You are inventing a new reality, based half in what people need, and half in what you want them to have. You can observe behavior sooner and course-correct. It is the most transformative of all three procedures for both the subject and the object.
An entrepreneur at heart, I want to agree here, too. The proactive process appears to be a viable alternative to the unenviable tension between designers and developers at start-ups. But just because a group is humming along with a decision-based proactive process doesn’t mean that the organization’s designer understands its users any better. By UX standards, this process almost seems to disenfranchise them: it moves “thinking” — and here, I presume, research — all the way to the back of the bus.
In sum, it’s easy to envision scenarios at a start-up in which a given development process proves more valuable, more productive, than its alternative. Should the team think, act or decide? It depends. Regardless, as designers join start-ups, they’re very likely to find that design is secondary to the process unless, of course, their organization follows a preactive process. But for most start-ups, that’s simply not the case.
In order for an organization to learn more about its users, the design-minded members must advocate to that ef[…]

Whitespace is a fundamental building block of good design. Its one of the first thing any visual designer is taught. However, to many website owners it is simply a waste of space that could be used to better promote their messages, services or products.

In this post I aim to explain why whitespace matters and how to keep whitespace in a design without compromising business objectives. However, before I can do that we need to be clear what we mean by whitespace.

What do designers mean by whitespace?

When designers talk about whitespace, they actually mean negative space. In other words the space between screen elements. That is not always ‘white’. This space maybe a colour or texture but either way it is space within a design that does not include screen elements. Below you can see a couple of examples of ‘whitespace’ in on various websites.

With whitespace clearly defined the next questions becomes “why does it matter?”

Why whitespace matters

Whitespace is a fundamental element of design for good reason. Used well it can transform a design and provide many benefits. Some of those benefits are purely aesthetic while others have a tangible impact on the effectiveness of your site.

Below I share four benefits from the latter group:

Improved legibility

The most obvious benefit of whitespace is that it increases legibility. You only need to compare the examples shown in Mark Boulton’s superb article on whitespace to see how a good use of whitespace can make an enormous difference to legibility.

Higher comprehension

Believe it or not whitespace between paragraphs and around blocks of text actually helps people understand what they are reading better. According to research in 2004, this kind of whitespace increases comprehension by almost 20%.

Increased attention

Whitespace can also be a powerful way of drawing the users attention to a particular screen element. To a non designer the most obvious way to make something stand out is to make it bigger. However often surrounding the item with whitespace can be just as effective.

Creates the right tone (sometimes)

Finally the use of whitespace can be a powerful way to communicate elegance, openness and freshness. Obviously this isn’t always the design look and feel you wish to communicate. However when it is, you cannot do better than having loads of whitespace.

Hopefully by now the benefits of whitespace are obvious. However even with the best intentions in the world, whitespace can often be pushed out of a design. In order to prevent this we need to understand why it happens and how to combat it.

The three enemies of whitespace

I believe there are three primary reasons why whitespace is pushed out of a design. If you understand what these are and how to deal with them then your design stands a better chance of maintaining the whitespace it needs.

Lets start by looking at the fold.

The fold

Whitespace is often pushed out of a design because somebody within the organisation believes users do not scroll. The result is that they insist as much content as possible is placed high on the page sucking any whitespace from the design.

However the belief that users do not scroll was proved false as early as 1997 and more modern studies have shown that users routinely scroll to the very bottom of pages.

In addition it is important to remember that we do not know the point at which users have to start scrolling. This is dependant on operating system, browser, resolution and many other factors. In the end worrying about ‘the fold’ is a false economy.

That said, it is still good practice to ensure the primary calls to action and content are placed near the top of the page. However, this is not to suggest other content will be ignored. What is more, placing too much content high on the page will reduce the prominence of key content because it will be overwhelmed by the proximity of lesser content as discussed in ‘increased attention’ above.

Trying to say too much

Another common reason for whitespace being removed from a design is because there is a desire to communicate too much information at one time. Most website owners have a lot they want to say but unfortunately users only have limited attention. It is therefore important that you ‘spend’ this user attention wisely.

The Google and Yahoo homepages are good examples of this problem. Both Google and Yahoo offer similar services. However, they take radically different approaches to their primary homepages.

As you can see from the screenshots below Yahoo tries to get the user to look at everything at once. Google on the other hand recognises that users have limited attention and so focus on their primary offering first – search. By looking at the two homepages (let alone their relative incomes) it is immediately apparent which is more effective.

In order to drive this point home I suggest allocating yourself (or those within your organisation pushing for more content on your homepage) 15 points of user attention. Each item you add to the page costs 1 point. If one screen element is more important than another you need to assign it additional points to make it stand out. With only limited points available it quickly becomes obvious you cannot say everything on the homepage and so whitespace does not need to be pushed out of the equation.

Politics

Of course even with the best will in the world sometimes a website owner can be forced into adding too much content to a page because of internal politics. When somebody higher within your organisation insists his or her pet project appears on the homepage there is little you can do about it.

This is where the book ‘Laws of Simplicity‘ offers some great advice. If you cannot remove a piece of content then try shrinking or hiding it.

Take for example the approach we used on the Wiltshire Farm Foods homepage. For various reasons it was decided the homepage should include food and health News despite the fact that this information distracted from the primary call to action (buy a meal) and was not something the vast majority of users were interested in.

Our solution was to have this content present but hide it unless the user chose to view it. A simple piece of javascript enabled the user to expand it on request. This hid the content from those not interested and enabled the design to have more whitespace.

Conclusions

There is little doubt that whitespace is a valuable design tool that can make any website more effective. What is more I see no reason it needs to be such a point of friction between designers and website owners. I believe any design can maintain its whitespace while meeting a site’s business objectives.

But what do you guys think? What problems have you experienced with whitespace? Why do you believe whitespace in design is so important? Let’s have a flame war in the comments below ;-)

Similar Posts:

Top Tip: Homepage emphasis

Lessons to be learnt from the new Google homepage

Liquid Vs Fixed Design

Question: Headscape tabs

When developers design

  I used to think the beginning of a website design project was the best part. Hopes are high. People are full of great ideas. Nobody is disappointed yet. But as I gained experience, I found that learning about a client’s brand, competitors and customers doesn’t always give clear direction about design goals.
Brand discussions can generate goals like “be modern,” but they don’t necessarily determine how to accomplish those goals. Competitor reviews can devolve into cherry-picking sessions that spawn “frankencomps” rather than provide helpful feedback. And mood boards, which communicate a general feeling, don’t help to articulate or prioritize design goals. With a design matrix, you can guide discussions and establish clear direction.
Hey, You Got Math In My Art…Sometimes the abstract nature of design is enough to make you envy the people over in accounting, with their definite answers and proven formulas. While the beauty of design is that it transcends the world of definite answers, introducing a little math in the form of design matrices can help you create better websites by providing a clear picture of where the website design is today and where it should go tomorrow.
Design matrices don’t require any serious math skills because they’re based on the coordinate system. Chances are you’ve seen a competitor matrix that ranks brands according to two key attributes on X and Y axes (for example, value could be plotted against profit margin). A design matrix is essentially like a competitor matrix but ranks the client’s website against competitor websites, and it uses design attributes (“clean” and “warm,” for example) instead of other points of competitive comparison.
A typical competitor matrix ranks brands according to rational factors. (This example, which compares a few car models, was created for illustrative purposes only.)
A design matrix ranks website designs according to design attributes. (This example, which compares airline website designs, was created for illustrative purposes only).
Design matrices are powerful tools for determining the path of the website design process, because: they force you to determine two design attributes to focus on; they build consensus within a team; they guide the clients’ perception of competitors; and, most importantly, they lead to differentiated website designs.
The Art (And Math) Of Building A Design MatrixStep 1: Gather InformationTo build a design matrix, you will need to know the client’s core brand attributes and main competitors. You should also have a broad understanding of what the redesign aims to accomplish (from a design perspective): “the website is cluttered” or “our website is not engaging.” The good news is that information gathering is a normal part of the discovery phase.
A design matrix should not be the only piece of work involved in the discovery phase, but it can replace some other approaches. Creating or documenting a brand’s position and defining the key redesign goals are essential. However, a design matrix could potentially replace mood boards. A mood board is a collage or grid of images that capture the “feel” or “tone” of a brand. They are valuable tools for providing direction to new brands, but they provide a less concrete direction than a design matrix. If the brand is in its nascent form and needs broad high-level direction, then mood boards work well; but if you are working with an established brand or a client who prefers a concrete approach, then a design matrix is the best bet.
Document the brand’s position before creating a design matrix. (For illustrative purposes only.)
Image Spark is a great resource for creating online mood boards—particularly useful if you are working with a company that requires high-level brand definition.
Another common discovery activity that design matrices can replace is the “competitor website review.” Looking at competitors’ websites can generate lively discussion, but too often it either shifts the focus to feature sets instead of design direction, or it becomes a cherry-picking session for disparate design elements from a variety of websites that the designer is somehow supposed to mash together into a single coherent website design.
Create a design matrix that shows the current website in relation to competing websites. This way, you are less likely to get distracted by feature sets or be expected to combine all sorts of design elements. That said, if you are looking for an energizing group activity, competitor reviews can generate more brainstorming than a design matrix. Doing both is an option, but if you do that, then do the matrix after the walk-through of competitors.
Delta Airlines’ website.
United Airlines’ website.
Looking at these individual airline websites, rather than comparing them on a design matrix, can lead to a less design-oriented and more feature-focused conversation.
Step 2: Determine Your X and Y AxesNarrowing down a design direction to two attributes can be uncomfortable for those of us accustomed to creative briefs that list a litany of brand attributes to guide our design. How often have we heard that a design should be “clean,” “inspiring,” “warm,” “engaging,” “approachable” and “trustworthy”? How do we even accomplish just two of these attributes? And if we must choose only two, how do we decide?
Understand that a design matrix is not intended to limit the final design to two attributes. That would be almost impossible. It is intended to illustrate the two most important attributes for taking the website design to the next level and differentiating it from that of competitors.
To determine your X and Y axes, ask yourself the following questions:
Of all the brand’s attributes, what will make this client stand out from the crowd? Which design traits reinforce those brand attributes?What are the competitor websites’ strengths and weaknesses?What does the design need to do better in order to accomplish the website’s goals?The X and Y axes should not be nearly synonymous (for example, “warm” and “engaging”), nor should they be mutually exclusive (“innovative” and “traditional”). There should be a slight tension between the two attributes.
The airline websites, for example, are ranked according to how “clean” and “personable” their designs are. There is a slight, but not negating, tension between these two attributes. Clean websites can come across as cold if they don’t have a distinctive voice or warm color palette. Personable websites are often less functionally organized. Achieving a high ranking for both attributes is a worthy challenge, and stepping up to that challenge will definitely create a distinctive website.
You might find that you change the labels of your axes as you place the websites on the matrix (see step 3), but the above process should get you pretty close to determining what the final axes should be.
Step 3: Play a LittleYou know the competitors. You have a clear idea of what is important, brand- and design-wise. You have determined your x and y axes. It’s time to try some things out.
Place all of the websites on your matrix as you would rank them off the top of your head. As you begin to place them, you will most likely rearrange some as you compare them to others. This is a natural part of the process because the matrix shows relationships as well as individual rankings.
I was influenced by Jet Blue’s overall branding and so originally ranked its website’s personality fairly high. Later, when I compared it to the Delta and Virgin America websites, I revised the ranking.
Design matrices do not have to be limited to ranking competitors. They can also show a client’s website’s position among affinity brands (i.e. brands with a similar “feel” and customer base). Mini USA and Apple, for example, might be considered affinity brands because they both exemplify modern design and appeal to similar customer types.
Step 4: Get SeriousThings will take shape fairly quickly, but there is a final step before declaring your design direction matrix done and dusted. Before sharing the matrix with the client team, make sure you can defend it. Show it to others in your agency and see if they agree with your placement decisions. Ask these key questions:
Do my axes represent the two most important design attributes?Can I clearly articulate why I placed each website where I did?Will the redesign be able to get the website to the top-right corner? If not, what is holding it back?If you answered yes, yes and yes (or yes, yes and yes if we do a certain thing…), then your website design direction matrix is ready to share with the client.
Creating Buy-In With Design MatricesEveryone loves talking about design, but with everyone talking, we don’t always hear other ideas. If you show a client a design matrix before creating the initial comprehensives, then you will visibly and quantifiably show that you are on the same page; and because of that, you’ll likely be successful in the long run.
The design matrix will clearly show which websites you think best capture the desired attributes and where the current website falls into the mix. It is a tangible foundation for a conversation about design.
Invite the client to participate actively in this stage of the design process. Clients usually want to feel like they have had direct input in the design, and designers always prefer that the input comes sooner in a high-level, directional form (“The design feels cold”), rather than later in an overly specific form (“Make that element blue”).
Discuss the following questions:
Does the matrix address the two most important design attributes?Do we all agree on the placement of competing and/or affinity brands?Do we all agree on the placement of the client’s brand?If we end up in the top-right corner, are we where we want to be?Using a d[…]

  We know how hard it is to find good useful tools that all of your developers and designers out there spend hours searching for. And for that reason, we’re regularly collecting useful online web services, tools and resources — little time-savers that can boost every designer’s workflow and save time that would otherwise be required for mundane tasks.
You might have seen some of these tools in our Twitter stream or on our Facebook page, but certainly not all of them. We’ve prepared the most useful ones (yet not necessarily the most beautiful ones) in this handy overview for your convenience. Please share any further tools with us and our readers in the comments to this post. As usual, we express sincere gratitude to all designers and developers out there who create, maintain and improve these tools as their little side projects. You really make the difference, guys. Thank you.
You may want to check out our previous round-up, Time-Saving and Educational Resources for Web Designers, as well.
Useful Web Services, Tools and ResourcesFontFuse: Gallery of Font PairingsFontFuse is a font pairing design resource that displays font pairings and hence helps you compare and choose fonts. You can browse through fonts as well as font families, and explore the most recent, most popular and contest-leading font pairings.

Little Big UI DetailsThis site features tiny details that improve the user experience of websites and mobile apps. You’ll find some useful design techniques found by your colleagues across the Web. Also, share your favorite little things on the website as well. The collection is already very useful, with more design examples submitted every single day.

A Sampler PageWhile physical books are traditionally well defined and structured objects, digital books live on screens that vary greatly in their dimensions. In this A List Apart article, Craig Mod dives into the similarities and differences of these media and presents the baseline for designers who want to produce beautiful and readable text on a tablet.

Readability: Enjoy Reading, Support WritingAnother handy little helper that gets rid of the unwanted clutter. Readability allows you to choose your preferred settings (font size, margin and style) and applies them to any website. Drag the bookmarklet with your saved settings into your bookmars bar or folder, visit the website of your choice, click on the bookmarklet and you get a good, comfortable read. Besides, readability offers a way to compensate writers and publishers without punishing readers. 70% of all membership fees go directly to the people who make the content.

Prey: Rest SafeThis tool is small but efficient open-source application that lets you track your laptop or phone in case it gets stolen or lost. Once the Prey agent is installed, it waits to be activated over the Web or via SMS, sending back information on its exact position.

Ge.ttWith Ge.tt you can turn any type of file into web content and share it instantly. You just click on and select files and share the files with your friends or publish the data online. You may want to check an alternative, Crate, as well.

Lanyrd: Get More Out of ConferencesLanyrd is the social conference directory that lets you keep track of what is going on around you, both as a conference speaker and visitor. You can browse conferences by topic, see who the keynote speakers are and who might like to attend it with you. Follow intereresting conferences by checking out attendees tweets or browse slide, videos and podcasts of past events you might have missed. And you can check SmashingMag’s account on Lanyrd, too.

Dashkards: Dashboard Cheat Sheets For Your Favorite Mac AppsThe site presents keyboard shortcut cheatsheets for you favorite Mac apps to help you memorize them. Simply add the dashkards to your dashboard and save time.

Bundler: Manage Your Application’s DependenciesBundler manages application’s dependencies through many machines systematically and repeatedly. You can use the tool with frameworks (it works out of the box with Rails 3) and check out an application with a gemfile for development. A detailed instruction is available on the app’s main web page.

BuildorProBuildorPro runs through your browser, and so the browser becomes your development environment — meaning that every time you change your code by hand or through the visual tools, the changes are instantly reflected in the design window. Currently in beta.

Zerply: Present Yourself ProfessionallyWith Zerply you can present yourself, discover and connect as well as converse and collaborate. By setting up a professional profile, you can tell people who you are and what sites you use.

Prevue: Sharing Tool for DesignersPrevue is a free concept sharing tool that helps you upload in a simple and elegant way by organizing and sharing your work with others. Either share individual projects with clients, or turn all your projects and designs into a beautiful and clean portfolio to share with the world.

Git Immersion Git is a fast version control system which can be downloaded on this site. Git Immersion is a very detailed guide to Git, with examples and practical tips for developers.

Wirify: The Web as WireframesThis tool is a bookmarklet that lets you turn any Web page into a wireframe with a single click. The bookmarklet helps you get rid of all distractions by blocking out copy, images and ads, letting you take a closer look at the website’s building blocks. Wirify is a useful tool that shows the balance of a website that the eye perceives only unconsciously.

Open with Photoshop Firefox ExtensionIf you are looking for nifty time-savers, this little Firefox add-on is the perfect companion for any Web or graphic designer. Instead of saving images first, you can just open them directly in Photoshop via a single click. If Photoshop is already running, it opens the image in a new window; otherwise, it launches the program.

Scr.im: Email Address ShortenerScr.im lets you use a shortened URL to give out your email address safely and securely in forums. Just enter your email address on Scr.im, and it gives you a link to a page with your email address, with security to prevent bots from viewing it.

Compfight: Flickr Search EngineCompfight is a Flickr search engine for images licensed under Creative Commons (or other) licenses. They pull their results directly from Flickr and gives you multiple options to restrict your search.

Browserling: Interactive Cross-browser Testing in Your BrowserBrowserling offers you a graphical web console to do cross-browser testing without leaving your own browser. A helpful way to try out your creations. The virtual browsers run live enabling you to type and click away just as if you were running the actual browser. Paid and free options are available.

User Feedback and Concept Testing with VerifyVerify is the fastest way to collect and analyze user feedback on screens or mockups. See where people click, what they remember, or how they feel about a Web design.

foxGuide: Photoshop Guides Inside FirefoxfoxGuide is a Firefox extension that displays horizontal and vertical guides. These guides appear as thin lines that float over the webpage. You can move or remove them just the way you do it in Photoshop.

GridBookmarkletThe tool allows you to interact with a grid directly inside the Web browser. (Most alternatives involve overlaying a static grid image onto the page.) Just drag it to your bookmarks toolbar, and then any time you want to check that everything is properly aligned, click on the bookmarklet, and a grid will be overlaid on the current page.

URLi.st: Share and Sync Your LinksURList not only enables you to create and save link lists easily and share them via Twitter or email with coworkers and friends, but also lets you access those links from anywhere. And creating lists is dead easy. Just drag URList’s bookmarklet to your browser’s bookmark bar and click it whenever you want to add a link to the group of links.

Spritebox: Create CSS from Sprite ImagesSpritebox is a WYSIWYG tool to help Web designers create CSS classes and IDs from a single sprite image. It is easy and free to use and is based on the principle of using the background-position property to align areas of a sprite image into block elements of a Web page. You may want to check out CSS Sprite Generator, too.

JoliprintThis is an online tool that generates PDFs from Web pages. Granted, it is not the only tool that does this, but it is easy to use and versatile. People can use it as a bookmarklet, pulling it into the Favorites toolbar of their browser and clicking as needed. Joliprint generates a clear, reader-friendly two-column layout, free of ads and navigation elements, and it does it pretty well. Sometimes it removes too much content, though, such as readers’ comments. If you’d like an alternative, give Web2PDF or Notforest a try.

EntitifierCleaning up text for the Web can be time-consuming and prone to error. But if a client delivers content in Microsoft Word or a similar format, then cleaning it up is a necessary evil if you don’t want to end up with characters that don’t display properly online. Entitifier does the hard work for you. All you have to do is enter HTML or text, and it escapes nasty characters that should be entities. Just don’t enter text with inline PHP or HTML5 tags, because the tool doesn’t work well with them yet.
The Email Address Obfuscation DebateSuperuser has an interesting discussion about email obfuscation, with opinions from a number of users. Included also are different techniques for accomplishing obfuscation, empirical data about its effectiveness and links to other discussions and articles. One interesting technique is to use the obscure unicode-bidi and direction CSS properties and write the email address backwards: for example, moc.elpmaxe@zyx. Plenty of interesting ideas worth learning and discussing. (cc)

Quic[…]

  Often, it’s the little details that turn a good layout into a great design; details such as subtle textures, shading and smooth shapes. Photoshop contains a vast array of tools for embellishing a design, but choosing the right one isn’t always easy. Being the obsessive-compulsives that we are, we’ve conducted a huge range of experiments to determine the benefits and disadvantages of each technique. Here, then, is an obsessive-compulsive’s guide to some frequently used tools and techniques for Web and UI design in Photoshop.
Noise and TexturesSubtle noise or texture on UI elements can look great, but what’s the best way to add it? Our goal is to find the best method that maintains quality when scaled but that is also easy to implement and edit. To find out which is best, we’ll judge each method using the following criteria:
Number of layers used: fewer is better.Ability to scale: if the document is resized, will the effect maintain its quality?Can the noise be on top of the Color and Gradient layer styles?Can the method be used with any texture, not just noise?
1. Bitmap Layer With Noise
Probably the most obvious method for adding texture to a shape is to create a normal bitmap layer, fill it with a color, select Filter → Noise → Add Noise, then apply a mask or Vector Mask to match the element you’re adding noise to.
Using a high amount of noise, setting the layer blending mode to Luminosity and reducing the opacity will yield the most control over the noise with the least disturbance to the underlying layers. A noise setting of 48% gives a high dynamic range without clipping the noise. (Clipping results in higher contrast, which might not be desirable.)
Layers: 2Scales: No, texture will have to be recreated if the document is scaledWorks with Color and Gradient layer styles: YesWorks with any texture: Yes2. Inner Glow Layer Style
Adding an Inner Glow layer style with the source set to center and the size to 0 will let you use the noise slider to add texture to any layer. It’s a good solution, provided you’re not already using the Glow layer style for something else. The noise is added above the Color, Gradient and Pattern layer styles, which is great.
Unfortunately, the noise can only lighten or darken the underlying elements. The previous bitmap layer method can add highlights and shade at once while maintaining the average luminosity, and it looks far better in my opinion.
Layers: 1Scales: Yes, texture will be remade automaticallyWorks with Color and Gradient layer styles: YesWorks with any texture: No3. Smart Object with Filter
Create a Solid Color layer, convert it to a Smart Object, select Filter → Noise → Add Noise, apply a Vector Mask to match your element, set the layer blending mode to Luminosity and reduce the layer’s opacity.
It’s a fairly involved process, but it can accommodate a combination of effects that can be remade if the document gets scaled.
Layers: 2Scales: Yes, texture will be remade automaticallyWorks with Color and Gradient layer styles: YesWorks with any texture: No4. Pattern Overlay Layer Style
Start by creating a noise or repeating pattern in a new document, then choose Edit → Define Pattern. Once you’ve defined the pattern, it will be available in the Pattern Overlay layer style options. As with previous methods, using Luminosity as a blending mode and reducing the opacity to suit it yield great results.
The Pattern layer style is composited below the Color and Gradient styles, ruining an otherwise perfect noise and texture method. However, you can create a second layer that just holds the texture if you need to, or start with a Gradient Fill layer, sidestepping the limitation.
Layers: 1Scales: Yes, but you’ll need to change the Layer style scale to 100% after scalingWorks with Color and Gradient layer styles: No, the pattern appears underneathWorks with any texture: YesWhich Method Is Best?Although a little cumbersome, creating a Gradient Fill layer, adding a Pattern layer style, then creating a Vector Mask seems to be the best method possible. This can be used to create flexible, scalable and editable single-layer UI elements with texture. As a bonus, Gradient Fill layers can be dithered and so also produces the highest quality results (Gradient layer styles cannot be dithered).
We’ve created some examples below and included the source document so that you can see how they were built.

Download the PSD (.zip)
Rounded RectanglesRounded rectangles, or “roundrects” as QuickDraw so fondly calls them, are standard fare on a Web and interface designer’s utility belt. They’re so common that it’s rare for Web pages or apps to not contain a roundrect or two. Unfortunately, pixel-locked rounded rectangles can actually be fairly difficult to draw in Photoshop. (By pixel-locked, I mean that every edge falls on an exact pixel boundary, creating the sharpest object possible.)
Experienced Photoshop users will probably already know one or two ways to draw a roundrect. Hopefully, after reading this article, they’ll also know a couple more, as well as which methods produce pixel-perfect results.
1. Rounded Rectangle Vector ToolPhotoshop’s Rounded Rectangle vector tool appears like the ideal candidate for the task, until you realize that the edges it creates are blurry and inconsistent.

Fortunately, there is a fairly well-hidden option that locks the Rounded Rectangle vector tool’s output to the pixel grid. Excellent.
To enable pixel-locked drawing for the Rounded Rectangle vector tool, check the “Snap to Pixels” option in the Options bar. If you have “Snap to Pixels” turned off, drawing at 100% zoom achieves the same result.

The result is perfect roundrects, every time. The only downside is that the corner radius can’t be altered during or after drawing the shape. If you need a different radius, you’re forced to draw it again. It’s a shame the roundrect tool isn’t like Illustrator in this regard, where the up and down arrow keys increase and decrease the corner radius while drawing.
On the positive side, keeping your objects as vectors means that you’ll be able to resize the document and the corners will take full advantage of any extra resolution. There is one small caveat though: if you resize, you’ll have to do it as an exact multiple, or risk fuzzy non-pixel–locked edges.
If you’re being pedantic about the results, you may notice that the antialiasing on the first half of each corner doesn’t match the second half — you’ll have to look carefully to notice, though. For example, looking at the zoomed corner below, the start of the corner to the apex isn’t identical to the apex to the end of the corner (starting from either side). In practice, that probably won’t create any issues.

2. BlurThe blur method is a bit of a hack that involves creating a selection, blurring it, then increasing the contrast so that you’re left with a sharp mask that’s antialiased nicely.
It’s seven steps in total and is prone to being inaccurate; plus, the radius of the corners can’t be changed on the fly. Applying levels can also be a bit fiddly. One advantage is that different levels settings can be used to obtain different degrees of antialiasing, from incredibly soft to completely aliased.
Create a new layer.Draw a rectangular selection.Enter quick mask (Q).Gaussian blur by half the radius that you’d like for the rounded corners. (For example, a 10-pixel radius would need a 5-pixel blur.)Apply Levels (Command + L), and use about 118 for the black point and 137 for the white point on the input levels.Exit quick mask (Q).Fill selection.
On the positive side, this blur method can be used to quickly create some interesting and organic shapes that would be difficult to draw by hand.

3. CirclesThe circles method is very accurate and easily reproducible, but has a whopping 13 steps. That’s a lot of clicking for just a single roundrect.
Create a new layer.Make a circular selection that is twice as large as the radius you would like (for example, a 10-pixel radius would require a 20×20-pixel circle).Fill the selection.Move the selection right. This can be done quickly by holding down Shift and pressing the right-arrow key a few times.Fill the selection.Move the selection down.Fill the selection.Move the selection left.Fill the selection.Make a rectangular selection that covers the entire vertical span of the roundrect but that starts and ends halfway through the circles at the ends.Fill the selection.Make a rectangular selection that covers the entire horizontal span of the roundrect but that starts and ends halfway through the circles at the ends.Fill the selection.
4. StrokeThe stroke method is very accurate, easily reproducible and has only about four steps, depending on the result you’re after. The corners are a bit sharper than those of the circle method, though. That may be a good thing or a bad thing, depending on your preference.
Create a new layer.Draw a rectangular selection that is smaller than the area you require (smaller by double the radius, if you want to be exact).Fill the selection.Add a stroke as a layer style that is as thick as the corner radius you would like.If you’d like to flatten the object to remove the stroke, keep following the steps below.
Create a new layer.In the Layers palette, select the new layer and the previous layer.Merge layers (Command + E).
It’s possible to automate the flattening with a Photoshop Action. This can also be set up as a function key to speed things up further.
A huge advantage of the stroke method is that it’s dynamic, so the radius can be edited in real time. It can also be used to easily create other rounded shapes, as seen below.

Which Method Is Best?In most cases, using the Rounded Rectangle tool with “Snap to Pixel” turned on will give great results and be the quickest method. If you’d like the ability to change the corner radius without redrawi[…]

  Almost every new client these days wants a mobile version of their website. It’s practically essential after all: one design for the BlackBerry, another for the iPhone, the iPad, netbook, Kindle — and all screen resolutions must be compatible, too. In the next five years, we’ll likely need to design for a number of additional inventions. When will the madness stop? It won’t, of course.
In the field of Web design and development, we’re quickly getting to the point of being unable to keep up with the endless new resolutions and devices. For many websites, creating a website version for each resolution and new device would be impossible, or at least impractical. Should we just suffer the consequences of losing visitors from one device, for the benefit of gaining visitors from another? Or is there another option?
Responsive Web design is the approach that suggests that design and development should respond to the user’s behavior and environment based on screen size, platform and orientation. The practice consists of a mix of flexible grids and layouts, images and an intelligent use of CSS media queries. As the user switches from their laptop to iPad, the website should automatically switch to accommodate for resolution, image size and scripting abilities. In other words, the website should have the technology to automatically respond to the user’s preferences. This would eliminate the need for a different design and development phase for each new gadget on the market.
The Concept Of Responsive Web DesignEthan Marcotte wrote an introductory article about the approach, “Responsive Web Design,” for A List Apart. It stems from the notion of responsive architectural design, whereby a room or space automatically adjusts to the number and flow of people within it:
“Recently, an emergent discipline called “responsive architecture” has begun asking how physical spaces can respond to the presence of people passing through them. Through a combination of embedded robotics and tensile materials, architects are experimenting with art installations and wall structures that bend, flex, and expand as crowds approach them. Motion sensors can be paired with climate control systems to adjust a room’s temperature and ambient lighting as it fills with people. Companies have already produced “smart glass technology” that can automatically become opaque when a room’s occupants reach a certain density threshold, giving them an additional layer of privacy.”
Transplant this discipline onto Web design, and we have a similar yet whole new idea. Why should we create a custom Web design for each group of users; after all, architects don’t design a building for each group size and type that passes through it? Like responsive architecture, Web design should automatically adjust. It shouldn’t require countless custom-made solutions for each new category of users.
Obviously, we can’t use motion sensors and robotics to accomplish this the way a building would. Responsive Web design requires a more abstract way of thinking. However, some ideas are already being practiced: fluid layouts, media queries and scripts that can reformat Web pages and mark-up effortlessly (or automatically).
But responsive Web design is not only about adjustable screen resolutions and automatically resizable images, but rather about a whole new way of thinking about design. Let’s talk about all of these features, plus additional ideas in the making.Adjusting Screen ResolutionWith more devices come varying screen resolutions, definitions and orientations. New devices with new screen sizes are being developed every day, and each of these devices may be able to handle variations in size, functionality and even color. Some are in landscape, others in portrait, still others even completely square. As we know from the rising popularity of the iPhone, iPad and advanced smartphones, many new devices are able to switch from portrait to landscape at the user’s whim. How is one to design for these situations?

In addition to designing for both landscape and portrait (and enabling those orientations to possibly switch in an instant upon page load), we must consider the hundreds of different screen sizes. Yes, it is possible to group them into major categories, design for each of them, and make each design as flexible as necessary. But that can be overwhelming, and who knows what the usage figures will be in five years? Besides, many users do not maximize their browsers, which itself leaves far too much room for variety among screen sizes.
Morten Hjerde and a few of his colleagues identified statistics on about 400 devices sold between 2005 and 2008. Below are some of the most common:

Since then even more devices have come out. It’s obvious that we can’t keep creating custom solutions for each one. So, how do we deal with the situation?
Part of the Solution: Flexible EverythingA few years ago, when flexible layouts were almost a “luxury” for websites, the only things that were flexible in a design were the layout columns (structural elements) and the text. Images could easily break layouts, and even flexible structural elements broke a layout’s form when pushed enough. Flexible designs weren’t really that flexible; they could give or take a few hundred pixels, but they often couldn’t adjust from a large computer screen to a netbook.
Now we can make things more flexible. Images can be automatically adjusted, and we have workarounds so that layouts never break (although they may become squished and illegible in the process). While it’s not a complete fix, the solution gives us far more options. It’s perfect for devices that switch from portrait orientation to landscape in an instant or for when users switch from a large computer screen to an iPad.
In Ethan Marcotte’s article, he created a sample Web design that features this better flexible layout:

The entire design is a lovely mix of fluid grids, fluid images and smart mark-up where needed. Creating fluid grids is fairly common practice, and there are a number of techniques for creating fluid images:
Hiding and Revealing Portions of ImagesCreating Sliding Composite ImagesForeground Images That Scale With the LayoutFor more information on creating fluid websites, be sure to look at the book “Flexible Web Design: Creating Liquid and Elastic Layouts with CSS” by Zoe Mickley Gillenwater, and download the sample chapter “Creating Flexible Images.” In addition, Zoe provides the following extensive list of tutorials, resources, inspiration and best practices on creating flexible grids and layouts: “Essential Resources for Creating Liquid and Elastic Layouts.”
While from a technical perspective this is all easily possible, it’s not just about plugging these features in and being done. Look at the logo in this design, for example:

If resized too small, the image would appear to be of low quality, but keeping the name of the website visible and not cropping it off was important. So, the image is divided into two: one (of the illustration) set as a background, to be cropped and to maintain its size, and the other (of the name) resized proportionally.

<h1 id="logo"><a href="#"><img src="site/logo.png" alt="The Baker Street Inquirer" /></a></h1>
Above, the h1 element holds the illustration as a background, and the image is aligned according to the container’s background (the heading).
This is just one example of the kind of thinking that makes responsive Web design truly effective. But even with smart fixes like this, a layout can become too narrow or short to look right. In the logo example above (although it works), the ideal situation would be to not crop half of the illustration or to keep the logo from being so small that it becomes illegible and “floats” up.Flexible ImagesOne major problem that needs to be solved with responsive Web design is working with images. There are a number of techniques to resize images proportionately, and many are easily done. The most popular option, noted in Ethan Marcotte’s article on fluid images but first experimented with by Richard Rutter, is to use CSS’s max-width for an easy fix.

img { max-width: 100%; }
As long as no other width-based image styles override this rule, every image will load in its original size, unless the viewing area becomes narrower than the image’s original width. The maximum width of the image is set to 100% of the screen or browser width, so when that 100% becomes narrower, so does the image. Essentially, as Jason Grigsby noted, “The idea behind fluid images is that you deliver images at the maximum size they will be used at. You don’t declare the height and width in your code, but instead let the browser resize the images as needed while using CSS to guide their relative size”. It’s a great and simple technique to resize images beautifully.
Note that max-width is not supported in IE, but a good use of width: 100% would solve the problem neatly in an IE-specific style sheet. One more issue is that when an image is resized too small in some older browsers in Windows, the rendering isn’t as clear as it ought to be. There is a JavaScript to fix this issue, though, found in Ethan Marcotte’s article.
While the above is a great quick fix and good start to responsive images, image resolution and download times should be the primary considerations. While resizing an image for mobile devices can be very simple, if the original image size is meant for large devices, it could significantly slow download times and take up space unnecessarily.
Filament Group’s Responsive ImagesThis technique, presented by the Filament Group, takes this issue into consideration and not only resizes images proportionately, but shrinks image resolution on smaller devices, so very large images don’t waste space unnecessarily on small screens. Check out the demo page here.

This technique requires a few fil[…]

useful web design principles