Use of mobile email clients is set to surpass desktop and webmail client usage by July, according to the results of a recent study by our friends at Return Path. After examining data from over 90 email clients, amounting for more than 130 million data points over a 6 month period, Return Path found that while webmail clients overall are on a slow decline, mobile views increased by 82.4% over the same period (March ‘11 – March ‘12). Mobile devices currently claim 16% of overall email client market share, with 85% of mobile email opens occurring on an Apple iOS device. This is comparable to our earlier findings.

Return Path also found that there is an uptick in mobile email readership during the weekend, which can be attributed to email recipients switching from the desktop to a smartphone outside of office hours. Conversely, it’s at its lowest on a Wednesday, when presumably folks are at their most busy tackling their Outlook, or OSX Mail inboxes.

The implications for email senders like you and I are fairly clear. As Tom at Return Path states in his summary:

“… those that aren’t tracking which device their subscribers are reading their emails on, or optimizing their emails or websites for mobile devices stand to lose out. A poor user experience could mean no response, no action, or plainly put, no ROI.”
If you aren’t already optimizing your emails for mobile, now is the time. To set you on the right path, we’ve got a practical primer on email design, not to mention a neat template builder which can whip together mobile-ready campaigns in a matter of minutes.

So there you go. We have real problems, for both the browser vendors and the users.

If it isn’t already clear, I’m not a fan of this solution, and we’ve finally arrived at the crux of why: It is a short-sighted solution, primarily for the benefit of browser vendors, which contradicts an existing standard.

I see this all the time on signup forms and it makes me wonder: why did the designer put that there? My best guess is that they were trying to relieve some anxiety the customer might have. Like, “don’t worry, it’ll be over soon!”

I’ll bet that the time-to-signup isn’t an important anxiety factor. When’s the last time you shopped for a software product under intense time pressure, where every second counts?

When I evaluate web products I often feel uncertain about what will happen after the quick signup. Sure it takes seconds to create an account, but then what?

It looks like Google has finally pulled the plug on the old GMail UI. There’s no more “revert to the old look temporarily” button, so I guess they’re finally forcing us laggards onto the new theme. I’ve been a mostly happy GMail user since the very early days, but I strongly dislike the new UI.

As far as i can tell, this redesign is just change for the sake of change. I can’t see a single improvement! But I can spot three distinct un-provements *:

I’ve worked at OMGPOP for almost four years now and have seen it transform from a dating company, a games company and then find its footing in mobile games. We’ve done tons of stuff, tried many different technologies and business plans.

I’ve always seen us as the little guy that can use fast prototyping, agile development, and the latest tech in order to gain an advantage. Also, being in the game world means you get to test out a lot of different ideas to see what sticks. In my time here, I’ve made avatar systems, a text adventure game engine, a full-featured mysql sharding library, a multiplayer real-time platformer built on our javascript game engine, an AIM bot system, a whole slew of chat room games powered by a bot framework we created, and tons more.

On the backend of all these games is a tiny systems team of three people — myself, Christopher Holt and Manchul Park. We built everything from scratch and thought we had our approach to building and scaling backend systems down pretty well. That was until Draw Something came along.

Over the last couple years HTML5 and CSS3 have rocked our worlds and the way we approach common website issues. Every few days it seems there is some new fangled snippet or approach that is a game changer. Today might just be another one of those days (kind of).

One little known feature of HTML5 is Scoped CSS. It’s an attribute for style blocks that may change the way we tackle certain styling challenges in the future.

And that’s how we get a hexagon in CSS. The 30:52 ratio in the border widths is approximately 1:√3 which is ratio required for a hexagon.

jQuery Credit Card Validator detects and validates credit card numbers. It’ll tell you the detected credit card type and whether the number length and Luhn checksum are valid for the type of card.

Are the quotes in font-family: 'Comic Sans MS' required, or not?

According to the the CSS validator, the quotes are required in this case because the font family name contains spaces:

Family names containing whitespace should be quoted. If quoting is omitted, any whitespace characters before and after the name are ignored and any sequence of whitespace characters inside the name is converted to a single space.

However, this is an error in the CSS validator. The warning message suggests that all font family names containing whitespace should be quoted, which is simply not true. font-family: Comic Sans MS (without quotes) is perfectly valid CSS that works the way you’d expect it to.

In reality, it’s a bit more complex. To grok the rules on font family names, we need to understand the difference between CSS strings and identifiers first.

There isn’t a lot of information to be found about the :not() selector. The specifications only offer 3 lines of text and a couple of examples. So lets see what it can do!

The Specification

The negation pseudo-class, :not(X), is a functional notation taking a simple selector […] as an argument. It represents an element that is not represented by the argument.

What it says here, is that a selector with a :not() in it will match all elements that do not match what’s between the parenthesis.

A simple selector is a term used in the specifications. A simple selector is: a single element, attribute selector, class, id or pseude-class.

Above all else, you should strive to make pagination irrelevant because the user never has to look at more than a few items to find what they need . That’s why I suspect Google hasn’t done much with this technique in their core search result pages; if they aren’t providing great results on page 1, it doesn’t really matter what kind of pagination they use because they’re not going to be in business much longer. Take that lesson to heart: first present a relevant list of items to the user in a sensible order before worrying about your pagination scheme.

Rainbow is a code syntax highlighting library written in Javascript.
It was designed to be lightweight (1.2kb), easy to use, and extendable.
It is completely themable via CSS.

I’m not the first person to make this point, but there is an important lesson that I hope we take from this relatively minor tragedy: The aggregation of individual data does not a commons make.

Click on the drop downs above. That’s done all in CSS; no kind of javascript whatsoever. Pretty cool, eh? It’s a fun use of the :active and :hover selectors. You can browse the source code for the demo above here. If you’d like a more in-depth tutorial of how to accomplish this, continue reading.

Paging Element for Twitter Bootstrap and CakePHP 2.0+

To be honest, I’ve never really played around with inline-block too much before today, but I’ve been seeing more and more suggestions in the comments that I explore this method as an alternative to floats so I thought I’d take the advice. I was hopeful going into it that it was indeed some magic, no-hassle way around floats, but in truth it really isn’t. There are still several unexpected behaviors that you have to know about and respond to, resulting in some hacky code much like we often see with float clearing fixes.

To be fair though, it is in fact a pretty simple way to accomplish float-like layouts. More importantly, the CSS that you have to implement to make sure it’s cross-browser compatible is briefer than even the popular micro clearfix hack from Nicolas Gallagher. This may make it a better way to go for many projects.

Ultimately, I think I will in fact begin adding this method to my bag of tricks. I suspect that certain times will arise when floats aren’t ideal (example: right floats render everything in reverse) and this will be a great alternative to have in those situations.

What do you think? Is inline-block a good alternative to floats? What situations can you think of where one clearly has an advantage over the other?

But there is one group that’s about to smack headlong into a reckoning, and that’s the publishers who’ve been using several popular device-specific app platforms to churn out print-like periodicals for the iPad.

The iOS apps created by systems from Adobe, Woodwing, Mag , and others—the platforms used by the bulk of traditional publishers to crank out their iPad magazines right now—are essentially collections of PDFs or JPGs exported out of programs like InDesign and bound inside a wrapper application. Basically, they boil down to pictures of layouts, photos, and text. Rather than create new rendering engines from scratch, these platforms rely on existing desktop applications to do that work, then package up the output. While faster to develop, this has negative consequences for the end user. You can’t resize text. File sizes are untenably large.

Now apply the volumetric increase in pixels that’s upon us, and it’s easy to see why the size of an average iPad magazine issue is about to go through the roof. Very roughly speaking, a single page of text built this way and saved using light JPG compression weighs in at around 150-350kB. At the new Retina dimensions these same app platforms will generate pages on the order of 2MB. That’s per page .

This isn’t just a question of the bandwidth these apps will devour while downloading issues, it’s also a question of whether or not a user can actually store these things anywhere. The screen volume may have quadrupled, but the new iPad still ships with the same three memory options: 16, 32, and 64GB. As I noted on Twitter , the growth rate of the potential payload size just outgrew the growth rate of device storage exponentially. Some publishers may be implicitly backing themselves into maintaining cloud-based storage for their users, since there’s no way the average reader could keep more than just a few of these things on their device at one time. (Remember, there’s lots of other things vying for that space.)

The question now before platform makers is whether they will begin exploring alternatives or will pass the pain along to users in the form of unsustainably large issue sizes. The three likely options on the table for them are: 1) Do nothing; 2) Start building dynamic layout and text rendering engines; or 3) Begin basing their platforms on Web technologies.

Doing nothing simply won’t cut it, as either they or the user will begin encountering problems too obvious to ignore (though I strongly suspect we’ll see it being done anyway for at least a little while). Building your own layout engine and the runtime environment to display it can be an extremely complicated endeavor. Just ask a browser maker…

And that brings us to the third option. An existing markup and layout technology that’s widely deployed, supported, and understood. That’s the Web. This doesn’t mean they necessarily have to shift to entirely Web-based delivery, either. Many of the most successful iOS (and Android) apps are actually hybrid apps in disguise, utilizing modified WebKit views to display information. Adobe has clearly started laying some groundwork for this . Why reinvent the wheel?

Should you say who wrote the content on your site? Sometimes yes (for credibility), sometimes no (for brevity). And rarely in mobile.

A redesign, of course. Not just a few tweaks, mind you, but a reinvention, taking your tired old website and bringing it into the modern day.

It’ll have snazzy vector paths, cute cartoon scenes, jQuery carousels, full-page high-resolution background photos, the works. By the time you’re done, you’ll have a breathtaking design that cost you a fortune to create—but you shouldn’t hesitate, because it’ll be worth it.

Why?

Well, check out the reasons!

1. Sites with images look good, and people enjoy eye-candy, so they’re more likely to browse around

2. Images are attention-grabbing, so new visitors won’t hit the back button

3. An eye-catching site impresses prospects, and impressed prospects are more likely to buy

4. Flashy images show that you’re hip and modern, and people trust hip and modern companies—so you get more sales

5. In summary, for every bit of eye-candy on your site, your sales will increase an average of 16.5%*

Wrong, wrong, wrong!
Many years ago, advertising legend David Ogilvy commissioned research into the use of images. He wanted to be sure that when he wrote ads, the images in them would increase response rates. The prevailing wisdom was that any kind of image would attract attention, and therefore get people reading. But Ogilvy wasn’t so sure.

What he discovered from testing various kinds and placements of images was quite different to the popular opinion of designers—then and now:

Some websites now contain 'responsive images'. These scale (or crop) depending upon your screen's viewing area, so the image sizes remain appropriate whether you're looking at the website on a mobile phone, or on a huge flat screen monitor.

This is an example of responsive text.

The amount of textual detail scales relative to your screen size.

The effect is achieved using simple HTML class names and CSS media queries which show or hide the content depending upon the current screen width.

The translate attribute is an enumerated attribute that is used to specify whether an element's attribute values and the values of its Text node children are to be translated when the page is localized, or whether to leave them unchanged.

The attribute's keywords are the empty string, yes, and no. The empty string and the yes keyword map to the yes state. The no keyword maps to the no state. In addition, there is a third state, the inherit state, which is the missing value default (and the invalid value default).

Tinycon allows the addition of alert bubbles and changing the favicon image. Tinycon gracefully falls back to a number in title approach for browers that don't support canvas or dynamic favicons.
Alerts in the favicon allow users to pin a tab and easily see if their attention is needed.

CSS is a language for describing the rendering of structured documents (such as HTML and XML) on screen, on paper, in speech, etc. This module contains the features of CSS level 3 relating to the hierarchical nesting of style rules. It includes and extends the functionality of CSS level 2 [CSS21], which builds on CSS level 1 [CSS1]. The main extension compared to level 2 is the ability to nest a style rule within another rule, allowing greater modularisation and readibility of CSS documents.

We already have an element for comments and other self-contained document
modules, namely, <article>. The spec in fact specifically calls out an
<article> nested in another <article> as being, by definition, a comment
on the outer <article>.

Think about a product’s life span. When something new is released to the public—and this is especially true of software—it’s hardly set in stone. You get feedback from customers and make modifications. You add features, refine existing ones, and make things better over time. If you really listen and do it right, the product earns its success.

But paradoxically, that success makes it harder to change. As time goes by, people get used to things the way they are. And the more someone is accustomed to doing something a certain way, the harder it is to ask him or her to change. When it comes to introducing ideas, the years have a way of boxing you in.

And that’s where we found ourselves with Basecamp—a successful product that was tough to change in major ways. Of course, it has evolved; over the years, we’ve made thousands of incremental improvements to the software. But now we have ideas that are more revolutionary than incremental. We think these ideas will dramatically enhance Basecamp’s speed, power, and flexibility.

Website outages and blackouts the right way
tl;dr: Use a 503 HTTP status code but read on for important details.

Sometimes webmasters want to take their site offline for a day or so, perhaps for server maintenance or as political protest. We’re currently seeing some recommendations being made about how to do this that have a high chance of hurting how Google sees these websites and so we wanted to give you a quick how-to guide based on our current recommendations.

At that point I suspended this tiny hallway test and I asked her what she thought of this system. She found the site to be a bit unintuitive, but above all felt like she didn’t know how to get unstuck when she made an error.

Now, before you all jump in and tell me that my friend is dumb, that she’ll never be a programmer, or that you can’t idiot-proof a design, keep in mind the very point of this post.

Usability is hard because real users use our UIs and software in different and unexpected ways. Codecamedy did a very good job, but even they left plenty of room for improvement. As web developers it’s our duty to give usability and user experience a significant amount of attention. The UI is the software to the end user.

Fbootstrapp is a toolkit designed to kickstart development of facebook iframe apps in both relevant sizes. It includes base CSS and HTML for typography, forms, buttons, tables, grids, navigation, and more, styled in the typical facebook look and feel.

Powered by the power of Lettering.js and inspiration drawn on Kerningjs.com, jKerny gives you the ability to use brand new pseudo-selectors (well ok... they aren't W3C valid!)

The jQuery plugin for doing cool scrolly stuff

So, no, I guess APIs and languages shouldn’t be as simple as possible just for the sake of it. They should represent the functionality they seek to disguise.

I never engineered a computer architecture or wrote an operating system. No software developed by my teams was ever considered “to be one of the most successful computers in history, influencing computer design for years to come” ; so when someone on his position writes something I am eager to read it; even if it is not directly applicable to my current situation.

A web and iPhone application for copying the ‘hidden’ characters that comes with the computer’s typefaces, to be pasted into emails, tweets, text documents, forums and whatever else you might need to spice up with an extra ♔, ฿ or, ❒.

A jQuery plugin which enables HTML5 placeholder behavior for browsers that aren’t trying hard enough yet

Across the web, you’ll see a range of sites that feature calculators for working out things like loan repayments, mortgage rates, tax, insurance, and more. Until now, we’ve had no way of semantically marking up the result of those calculations. Enter: the <output> element! In this article, we’ll show you <output> and some related JavaScript tricks. Let’s get cracking.

CSS3 Generator

Ultimate CSS Gradient Generator
A powerful Photoshop-like CSS gradient editor from ColorZilla.

Build a grid

From reputable news organizations to gossip magazines, everything is moving online. And to keep the flow of information going, content providers need profits. Everyone knows heaping revenues lie in advertising.

You might have noticed the adverts beside our posts here, on The Next Web. The odds are, you’re accustomed to being pitched to, and understand that free services like news have to pay writers somehow. But Ads can be done the right way or the wrong way.

Intrusive, auto-playing videos, gigantic banners that hide content below the fold and “Click here to continue” pages are some examples of what you are about to see.

CSS3 Social Sign-in Buttons with icons. Small and large sizes.

jQuery Plugin for creating image galleries that scale to fit their container.

That’s right, version 1.0 is out! After more than a year of refinements, we now have a rock solid release.

When we first launched this site back in the summer of 2010, we had a few concept sketches and some very ambitions goals: to create an elegant HTML5-based user interface library for the jQuery community designed to work on all popular mobile platforms. We are built on the strengths of jQuery core and jQuery UI and strive to make mobile development efficient, accessible and maybe even a bit fun.

To reach the broadest possible audience,  we decided from the start to make the framework work on every popular mobile, tablet, e-reader and even desktop platforms by embracing HTML5 and responsive design techniques. A tall order, but we’re happy to announce that we’ve achieved this goal and now support all our target platforms as of 1.0. By using a progressive enhancement approach, even less capable devices can still access the content and functionality of a jQuery Mobile site. This broad compatibility gives you the ability to reach many billions of people.

DBi handles all the work of creating an iOS or Safari WebSQL database and manages local/session storages.

DBi creates, tables, indices, triggers & views and populates the tables all from a single JSON file that's outputted from DBi.

Super-smooth CSS3 transformations and transitions for jQuery
jQuery Transit is a plugin for to help you do CSS transformations and transitions in jQuery.

Full Reference: http://docs.recurly.com/recurlyjs/reference/

Recurly.js is an open-source Javascript library for creating great looking credit card forms to securely create subscriptions, one-time transactions, and update billing information using Recurly. The library is designed to create fully customizable order forms while minimizing your PCI compliance scope.

This library depends on jQuery 1.5.2+. A future version may be framework agnostic.

The same vertical distance is covered, but now, since both blocks are perfect squares, we have related horizontal distance which helps you see how much bigger the difference is.

Why not just say 24px vs 35px? Because I want to point out the physical difference, not the exact number of pixels. If we’re just talking numbers then it’s easy to assume 24px or 35px is right. But maybe the final size is 27px or 31px. I don’t want to get stuck on numbers when I provide feedback like this. The final number isn’t important as long as it’s the same (and it looks right).

And so I put my resources where my mouth is. As the former lead designer for Google Reader, I offer my services to Google, rejoining for a three month contract in order to restore and enhance the utility of Google Reader, while keeping it in line with Google’s new visual standards requirements. I will put my current projects on hold to ensure that Google Reader keeps its place as the premier news reader, and raises the bar of what a social newsreader can be.

"Pre-ticked" boxes on shopping websites will be banned in European Union states under newly approved legislation.

EU ministers meeting in Luxembourg have passed a set of rules aimed at strengthening consumer rights, which the EU parliament backed in June.

They mean online traders will have to disclose the total cost of a product - including fees - and customers will have to actively opt-in to extras.

Member countries will have two years to implement the rules nationally.

Once upon a time, mobile devices were primarily used for calling other people. That was long ago and since then, we've graduated to using our iPhones and Androids primarily to play Angry Birds. Nonetheless, voice calling still has its place in the world.

There are loads of businesses that rely on phone calls to make their bread-and-butter - from Thai take-out joints, to your local salon. Perhaps even you and your clients fit into this category, too!

In this post, we're going to look at how you can get your subscribers to place calls from an HTML email newsletter received in their desktop, web or mobile email client. You heard it - we're not talking about maximizing click-throughs, but call-throughs. Featured is an example HTML email newsletter (pictured) which you can download, adapt and use to learn more about this technique.

Adobe has entered an agreement to acquire Nitobi, the startup behind PhoneGap. Alongside news of the acquisition, Adobe and Nitobi have jointly announced plans to donate the PhoneGap project to the Apache Software Foundation.

PhoneGap is an open source mobile development framework for building applications with standards-based Web technologies. The project provides a cross-platform Web runtime that allows application developers to reach multiple mobile operating systems with a single code base. It includes a custom API stack that enables platform integration and exposes device capabilities.

The PhoneGap APIs are generalized so that the same code can be used across multiple operating systems for tasks like accessing the camera or addressbook. The goal of PhoneGap is to make it possible for local Web applications to have the same functionality as native software. The framework currently supports iOS, Android, the Blackberry OS, webOS, Symbian, and Bada—though not all of the features are supported on every platform.

PhoneGap applications can be distributed through the conventional application stores of the various mobile software platforms—it fully conforms with the rules and policies set by the platform vendors. In addition to developing PhoneGap, Nitobi has also created a hosted build service that can automatically generate packages for the various platforms.

Adobe's AIR software was originally conceived as a cross-platform Web runtime in much the same vein as PhoneGap, but the focus of the product has narrowed considerably in recent years. The mobile versions of AIR, for example, only supports Flash. Adobe intends to embrace PhoneGap for building applications with Web technologies while continuing to develop AIR as a solution for deploying Flash content—the two runtimes can complement each other instead of competing.

Adobe's historically solipsistic view of the Web and the vitriol that certain employees of the company have directed towards advancements in Web standards raise some questions about how the company will proceed with PhoneGap. Fortunately, it looks like Adobe has good plans for the open source project.

Just a few moments ago, Adobe’s CTO Kevin Lynch took the stage at their annual MAX conference and explained the company’s Creative Cloud strategy. Part of that announcement is very big news for us: Typekit has been acquired by Adobe.

We are thrilled. There honestly is no better place for us to continue building our platform. But perhaps even more significantly, this represents a huge step forward in bringing fonts to the web.

BluCSS is a CSS framework designed with ease of use and simplicity in mind. It is specifically made so that when you're working on your next project, you don't have to worry about the essentials. With BluCSS, you can be up and running in less than a minute.

If you do the design first and the copy last, you lose. If you do the copy first and the design second, you stand a much better chance at succeeding with both.

Ideal Forms is a small framework to build powerful and beautiful forms for the web.
It's very easy to use and requires minimal html syntax.
Absolutely everything is stylable with css, no images needed.
Support for IE7+, Firefox 3.5+, Chrome 4+, Safari 3.1+ and Opera 11+.
Degrades gracefully with javascript disabled.

Visit http://www.jqidealforms.com for more info.

Swiffy converts Flash SWF files to HTML5, allowing you to reuse Flash content on devices without a Flash player (such as iPhones and iPads).
Swiffy currently supports a subset of SWF 8 and ActionScript 2.0, and the output works in all Webkit browsers such as Chrome and Mobile Safari. If possible, exporting your Flash animation as a SWF 5 file might give better results.

No longer must your rainbow dividers be images slowing down your computer! Make them hardware accelerated!

I'm afraid Firefox doesn't support printing web fonts, so there's no workaround for this.

A lightweight, easy-to-use jQuery plugin for fluid width video embeds.

FitVids automates the Intrinsic Ratio Method by Thierry Koblentz to achieve fluid width videos in your responsive web design.

Rounded corners are now trivially easy to achieve via border-radius. But that only allows us to cut into the shape. What if we want to connect a shape to another with a rounded outward corner.

steps() is a relatively new addition to the CSS3 animations module. Instead of interpolating the values smoothly, it allows us to define the number of “frames” precisely. So I used it to create headers that have the well-known animated “typing effect”:

Cabin is a super light, super modular CSS framework that allows you to add extensions when you need them. Download it now.

Google launched its Chrome Web browser on September 1, 2008—three years ago today. In the time since its debut, Google's Web browser has attracted a considerable following and influenced other browser vendors. To celebrate the anniversary, Google has published an interactive HTML5 infographic that presents the history of the major Web browsers and Web standards.

Chrome's contributions to the Web and browser design are significant. Google set the pace of development for modern browsers by being the first browser vendor to adopt a radically shorter development cycle and a release management strategy that emphasizes fast-paced incremental improvement. Chrome's transparent update system and channel-based prerelease distribution model are being adopted by Firefox and could eventually be picked up by other browser vendors.

Chrome's distinctive minimalist design has also changed the way that browser vendors think about usability. Chrome's approach to paring down the interface and offering a more streamlined user experience has been embraced by other browsers. Google took the lead on some controversial moves, like not displaying "http" in the location bar.

The technical influence of Chrome can even be felt outside of the browser ecosystem. The performance of Chrome's sophisticated V8 JavaScript engine and the ease with which it can be embedded in other software have led to its adoption in a range of other environments. For example, V8 was used to produce Node.js, a server-side JavaScript runtime that is popularizing the use of JavaScript for backend Web development.

Although Chrome has come a long way, the browser still lags behind its competitors in some key ways. When we first reviewed Chrome in 2008, one of our biggest gripes with the user interface was the lack of tab overflow handling. After three years, this issue still hasn't been fixed. Chrome's user interface for browsing history is another major weak area relative to other browsers. History autocompletion in the Omnibox is also quite limited compared to Firefox's AwesomeBar.

Despite the limitations, Chrome's audience has grown explosively since its 2008 launch. According to statistics from StatCounter, the browser's marketshare hit 10 percent last year and continued growing to 23 percent, as of this month. It's become an important part of Google's product landscape, serving as the central pillar of the company's ambitious Chrome OS operating system.

After three great years of innovation and raising the bar, Chrome's future looks bright.

For days, our inboxes have been filled with tips and screenshots about Amazon.com’s redesign, which offers a cleaned up Amazon homepage, without the old site’s iconic blue and orange navigation. Instead, the new site features a much bigger search bar, bigger buttons, and less clutter – all changes that practically scream “tablet-optimized!”

The changes, of course, hint that Amazon’s long-rumored Android tablet is right around the corner. The site overhaul is being rolled out just prior to the tablet’s launch, or goes the current speculation.

Well, at least we now know when the redesign’s rollout will be complete: this month.

Zoom in on images or content

Starkers is a bare-bones WordPress theme created to act as a starting point for the theme designer.

Free of all style, presentational elements, and non-semantic markup, Starkers is the perfect ‘blank slate’ for your projects, as it’s a stripped-back version of the ‘Twenty Ten’ theme that ships with WordPress.

Best of all: it’s free and fully GPL-licensed, so you can use it for whatever you like  —  even your commercial projects.

Drop-shadows are easy enough to create using pseudo-elements. It’s a nice and robust way to progressively enhance a design. This post is a summary of the technique and some of the possible appearances.

Although multimedia has its role on the Web, current Flash technology tends to discourage usability for three reasons: it makes bad design more likely, it breaks with the Web's fundamental interaction style, and it consumes resources that would be better spent enhancing a site's core value.

Christian Heilmann had an interesting CSS predicament the other day. The idea was to make header tags rotated 90-degrees and align along the left of a blog of content rather than at the top.

I’ve been thinking a lot about the future of webOS, and have decided it does have one, maybe even a glorious one, provided the new owner or licensee reaches out to web developers, as Palm should have done back in 2009.

So here are twelve steps the new owner should take in order to get webOS to thrive.

Data is an invaluable tool for web designers who are making decisions about the user experience. A/B tests, or split tests, are one of the easiest ways to measure the effect of different design, content, or functionality. A/B tests allow you to create high-performing user experience elements that you can implement across your site. But it’s important to make sure you reach statistically significant results and avoid red herrings. Let’s talk about how to do that.

The idea of "CSS Tabs" has been around for a long time. If you Google it, a lot of what you get is styled CSS tabs, but less stuff on the building an actually functional tabbed area. At least, functional in the sense as we think of tabbed areas today: click a tab, see a new content area with no page refresh.

Tackling functional CSS tabs has less of a deep history. Brad Kemper was messing around with it in 2008 trying to utilize the :checked pseudo selector with radio buttons and adjacent sibling combinators. This is a really cool technique that can be utilized to do things like an expand/contract tree style menu or visually replace form elements with graphics (pioneered by Ryan Seddon).

I personally tried messing with functional tabs a while back, and came up with seven different ways to do it. Most of them centered around the use of the :target pseudo class selector and most of those techniques sucked. One was OK. They all had one major flaw and that was that URL hashes needed to be used, which "jumps" the page down to the element with the matching ID, and that is totally unexpected, jerky, and just a bad overall experience.

Working with the radio-button/:checked technique is way better, but there was a long-standing WebKit bug that prevented pseudo class selectors and adjacent sibling combinators from working together. Good news! That's fixed as of stable browser releases Safari 5.1 and Chrome 13.

So let's get this thing done the :checked way, which I think is the cleanest way to do it for now and for the next few years.

It turns out that Sparrow uses Gravatar and Facebook to source the avatars of email senders in the message list. This means that Sparrow runs each sender's email address against Gravatar's database of email addresses and images and the email recipient's Facebook friends list (if enabled). If a match is found, then an avatar is displayed next to the sender's name.

If you or your clients have been in business for a while now, chances are that you already have a Gravatar set up, as well as a Facebook page. If not, it takes only a moment to sign up for a Gravatar account and upload an image to link to the email address you send from. From there on in, your campaigns will be instantly recognizable in Sparrow inboxes.

Gravatar is widely used on blogs and social sites - not to mention, in worldview and the recently-updated subscriber snapshot that can be found in your account.

A spinning activity indicator

Just for kicks I wanted to see if I could make a row of images animate across a page and repeat indefinitely. Turns out it's really not that hard. The way I did it was to make one big long graphic where the first part and the last part are visually identical.

Bootstrap is a toolkit from Twitter designed to kickstart development of webapps and sites.
It includes base CSS and HTML for typography, forms, buttons, tables, grids, navigation, and more.

Create websites as easily as you create layouts for print. You can design and publish original HTML pages to the latest web standards without writing code. Now in beta, Muse makes it a snap to produce unique, professional websites.

The jFontSize plugin was developed to facilitate the process of creating the famous buttons A+ and A-, which alter the font size on sites with very large texts, such as blogs, journals, tutorials, etc.

This tool is also used to increase the accessibility of sites, helping people who have visual problems to see better content

Chosen is a library for making long, unwieldy select boxes more friendly.

Placeholder Images for every case. Webdesign or Print. It's simple and absolutely free! Just put the custom url in your code like this:<img src="http://lorempixum.com/400/200" />to get your FPO / dummy image.