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.
Topic: Browsers
The Best Browser is the One You Have with You
The web as we know and build it has primarily been accessed from the desktop. That is about to change. The ITU predicts that in the next 18–24 months, mobile devices will overtake PCs as the most popular way to access the web. If these predictions come true, very soon the web—and its users—will be mostly mobile. Even designers who embrace this change can find it confusing. One problem is that we still consider the mobile web a separate thing. Stephanie Rieger of futurefriend.ly and the W3C presents principles to understand and design for a new normal, in which users are channel agnostic, devices are plentiful, standards are fleeting, mobile use doesn’t necessarily mean “hide the desktop version,” and every byte counts.
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.
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.
Cross Platform Scalable Vector Graphics with svgweb
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.
Smartphone Browser Landscape
Users expect websites to work on their mobile phones. In two to three years, mobile support will become standard for any site. Web developers must add mobile web development to their skill set or risk losing clients. How do you make websites mobile compatible? The simple answer is to test on all mobile devices and fix any problems you encounter. But with at least ten operating systems and fifteen browsers out there, it is impossible to do that. Nor can we test only in iPhone and Android and expect to serve our market. PPK surveys the mobile web market, as well as phone platforms and their browsers, and shows how to set up a mobile test bed that works.
Forward Thinking Form Validation
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
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!
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
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.
