Yesterday must have been an exciting day at the Twitter offices. They released lots of new stuff, including a way to embed tweets. I thought I’d test it out in a responsive setting, and it works like a charm.
Another amazing release today that deserves your attention: Embedded Tweets!dev.twitter.com/docs/embedded-…Put Twitter EVERYWHERE!!!
— Josh Brewer (@jbrewer) December8, 2011
I’ve noticed that just about every year or so I favor larger type for body / paragraph text. A while back I moved from 16px (100%) to 18px (112.5%) and today I decided to increase that to 20px (125%) for screens larger than 900px. I’ve been hesitant to worry too much about extra-large responsive views on this blog because I didn’t want to completely blowout the ideal range for characters-per-line, but the larger font-size keeps things nice and proportional.
This is why, typographically speaking, fluid layouts fail without the power of media queries. Increasing your font-size as a column widens can keep you within that safe 45 to 75 characters per line range, and keep readers happy.
Mark Boulton on the challenges we face when incorporating traditional ad spaces into responsive layouts:
The template > slot > ad mental model is engrained both in advertisers, planners and web sites. Providing space for ads needs to be broadened into multiple spaces for one ad concept. This requires closer collaboration between advertisers and web sites, designers and marketeers and sales teams.
It’s clear that Mark has gotten his hands dirty working on a solution, and I like his idea for selling slot packages rather than single spaces. I could even see that instead of sending out the typical PDF diagram of ad slots and sizes, sales teams could point people to an actual responsive layout/template so they could see how their ad resizes and relocates within the site hierarchy at various widths.
What happens if ads become fluid and text is designed into the images or movies? Readability will certainly suffer, as will clicks. I wonder if advocating a similar image + HTML text approach much like The Deck or Fusion Ads would be a possibility. That may be a lot to ask, but if things need to be redefined, let us not be short-sighted.
I recently wrote a tutorial on texturizing web type for .Net magazine (Issue 221). One of my favorite CSS properties for text, mask-image, is covered in-depth from creating a semi-transparent texture in Photoshop to implementing it with HTML & CSS.
To take things further, I added in a CSS transform to get that skew, then dropped in FitText to make it all scalable for use in your fluid/responsive layout. Get a copy of Issue 221 & check it out for yourself!
I love what the power of the Internet can do for small businesses, especially when those businesses belong to friends and industry cohorts. Bob & Kris Galmarini run a fantastic shop called Neve Inspired that sells handmade kids’ clothes. We recently bought my 9 month old, Henry, their Ahoy! and Super Hero shirts, and we think they’re great. As cool as it is that people I know start these enterprises, it’s even better when you love the stuff they’re making or doing. The goods become reminders of both the friends who made them and my own participation in a very personal local economy, even if that economy stretches halfway across the country (or globe). Support your friends, and if you’ve got kiddos, visit Neve Inspired!
“I want ________ to be as simple as my iPod/iPhone.” I’ve said this about lots of things: my car’s dashboard, my washer & dryer, and yes, my thermostat. Meet Nest, a learning thermostat launched by a team lead by Tony Fadell, who also lead the iPod & early iPhone teams at Apple. I just may pre-order one and test it out here in the office.
Video made responsive / fluid thanks to FitVids.js