Archive
Responsive Design Tricks: Fluid Typography With CSS 3
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.
Feb08
Adobe Builds Flash Sandbox for Firefox
Adobe 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.
Feb08