Learn to how to make fixed-width images fluid and how to add them to your fluid grids to build a site that responds to the size of the viewport without sacrificing aesthetics. We are delighted to present an excerpt from Ethan's new book, (and the fourth title from A Book Apart), Responsive Web Design.
- Alpha
- AlphaImageLoader
- Cascading Style Sheets
- Communication design
- Computing
- CSS filter
- Dan Cederholm
- Design Layout
- Doug Bowman
- Drew Diller
- embedded media
- Ethan Marcotte
- Faux columns
- fixed-width media
- Grid
- HTML
- HTML
- Internet Explorer
- Internet Explorer 6
- JavaScript
- Jeremy Noble
- Mark Boulton
- media queries
- media-ready elements
- Microsoft
- New York Magazine
- oversized media
- Page layout
- Richard Rutter
- Scott Robbin
- Sharp
- Stanford University
- Stanford University
- Stoyan Stefanov
- the Sundance Film Festival
- The Today
- video and other rich media
- Web design
- web design
- Web development
- World Wide Web
Our favorite ex-Yahoo at-Google web performance fast-driving all-around guru Steve Souders took a look at @font-face performance recently:
There have been a number of great posts about @font-face performance issues:
* Paul Irish: Fighting the @font-face FOUT
* Stoyan Stefanov: Gzip your @font-face files
* Zoltan Hawryluk (again): More @font-face fun
This blog post summarizes Paul, Stoyan, and Zoltan’s findings plus some very important discoveries of my own.
Among these discoveries is:
* IE doesn’t render anything in the page until the font file is done downloading.
* In all major browsers, ...no files were blocked [by font downloads].
* Busy indicators... are triggered [differently in each] browser
Steve also found that IE and Chrome didn't time out in their attempts to download a font, meaning in the case of the former that the page never displays while waiting for the font, and in the latter that the text doesn't display.
Steve's conclusions are interesting:
* Only use @font-face is you’re absolutely certain you need it.
* If you have multiple font files, consider sharding them across multiple domains.
* Don’t include unused @font-face declarations - IE will download them whether they’re used or not.
* Gzip the font files and give them a future Expires header.
* Consider lazy loading the font files, at least in IE.
- AJAX
- Amazon
- ASP.NET
- ASP.NET
- Asterisk
- BMP-1
- capable software
- Character sets
- CSS
- Digital typography
- Front Page
- Germany
- Graphic design
- HTML
- HTML
- Japan
- JavaScript
- Mapping of Unicode characters
- Paul Irish
- Performance
- present systems
- Publishing
- Section
- Sennheiser IE 8 Headphone/Headset
- Steve Souders
- Stoyan Stefanov
- Taiwan
- TrueType
- Typography
- Unicode
- Unicode and HTML
- United States
- web browser
- Web development
- web performance fast-driving all-around guru
- Web Standards
- Web typography
- Yahoo!