A List Apart

Menu

Topic: HTML

Proper document markup. Separating structure from presentation and behavior. The lowercase semantic web. Building accessible, cross-platform, cross-browser pages. Using web standards correctly. HTML evolves into a language built for applications, not just documents. New semantics. Responsive images and other conundrums. Canvas and accessibility. Audio, video, and fallbacks. The politics of HTML: WHAT WG and the W3C.

  • One Step Ahead: Improving Performance with Prebrowsing

    by Santiago Valdarrama · Issue 401 ·

    We want faster websites, and browsers are helping us get there—searching for patterns, analyzing behaviors, and guessing where users might click next. But we know our sites and users best, and we can use that insight to proactively nudge browsers along. Predictive browsing queues up resources before users even ask for them, creating a faster, more seamless experience. Santiago Valdarrama looks at the benefits and costs of three prebrowsing techniques at our disposal.

  • Radio-Controlled Web Design

    by Art Lawry · Issue 399 ·

    Tabs, modal overlays, hidden navigation: we’ve developed many patterns to help us design for mobile screens. But these patterns tend to show and hide content using JavaScript—which can come with its own challenges. Art Lawry explores techniques for reducing that dependency on JavaScript using an unlikely tool: radio buttons.

  • Accessibility: The Missing Ingredient

    by Andrew Hoffman · Issue 395 ·

    If economics is “the dismal science,” accessibility has long been the least loved branch of web design and development—and the least specified client requirement. Type and grids (especially the flexible variety) have fans aplenty. CSS, Sass, and frameworks draw huge, passionate crowds. But even die-hard front-enders and dedicated followers of best practices seem to wilt in the face of today's greatly improved accessibility techniques. As a result, while most of us have kept up with the emerging methods, technologies, and challenges of multi-device design and development, essential and well supported specs like WAI-ARIA remain woefully under-implemented. Even the best of us seem to consider accessibility something to be done at the end of the job. Andrew Hoffman explains the advantages and necessity of an “accessibility first” approach.

  • Start Coding with Wireframes

    by Matt Griffin ·

    As a designer or UX pro, you’ve long suspected you ought to learn to code, but where to start? How about making your next wireframe responsive? When you build wireframes with simple code, you create a deliverable that can be reused while you become more knowledgeable about the inner workings of the web.

  • WYSIWTF

    by Karen McGrane ·

    Arguing for “separation of content from presentation” implies a neat division between the two. The reality, of course, is that content and form, structure and style, can never be fully separated. Anyone who’s ever written a document and played around to see the impact of different fonts, heading weights, and whitespace on the way the writing flows knows this is true. Anyone who’s ever squinted at HTML code, trying to parse text from tags, knows it too.

  • Digital Publishing and the Web

    by The W3C ·

    Electronic books are on the rise everywhere. For some this threatens centuries-old traditions; for others it opens up new possibilities in the way we think about information exchange in general, and about books in particular. Hate it or love it: electronic books are with us to stay.

  • Improving UX Through Front-End Performance

    by Lara Swanson · Issue 371 ·

    Adding half a second to a search results page can decrease traffic and ad revenues by 20 percent, says a Google study. For every additional 100 milliseconds of load time, sales decrease by 1 percent, Amazon finds. Users expect pages to load in two seconds—and after three seconds, up to 40 percent will simply leave. The message is clear: we must make performance optimization a fundamental part of how we design, build, and test every site we create—for every device. Design for performance; measure the results.

  • Responsive Comping: Obtaining Signoff without Mockups

    by Matt Griffin · Issue 363 ·

    If you’re making websites, chances are you’ve given some thought to what constitutes a responsive-friendly design process—and you’ve probably found that adding a mockup for every breakpoint isn’t a sustainable approach. Designing in code sounds like the answer, but you may be mystified at where to begin—or feel unmoored and disoriented at the prospect of giving up the approach you’ve long relied on. Enter responsive comping. This new, mockup-less web design process makes it easy to get that Photoshop monkey off your back, and have a fresh new beginning with your old friend the web browser.

  • Mo’ Pixels Mo’ Problems

    by Dave Rupert · Issue 362 ·

    Mobile devices are shipping with higher and higher PPI, and desktops and laptops are following the trend as well. There’s no avoiding it: High-pixel-density, or “Retina,” displays are now becoming mainstream—and, as you’d expect, our websites are beginning to look a little fuzzy in their backlit glory. But before we go off in the knee-jerk direction of supersizing all our sites, we must identify the problems ahead and figure out the most responsible way forward—keeping our users in mind first and foremost.

  • Learning to Love the Boring Bits of CSS

    by Peter Gasston · Issue 358 ·

    The future of CSS gives us much to be excited about: On the one hand, there’s a whole range of new methods that are going to revolutionize the way we lay out pages on the web; on the other, there’s a new set of graphical effects that will allow on-the-fly filters and shaders. People love this stuff. Magazines and blogs are full of articles about them. But if these tools are the show ponies of CSS, then it’s time to give some love to the carthorses of the language. Learn why “boring bits” like selectors, units, and functions will be revolutionary to the way we work—albeit in humble, unassuming ways.

  • ALA Summer Reading Issue

    by ALA Staff · Issue 356 ·

    Presenting the ALA Summer Reading Issue—our favorite articles from 355 issues of A List Apart. You can also read them all as an epub on your Kindle, iPhone, iPad, Readmill, or other e-book reader.

  • A Case for Responsive Résumés

    by Andrew Hoffman · Issue 353 ·

    Grizzled job hunting veterans know too well that a sharp résumé and near-flawless interview may still leave you short of your dream job. Competition is fierce and never wanes. Finding new ways to distinguish yourself in today's unforgiving economy is vital to a designer/developer's survival. Happily, web standards whiz and mobile web developer Andrew Hoffman has come up with a dandy differentiator that is just perfect for A List Apart readers. Learn how to author a clean résumé in HTML5/CSS3 that scales well to different viewport sizes, is easy to update and maintain, and will never grow obsolete.

  • Responsive Images and Web Standards at the Turning Point

    by Mat Marquis · Issue 351 ·

    Responsible responsive design demands responsive images, images whose dimensions and file size suit the viewport and bandwidth of the receiving device. As HTML provides no standard element to achieve this purpose, serving responsive images has meant using JavaScript trickery, and accepting that your solution will fail for some users. Then a few months ago, in response to an article here, a W3C Responsive Images Community Group formed, and proposed a simple-to-understand HTML picture element capable of serving responsive images. The group even delivered picture functionality to older browsers via two polyfills: namely, Scott Jehl's Picturefill and Abban Dunne's jQuery Picture. The WHATWG has responded by ignoring the community's work on the picture element, and proposing a more complicated img set element. Which proposed standard is better, and for whom? Which will win? And what can you do to help avert an "us versus them" crisis that could hurt end-users and turn developers off to the standards process? ALA's own Mat Marquis explains the ins and outs of responsive images and web standards at the turning point.

  • Application Cache is a Douchebag

    by Jake Archibald · Issue 350 ·

    We’re better connected than we’ve ever been, but we’re not always connected. ApplicationCache lets users interact with their data even when they’re offline, but with great power come great gotchas. For instance, files always come from the ApplicationCache, even when the user is online. Oh, and in certain circumstances, a browser won’t know that that the online content has changed, causing the user to keep getting old content. And, oh yes, depending on how you cache your resources, non-cached resources may not load even when the user is online. Lanyrd’s Jake Archibald illuminates the hazards of ApplicationCache and shares strategies, techniques, and code workarounds to maximize the pleasure and minimize the pain for user and developer alike. All this, plus a demo. Dig in.

  • Say No to Faux Bold

    by Alan Stearns · Issue 350 ·

    Browsers can do terrible things to type. If text is styled as bold or italic and the typeface family does not include a bold or italic font, browsers will compensate by trying to create bold and italic styles themselves. The results are an awkward mimicry of real type design, and can be especially atrocious with web fonts. Adobe's Alan Stearns shares quick tips and techniques to ensure that your @font-face rules match the weight and styles of the fonts, and that you have a @font-face rule for every style your content uses. If you're taking the time to choose a beautiful web font for your site, you owe it to yourself and your users to make certain you're actually using the web font , and only the web font ,  to display your site's content in all its glory.

  • Dive into Responsive Prototyping with Foundation

    by Jonathan Smiley · Issue 348 ·

    There are hundreds of devices out there right now that can access the full web, as Steve Jobs once put it. They come with different capabilities and constraints, things like input style or screen size, resolution, and form. With all these devices set to overtake traditional desktop computers for web traffic next year, we need tools to help us build responsively. Jonathan Smiley shows how to dive into responsive design using Foundation, a light front-end framework that helps you rapidly build prototypes and production sites.

  • Every Time You Call a Proprietary Feature “CSS3,” a Kitten Dies

    by Lea Verou · Issue 344 ·

    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

    by Tantek Çelik, Eric Meyer · Issue 344 ·

    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.

  • Building Twitter Bootstrap

    by Mark Otto · Issue 342 ·

    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.

  • Expanding Text Areas Made Elegant

    by Neil Jenkins · Issue 338 ·

    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.

Topics