Skip navigation
Help

Web Standards

warning: Creating default object from empty value in /var/www/vhosts/sayforward.com/subdomains/recorder/httpdocs/modules/taxonomy/taxonomy.pages.inc on line 33.

At yesterday’s Ampersand New York web typography conference in the Times Center at The New York Times, Font Bureau designer/technologist (and A List Apart columnist) Nick Sherman demo’d Size Calculator, a web application created to bring screen design a capability that print design has enjoyed for 500 years.

It is trivial for a designer to set type (or any artwork) to appear at a specific size in centimeters or inches on the printed page. But it is impossible to do so when designing for screens. Here’s how Zen it gets: if I use CSS to set a line of type at 65cm, it will most certainly not be 65cm tall—nor does the W3C expect it to be. Actual size will depend on the dimensions and resolution of the screen. (Perceived size will of course depend on viewing distance, but that is true for print as well.)

Likewise, if I want an image or a line of type to appear to be exactly the same size when viewed on different screens—say, on a smartphone and a desktop monitor—there’s no way to achieve that, either.

Size Calculator solves these problems by using JavaScript to do the math.

What it is good for: if you know the dimensions and resolution of your device (be it a wall screen at a conference, a digital billboard, or a specific model phone held in a specific orientation), you can finally do the things I mentioned in the paragraphs above. Same size type on different screens viewed at different distances? Achievement unlocked. Another thing Nick did in his demo was to “print” an exact size dollar bill on the screen in the Times Center auditorium. He proved that it worked by walking to the screen and holding the actual dollar in front of the projected dollar. He then printed a life-size image of himself. Fun!

What it is not good for: although Size Calculator is exciting, it would not be good for responsive web design, because RWD is about designing for a universe of unknown devices, resolutions, and capabilities.

But if you are designing for a limited set of known screens, the sky’s the limit—literally: your design can take miles or km into account. If you’ve always wanted to make a ten thousand foot letter display at 12pt when viewed from a helicopter, now’s your chance.

What will you do with Size Calculator?

0
Your rating: None
Original author: 
(author unknown)

Three years ago in these pages, ALA technical editor Ethan Marcotte fired the shot heard ’round the web. ALA designer Mike Pick thought it might be fun to celebrate the third anniversary of “Responsive Web Design” (A List Apart Issue No. 306, May 25, 2010) by secreting an Easter Egg in the original article; our illustrator, Kevin Cornell, rose to the challenge.

To see it in action, visit alistapart.com/article/responsive-web-design, grab the edge of the browser window (device permitting), and perform the responsive resize mambo. (ALA’s Tim Murtaugh, who coded the Easter Egg, has provided a handy video demo of what you’ll see.)

0
Your rating: None

By Dominique Hazaël-Massieux: People used to stare at me and laugh, back in 2005 when W3C launched its Mobile Web Initiative to advocate the importance of the web to the mobile world. Now I am the one smiling much of the time, as I did most recently during the 2013 edition of the Mobile World Congress (MWC) in Barcelona, one of the largest events to focus on mobile devices and networks.

This year W3C had a huge HTML5 logo splashed across its booth to emphasize the impact of the Open Web Platform across industries and devices. But the real adoption story was told by the HTML5 logos prominent at many, many other booths. The web has gained real visibility on mobile, and we should all be smiling because we are all getting closer to a platform for reaching more people on more devices at lower cost.

MWC 2013 also confirmed that HTML5 has broken out of the browser. We are seeing more and more HTML5-based development platforms, such as PhoneGap, Windows 8, Blackberry, and Tizen. Mozilla’s big announcement at MWC 2013 centered on FirefoxOS, Mozilla’s mobile operating system entirely based on web technologies. W3C and Intel partnered to create a T-shirt that says “I See HTML5 Everywhere.” And indeed, I do.

The challenge of mobile

Not only has the web a big role to play on mobile, mobile has also a key role to play for the web. As more and more of our connected interactions start or end on mobile devices, we must ensure that the web platform adapts to our mobile lives. I believe this is critical for the future of the web.

For many years W3C has designed technology to make the experience of web users on mobile ever more rich, adapted, and integrated. For example, CSS media queries provide the basis for responsive web design. There is already a lot for mobile, and a lot more is coming. To help people follow all the activity, every quarter I publish an overview of web technologies that are most relevant to mobile.

These technologies are the tools designers can rely on to build the user experience they need. But technologies are only a small piece of the puzzle when it comes to making the web user experience work on mobile devices. The number of A List Apart articles about mobile development provides a clear sign that this challenge is driving creativity in the design community. Responsive web design, mobile first, future friendly, and just-in-time interactions are some of the trends that have resonated with me over the years. The creativity is fantastic, but we still want our lives to be easier. Where web technologies do not yet provide the hooks you need to practice your craft, please let us know. Feel free to write me directly: dom@w3.org.

Closing the gap

Another challenge that we, the web community, face on mobile is the amazing energy devoted to native development.

The web has displaced a lot of the native software development on traditional computers; on mobile, the reverse trend has happened. Content that users had enjoyed on the web for years started to migrate to native applications: newspapers, social networking, media sharing, government services, to name a few. And to add insult to injury, a number of these content providers are pushing their users away from their website toward their native application, with obtrusive banners or pop-ups.

It is unclear where the world is going on mobile: some statistics and reports show a strong push toward moving back to the web (e.g., the recent Kendo UI survey), while others argue the opposite. What is clear to me, though, is that we cannot afford to let mobile become a native-entrenched ecosystem.

What has made the web unique and popular in so many hearts is not the technology (some great, some terrible) nor even the ubiquity (since interoperability can reduce it). I believe the much more fundamental importance of the web comes from its structural openness: anyone can publish the content they see fit and anyone can participate in defining the future of the web as a platform.

Native ecosystems on mobile have historically been very closed ecosystems, under the control of single commercial entities. A world where the majority of our information and infrastructure would be trapped inside these ecosystems is not something we should accept lightly. Mind you, I appreciate the innovations spawned by these platforms, but we need to encourage the cycle where innovations become standards, and those standards prime the platform for the next innovations.

Of course the best way to shift the balance to the web is to make the web the best platform for mobile. Achieving this will require ideas and energy from many people, and web developers and designers play a critical role in shaping the next generation of web user experiences. I am leading a focused effort in W3C to assess what we can and should do to make the web more competitive on mobile, and welcome feedback and ideas on what the missing pieces in the puzzle are.

Beyond mobile

I believe a key part in making the web the “king of mobile” is to realize that mobile devices are a means to an end. In our connected world—computers, phones, tablets, TVs, cars, glasses, watches, refrigerators, lightbulbs, sensors and more to come—mobile phones will most likely remain the hub for while. The only platform that can realistically be made available on all these devices is the web.

We have a unique opportunity to make the Open Web Platform a success. I realize getting it right will not be trivial. Building user experiences that scale from mobile (or watches!) to TV is complex. Building user experiences that adapt to these very different type of interactions will be hard. Matching the needs from users in a growing diversity of contexts will make us cringe. Creating user experiences that abolish the devices barrier (as I explored some months ago) is guaranteed to create more than a few headaches.

But there is unprecedented momentum to create an open platform for the planet. And that has me smiling a lot.

0
Your rating: None

Image: W3C

The W3C, the group that oversees web standards like HTML and CSS, recently held W3Conf, an annual conference for web developers. If, like me, you couldn’t make it this year, fear not, videos of all of the talks are now available online.

Among the highlights are Eric Meyer’s talk on Flexbox, and the future of sane layout tools — what Meyer calls “the Era of Intentional Layout.” Meyer’s talk is also notable for the reminder that, in Mosaic, styling a webpage was something users did, not page creators.

Another highly recommended talk is Lea Verou’s “Another 10 things you didn’t know about CSS.” The “Another” bit in the title refers to a talk Verou gave last year entitled “10 things you might not know about CSS 3.” Also be sure to read our recent interview with Verou for more on the W3C and web standards.

There are quite a few more videos available over on the W3Conf YouTube page, including Jacob Rossi’s talk on Pointer Events, which we linked to in yesterday’s Pointer Events coverage.

0
Your rating: None

Sir Tim Berners-Lee, inventor of the web, is credited with making hyperlinks blue, a decision he appears to have reached at random. But although accessibility may not have been on Sir Tim’s mind at the time, the color choice was a happy one, according to Joe Clark:

Red and green are the colours most affected by colour-vision deficiency.  Almost no one has a blue deficiency. Accordingly, nearly everyone can see blue, or, more accurately, almost everyone can distinguish blue as a colour different from others. It was pure good luck that the default colour of hyperlinks is blue with underlining.
Joe Clark, Building Accessible Websites

0
Your rating: None

Form Follows Function. Image: Screenshot.

If you’ve been missing the early days of HTML5, back when experimentation, not stolid, functional sites was the name of the game, we’ve got a site for you: Form Follows Function.

Form Follows Function is a collection of interactive experiments built using HTML5 elements like Canvas and CSS 3 tools like 2-D/3-D transforms. Experiments include growing trees with the click of the mouse (or touch of a finger, depending on your device), dragging waves and 3-D cans of Campbell’s soup. Even the rotating menu of the experiments is impressive.

The site is the brainchild of developer Jongmin Kim, whose design work has previously garnered a Webby award.

Fun thought experiment: Imagine taking this site back in time, showing it to your 2002 self and then pointing out that it’s all built with web standards, no Flash involved.

While we really like Form Follows Function it does fall prey to the main reason we don’t really miss the early days of HTML5 and CSS 3 all that much — it doesn’t use CSS prefixes properly. Form Follow Function optimizes for Firefox and Chrome while ignoring Opera and Internet Explorer; a shame, considering how well done the rest of the site is.

0
Your rating: None

Vexing Viewports

“The Web is Agreement.” Jeremy Keith’s eloquent statement neatly summarizes the balance that makes it possible for us to build amazing things. Each week, new devices appear with varying screen sizes, pixel densities, input types, and more. As developers and designers, we agree to use standards to mark up, style, and program what we create. Browser makers in turn agree to support those standards and set defaults appropriately, so we can hold up our end of the deal.

This agreement has never been more important.

That’s why it always hurts when a device or browser maker does something that goes against our agreement. Especially when they’re a very visible and trusted friend of the web—like Apple.

You see, Apple’s newest tablet, the iPad Mini, creates a vexing situation: Its device-width viewport tag defaults to the same values as Apple’s original iPad (768x1024 pixels), even though the Mini's screen is physically 40 percent smaller. That means every button, graphic, link, and line of text on a web page on the iPad Mini appears tiny—even when we try to do the right thing and build flexible, multi-device experiences.

Two iPads, one too small.

But Cupertino isn’t the only culprit out there. This is a problem that’s been brewing since we started using the viewport—and it has to do with not just pixels, but our own practices as well. Let’s take a step back and understand what’s really causing today’s woes—and what all of us need to do about it.

The trouble with pixels

Today’s viewport woes can be traced right back to pixels—yes, those tiny elements we work with every day.

The first pixel challenge is quantity. The more pixels in the display, the more information can be displayed. But as these are physical pixels whose number can’t be altered after the fact, a second factor comes into play: the screen’s physical size.

Imagine two two-inch-wide displays (about the width of the iPhone), as shown below.

Two devices, each with a two-inch-wide display. The one on the right, at 640x960, would pack four times as many pixels into the same space as the 320x480 screen on left.

The first is 320x480 pixels, the second 640x960. This gives the second display four times as many pixels as the first, but fits all of them into the same physical space. This smaller pixel size results in content that is also smaller—making it crisper, but much harder to read as well.

This is exactly what happened on the Nokia E60. In 2005, most mobile phone displays were about an inch and quarter wide, with an average of 176 pixels in that width. But the E60, which sported a “huge” 352x416-pixel display, crammed twice the number of pixels into a similar amount of space. The result: A gorgeous, crisp—but often hard-to-read—display.

The E60 also introduced a now-familiar problem: how users would manage to surf “big” sites on a tiny device. Nokia’s solution was a new browser, the Mini Map. This browser behaved similarly to today’s smartphone browsers by first rendering the full-sized page, then scaling it to fit the available screen size. Superimposed onto this rendering was a transparent red box that could be repositioned using the device’s joystick. Clicking the joystick would zoom the content indicated within the box.

Enter viewports

Mini Map was probably one of the first commercial uses of a dynamic viewport—a construct designed to dynamically change the size or scale of the visible screen area in order to improve the user experience. But it was far from the last.

In 2007, Apple released the iPhone, a much larger device than the E60, but one with a similar problem. Even on a “huge” two-inch display, surfing the “real web” on an iPhone meant loading large pages onto a small device. Apple chose to solve this problem through a series of carefully orchestrated enhancements.

The first was the creation of a virtual viewport similar to the one Nokia designed for Mini Map. When encountering desktop websites, the browser would render them at their full size (based on a default canvas width of 960 pixels). It would then scale them down to fit the two-inch display. Users could interact with the page to scroll and zoom in on areas of their choice.

Apple didn’t stop there. It also developed a new viewport meta tag. Sites not using the tag would be rendered using the default, legacy-web viewport of 980 pixels. But developers who opted to use the tag could declare the viewport for their sites, including setting the width to the all-important device-width value. This value tells the browser, “please pick a width that fits this specific device’s screen best.”

Other mobile browser vendors were quick to follow Apple’s lead. Nowadays just about every mobile browser supports the viewport meta tag, including the device-width value. This provides us with an even playing field: It respects the efforts of those who take the time to adapt sites for the multi-device web, while those who haven’t yet made this transition still receive a “good-enough” default experience.

Mini problems

The value device and browser vendors assign to device-width is directly related to that device’s physical dimensions. Physically smaller devices need a smaller device-width value (which will result in larger content). Set a value that’s too large, and most content will be too small to comfortably read.

And that’s why Apple’s iPad Mini has a vexing viewport. It uses the same 768-pixel device-width as the regular iPad, even though its physical size is much smaller. One would expect to see a device-width more in line with those of similarly sized tablets like the BlackBerry PlayBook or second-generation Samsung Galaxy 7″—around 500 to 600 pixels, as shown in this chart.

Because of this device-width, web pages appear 27 percent smaller on the iPad Mini than they do on the Google Nexus 7 (calculated based on the relative size of device pixels)—all because Apple decided to describe the device’s viewport as 768 pixels.

Solving for content size

One of the first places this causes problems is in text: More pixels in a smaller space means that fonts sized in pixels will look correspondingly dinky.

Of course, many of us aren’t sizing in pixels anymore—we’re using relative dimensional elements like ems, right? Only, that doesn’t quite solve the problem this time.

When we use ems, we imply a certain trust that the browser’s baseline font size at the default zoom level—1em or 100 percent in unit parlance—is sane and readable. But that’s not always the case. The browser’s baseline font-size value (1em) roughly equates to a 16-pixel square. This ratio serves as a ligament that binds absolute and relative units, but it can vary from browser to browser.

On the iPad Mini, font-size at baseline is precisely 16 pixels. That may have worked fine when fewer pixels were packed into our screens, but on a dense display with an improperly defined viewport, that’s going to be uncomfortably small.

Not all browsers toe the 1:16 em-to-pixel line, though. The Kindle Touch’s browser, for example, has a high-density viewport, but adapts by using a 1:20 ratio, kicking the default font size up a few pixels for readability.

This might not fix all of iPad Mini’s viewport problems, but at least the content would be legible.

Three seven-inch tablets. Note the difference in rendering.

So why did Apple do this?

To understand why Apple would release a product with such a vexing viewport, we don’t have to look further than our own habits.

In the wake of the iPad’s initial release, web folk worldwide scrambled to adapt sites to look good on the new tablets. Somewhere along the way many of us collectively settled upon pixel-based notions of tablet-ness, and those notions often resulted in fixed, 1024x768-pixel layouts precisely targeted at these devices.

Were Apple to decrease the device-width value for the iPad Mini on account of its smaller physical size, it would guarantee a second scramble as existing tablet-adapted sites assuming a 1024x768 viewport suddenly looked unexpectedly wretched on the new device.

The responsibility here goes two ways. Browser makers need to provide reliable baselines of viewport and text sizing, yes. But we as implementers also need to stop grasping for pixel-perfect control over our layouts (the “control” is an illusion, anyway).

A way forward

The only way for us to move forward is together. As developers and designers, we need to hold up our end of the bargain and be mindful of how we do our work—and that means letting go of the notion of pixel precision once and for all. We need to earn the trust of browser makers so they hear us out when things just frankly aren’t right. We hope this article illustrates we’re trying to do the right thing. We hope browser makers acknowledge that and follow suit.

Standards and consistency are more important now than ever before. Please let browser makers and device manufacturers, like Apple, know that we rely on consistent and reliable decisions about default viewports and their zooming. We’re willing to hold up our end of the agreement, and we need them with us.

Let’s move into the future—together.

RSS readers: Don't forget to join the discussion!

0
Your rating: None

HTML5 Logo

Today, the Worldwide Web Consortium (W3C) is announcing that it’s completed its three-year quest to finalize the HTML5 specification. As the W3C says in its press release, "HTML5 is the cornerstone of the Open Web Platform," the cross-platform programming environment usually referred to by the umbrella term "web standards." HTML5 and related technologies like JavaScript and CSS provide a way to write rich web applications designed to run on any device that follows the specifications, and many companies are hitching their futures to the platform’s success. But despite the fact that the specification is now feature complete, meaning nothing more will be added to it, there is still a lot of work that needs to be done before HTML5...

Continue reading…

0
Your rating: None