File Under: CSS, Visual Design, Web Standards
Feb
8
2012

Responsive Design Tricks: Fluid Typography With CSS 3

By

Photo: Ariel Zambelich/Wired.com

Building responsive websites means that your design has to adapt to different screen sizes. That there is no such thing as “pixel perfect” has long been a maxim of good web design, but nowhere is this more true than when you start working with percentage widths, em-based type and other flexible techniques of responsive design. While fluid grids, adaptive images and other tools help, sometimes even basic things like the flow of type can look wrong without a little extra help.

One common problem when designing for multiple devices is handling the changes that happen when the user rotates the screen. It’s frustrating to see your elegant portrait-oriented designs fall apart as the device moves to landscape mode (or vice versa). Frequently the problem is that images, videos and other embedded content in your page is sized in relation to the pixel width of the viewport, but the type is not. That means that the type fails to adapt to layout changes, leaving ugly gaps, whitespace or hard-to-read, overly long lines.

There are a number of ways to solve this problem, but one of the simplest and easiest is to use fluid typography in addition to your fluid grid. BBC developer Mark Hurrell wrote up an excellent tutorial some time ago that shows how, by specifying font sizes in rems, you can “adjust every font-size on the page by using media-queries to change the font-size set on the BODY or HTML element according to viewport width.”

To find the right size type for various screen widths, Hurrell calculates a resolution-independent font scale based on target widths. That is then applied using a series of media queries and the new CSS 3 unit rem. The rem unit means ems relative to the root (the HTML) element. That means your type gets proportionally larger overall, rather than in relation to its parent element as would happen with a simple em. As Hurrell notes, support is pretty much universal on tablets and phones (browsers that don’t support it will fall back to px sizing, so all is not lost).

In the end what you get using rems and media queries is fluid typography that scales just like a fluid grid. That means that when the device rotates the type resizes to fit the new screen dimensions. For more details on how to make it work on your site be sure to check out the Responsive News blog post, which also has a few links to websites already using this trick.

Tags: ,
File Under: Browsers
Feb
8
2012

Adobe Confirms: No Flash for Chrome on Android

By

Google issued a beta release of Chrome for Android earlier today. The browser provides support for modern web standards and includes a number of compelling features that aren’t available in the Android’s default browser. One noteworthy Chrome desktop feature that isn’t included in the mobile port, however, is the integrated Flash runtime.

Adobe has issued a statement confirming that Chrome for Android does not support Flash content. The company also indicated that it does not plan to work with Google to add Flash support to the new mobile browser. Adobe will, however, continue supporting Flash in the current default Android browser.

“Today Google introduced Chrome for Android Beta. As we announced last November, Adobe is no longer developing Flash Player for mobile browsers, and thus Chrome for Android Beta does not support Flash content,” wrote Adobe’s Flash Platform product manager Bill Howard.

Adobe struggled for years to make the Flash player plugin viable on mobile devices. Though it was able to make Flash work reasonably well on Android phones, results were mixed on other systems. Due to Apple’s unwillingness to allow the Flash plugin on iOS and the difficulty that Adobe faced bringing the Flash player to new devices, the plugin never achieved the same ubiquity on phones that it has historically enjoyed on the desktop.

These setbacks caused Adobe to abandon its mobile Flash player strategy last year. The company announced that it would phase out development of its mobile Flash player plugin and not support it on new platforms. Adobe instead focused its mobile Flash efforts on developing tools for deploying Flash content as native mobile applications. It also strengthened its commitment to native web standards and acknowledged HTML5 as the way forward for building rich mobile web experiences.

When Google eventually moves to replace the default Android browser with Chrome in future versions of the Android platform, devices that run the operating system will likely no longer be able to play Flash content in the browser.

This article originally appeared on Ars Technica, Wired’s sister site for in-depth technology news.

Tags: ,
File Under: Browsers
Feb
7
2012

Adobe Builds Flash Sandbox for Firefox

By

Flash logoAdobe wants to save Firefox users from falling victim to Flash-based security flaws. Working with Mozilla, Adobe has created a beta version of Flash with a new sandbox technology designed to limit the damage Flash-based attacks can do. Adobe previously added similar sandbox protection to Google’s Chrome browser.

If you’d like to test the new Flash Player Protected Mode for Firefox on Windows 7 or Vista, head over to the Adobe Labs download page. Bear in mind that this is a beta release and may contain some bugs.

The new sandbox feature for Flash in Firefox will provide extra protection against malicious browser exploits launched through the Flash Player. Sandboxing means that even when such attacks succeed, the damage is limited and won’t spill over into the rest of the browser or even the operating system.

The design of the Flash sandbox is similar to what Adobe uses in its Adobe Reader X Protected Mode. “Since its launch in November 2010, we have not seen a single successful exploit in the wild against Adobe Reader X,” writes Peleus Uhley, senior security researcher for Adobe. Uhley goes on to say that Adobe is hoping to “see similar results with the Flash Player sandbox for Firefox once the final version is released later this year.”

While Adobe has ceased development of mobile Flash, the company continues to develop and improve Flash for the desktop. HTML5′s canvas and video elements — among others — are designed to remove the need for plugins like Flash on the web. However, HTML5 support remains incomplete even in the newest browsers, and Flash will likely remain a necessary part of the web video and animation world for the foreseeable future.

Tags: ,
File Under: Browsers, Security
Feb
7
2012

Google to Strip Chrome of SSL Revocation Checking

By

Google’s Chrome browser will stop relying on a decades-old method for ensuring secure sockets layer certificates are valid after one of the company’s top engineers compared it to seat belts that break when they are needed most.

The browser will stop querying CRL, or certificate revocation lists, and databases that rely on OCSP, or online certificate status protocol, Google researcher Adam Langley said in a blog post published on Sunday. He said the services, which browsers are supposed to query before trusting a credential for an SSL-protected address, don’t make end users safer because Chrome and most other browsers establish the connection even when the services aren’t able to ensure a certificate hasn’t been tampered with.

“So soft-fail revocation checks are like a seat-belt that snaps when you crash,” Langley wrote. “Even though it works 99% of the time, it’s worthless because it only works when you don’t need it.”

SSL critics have long complained that the revocation checks are mostly useless. Attackers who have the ability to spoof the websites and certificates of Gmail and other trusted websites typically have the ability to replace warnings that the credential is no longer valid with a response that says the server is temporarily down. Indeed, Moxie Marlinspike’s SSL Strip hacking tool automatically supplies such messages, effectively bypassing the measure.

“While the benefits of online revocation checking are hard to find, the costs are clear: Online revocation checks are slow and compromise privacy,” Langley added. That’s because the checks add a median time of 300 milliseconds and a mean of almost 1 second to page loads, making many websites reluctant to use SSL. Marlinspike and others have also complained that the services allow certificate authorities to compile logs of user IP addresses and the sites they visit over time.

Chrome will instead rely on its automatic update mechanism to maintain a list of certificates that have been revoked for security reasons. Langley called on certificate authorities to provide a list of revoked certificates that Google bots can automatically fetch. The time frame for the Chrome changes to go into effect are “on the order of months,” a Google spokesman said.

This article originally appeared on Ars Technica, Wired’s sister site for in-depth technology news.

Tags:
File Under: JavaScript
Feb
6
2012

A Rose by Any Other Name Might Smell as Sweet, But it Would Probably Be Larger

By

It may have started as a lark, but the annual JS1K contest has long since ceased to be a joke. This year’s contest is already in full swing and notable for a spectacular 3-D drawing of a rose rendered using less than 1,024 bytes of JavaScript.

The JS1K contest seeks the web’s best JavaScript creations, with one small catch — the code used must be less than 1k. It might sound insane considering that some JavaScript frameworks — just the frameworks! — are over 100k, but since it began several years ago, JS1K’s experiments have never failed to impress.

One of this year’s most jaw-dropping efforts to date is developer Román Cortés 3-D rendering of a rose. Relying on Monte Carlo methods to keep the code size down, Cortés’ code draws a very nicely shaded 3-D rose for the love-themed 2012 edition of JS1K. You can check out the live demo on the JS1K website.

One word of warning: Part of what makes Cortés’ rose so small is that much of the heavy lifting is handed off to the processor. The demo code brought my CPU use over 100 percent and kept it pegged there the entire time it was open in Safari. Firefox and Chrome both managed to keep the number down to roughly 93 percent, but suffice it to say that a procedurally generated 3-D rose will tax your CPU.

To see how Cortés created the code behind the rose, be sure to visit his blog which offers a very thorough tutorial explaining how and why the code works. There’s also a great write-up on Cortés’ previous JS1K effort, a 3-D Christmas tree. Also be sure to check out the other submissions to this year’s JS1K contest on the JS1K website.

If you’ve got some impressive but terribly small bit of JavaScript code up your sleeve, fear not; the JS1K contest will continue accepting submissions through Wednesday, March 14, 2012. Details on the rules and submission process can be found on the JS1K website.

Tags: ,
File Under: Browsers
Feb
2
2012

Microsoft Touts Plugin-Free Web, Offers Desktop Fallback for Flash

By

Microsoft’s new version of Internet Explorer has barred browser plugins in the Metro environment. But Microsoft has revealed a method that plugin-dependent websites can use to leap over Metro’s walls and reach the green fields of the conventional Windows desktop, where Flash is still allowed to roam free.

The relevance of proprietary browser plugins is declining as standards-based web technologies mature. Native web technologies don’t yet supply complete functional equivalence with the capabilities of plugins, but the open web has the advantage of greater ubiquity.

The ubiquity of native web standards over proprietary plugins is set to get a major boost from Microsoft with the launch of Windows 8 and Internet Explorer 10. As we have previously reported, the next major version of Microsoft’s web browser will not display plugins in the Metro environment, which will be the default shell in Windows 8.

A plugin-dependent website prompting the user for permission to run on the desktop. Image courtesy of Microsoft

Microsoft has published a series of posts in its official IE development blog that discuss the implications of this change and what it means for users and web developers. In a new post published this week, IE program manager lead John Hrvatin highlighted the advantages of plugin-free browsing and emphasized the need for web developers to start supporting users who browse in environments that don’t have plugins enabled.

“The transition to a plug-in free web is happening today. Any site that uses plugins needs to understand what their customers experience when browsing plugin free. Lots of web browsing today happens on devices that simply don’t support plugins,” he wrote. “Metro style IE runs plug-in free to improve battery life as well as security, reliability, and privacy for consumers.”

A growing number of websites that rely on browser plugins already offer a standards-based fallback for users who are browsing on popular plugin-free devices such as as the iPhone or iPad. Microsoft has previously discussed some of the steps it is taking to ensure that those websites serve their plugin-free content to Metro users.

There will still likely be many Flash-heavy websites, however, that can’t accommodate users who are browsing without plugins. In the blog post, Hrvatin explained that such websites can ask the user for permission to jump to the conventional Windows desktop and launch the windowed version of Internet Explorer, which will have full support for plugins.

Web developers can get the browser to display the prompt by including the special requiresActiveX=true property in an X-UA-Compatible meta tag or HTTP header. Hrvatin cautions that this feature is included for transitional purposes and is intended to serve as a last resort. The preferred behavior is still for web developers to display a plugin-free version of their site to users who are browsing in the Metro environment.

This article originally appeared on Ars Technica, Wired’s sister site for in-depth technology news.

Tags: ,
File Under: Browsers
Feb
1
2012

Firefox 10 Arrives With New Dev Tools and Full-Screen API

By

Mozilla has officially released Firefox 10. The new version of the open source web browser includes a handful of improvements and new features. The browser’s built-in tools for web developers got a particularly significant boost in this release. The new version also offers better support for a number of web standards.

Firefox’s developers decided last year to transition the browser to a time-based, six-week release cycle. The new release management strategy ensures that performance improvements and support for new web standards reach users as soon as possible. The faster release cycle posed challenges, however, for enterprise adopters and other users who require a longer support period. In order to address that issue, Mozilla has decided to offer an annual extended support release with a full year of updates. Firefox 10 is the first official extended support release.

A minor adjustment to the browser’s navigation bar is the biggest user-facing change in Firefox 10. The forward arrow button is no longer persistently visible by default in the navigation toolbar. It will only appear when the user navigates back a page. That means the button only shows when it can be activated. When the user clicks the forward arrow button and returns to the front of the history stack, the button will disappear again.

The distinctive keyhole shape that is formed by the back and forward buttons in Firefox’s navigation toolbar has been characterized in the past by Mozilla designers as an important part of the browser’s visual identity. Much like the angular tabs in Chrome, it’s an aesthetic characteristic that is uniform across platforms and helps make the browser recognizable.

The user interface change in Firefox 10 will make it so that the keyhole shape is only visible when the user navigates back. The feature worked predictably in our tests and didn’t pose any problems in practice. It’s worth noting, however, that it doesn’t appear to be available when the user has toggled the preference for small toolbar icons.

The new developer tools in Firefox 10

Another major change in Firefox 10 is the introduction of new developer tools. Previous versions of the browser have included a web console, a JavaScript scratchpad, and a simple tool for inspecting the Document Object Model (DOM). Firefox 10 has a new tightly-integrated developer panel with a richer DOM inspector and a tool for viewing, toggling, and modifying CSS properties.

The DOM inspector follows your cursor as you move it over elements of the page and will lock in on an element when you click. An HTML pane at the bottom of the screen will show you the markup for the target element and allow you to modify the values of element attributes. The HTML inspector pane also has a slick breadcrumb bar that makes it easy to see the position of the target element in the page hierarchy.

The CSS inspector will show you a list of CSS properties associated with the selected element, including inherited properties. Each one has a checkbox that you can click to toggle visibility. You can also click one of the values to replace it on the fly.

These built-in development tools in Firefox are simpler and less intrusive than more sophisticated alternatives such as the Firebug add-on. There are a number of additional features under development that will be included in the inspector panels in future versions of the web browser. One of the most intriguing is a tool that uses WebGL to show the user a three-dimensional representation of the page DOM. That feature wasn’t ready for inclusion in Firefox 10 and will potentially appear in the next major release.

In addition to the new inspector, web developers can also look forward to improved support for web standards. An addition of particular significance is a new full-screen API, which makes it possible for an individual HTML element to break out of the browser window and stretch itself to cover the entire screen. This feature is going to be especially useful for videos and games. You can see it in action by visiting Mozilla’s fullscreen demo page.

We first wrote about the full-screen API in November, when the feature originally landed in nightly builds. Mozilla carefully considered potential abuse scenarios when implementing the feature. It’s designed so that an element can only switch into fullscreen mode in response to a direct user action. The browser ensures this by using a technique similar to the one used to block unwanted popup windows.

Another addition in this release is support for 3D CSS transforms. This feature, which was originally created by Apple, offers a declarative mechanism for applying animated three dimensional transformations to individual HTML page elements. It’s important to note that 3D CSS transforms are entirely distinct from WebGL, which is a low-level JavaScript API for 3D programming.

Support for 3D CSS transformations is a welcome addition to the browser. Developers are already using the feature in the wild, but most of the existing 3D CSS content was authored with WebKit-specific prefixes and consequently won’t work in Firefox yet.

Firefox 10 is a solid release that expands the browser’s capabilities. Although the lineup of new features is slim, it’s a respectable update by the standards of the rapid release model. The new version will be pushed out through the Firefox update system shortly. Firefox 10 can also be downloaded directly from the Mozilla website. For more details, you can refer to the official release notes.

This article originally appeared on Ars Technica, Wired’s sister site for in-depth technology news.

Tags:
File Under: Security, servers, Web Basics
Jan
31
2012

Google, Microsoft, Yahoo, PayPal Go After Phishers With New E-Mail Authentication Effort

By

Major e-mail providers, including Google, Microsoft, and Yahoo are teaming up with PayPal, Facebook, LinkedIn, and more, to implement a new system for authenticating e-mail senders to try to prevent the sending of fraudulent spam and phishing messages.

The protocol that powers e-mail, SMTP, dates back to a more trusting era; a time when the only people who sent you e-mails were people you wanted to send you e-mails. SMTP servers are willing to accept pretty much any e-mail destined for a mailbox they know about (which is, admittedly, an improvement on how things used to be, when they’d accept e-mails even for mailboxes they didn’t know about), a fact which spammers and phishers exploit daily.

Making any fundamental changes to SMTP itself is nigh impossible; there are too many e-mail servers, and they all have to interoperate with each other, an insurmountable hurdle for any major change. So what we’re left with is all manner of additional systems that are designed to give SMTP servers a bit more information about the person sending the e-mail, so that they can judge whether or not they really want to accept the message.

The two main systems in use today are called SPF (Sender Policy Framework) and DKIM (DomainKeys Identified Mail). Both systems use DNS to publish extra information about the e-mail sender’s domain. SPF tells the receiving server which outgoing servers are allowed to send mail for a given domain; if the receiving server receives mail from a server not on the list, it should assume that the mail is fraudulent. DKIM embeds a cryptographic signature to e-mail messages and an indication of which DNS entry to examine. The receiving server can then look up the DNS entry and use the data it finds to verify the signature.

These systems are not perfect; though both are used widely, they haven’t been adopted universally. This means that some legitimate mail will arrive that doesn’t have SPF or DKIM DNS entries, and so mail servers can’t depend on its presence. Common legitimate operations can also break them; many mailing list programs add footers to messages, which will cause rejection by DKIM, and forwarding e-mails causes rejection by SPF. As a result, failing one or other test is not a good reason to reject a message.

These systems also make it hard to diagnose misconfigurations; receiving servers will typically just swallow or ignore mails sent by systems with bad SPF or DKIM configurations.

The large group of companies, which includes the biggest web mail servers and some of the most common corporate victims of phishing attempts, is proposing a new scheme, DMARC (“Domain-based Message Authentication, Reporting & Conformance”), in an attempt to tackle these problems. DMARC fills some of the gaps in SPF and DKIM, making them more trustworthy.

DMARC's position within the mail receipt process (illustration by dmarc.org)

DMARC is based on work done by PayPal in conjunction with Yahoo, and later extended to Gmail. This initial work resulted in a substantial reduction in the number of PayPal phishing attempts seen by users of those mail providers, and DMARC is an attempt to extend that to more organizations. As with SPF and DKIM, DMARC depends on storing extra information about the sender in DNS. This information tells receiving mail servers how to handle messages that fail the SPF or DKIM tests, and how critical the two tests are. The sender can tell recipient servers to reject messages that fail SPF and DKIM outright, to quarantine them somehow (for example, putting them into a spam folder), or to accept the mail normally and send a report of the failure back to the sender.

In turn, this makes SPF and DKIM much safer for organizations to deploy. They can start with the “notification” mode, confident that no mail will be lost if they have made a mistake, and use the information learned to repair any errors. DMARC also allows recipients to know if a domain should be using SPF and DKIM in the first place.

Without a global rollout, DMARC can’t solve all phishing and spam problems. The companies that have signed up to support the project include major recipients of phishing attempts—the various free e-mail providers—and sites against which phishing attacks are regularly made. Mail sent between the organizations will be verified using the SPF/DKIM/DMARC trifecta. Anyone using the major mail providers and the major services should see a substantial reduction in fraudulent mail. Senders and recipients who want to receive similar protection can implement DMARC themselves by following the specification that the DMARC group is working on.

Given the constraints imposed by SMTP, we may never get an e-mail system that is entirely free of malicious and annoying junk. SMTP e-mail was never designed to be trustworthy, and systems like SPF and DKIM are constrained by the inadequacies of SMTP’s design. Nonetheless, mechanisms such as DMARC can still make a big difference, and with the support of these major companies, e-mail might get that little bit safer.

This article originally appeared on Ars Technica, Wired’s sister site for in-depth technology news.

Illustration by dmarc.org

Tags:
File Under: Web Basics
Jan
30
2012

Mozilla Questions Web Orthodoxies With ‘Pancake’

By

Mozilla Labs has launched a new project designed to question the web as we know it, including what some might think of as the web’s sacred cows — like whether or not we need to see URLs.

Pancake, as the new project is known, will help Mozilla, “better understand what people do on the web, why and how they do those things, and how we can make those things easier and more efficient.” The goal of Pancake according to Mozilla’s new, awesomely titled Director of Pancake Stuart Parmenter, is to play with “huge concepts, monumental problems and occasionally crazy ideas.”

Among the ideas in Pancakes’ sights that many might consider crazy is questioning whether users need to care about the URL. Note that no one is questioning the URL itself, just whether or not the user needs to be concerned with it. Indeed Pancake won’t be the first time Mozilla has questioned whether or not the user needs to know about URLs, nor is Mozilla alone on that score, Google’s Chrome team has also experimented with hiding the URL bar.

Might there be some better means of letting the user know where they are, where a link leads and all the other things URLs currently do? That’s exactly the sort of question that Pancake wants to ask. We’ll never know the answer, and possibly never push the web in interesting new directions, if no one is asking the question.

If you consider the URL bar a sacred part of the web browser, fear not, no one is taking way your URL bar. The goal of Pancake is not to force anything down your throat, but to make the web better. That might mean, as Parmeter writes, “inventing new metaphors and new systems,” but the main goal of those new metaphors and systems is to “give users greater power and control within the modern web.”

In that sense it’s difficult to tell exactly what Mozilla plans to do with Pancake. In the immediate future Pancake will be rolling out its first prototype app, but the announcement is extremely vague about what that app might involve. Historically Labs projects are a very mixed bag. For every very successful Labs effort — like the syncing features that are now a standard part of Firefox — there are several others that have been quietly shelved (Ubiquity anyone? Prism?).

Pancake’s first prototype app — whatever it may be — will be released within the next few months. In the mean time you can check out the new wiki page or join the Pancake Google Group. All the other usual Labs pages — documentation, roadmap, designs and other content — will come in the weeks ahead.

Tags:
File Under: HTML5, Web Standards
Jan
27
2012

HTML5 Video on the Web Today

By

The hype surrounding HTML5 video has thankfully receded from the high water mark of 2011. But the absence of hype doesn’t mean HTML5 video is a thing of the past. In fact, while it’s true that HTML5 video still can’t completely match all of the features available in Flash, the state of HTML5 video on the web continues to improve with every new browser release.

For a very thorough rundown of exactly where and how well HTML5 video works on the web right now, check out the excellent report on the state of HTML5 video from Long Tail Video. Put together by the makers of JW Player, an HTML5 video player toolkit, the state of HTML5 video report is mercifully free of any evangelism for any particular technology. Instead it offers a level-headed look at reality, answering the basic questions — where can you use HTML5 video? How well will it work for users? And when will you need Flash fallbacks?.

HTML5 video enthusiasts will be happy to know that the state of native video on the web is looking better these days. Two-thirds of all the browsers on the web now support the HTML5 video tag. Support for the various video tag attributes has improved as well, with both Safari and Chrome offering full support.

Still, for all the bright points in the report, there is clearly still a need for Flash fallbacks if you want your video to reach the widest possible audience. With older versions of Internet Explorer still lingering (IE 9 and up support the HTML5 video tag) and the lack of support for closed captions and audio descriptions in any browser, Flash will likely remain the only option for at least some portion of the web for some time.

The good news is that, in some cases, the state of HTML5 video will be improving very soon, for example Firefox 10, which will be released in final form very soon, will support native fullscreen playback.

For more details on which parts of HTML5 video work and which don’t in today’s browsers, be sure to read through the full report.

Tags:
« OLDER POSTS