Category: A List Apart

From pixels to prose, coding to content.

Categories
A List Apart

A List Apart Issue No. 342: A Pixel Identity Crisis; An Important Time for Design; Building Twitter Bootstrap

In a triple issue of A List Apart for people who make websites, it’s time for designers to seize the day! Transcend mobile platform differences, harness the power of an open-source front-end toolkit, and band together to change the world:

An Important Time for Design

by CAMERON KOCZON

Cameron Koczon says designers have now been given a blank check—one that lets us band together as a community to change the way design is perceived; change the way products are built; and quite possibly change the world.

Building Twitter Bootstrap

by MARK OTTO

Mark Otto, the co-creator of Bootstrap, sheds light on how and why Bootstrap was made, the processes used to create it, and how it has grown as a design system.

A Pixel Identity Crisis

by SCOTT KELLUM

The pixel has long been the atomic particle of screen based design: a knowable, concrete unit of measurement. But layouts based on the hardware pixel are fast becoming an endangered species. Scott Kellum shows how math and media queries can keep you sane and help you design consistently across platforms.

Thanks

This is Mandy Brown‘s last issue as an editor. Mandy has brought a lot of great thinking to ALA; she will be missed. Mandy will continue as editor of A Book Apart.

Illustrations by Kevin Cornell for A List Apart

Categories
A List Apart Browsers Code CSS Design

Getting Started with Sass – A List Apart

CSS’ simplicity has always been one of its most welcome features. But as our sites and apps get bigger and become more complex, and target a wider range of devices and screen sizes, this simplicity—so welcome as we first started to move away from font tags and table-based layouts—has become a liability.

Fortunately, a few years ago developers Hampton Catlin and Nathan Weizenbaum created a new style sheet syntax with features to help make our increasingly complex CSS easier to write and manage—and then used a preprocessor to translate the new smart syntax into the old, dumb CSS that browsers understand.

Learn how Sass (“syntactically awesome style sheets”) can help simplify the creation, updating, and maintenance of powerful sites and apps.

A List Apart: Articles: Getting Started with Sass.

Illustration: Kevin Cornell

Categories
A List Apart Survey

Survey for people who make websites

The survey for people who make websites

THIS WEEK some friends launched Contents Magazine. Last night other friends threw a party to announce the new (free) Readability. Every day, around the world, hundreds of thousands of web people make magic, working in a digital medium that sometimes perplexes my brilliant engineer father and would have seemed like witchcraft to my grandmother, may she rest in peace.

The web is the most disruptive, empowering invention since, well, I don’t know. It helps ordinary people topple dictators or just comparison shop. We, the people who make websites, are responsible for this shamanistic creation, and we’ve been doing this work for two decades. Yet in all this time, nobody in the mainstream world seems to have noticed. Oh, they notice when Google challenges Facebook for world supremacy. And they noticed when Twitter helped bring about the glorious Arab Spring. But they don’t know jack about us, the people who do this work, and they don’t care.

If anyone is going to compile data about us and sift meaningful analysis from that data, it’s going to be we ourselves. The boot-strappers, the self-taught HTML wonder kids. You and me.

And that is why, as I have every year since 2007, I once more ask you to take ten minutes and complete the survey for people who make websites. Do it now.

I thank you, and you’ll thank yourself later.

For the curious, here are the ALA survey findings from 2007–2010:

Categories
A List Apart

A List Apart 335: Banish your inner critic; tear down the wall between designer and client

BANISH THE INNER CRITIC that blocks your creativity and tear down the wall between you and your client that design buzzwords create. It’s easy with help from Issue No. 335 of A List Apart for people who make websites:

Banishing Your Inner Critic

by Denise Jacobs

Everybody has one: the inner critic that tells you you’re just faking it, that others have more talent, that you’ll never achieve the success you seek. The inner critic is an unconscious deterrent that stands between the seeds of great ideas and the fruits of achievement, making you hate your designs, giving you “writer’s block” as your deadline looms, keeping you stuck in a project’s initial thinking stage because something isn’t quite right. Denise Jacobs anatomizes and shows how to quash your inner critic, giving you the mental space and energy to let your talent emerge.

Demystifying Design

by Jeff Gothelf

Mystifying design with jargon only we understand makes us feel like heroes and creates a sense of job security. But it also creates an “us and them” atmosphere which excludes non-designers, obscures the true value of design, and generates antagonism when only cooperation will yield the best product. By revealing our process and inviting others into our world, we can create a team that is invested in the success of our work, and deliver better design. Jeff Gothelf discusses the steps we can take to increase the value of our practice and of ourselves as practitioners.

Online since 1998, Happy Cog’s A List Apart Magazine explores the design, development, and meaning of web content, with a special focus on web standards and best practices. Illustration by Kevin Cornell.

Categories
A Book Apart A List Apart Design Ethan Marcotte Layout Responsive Web Design Web Design Web Design History Web Standards

Boston Globe’s Responsive Redesign. Discuss.

AS EVERY WEB DESIGNER not living under a rock hopefully already knows, The Boston Globe has had a responsive redesign at the hands of some of today’s best designers and developers:

The spare Globe website has a responsive design that adapts to different window sizes, browsers and devices, and it has a built-in Instapaper-type feature that saves articles for reading off various devices on the subway. The overhaul has incorporated the talents of Boston design firms Filament Group, and Upstatement, as well as a large internal team, and pre-empts the need to build separate apps for each device.—New York Observer

As the first responsive redesign of a “real” website (i.e. a large, corporately financed, widely read newspaper site rather than some designer’s blog), the site has the potential to raise public awareness of this flexible, standards-based, multi-platform and user-focused web design approach, and deepen perceptions of its legitimacy, much as Mike Davidson’s standards-based redesign of ESPN.com in 2003 helped convince nonbelievers to take a second look at designing with web standards:

In a major step in the evolution of website design, the Boston Globe relaunched their site today using a Responsive Design approach. For a consistent experience across mobile and desktop browsers, they redesigned the site to add and remove columns to the layout based on the width of your browser window.

This marks the first major, high-traffic, content-heavy website to adopt a responsive design. The lead consultant behind the project is none other than Ethan Marcotte, the designer who wrote the book on responsive design. Much as ESPN changed the way we worked by being one of the first to launch a fully CSS driven site a decade ago, the Boston Globe’s redesign has the potential to completely alter the way we approach web design.—Beaconfire Wire

More work remains to be done. Some sections of the paper have not yet converted, and some site architecture has yet to be refreshed, so it is too early to call the overhaul a complete success. But it is clear that Ethan Marcotte, author of Responsive Web Design and creator of responsive design, together with the geniuses at Filament Group, Upstatement, and the Globe’s internal design/development team have managed to work beautifully together and to solve design problems some of us don’t even know exist.

Congratulations to the Globe for its vision and these designers and developers for their brilliant work.

Categories
A List Apart business Design

A List Apart 334

IN ISSUE NO. 334 of A List Apart, for people who make websites:

Marry Your Clients: Learn to keep the client/agency relationship warm and passionate over time.

Being Human is Good Business: Turn word of mouth into your strongest brand asset through genuine, personalized, compassionate customer service.

Illustration by Kevin Cornell for A List Apart Magazine.

Categories
A List Apart

ALA: A Primer on A/B Testing

DATA IS AN invaluable tool for web designers 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, helping you create high-performing user experience elements to implement across your site. Lara Swanson shows how to make sure you avoid red herrings and reach statistically significant results in Issue No. 333 of A List Apart for people who make websites.

A List Apart: Articles: A Primer on A/B Testing.

Illustration by Kevin Cornell for A List Apart Magazine.

Categories
A List Apart

A List Apart: Making up Stories – Perception, Language, and the Web

WE LEARN AND RETAIN information through stories because they turn information into more than the sum of its parts. But what makes a story a story, and what does it mean for the digital world we’ve built? Elizabeth McGuane and Randall Snare weave an enchanting tale of attention, comprehension, inference, coherence, and shopping in Issue No. 333 of A List Apart for people who make websites.

A List Apart: Articles: Making up Stories: Perception, Language, and the Web.

Illustration by Kevin Cornell for A List Apart

Categories
A List Apart content content strategy Design

Web Governance: Becoming an Agent of Change – A List Apart

SHIPPING IS EASY, making real change is hard. To do meaningful web work, we need to educate clients on how their websites influence their business and the legal, regulatory, brand, and financial risks they face without strong web governance. Learn why web governance is important to us as web professionals and how to influence your clients to think carefully about how to align their websites to their business strategy. A List Apart: Articles: Web Governance: Becoming an Agent of Change.

Illustration by Kevin Cornell for A List Apart.

Categories
A List Apart

Designing Fun – A List Apart

HOW DO YOU DEFINE FUN on the web? Fun means different things to different people. Debra Levin Gelman says that to create fun, we need to allow users to create, play, and explore. Learn how to help your client define fun, rank its importance on their site, and user test it to create a delightful experience, regardless of whether you’re designing for suits and ties or the sandbox crowd: A List Apart: Articles: Designing Fun.

Illustration by Kevin Cornell for A List Apart.

Categories
A Book Apart A List Apart Design people photography Publications Publishing Web Design Web Standards Websites

A Book Apart Photo Pool on Flickr

LET YOUR NERD FLAG FLY! Now there is a Flickr group for A Book Apart readers. Come one, come all. Share beauty shots of your A Book Apart collection. Share unboxing photos. Share pictures of your fine self interacting with our awesome books. If you love reading our brief books for people who make websites, we want to see and hear from you.

Flickr: The A Book Apart Pool.

Categories
A Book Apart A List Apart Code

Responsive Design. I don’t think that word means what you think it means.

ON 25 MAY 2010, when Ethan Marcotte coined the phrase “responsive web design,” he defined it as using fluid grids, flexible images, and media queries to deliver elegant visual experiences (e.g. layouts and type treatments) that accommodate the reality of our post-iPhone, post-Android, post-iPad digital landscape:

Rather than tailoring disconnected designs to each of an ever-increasing number of web devices, we can treat them as facets of the same experience. We can design for an optimal viewing experience, but embed standards-based technologies into our designs to make them not only more flexible, but more adaptive to the media that renders them.

Ethan expanded his vision in Responsive Web Design, a book I consider so important I published it. I and many others think it is a landmark book, an evolutionary milestone in the development of web and interaction design as a practice and as an industry.

But I also think it may be an even bigger idea than we initially realized—an idea too big to be limited to a single, technical approach to the problem of multiple, disparate viewing environments.

I understand well why Ethan favors his fluid grid/flexible image approach. When you see a fully responsive design at work, it often seems magical.

But the purpose behind “responsive design”—the concept of what it strives to achieve—should be separated from the specific techniques used to achieve it. As the worldwide community embraces his idea (and as new methods of CSS layout become practical), the techniques of responsive design will continue to improve and, dare I say it, adapt. (See flexbox, etc.) Along the same lines, “adaptive layout,” a practice that combines the benefits of fixed-width design with the realities of multiple screen sizes, is no longer an alternative to responsive design; instead, it becomes a form of responsive design, albeit a less robust one than the fully responsive (fluid) method Ethan describes in his book.

Our understanding of “responsive design” should be broadened to cover any approach that delivers elegant visual experiences regardless of the size of the user’s display and the limitations or capabilities of the device.

Categories
A List Apart business Design

RFPs and Proposals, Oh, My!

ISSUE NO. 330 of A List Apart for people who make websites tackles the thorny problem of using paper or PDF to convince potential clients you’re the right team for the job.

RFPs: The Least Creative Way to Hire People

by Greg Hoy

If you work in any kind of service industry you’ve undoubtedly come across the Request For Proposal, or “RFP.” Alas, in practice, RFPs are the least creative way to hire creative people. The rigidity of the process, and the lack of meaningful dialogue makes this little more than a game of roulette. How can we successfully navigate the heartburn-inducing RFP process? And what can we as an industry do to turn RFPs into the exception rather than the default means of hiring an agency?

A Modest Proposal

by Nathan Peretic

Comedy is easy, proposals are hard. A compelling proposal requires more than a jumble of clichés and a nervous estimate of costs. It needs structure, organization, and joie de vivre. Learn the key questions every client needs answered—and how to use them as the basis of a proposal that convinces your client you’re the right team for the job.

Categories
16 years A List Apart Design The Essentials The Profession Zeldman zeldman.com

16 years online

ON MAY 31, 2011, this website turned sixteen years old. Thank you for indulging me. (And thanks to Sean M. Hall for reminding me.)

Here is a reflection written when the site turned 13.

And here, from 2007, is a mini-retrospective of The Daily Report beginning with 31 August 1997 (entries from 1995–1996 are gone due to overwriting), and continuing through years of constant writing and strange design such as daily/0303a.shtml, daily/0103a.shtml, and daily/0902b.html. (Of course to really see these pages as the world saw them then, you’d need a non-antialiased operating system, a non-standards-compliant browser, and a dingy TV tube monitor. But I digress.)

More of this site’s juicy Web 1.0 goodness may be unearthed here.

If you like, you can also peruse a small gallery of my article header images from the early days of A List Apart Magazine.

Here’s to plenty more years ahead, inventing the web and modern design together.

Categories
A Book Apart A List Apart Acclaim An Event Apart Design Interviews Zeldman

An interview with Jeffrey Zeldman

WALT DISNEY AND ME, a typical day, running Happy Cog, building An Event Apart, what’s next for A Book Apart, and more: DIBI, the design/build conference, presents An interview with Jeffrey Zeldman for your pleasure.

(I swear it’s a coincidence the last two posts have begun with inset photos of yours truly.)