16 Feb

Frankie Roberto – Responsive Text

Some websites now contain ‘responsive images’. These scale (or crop) depending upon your screen’s viewing area, so the image sizes remain appropriate whether you’re looking at the website on a mobile phone, or on a huge flat screen monitor.

This is an example of responsive text.

The amount of textual detail scales relative to your screen size.

The effect is achieved using simple HTML class names and CSS media queries which show or hide the content depending upon the current screen width.

via Frankie Roberto – Responsive Text. In agreement, nifty idea, but defiantly unsure of the practical application.

05 Sep

Lea Verou – Pure CSS3 typing animation with steps()

steps() is a relatively new addition to the CSS3 animations module. Instead of interpolating the values smoothly, it allows us to define the number of “frames” precisely. So I used it to create headers that have the well-known animated “typing effect”:

via Lea Verou – Pure CSS3 typing animation with steps(). Pretty nifty trick.

02 May

Google Web Fonts – Streamline your web font requests. Introducing “text=”

Google will optimize the web font served based on the contents of this parameter. For example, if you only require a few letters for a logo, such as “MyText”, Google will return a font file that is optimized to those letters. Typically, that means Google will return a font file that contains only the letters you requested. Other times, Google might return a more complete font file, especially when that will lead to better caching performance.

via Google Web Fonts – Streamline your web font requests. Introducing “text=”. Pretty intelligent Google.

31 Mar

Mobile Boilerplate

Mobile Boilerplate is your trusted template made custom for creating rich and performant mobile web apps. You get cross-browser consistency among A-grade smartphones, and fallback support for legacy Blackberry, Symbian, and IE Mobile. Mobile Boilerplate is not a framework, but works well with projects like jQuery Mobile, Sencha Touch, Phonegap and Appcelerator. You get an offline caching setup for free, fast button clicks, a media query polyfill, and many common mobile WebKit optimizations waiting for you. Use Mobile Boilerplate to start your mobile webapp quickly and immediately benefit from community best practices.

via Mobile Boilerplate. Awesome resource.

03 Feb

Fontspring – The New Bulletproof @Font-Face Syntax

In September 2009, Paul Irish came up with the Bulletproof syntax for writing the @font-face declaration. It was compact and worked across all browsers at the time. Recent, growing complaints that fonts weren’t loading in Android, led us to recommended the Mo’ Bulletproofer syntax devised by Richard Fink instead. Unfortunately Mo’ Bulletproofer requires double declarations and is therefore harder to maintain.

via Fontspring – The New Bulletproof @Font-Face Syntax. In short yes there is a better way.

24 Jan

Alexander Limi – Mythbusting: Why Firefox 4 won’t score 100 on Acid3

Every once in a while — especially around the time of an upcoming new release — people argue that Firefox isn’t standards compliant, since it doesn’t score 100 on this test, but has been scoring 97 for quite a while, and will probably never implement what’s required to reach a score of 100.

via Alexander Limi – Mythbusting: Why Firefox 4 won’t score 100 on Acid3. Interesting stuff, though admittedly this is inside baseball stuff even for me.

17 Jan

CSS-Tricks – Rotating Feature Boxes

The full effect of it (with transition animations) will work in newish WebKit and Opera browsers and Firefox 4 (in real beta as of today). Any other browser will rotate the blocks without transition animation.

via CSS-Tricks – Rotating Feature Boxes. Pretty neat trick, rotate through boxes of html content and display subtitles when the boxes is on the side.

31 Dec

Jeffrey Zeldman Presents The Daily Report – 2010: The Year in Web Standards

WHAT A YEAR 2010 has been. It was the year HTML5 and CSS3 broke wide; the year the iPad, iPhone, and Android led designers down the contradictory paths of proprietary application design and standards-based mobile web application design—in both cases focused on user needs, simplicity, and new ways of interacting thanks to small screens and touch-sensitive surfaces.

via Jeffrey Zeldman Presents The Daily Report – 2010: The Year in Web Standards. What a year indeed for web design and web standards.