The Articles
Issue № 345
-
Future-Ready Content
The future is flexible, and we're bending with it. From responsive web design to futurefriend.ly thinking, we're moving quickly toward a web that's more fluid, less fixed, and more easily accessed on a multitude of devices. As we embrace this shift, we need to relinquish control of our content as well, setting it free from the boundaries of a traditional web page to flow as needed through varied displays and contexts. Most conversations about structured content dive headfirst into the technical bits: XML, DITA, microdata, RDF. But structure isn't just about metadata and markup; it's what that metadata and markup mean. Sara Wachter-Boettcher shares a framework for making smart decisions about our content's structure.
-
Audiences, Outcomes, and Determining User Needs
Every website needs an audience. And every audience needs a goal. Advocating for end-user needs is the very foundation of the user experience disciplines. We make websites for real people. Those real people are able to do real things. But how do we get to really know our audience and find out what these mystery users really want from our sites and applications? Learn to ensure that every piece of content on your site relates back to a specific, desired outcome , one that achieves business goals by serving the end user. Corey Vilhauer explains the threads that bind UX research to content strategy and project deliverables that deliver.
Issue № 344
-
Every Time You Call a Proprietary Feature “CSS3,” a Kitten Dies
Any -webkit- feature that doesn’t exist in a specification (not even an Editor’s draft) is not CSS3. Yes, they are commonly evangelized as such, but they are not part of CSS at all. This distinction is not nitpicking. It’s important because it encourages certain vendors to circumvent the standards process, implement whatever they come up with in WebKit, then evangelize it to developers as the best thing since sliced bread. In our eagerness to use the new bling, we often forget how many people fought in the past decade to enable us to write code without forks and hacks and expect it to work interoperably. Lea Verou explains why single-vendor solutions are not the same as standards and not healthy for your professional practice or the future of the web.
-
The Vendor Prefix Predicament: ALA’s Eric Meyer Interviews Tantek Çelik
During a public meeting of the W3C CSS Working Group, Mozilla web standards lead Tantek Çelik precipitated a crisis in Web Standards Land when he complained about developers who misunderstand and abuse vendor prefixes by only supporting WebKit’s, thereby creating a browser monoculture. Tantek’s proposed solution, having Mozilla pretend to be WebKit, inflamed many in the standards community, especially when representatives from Opera and Microsoft immediately agreed about the problem and announced similar plans to Mozilla’s. To get to the bottom of the new big brouhaha, exclusively for A List Apart, our Eric Meyer interviews Tantek on Mozilla’s controversial plan to support -webkit- prefixed properties.
Issue № 343
-
Pricing Strategy for Creatives
Strategic pricing helps your brand and helps you to make more money. Issuing a price is like handing out a business card—it’s a great branding tool, but be careful about what it says to your market. Beginning relationships with customers at a high price makes the statement: “we’re good at what we do and we know it.” Fighting with a competitor over a low price says “I’m uncertain about my abilities, so I’ll take what I can get.” Failing to use a considered pricing policy will leave you treading water in a sea of design mediocrity, allowing you to just stay afloat while you sell commodities. Jason Blumer explains how to become strategic about your pricing—including three things you can do immediately to kick-start your journey toward strategic pricing.
-
Responsive Images: How they Almost Worked and What We Need
With a mobile-first responsive design approach, if any part of the process breaks down, your user can still receive a representative image and avoid an unnecessarily large request on a device that may have limited bandwidth. But with several newer browsers implementing an "image prefetching" feature that allows images to be fetched before parsing the document's body, some of the web's brightest developers are abandoning responsive images in favor of user agent detection, at least as a temporary solution. For us standardistas, UA detection leaves a bad taste in the mouth. More importantly, as the number and kinds of devices continue to grow, UA detection will quickly become untenable—just as browser detection did back in the bad old days before web standards. What's really needed, argues Mat Marquis, is a new markup element that works the way the HTML5 video element works. Sound crazy? So crazy it just might work.
Issue № 342
-
A Pixel Identity Crisis
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. Even the introduction of a new, W3C standard reference pixel, although it promises stability in the long-term, can't help us navigate the current chaos. Consider the two "standard" pixel definitions and 500 "standard" viewports your user's Android device may support. To create designs that transcend platform differences, the promise of the web and standards, you must normalize pixels across devices. Scott Kellum shows how math and media queries can keep you sane and help you design consistently across platforms.
-
Building Twitter Bootstrap
Bootstrap is an open-source front-end toolkit created to help designers and developers quickly and efficiently build great stuff online. Its goal is to provide a refined, well-documented, and extensive library of flexible design components created with HTML, CSS, and JavaScript for others to build and innovate on. Today, it has grown to include dozens of components and has become the most popular project on GitHub, with more than 13,000 watchers and 2,000 forks. 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.
-
An Important Time for Design
Design is on a roll. Client services are experiencing a major uptick in demand, seasoned design professionals are abandoning client work in favor of entrepreneurship, and designer-co-founded startups such as Kickstarter and Airbnb are taking center stage. It's becoming increasingly difficult to ignore the fact that design has a massive role to play in the evolution of the web and the next generation of web products. The result, says Cameron Koczon, is that designers have now been given a blank check, one that lets web designers band together as a community to change the way design is perceived; change the way products are built; and quite possibly change the world.
Issue № 341
-
What I Learned About the Web in 2011
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. We need to continue to iterate, to embrace change, and challenge complexity to keep shipping. Above all, we must continue to reach out to one another, to teach, to support, to help, and to build the community that sustains us.
Issue № 340
-
Say No to SOPA
A List Apart strongly opposes United States H.R.3261 AKA the Stop Online Piracy Act (SOPA), an ill-conceived lobbyist-driven piece of legislation that is technically impossible to enforce, cripplingly burdensome to support, and would, without hyperbole, destroy the internet as we know it. SOPA approaches the problem of content piracy with a broad brush, lights that brush on fire, and soaks the whole web in gasoline. If passed, SOPA will allow corporations to block the domains of websites that are “capable of” or “seem to encourage” copyright infringement. Once a domain is blocked, nobody can access it, unless they’ve memorized the I.P. address. Under SOPA, everything from your grandma’s knitting blog to mighty Google is guilty until proven innocent. Learn why SOPA must not pass, and find out what you can do to help stop it.
-
Getting Started with Sass
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.
Issue № 339
-
The ALA 2011 Web Design Survey
The profession that dares not speak its name needs you. Digital design is the wonder of the world. But the world hasn't bothered to stop and wonder about web workers, the designers, developers, project managers, information architects slash UX folk, content strategists, writers, editors, marketers, educators, and other professionals who make the web what it is. That's where you come in. Take the survey!
Issue № 338
-
Dark Patterns: Deception vs. Honesty in UI Design
Deception is entwined with life on this planet. Insects deceive, animals deceive, and of course, we human beings use deception to manipulate, control, and profit from each other. It’s no surprise, then, that deception appears in web user interfaces; what is surprising is how little we talk about it. All the guidelines, principles, and methods ethical designers employ to design usable websites can be subverted to benefit business owners at the expense of users. Study the dark side so you can take a stand against unethical web design practices and banish them from your work.
-
Expanding Text Areas Made Elegant
An expanding text area is a multi-line text input field that expands in height to fit its contents. Commonly found in both desktop and mobile applications, such as the SMS composition field on the iPhone, it’s a good choice when you don’t know how much text the user will write and you want to keep the layout compact; as such, it’s especially useful on interfaces targeted at smartphones. Yet despite the ubiquity of this control, there’s no way to create it using only HTML and CSS, and most JavaScript solutions have suffered from guesswork, inaccuracy, or a lack of elegance "¦ until now.
Issue № 337
-
Personality in Design
Personality is the mysterious force that attracts us to certain people and repels us from others. Because personality greatly influences our decision-making process, it can be a powerful tool in design. In an exclusive excerpt from his spanking new book Designing For Emotion, Aarron Walter shows us how to create a strong human connection in human-computer interaction by turning our design interactions into conversations, imbuing mechanical "interactions" with distinctively human elements, and using design and language techniques to craft a living personality for your website.
-
Organizing Mobile
When organizing content and actions on mobile, solid information architecture principles like clear labeling, balanced breadth and depth, and appropriate mental models remain important. But the organization of mobile web experiences must also align with how people use their mobile devices and why; emphasize content over navigation; provide relevant options for exploration and pivoting; maintain clarity and focus; and align with mobile behaviors. In this exclusive excerpt from his new book, Mobile First!, Luke Wroblewski explains how to do all that.
Issue № 336
-
Fire Drills: Communications Strategy in a Crisis
Every site or service will fail eventually. An emergency communications strategy can get you through the crisis faster and reassure your users while you're putting out the fire. Learn to imagine, prioritize, and prepare for everything that can go wrong, assign roles in advance to get you through the crisis, and communicate effectively with your customers throughout the experience.
-
Reigniting Your Creative Spark
Creative is as creative does, except when your creative spark fizzles out. Looming deadlines, over-fussy clients, dull projects, or feelings of fatigue that may signal the beginnings of burnout, any of these everyday afflictions can tamp down your creative fire, making it tough to come up with creative ideas just when you need them most. But fear not! Denise Jacobs shares sure-fire strategies to reignite your creative spark.
