Topics: Code: Browsers
Does your content travel well? Can your design and functionality survive from one platform to another, one browser to another, one configuration to another? Web standards and testing methods are included in this topic. (74 articles)
Cross Platform Scalable Vector Graphics with svgweb
by Jim Ray
Issue 323February 8, 2011
Pity Scalable Vector Graphics. It’s been an official standard since before IE6 was released yet has never found much of an audience on the web, certainly not the one it deserves. Just as SVG was starting to establish some browser support, along came the canvas tag, stealing the thunder of dynamically generated client-side images. Yet despite all the attention being paid to canvas, there’s still a place for SVG, particularly for developers looking to replace plug-ins like Flash for data visualization. Unlike canvas or other script-only approaches, SVG can be easily divided into design and code elements, with just a little code to add interactivity. It even works on devices like the iPad and iPhone. And now, thanks to svgweb and a clever use of Flash, it works on older platforms no one could have ever imagined supporting SVG. Jim Ray shows how.
Forward Thinking Form Validation
by Ryan Seddon
Issue 314September 21, 2010
When users complete a form to buy your product or sign up for your service, you want to reduce mistakes and guide them to success. Now, with HTML5 form input types and attributes, you can set validation constraints to check user input. With CSS3’s new UI pseudo-classes, you can style validation states to make form completion quick and effortless.
SVG with a little help from Raphaël
by Brian Suda
Issue 310July 20, 2010
Want to make fancy, interactive, scalable vector graphics (SVGs) that look beautiful at any resolution and degrade with grace? Brian Suda urges you to consider Raphaël for your SVG heavy lifting.
Supersize that Background, Please!
by Bobby van der Sluis
Issue 309July 6, 2010
Background images that fill the screen thrill marketers but waste bandwidth in devices with small viewports, and suffer from cropping and alignment problems in high-res and widescreen monitors. Instead of using a single fixed background size, a better solution would be to scale the image to make it fit different window sizes. And with CSS3 backgrounds and CSS3 media queries, we can do just that. Bobby van der Sluis shows how.
Prefix or Posthack
by Eric Meyer
Issue 309July 6, 2010
Vendor prefixes: Threat or menace? As browser support (including in IE9) encourages more of us to dive into CSS3, vendor prefixes such as -moz-border-radius and -webkit-animation may challenge our consciences, along with our patience. But while nobody particularly enjoys writing the same thing four or five times in a row, prefixes may actually accelerate the advancement and refinement of CSS. King of CSS Eric Meyer explains why.
The Problem with Passwords
by Lyle Mullican
Issue 300February 9, 2010
Abandoning password masking as Jakob Nielsen suggests could present serious problems, including undermining a user’s trust by failing to meet a basic expectation. But with design patterns gleaned from offline applications, plus a dash of JavaScript, we can provide feedback and reduce password errors without compromising the basic user experience or losing our visitors’ trust.
Using SVG for Flexible, Scalable, and Fun Backgrounds, Part II
by Shelley Powers
Issue 299January 26, 2010
In Part II, dig deeper into the technology behind using SVG for your site design. Explore how to incorporate SVG in a cross-browser friendly manner, including using SVGWeb to ensure that the SVG shows in Internet Explorer. And discover the unique characteristic that makes SVG ideal for page backgrounds: scalability.
Using SVG For Flexible, Scalable, and Fun Backgrounds, Part I
by Shelley Powers
Issue 299January 26, 2010
Many of us think of Scalable Vector Graphics (SVG) as an also-ran: fine for charts and tables, but not much else. Yet SVG can actually enhance a site’s overall design, and can be made to work in even the most stubborn browser. In Part I of a two-part series, Shelley Powers covers important basics of working with SVG, including browser support and accessibility.
Testing Search for Relevancy and Precision
by John Ferrara
Issue 292September 22, 2009
Despite the fact that site search often receives the most traffic, it’s also the place where the user experience designer bears the least influence. Few tools exist to appraise the quality of the search experience, much less strategize ways to improve it. But relevancy testing and precision testing offer hope. These are two tools you can use to analyze and improve the search user experience.
Beyond Goals: Site Search Analytics from the Bottom Up
by Lou Rosenfeld
Issue 292September 22, 2009
Top-down analytics are great for creating measurable goals you can use to benchmark and evaluate the performance of your content and designs. But bottom-up analysis teaches you something new and unexpected about your customers—something goal-driven analysis can't show you. Discover the kinds of information users want, and identify your site's most urgent mistakes.
Introduction to RDFa II
by Mark Birbeck
Issue 287July 7, 2009
In part I of this series, we looked at how semantic features normally confined to the head of an HTML document can be used to add semantic richness to the elements of the body. Along the way, we defined six rules of RDFa. In part II, we’ll learn how to add properties to an image, and how to add metadata to any item—and we’ll add a few more rules to that list.
Introduction to RDFa
by Mark Birbeck
Issue 286June 23, 2009
In part one of a two-part primer on RDFa, learn how semantic features normally confined to the head of an HTML document can be used to add semantic richness to the elements of the body. Mark Birbeck shows us how.
Semantics in HTML 5
by John Allsopp
Issue 275January 6, 2009
The BBC's dropping of hCalendar because of accessibility and usability concerns demonstrates that we have pushed the semantic capability of HTML far beyond what it can handle. The need to clearly and unambiguously add rich, meaningful semantics to markup is a driving goal of the HTML 5 project. Yet HTML 5 has two problems: it is not backward compatible because its semantic elements will not work in 75% of our browsers; and it is not forward compatible because its semantics are not extensible. If "making up new elements" isn't the solution, what is?
Return of the Mobile Stylesheet
by Dominique Hazaël-Massieux
Issue 275January 6, 2009
At least 10% of your visitors access your site over a mobile device. They deserve a good experience (and if you provide one, they'll keep coming back). Converting your multi-column layout to a single, linear flow is a good start. But mobile devices are not created equal, and their disparate handling of CSS is like 1998 all over again. Please your users and tame their devices with handheld style sheets, CSS media queries, and (where necessary) JavaScript or server-side techniques.
Understanding Progressive Enhancement
by Aaron Gustafson
Issue 269October 7, 2008
Steven Champeon turned web development upside down, and created an instant best practice of standards-based design, when he introduced the notion of designing for content and experience instead of browsers. In part one of a series, ALA’s Gustafson refreshes us on the principles of progressive enhancement. Upcoming installments will translate the philosophy into sophisticated, future-focused design and code.
Faux Absolute Positioning
by Eric Sol
Issue 261June 17, 2008
CSS layout is awesome, except when your layout calls for a header, a footer, and columns in between. Use float, and content changes can cause columns to wrap. Use absolute positioning, and your footer can crash into your columns. Add the complexity of drag-and-drop layouts, and a new technique is needed. Enter "faux absolute positioning." Align every item to a predefined position on the grid (as with absolute positioning), but objects will still affect the normal flow (as with float).
They Shoot Browsers, Don’t They?
by Jeremy Keith
Issue 253February 19, 2008
Version targeting will allow Microsoft to reach new heights of standards compliance where CSS and (especially) scripting are concerned. But to benefit from it, developers must explicitly opt in. That’s just not right, says Jeremy Keith. And it’s doomed to fail, because standardistas, by their very nature, will refuse to opt in.
Version Targeting: Threat or Menace?
by Jeffrey Zeldman
Issue 253February 19, 2008
Version targeting shakes our browser-agnostic faith. Its default behavior runs counter to our expectations, and seems wrong. Yet to offer true DOM support without bringing JScript-authored sites to their knees, version targeting must work the way Microsoft proposes, argues Jeffrey Zeldman.
Keeping Your Elements’ Kids in Line with Offspring
by Alex Bischoff
Issue 252February 5, 2008
Alex Bischoff introduces Offspring, a JavaScript library bringing the power of advanced CSS selectors to browsers that can’t quite handle the real thing.
From Switches to Targets: A Standardista’s Journey
by Eric Meyer
Issue 251January 21, 2008
Grab your galoshes and walking stick and follow along with A List Apart's Eric Meyer as he considers the vices and virtues of version targeting as a standards toggle.
Beyond DOCTYPE: Web Standards, Forward Compatibility, and IE8
by Aaron Gustafson
Issue 251January 21, 2008
For seven years, the @DOCTYPE@ switch has stood designers and developers in good stead as a toggle between standards mode and quirks mode. But when IE7, with its greatly improved support for standards, "broke the web," it revealed the flaw in our toggle. The quest was on to find a more reliable ensurer of forward compatibility. Is version targeting the answer?
How to Size Text in CSS
by Richard Rutter
Issue 249November 20, 2007
It's a tug-of-war as old as web design. Designers need to control text size and the vertical grid; readers need to be able to resize text. A better best practice for sizing type and controlling line-height is needed; and in this article, Richard Rutter obligingly supplies one.
Put Your Content in my Pocket, Part II
by Craig Hockenberry
Issue 245September 11, 2007
Screen size matters. And now that Apple is embedding mobile Safari in more iPods than the iPhone alone, it matters even more. Concluding his remarkable two-part series, Craig Hockenberry covers the down and dirty details of designing and coding with the iPhone (and its brethren) in mind.
Conflicting Absolute Positions
by Rob Swan
Issue 241July 13, 2007
All right, class. Using CSS, produce a liquid layout that contains a fixed-width, scrolling side panel and a flexible, scrolling main panel. Okay, now do it without JavaScript. By chucking an assumption about how CSS works in browsers, Rob Swan provides the way and means.
Accessible Web 2.0 Applications with WAI-ARIA
by Martin Kliehm
Issue 235April 9, 2007
Our web applications can suffer from inaccessibility problems due to inherent markup limitations. Martin Kliehm helps us sort through the WAI specs for Accessible Rich Internet Applications (ARIA) to increase usability.
Cross-Browser Scripting with importNode()
by Anthony Holdener
Issue 234March 27, 2007
Anthony Holdener explores the world of XML DOM support for web browsers and presents a new technique for cross-browser scripting.
Switchy McLayout: An Adaptive Layout Technique
by Marc van den Dobbelsteen
Issue 229December 19, 2006
The introduction of new mobile and computing devices challenges us to look beyond the liquid layout. Marc van den Dobbelsteen offers a way to bring appropriate layouts to a wider range of screens and devices.
Text-Resize Detection
by Christian Heilmann, Lawrence Carvalho
Issue 223September 12, 2006
Chris Heilmann and Lawrence Carvalho serve up a way to detect your visitors' text size settings using JavaScript.
Bye Bye Embed
by Elizabeth Castro
Issue 219July 11, 2006
Break the chains of <embed> and live free. Elizabeth Castro explains how to embed movies without using invalid markup.
ALA’s New Print Styles
by Eric Meyer
Issue 203September 19, 2005
Print away, you fiends! Eric Meyer presents the ALA 4.0 print styles and discusses the challenge of translating a complex screen layout into a well-designed and useful printed page.
Hybrid CSS Dropdowns
by Eric Shepherd
Issue 197March 30, 2005
Yup. It’s yet another CSS dropdown article — but one that resolves many problems associated with common dropdown methods and degrades beautifully. Hybrid CSS dropdowns allow access to all pages, keep the user aware of where she is within the site, and are clean and light to boot. It’s a tasty little vitamin pill, so quit sighing and try it.
Big, Stark & Chunky
by Joe Clark
Issue 191January 11, 2005
You’ve designed for the screen and made provision for blind, handheld, and PDA browser users. But what about low-vision people? Powered by CSS, “zoom” layouts convert wide, multicolumn web pages into low-vision-friendly, single column designs. Accessibility maven Joe Clark explores the rationale and methods behind zoom layouts. Board the zoom train now!
Pocket-Sized Design: Taking Your Website to the Small Screen
by Elika Etemad, Jorunn D. Newth
Issue 187August 31, 2004
Among the many websites that are out there, few are standards-compliant. Among those few, only a handful sport style sheets adjusted to the needs of handheld devices. Of those which do offer styling for handhelds, not all will fit the smallest, lowest-resolution screens without presenting the user with the ultimate handheld horror: namely, horizontal scrolling. This article presents a set of general suggestions for creating a handheld-friendly style sheet that works well even on handheld screens no wider than 120px.
Drop-Down Menus, Horizontal Style
by Nick Rigby
Issue 184June 29, 2004
Multi-tiered drop-down menus can be a hassle to build and maintain — especially when they rely on big, honking chunks of JavaScript. Nick Rigby presents a way to handle this common navigation element with a cleanly structured XHTML list, straightforward CSS, and only a few concessions to browser quirks.
Print It Your Way
by Derek Featherstone
Issue 182May 21, 2004
Because ALA’s readers are web users as well as designers and developers, we offer this tidbit from Derek Featherstone on creating user stylesheets to print articles to your own specifications.
Onion Skinned Drop Shadows
by Brian Williams
Issue 182May 21, 2004
Animators use onion skinning to render a snapshot of motion across time. Now, web designers can use this technique to create the truly extensible CSS-based drop shadow.
CSS Drop Shadows II: Fuzzy Shadows
by Sergio Villarreal
Issue 178April 23, 2004
Picking up where Part I left off, in Part II designer Sergio Villarreal takes his standards-compliant drop-shadow to the next level by producing warm and fuzzy shadows.
Let Them Eat Cake
by Aaron Gustafson
Issue 177April 16, 2004
A growing debate pits accessibility against usability. From our point of view, it’s like pitting peanut butter against jelly. This article helps you create a page that is both usable and accessible, saving readers the trouble of scrolling with a little help from JavaScript and the Document Object Model.
Power To The People: Relative Font Sizes
by Bojan Mihelac
Issue 176April 9, 2004
Relative font sizes may make websites more accessible — but they’re not much help unless the person using the site can find a way to actually change text size. Return control to your audience using this simple, drop-in solution.
CSS and Email, Kissing in a Tree
by Mark Wyner
Issue 175March 26, 2004
Despite prevailing wisdom to the contrary, you can safely deploy HTML emails styled with good old-fashioned CSS. If you’re not content to roll over and use font tags in your HTML emails, read on.
CSS Sprites: Image Slicing’s Kiss of Death
by Dave Shea
Issue 173March 5, 2004
Say goodbye to old-school slicing and dicing when creating image maps, buttons, and navigation menus. Instead, say hello to a deceptively simple yet powerful sprite-based CSS solution.
CSS Drop Shadows
by Sergio Villarreal
Issue 172February 27, 2004
Much used, oft maligned but always popular, drop shadows are a staple of graphic design. Although easy to accomplish with image-editing software, they’re not of much use in the fast-changing world of web design … until now.
Designing for Context with CSS
by Joshua Porter
Issue 171February 20, 2004
The medium is the message: Imagine providing unique information exclusively for people who read your site via a web-enabled cell phone — then crafting a different message for those who are reading a printout instead of the screen. Let your context guide your content. All it takes is some user-centric marketing savvy and a dash of CSS.
Retooling Slashdot with Web Standards Part II
by Daniel M. Frommelt
Issue 165December 4, 2003
In Part I, we showed how Slashdot could save money and reduce bandwidth requirements by converting to semantic XHTML markup and CSS layout. In Part II, we explore how standards-compliant markup and deft use of CSS could make Slashdot and your sites play nicely in print and on handheld devices.
Retooling Slashdot with Web Standards
by Daniel M. Frommelt
Issue 164November 21, 2003
A look at the markup behind Slashdot.org demonstrates how simple and cost-effective the switch to a standards-compliant Slashdot could be. (Part I of a two-part series.)
Suckerfish Dropdowns
by Patrick Griffiths, Dan Webb
Issue 162November 7, 2003
Teach your smart little menus to do the DHTML dropdown dance without sacrificing semantics, accessibility, or standards compliance or writing clunky code.
Facts and Opinion About Fahrner Image Replacement
by Joe Clark
Issue 160October 20, 2003
Fahrner Image Replacement and its analogues aim to combine the benefits of high design with the requirements of accessibility. But how well do these methods really work? Accessibility expert Joe Clark digs up much-needed empirical data on how FIR works (and doesn’t) in leading screen readers.
Accesskeys: Unlocking Hidden Navigation
by Stuart Robertson
Issue 158June 16, 2003
Your favorite applications have shortcut keys. So can your site, thanks to the XHTML accesskey attribute. Accesskeys make sites more accessible for people who cannot use a mouse. Unfortunately, almost no designer uses accesskeys, because, unless they View Source, most visitors can’t tell that you’ve put these nifty navigational shortcuts to work on your site. In this issue, Stuart Robertson unlocks the secret of providing visible accesskey shortcuts.
Cross-Browser Variable Opacity with PNG: A Real Solution
by Michael Lovitt
Issue 156December 21, 2002
Think you’re stuck with wimpy GIFs and their rigid binary transparency? Well, think again, Sunshine. Michael Lovitt shows how to overcome flaky browser support for PNG so you can take advantage of this graphic format’s lossless compression, alpha transparency, and variable opacity.
Flash MX: Clarifying the Concept
by Joe Clark
Issue 143April 26, 2002
In a detailed survey, accessibility obsessive Joe Clark evaluates Flash MX (authoring tool and player) in the context of the often confusing WAI and Section 508 guidelines, finds some things to cheer about, and draws a roadmap for future improvements.
Build a Cross-Platform Testing Station in Mac OS
by Paul Sciortino
Issue 139March 1, 2002
Everybody talks about cross-platform testing, but nobody’s shown how to do it on a nuts-and-bolts level. Until now. Sciortino’s comprehensive tutorial for Mac-based web designers will set you up with the testing platform of your dreams.
Better Living Through XHTML
by Jeffrey Zeldman
Issue 137February 15, 2002
Everything you wanted to know about converting from HTML to XHTML, including why you’d want to, tools that help, changes in the way browsers display XHTML pages, shortcuts, bugs, workarounds, and other tips you won’t find elsewhere.
What the Hell is XML?
by Troy Janisch
Issue 132January 4, 2002
Attention, content managers, developers, site owners and designers: XML is here, and the time to start using it is now.
Omniweb and Standards
by waferbaby
Issue 131December 28, 2001
Omniweb, a promising new browser for Mac OS X, has been much praised for its elegant interface and beautiful antialiasing of text. But how does it fare with web standards like CSS and the DOM? To find out, Waferbaby puts newly released version 4.1b1 through the paces.
Mac Browser Roundup (with Håkon Lie and Tantek Çelik)
by Jeffrey Zeldman
Issue 130December 24, 2001
We test drove and reviewed the new Mac browsers, then asked browser makers Håkon Lie of Opera and Tantek Çelik of Microsoft to respond to our comments.
Why Don’t You Code for Netscape?
by Jeffrey Zeldman
Issue 129December 7, 2001
Long considered the Holy Grail of web design, “backward compatibility” has its place; but at this point in web development history, shouldn’t we be more concerned about forward compatibility? ALA makes the case for authoring to web standards instead of browser quirks.
MSN, Opera, and Web Standards
by Håkon Wium Lie
Issue 127November 9, 2001
Håkon Lie, the father of Style Sheets and CTO of Opera, debunks Microsoft’s claim that web standards have anything to do with the blocking of Opera and Mozilla users from MSN.com. Lie’s eye–opening commentary includes a chart analyzing all 63 top–level pages at MSN.com in terms of standards compliance.
Much Ado About Smart Tags
by Chris Kaminski
Issue 115July 22, 2001
Microsoft's proprietary Smart Tags: Boon or bane? Kaminski digs deep beneath the hype and paranoia in an extensive assessment of what Microsoft hath wrought.
CSS Design: Size Matters
by Todd Fahrner
Issue 109May 11, 2001
Everything you think you know about controlling text sizes on the web is either wrong, or else it doesn’t work. In this much-bookmarked ALA classic, UI designer and CSS Todd Fahrner provides a way out of the mess by showing how to make CSS font size keywords work – even in stubborn browsers that get CSS wrong.
“Forgiving” Browsers Considered Harmful
by J. David Eisenberg
Issue 107April 27, 2001
By hiding the need for structure that the web will require as it moves toward XHTML and XML, “forgiving” web browsers have helped breed a world of structural markup illiterates. Eisenberg examines the damage done.
From Table Hacks to CSS Layout: A Web Designer’s Journey
by Jeffrey Zeldman
Issue 99February 16, 2001
Redesigning A List Apart using CSS should have been easy. It wasn’t. The first problem was understanding how CSS actually works. The second was getting it to work in standards-compliant browsers. A journey of discovery.
To Hell With Bad Browsers
by Jeffrey Zeldman
Issue 99February 16, 2001
In a year or two, all sites will be designed with standards that separate structure from presentation (or they will be built with Flash 7). We can watch our skills grow obsolete, or start learning standards-based techniques. In fact, since the latest versions of IE, Navigator, and Opera already support many web standards, if we are willing to let go of the notion that backward compatibility is a virtue, we can stop making excuses and start using these standards now. At ALA, beginning with Issue No. 99, we've done just that. Join us.
This HTML Kills: Thoughts on Web Accessibility
by Jim Byrne
Issue 98February 9, 2001
Activist Jim Byrne sounds off on the importance of web accessibility, and the difficulty of doing it right.
Daemon Skins: Separating Presentation from Content
by Mark Newhouse
Issue 87November 3, 2000
There ’s more than one way to skin a website. Newhouse demonstrates creative scripting techniques that give viewers and designers the control they crave.
Dr. Strangeglobe: Or How I Learned to Stop Worrying and Love The W3C.
by Erika Meyer
Issue 76August 11, 2000
Can the mysterious Dr Strangeglobe save the WWWorld from a conspiracy to contaminate our precious liquid layouts? Erika Meyer takes a non-standard look at the W3C in this charming yet educational spoof of the Kubrick classic.
DOM Design Tricks III: Using Events in the Document Object Model
by J. David Eisenberg
Issue 75August 4, 2000
Be a code wizard ... or, just look like one. In Part 3 of the DOM Design Tricks tutorial series,Eisenberg shows us how to dynamically change text on a page. The theory, examples, and scripts will work in Mozilla and IE5.
Walking Backwards: Supporting Non-Western Languages on the Web
by Shoshannah L. Forbes
Issue 65May 26, 2000
And you think you?ve got problems. Try building web sites in a bi-directional language like Hebrew or Arabic. Israeli web developer Shoshannah L. Forbes discusses the mind-boggling hardships involved, and looks at what the latest browsers are doing about it.
Meet the DOM
by J. David Eisenberg
Issue 60April 21, 2000
We’ve read about it. We’ve waited for it. Now we can actually start to use it. In this gentle introduction to the W3C Document Object Model, new ALA contributor Eisenberg shows how to make friends with the DOM, and use its power to manipulate dynamic HTML elements on the web.
Why IE5/Mac Matters
by Jeffrey Zeldman
Issue 57March 31, 2000
It complies with two key web standards. And leaves out two others. It's IE5 Macintosh Edition, the first browser on any platform to truly support HTML 4 and CSS-1. Its accessibility enhancements put the user in charge, and its clever new features solve long-standing cross-platform and usability problems. All this ... but still no XML or DOM. Zeldman explains what IE5/Mac means to the web.
Why Gecko Matters: What Netscape’s Upcoming Browser Will Mean to the Web
by Jeffrey Zeldman
Issue 56March 24, 2000
Netscape is about to unleash its new browser, built around the Gecko rendering engine. Theoretically the first completely standards-compliant web browser, Gecko enters a world where most people use IE5 (which is not completely standards-compliant). Is Netscape’s effort too little, too late? Or is it the beginning of a new and better way to create websites? Zeldman articulates The Web Standards Project’s position and explains what Netscape’s browser will mean to the web.
Fear of Style Sheets
by Jeffrey Zeldman
Issue 8March 12, 1999
“No-fault CSS” can help you work around frightened clients, buggy software, and readers who still love last year’s browser. In Part One of a series, Zeldman walks you through the fear.
*Can’t find what you’re looking for? View all topics and subtopics »
