IN MAKING the move to responsive web design, one of the potential hurdles is the rather awkward maths for calculating the percentage-based widths necessary for fluid layouts. If, for example, you’re designing with a 960px grid in Photoshop and you have six columns, each 140px wide, you divide 140 by 960 to get your percentage-based width: 14.583333%. Now, I don’t know about you, but numbers like that look a little scary. It doesn’t matter that there are great calculation tools built into TextMate to do the maths for you; the point is that the final figure looks like an arbitrary number with no immediate relation to either the container’s pixel width (960) or the element’s pixel width (140).”

“Compare that to a container that has a width of 1000px. 1000 is a nice, easy, round number. Dividing by 1000 results in clean percentages and better still, dividing by 1000 is something we can do in our heads: just remove the zero. A 140px column inside a 1000px container is 14%. A 500px column in a 1000px container is 50%. 320px is 32%. Easy!”

A better Photoshop grid for responsive web design » Blog » Elliot Jay Stocks.

IF YOU’VE spent any time building responsive websites with fluid grids, you will have encountered the shock of seeing your beautiful portrait layout distort when viewed in landscape mode (or vice-versa.)

This happens because whilst the layout and embedded content (images, video etc) are sized in relation to the pixel width of the viewport, the typography is not. And whilst it isn’t too difficult to design with enough affordance for the variation caused by the iPad’s 4:3 aspect ratio – most (if not all) Android tablets have 16:9 displays. These screens make the orientation difference even more pronounced.

Responsive News – Fluid grids, orientation & resolution independence.

Aaron Gustafson (@aarongustafson), author of Adaptive Web Design (the clearest, most beautiful explanation of progressive enhancement I’ve ever read) and nearly a dozen brilliant A List Apart articles, has been a technical editor at A List Apart for six exciting and formative years.

Daniel Mall (@danielmall) has written three great ALA articles and served as A List Apart technical editor almost as long as Aaron.

Both gentlemen have had a profound and lasting impact on the nature and quality of A List Apart’s content. With the publication of today’s ALA issue, both gentlemen move on.

Aaron is the founder of Web Standards Sherpa (“journeying towards best web practices”) and Easy Designs LLC; co-founder of Retreats 4 Geeks; and manager of The Web Standards Project.

Dan is a former interactive designer for Happy Cog’s Philadelphia studio, former design director at Big Spaceship in Brooklyn, co-founder of Typedia and swfIR, and singer/keyboard player for contemporary-Christian band Four24. I can’t tell you what he is doing next — he has sworn me to secrecy — but trust me, it will be awesome.

Over a long career marked by extraordinary collaborators, Aaron and Dan are two of the smartest, and most talented people I’ve had the pleasure to work with. They are also friends. This isn’t goodbye, fellas.

JOINING US today as technical editor is Mat Marquis (@wilto). He marks his entrance into A List Apart’s world via this morning’s stunning article, Responsive Images: How They Almost Worked and What We Need.

Mat is a designer-slash-developer working at Filament Group in Boston. Mat is a member of the jQuery Mobile team, an active member of the open source community, and enjoys a complicated relationship with the now-defunct HTML5 “dialog” tag.

Welcome, Wilto!

FREELANCERS AND STUDIO HEADS, learn what your rates say about your brand, and discover how to make more money by raising your rate strategically.

A List Apart: Pricing Strategy for Creatives by JASON BLUMER.

Illustration by Kevin Cornell for A List Apart Magazine.

RESPONSIVE WEB DESIGNERS, don’t miss Mat Marquis’ essential article in today’s A LIST APART, for people who make websites: Responsive Images: How they Almost Worked and What We Need. Mat shows why responsive images as we currently use them don’t quite cut it – and shares a way forward that involves the creation of a shiny new HTML element.

Illustration by Kevin Cornell for A List Apart Magazine.

DING DONG, THE WITCH IS DEAD. For now, at least, the “ill-conceived lobbyist-driven piece of legislation” known as the Stop Online Piracy Act (SOPA) is no more:

Misguided efforts to combat online privacy have been threatening to stifle innovation, suppress free speech, and even, in some cases, undermine national security. As of yesterday, though, there’s a lot less to worry about.

…Though the administration did [not] issue a formal veto threat, the White House’s opposition signaled the end of these bills, at least in their current form.

A few hours later, Congress shelved SOPA, putting off action on the bill indefinitely.

Political Animal – Putting SOPA on a shelf

TOMORROW, WHICH IS also my birthday, I begin teaching “Selling Design” to second-year students in the MFA Interaction Design program at School of Visual Arts, New York. Liz Danzico and Steve Heller created and direct the MFA program, and this is my second year teaching this class, whose curriculum I pull out of my little blue beanie.

In this class we explore collaboration and persuasion for interaction designers. Whether you work in a startup, studio, or traditional company; whether you design print, products, purely digital experiences, or any combination thereof; whether you’re the sole proprietor, part of a tightly focused team, or a link in a long chain of connected professionals, it is only by collaborating skillfully with others—and persuading them tactfully and convincingly when points of view differ and yours is right—that you can hope to create designs that make a dent in the universe.

During this spring semester, we’ll explore collaboration and persuasion from many points of view, and hear from (and interact with) many accomplished designers who will serve as special guest speakers. For our opening get-acquainted session, we’ll focus on texts that explore the some of the most basic, traditional (and rarely taught) aspects of design professionalism from the worlds of web, interaction, and print design:

Demystifying Design

by Jeff Gothelf – A List Apart

1. Draw together
2. Show raw work (frequently)
3. Teach the discipline
4. Be transparent
5. Take credit for your wins

Design Criticism and the Creative Process

by Cassie McDaniel – A List Apart

• Critique as collaborative tool
• Presenting designs
• What is good feedback?
• Negotiate criticism
• The designer as collaborator

Personality in Design

by Aarron Walter – A List Apart

• Personality is the platform for emotion
• A history of personality in design
• Personas
• Creating a design persona for your website [or other project]
• Tapbots: Robot love
• Caronmade: octopi, unicorns, and mustachios
• Housing Works: a name with a face
• The power of personality

Design Professionalism

by Andy Rutledge

You should read this entire brief book, but for now, sample these bits:

• Distractions: Contests and Awards
• Distractions: Pitches and Spec Work
• Conclusion: A Gestalt

Do You Suck at Selling Your Ideas?

by Sam Harrison – HOW Magazine

Dyson is used as an example of a product that currently dominates the market, even though nobody initially believed in the inventor’s idea. Lessons:

1. Tell a personal story
2. Create emotional experiences for decision makers
3. See what’s behind rejections

How to sell your design effectively to the client

by Arfa Mirza, Smashing Magazine

1. Understand the nature of your client
2. Have a rationale for every part of your design
3. Show the best design options only
4. Defend your design, but don’t become defensive
5. Solicit good feedback and benefit from it

Money: How to sell the value of design – an email conversation

by Jacob Cass – Just Creative

Narrative of standing up to new-client pressure to do something against the designer’s self-interest, or which devalues design. Story told here is about money but it could be about any designer/client conflict in which the designer needs to gently educate the client. (Some designer/client conflicts require the client to educate the designer, but that’s another matter.)

How to choose a logo designer

by Jacob Cass – Just Creative

Basic article outlines ten background materials any designer (not just logo designers) should prepare to encourage confidence on the client’s part:

1. Experience
2. Positive testimonials
3. A thorough design process
4. Awards won/published work
5. A strong portfolio
6. Price
7. Design affiliations
8. Great customer service
9. Business Professionalism
10. Appropriate questions

NOW ONLINE for your pleasure! In Episode No. 61 of The Big Web Show (“everything web that matters”), I interview Khoi Vinh, co-creator of Mixel, former NYTimes.com Design Director, co-founder of NYC design studio Behavior, and more.

In this episode we discuss Khoi’s career, including his fine-art background, art school, and design classes, his time at AIGA, how he came to love the grid, why he joined the NYTimes.com and why he left, and more. We also explore the inspiration that led Khoi to combine social with collage, and talk about the choice every design studio faces as it begins to succeed: get bigger, or get more selective? Don’t miss this free-ranging exchange of ideas with one of webdom’s nicest and most influential designers.

• 5by5 | The Big Web Show No. 61: Khoi Vinh
• Audio RSS feed
• iTunes Audio

The Big Web Show features special guests and topics like web publishing, art direction, content strategy, typography, web technology, and more. This episode is sponsored by Happy Cog Hosting, TinyLetter, and Uncle Slam.

Other recent Big Web Show episodes:

• Episode 60: Josh Williams of Gowalla
• Episode 59: Mike Monteiro of Mule Design

AS THE NUMBER of native mobile applications keeps growing, it’s worth looking at how they get used. To that end, here’s a few stats about people downloading apps and what what they do with them afterward.

via LukeW | Data Monday: Mobile App Usage.

AS THE YEAR draws to a close, we asked some A List Apart readers to tell us what they learned about the web in 2011. Together their responses summarize the joys and challenges of this magical place we call the internet.

A List Apart: What I Learned About the Web in 2011.

Illustration by Kevin Cornell for A List Apart.

HERE I AM at the Palace on Market Street for another thrilling installment of An Event Apart.

An Event Apart San Francisco features twelve great speakers and sessions. Following the two-day conference comes an intense learning session on Mobile Web Design led by Luke Wroblewski (author, Web Form Design).

Starting Monday, December 12, 2011, follow the live Twitter stream on A FEED APART, the official feed aggregator for An Event Apart.

Hum along to the interstitial AEA Playlist on Last.fm or Rdio.

Stay in the loop! Follow An Event Apart on Twitter or Facebook, or subscribe to our mailing list.

GET YOUR STANDARDS ON! John Rainsford, working with your humble narrator, has crafted a sweet collection of limited edition products, designed to let you show your love and support for web standards.

What are you waiting for? Shop Web Standards now.

And we thank you.

Foursquare accept friends: worst interface in the world from Jeffrey Zeldman on Vimeo.

CATS CAN’T TALK, but it turns out they are great interaction designers.

I’ve been laid up with a hernia and bronchitis and I’ve let a few chores go. Such as prompt daily cleaning of the litter box shared by my cats, Snow White and Giovanni.

This morning they found a way to catapult the litter box rake right into the box. Handle first, mind you — leaving the part I touch three inches deep in the very filth I’d neglected to clean. Punishment as well as instruction.

I can play scales; my cats cannot. I can spend time with Gandalf and Oliver Twist; my cats cannot. On those scales I am the superior being.

But I would give ten years and a pinky to create interfaces that are half as clear as the one my cats designed for me this morning.