Gridless Boilerplate : This has all the right buzzwords in the sales pitch — responsive, HTML5/CSS3, vertical rhythm, CSS normalization, and the like. The only snafu I see is that the placeholder image on the demo page isn’t responsive. I’ll trust that isn’t indicative of the rest of the framework, though I admit I haven’t dived into the code too deeply. … Read the rest here
Today! Ethan Marcotte ‘s brilliant book for A Book Apart is available for purchase . You need to go buy it. Responsive Web Design is not just an assembly of technologies, but rather a new way of approaching designing for the web. To say this book is important would be an understatement. I had the pleasure of doing the technical review of the book. Doing a technical review of anything Ethan writes is bit like trying to find an out-of-place note on Sgt… Read the rest here
Can CSS create art? That’s a question I set out to explore recently, and I like to think that the answer is yes. You can judge for yourself: Spinning the Web , a photo set on Flickr. To be clear, when I say “Can CSS create art?” I don’t mean that in the sense of wondering if art, or artful designs, can be accomplished with CSS. … Read the rest here
I’m continually struck by a sense of web design deja vu these days. After many years of pretty dull stagnation, things are moving at a fast clip once again. It reminds of the web standards years at the beginning of the century—and not just because HTML5 Doctor has revived Dan ’s excellent Simplequiz format. Back then, there was a great spirit of experimentation with CSS. Inevitably the experimentation started on personal sites—blogs and portfolios—but before long that spirit found its way into the mainstream with big relaunches like ESPN, Wired, Fast Company and so on… Read the rest here
PhotoSwipe, an Image Gallery for Mobiles Devices : HTML/CSS/JS-based image gallery specifically targeting mobile phones and tablets. I’ve just tested this on iPad 1, iPhone 4, BlackBerry PlayBook, Samsung Galaxy Tab, and HTC Aria. It works fine on all of them except the Aria (slow loading for some reason). … Read the rest here
CSS Mask-Image & Text : Here’s something I wasn’t aware of: Add a texture to HTML text using the CSS property mask-image and a transparent PNG. Currently works only in WebKit but degrades nicely for other browsers. Thanks, Trent. … Read the rest here
Hiring: Senior Software Developer at charity: water : Regular readers of this site are familiar with my partiality to charity: water . They’re seeking someone with experience developing with an MVC framework (CakePHP is a plus), database design and implementation (RDBMS or NoSQL) and working in test-driven development. Experience with PHP and Java is necessary, as well as HTML/CSS and JavaScript. It’s a tall order for an organization accustomed to crushing tall orders, i.e. helping nearly a billion people get access to clean drinking water. … Read the rest here
Spritemapper, a CSS Spritemap Generator : Well now this sounds pretty handy. Merges multiple images into one and generates CSS positioning for the corresponding slices. … Read the rest here
Flux CSS3 Slider : Hardware-accelerated image transitions using CSS3, which, as described in the readme on GitHub , “improves performance on less powerful devices such as mobiles and tablets.” Indeed, this functions quite well on both my iPad and iPhone. … Read the rest here
Adaptive Web Design by Aaron Gustafson : Practical ways that you can apply progressive enhancement principles using HTML, CSS, and JavaScript. Aaron is a fantastic writer and speaker (and just a pleasure to be with in person, I might add). Needless to say, I’ve purchased a copy. … Read the rest here
The next talk here at An Event Apart in Boston is one I’ve really, really, really been looking forward to: it’s a presentation by my hero Ethan Marcotte . I’ll try to liveblog it here… The talk is called The Responsive Web Designer’s Workflow but Ethan begins by talking about his grandmother. She was born in 1910 and she’s still in great shape. This past Christmas she gave Ethan a gift of three battered and worn books that were her father’s diaries from the 1880s. They’re beautiful… Read the rest here
Determining a unit of measurement to size our text can be a topic of heated debate, even in this day and age. Unfortunately, there are still various pros and cons that make the various techniques less desirable. It’s just a matter of which less-desirable is most desirable. There are two main techniques that are extolled: Size with px Size with em Let’s review these two approaches before I reveal the magical third. Sizing with px In the early days of the web, we used pixels to size our text. … Read the rest here
The rise of smart devices like the iPhone and iPad has led to an application goldrush, with companies racing to stake their claims. In the early days we saw a few lucky pioneers strike gold with novelty apps. There were also a handful of independent developers and well-known brands that invested in user experience and captured the high end of the market. However, as with most goldrushes, the obvious targets were depleted very quickly. Digital prospectors are arriving to find a very different market, one rife with competition and few obvious deposits to mine. Furthermore, our appetite for apps seems to be dwindling as we fall back on a few must-have staples. … Read the rest here
Funny Bugs is a non-profit endeavor our family has been working on over the past several months. We think kids with Type 1 diabetes deserve a fun, educational, and social experience for managing their diabetes and helping others do the same. We’re making plans to build that experience in our (very) limited spare time. Our 7-year-old son, a Type 1 diabetic, has been the chieftain of the project. Funny Bugs is literally a product of his imagination. … Read the rest here
Over the weekend, Aaron Gustafson and I created a tool for anyone who wants to resolve a series of CSS transforms into a matrix() value representing the same end state. Behold: The Matrix Resolutions . (You knew that was coming, right?) It should work fine in various browsers, though due to the gratuitous use of keyframe animations on the html element’s multiple background images it looks best in WebKit browsers. The way it works is you input a series of transform functions, such as translateX(22px) rotate(33deg) scale(1.13) . The end-state and its matrix() equivalent should update whenever you hit the space bar or the return key, or else explicitly elect to take the red pill. … Read the rest here
When I met up with Malarkey right before An Event Apart in Seattle he told me about a quick bit of guerrilla testing he had been doing. He popped into a store selling Windows Phone 7 devices and started surfing the web. Specifically, he started looking at sites using responsive design like Jon ’s and Colly ’s. Most of the sites he looked at displayed the desktop layout instead of adapting to the smaller dimensions of the screen. That’s because the rendering engine for Windows Phone 7—some bastard hybrid of IE 7 and IE6—doesn’t support media queries. So if you’re using media queries to undo width and float declarations, the media queries won’t be executed… Read the rest here
I just shipped off the last of my drafts for CSS Pocket Reference, 4th Edition to my editor. In the process of writing the entries, I set up an ad-hoc test suite and made determinations about what to document and what to cut. That’s what you do with a book, particularly a book that’s meant to fit into a pocket. My general guide was to cut anything that isn’t supported in any rendering engine, though in a few cases I decided to cut properties that were supported by a lone browser but had no apparent prospects of being supported by anyone else, ever. For fun, and also to give fans of this or that property a chance to petition for re-inclusion, here are the properties and modules I cut… Read the rest here
Hiring: Front-End Developer at Newism : This one’s for all the Aussies in the house. A full-time role in Newism ’s Newcastle city office. They’re seeking a front-end developer with a solid understanding of HTML, CSS, and JS. The ideal candidate, among other things, “signs up to every new web app known to man, just because they have a nice splash page.” … Read the rest here
Here’s an interesting little test case for transitions . Obviously you’ll need to visit it in a browser that supports CSS transitions, and additionally also CSS 2D transforms. (I’m not aware of a browser that supports the latter without supporting the former, but your rendering may vary.) In Webkit and Gecko, hovering the first div causes the span to animate a 270 degree rotation over one second, but when you unhover the div the span immediately snaps back to its starting position. In Opera 11, the span is instantly transformed when you hover and instantly restored to its starting position when you unhover. … Read the rest here
Ceaser: CSS Animation Tool : Speaking of year 12, this is brilliant. Preview different easing defaults, adjust the bézier curve if you like, and then grab the CSS. /via CSS3 Watch … Read the rest here