Today’s Readings

Posted on March 28 2012 by aarontgrogg

Really beautiful cloud reproduction using CSS & JS.  I especially love that it can go full-screen, but I do wish I could “disconnect” my mouse movements from the cloud orientation.  Oh, and the Michael Bay Preset is a nice touch too…

Nice work-around for fluid text flow and floating images in responsive design layouts.

Kudos to Google for helping foot the bill, and congrats to the Nelson Mandela Centre or Memory.  I expect to lose a lot of time at that URL… (the link in the article was bonk for me, but this got me where I wanted to go: http://www.nelsonmandela.org/

Pretty cool visual of wind patterns over the contiguous 48 U.S states.  You can zoom in by clicking an area, and some times you get additional city information to help orient where you are.  I find the two largely unwindy spots interesting, but annoyingly, neither offers the name of any cities near them…  An inion-skin overlay of a Google Map or something would be nice (especially since the creators apparently work for Google…).

A simply bad-ass article on improving web performance by delaying unnecessary content loads, without harming accessibility to the content, from the good folks that brought us the new Boston Globe site. I love, love, love this!

Just when you thought the infinite-scrolling-changing-page fad was growing cold, here comes jQuery Scroll Path. The demo is kind of silly to prove a point, but I could see some really artistic applications for this.

Okay, since we’re talking about the Invasion of the Scroller sites, I have somehow still not seen Inception, so I didn’t want to scroll to the end and ruin the movie for myself, but here is an explanation of the movie. Not sure if it’s accurate, of course, but there it is…

A very clever combination of :hover and :active to give us CSS-only drop-downs; again, no JavaScript at all on the examples. Sweetness.

And this is another pretty clever example of CSS-only effects, using über-long transition timings.

I’ve been hearing about CSS Regions recently, so I was pleased to see this article about them. A nice explanation, and certainly an exciting idea for responsive design content reflow!

Serious geek-time here, but for any coders, here is an interesting look into the methods of debugging a Google Maps issue. Beyond the steps and approach someone else took, there are also some cool tools and tips that I wouldn’t have used / thought of.

Interesting catalog of release dates for all major browsers.

And finally, ever want to ride into space aboard the Space Shuttle? Yeah, me too! Ever want to ride into space while hanging onto the outside of a Solid Rocket Booster (the pencil-shaped rockets that fly off of the Shuttle and fall back to Earth)? Yeah, me neither! But now we “can”, via YouTube! Be sure to stick around (or jump ahead) to about 7:20 when they splash back into the ocean…

Happy reading,
Atg

Today’s Readings

Posted on March 26 2012 by aarontgrogg

New Zealand 100% Pure offers some great interactive design (and the responsive design is pretty good, at least until you get down to the small-tablet-ish size). The opening page takes similar, previously-seen techniques to a new level, but I really love how the site interacts “with itself” when you get to the inner pages, how clicking something on the left affects the map and offers on the right. A seriously in-depth explanation of the site from Smashing Magazine.

This makes me feel very, very small…

And this puts me completely in awe…

Great video of the Stephen Woods‘ talk, Creating responsive HTML5 touch interfaces. A lot of very-easy-to-listen-to ah-ha moments.

And this SitePoint article might be one of the best finds in a while for those struggling with image sizes & dimensions on their responsive design projects!

My last Today’s Readings post talked about Weinre. Here’s a built-in Android-only version of the same development tool. Nice!

And maybe even nicer is Adobe Shadow, which lets you remotely debug across any device! There are a couple hoops to jump through, none impossible, though the one that could be a hang-up for some is that the desktop on which you’re doing the debugging and the mobile device on which you’re testing must be on the same network (which means both will likely need to run on the same wi-fi… not a biggy for laptopers, but desktopers will probably need a wifi stick?).

Great collection of JavaScript performance links, mostly in the scope of game developing, but if you can’t learn something about performance from game developing, well, then you should probably be game developing…

Anyone else think the <picture> element could save a lot of multi-device development headaches?

Another CSS creation helper site, 3D CSS Tester, helps with making, well, 3D CSS. Sweet.

Pretty slick CSS-only accordion. Granted, it uses stuff that won’t work on older browsers, but who cares about those now-days, riiiiiggghhhttt??

Ever wanted to cruise down the Amazon, looking around at all the fascinating foliage and nature that surrounds you? Me too, and thanks to Google Street View, now I can, from the comfort of my couch… Not quite the same, I’m sure, but cool none-the-less!

And finally, get your daily bits o’ info via Twitter, Facebook or RSS, from regu.la.

Happy reading,
Atg

Today’s Readings

Posted on March 16 2012 by aarontgrogg

Seems we have (at least) two new competing image replacement techniques:

  1. http://nicolasgallagher.com/another-css-image-replacement-technique/
  2. http://www.zeldman.com/2012/03/01/replacing-the-9999px-hack-new-image-replacement/

Both are improvements over the old-standard text-indent: -9999px;, especially if you’re dealing with tablets, but does anyone have any other pros/cons on the two?

And speaking of tablets, weinre (that’s WEb INspector REmote) completely revolutionizes developing for mobile! Amazing technology, I was surprised to see it using Ajax in the background, not something cooler like WebSockets or web workers, but then again, mobile is the IE vs. Netscape of the new generation, so who knows what will work where, right? Ajax, I think hope we can all assume, will work…

Being pretty solidly a tech-geek, I’m always looking on the horizon for Star Trek technology to surface in our mundane little world… The transporter, can it really be that hard?? Well, this may not be Star Trek, but it definitely is the Jetsons!

I’ve been using Google Chrome as my default browser for some time now, primarily on my MacBook Pro. Up until recently, all was just great. However, when I’m at work I have to use a PC, and on a PC, parts of my Yahoo! Calendar are completely unreadable… Somewhere between Windows, my monitor, Chrome, and Yahoo!, somebody was mucking something up… So, of course, I went digging… Turns out Yahoo! is adding this little gem to their CSS: -webkit-text-stroke: 1px transparent; (why you would add a text-stroke, then make it transparent, I neither know, nor care, but I knew it had to go). This article provided the solution, but it’s wordy, so here are the details for adding custom CSS to ALL pages you visit in Google Chrome:

  1. View the properties of your Google Chrome shortcut (Properties for PC, Get Info for Mac)
  2. Add this to the end of the Target: URL:
    --enable-user-stylesheet (make sure there’s a “space” between the URL and this new bit)
  3. Open this file (or the relative path for Mac):
    [user_profile_name]\appdata\local\google\chrome\user data\default\user stylesheet\Custom.css (create the file Custom.css if it isn’t there)
  4. Add this line of CSS:
    * { -webkit-text-stroke: 0!important; }
  5. Save and Close the file, then re-start Chrome via the shortcut we edited above

I love the idea of Historypin! Watch the “Historypin in 90 seconds” video, then give it a whirl of your favorite neighborhood! Streetview is particularly fascinating to me, and though it seldom lines-up as well as it does in the demo video, when it does, it’s pretty amazing…

Style Tiles seem like they’d be a great idea, thanks to Jeremy for the pointer!

And finally, since switching from a PC to a Mac, I find I do not miss many things, but the one thing I continue to long-for is the ability to double-click an application’s top-toolbar and have it automatically go full-screen… This is got to just be one of those “Microsoft came up with it, so we’re not going to do it” things, right?

Happy reading,
Atg

Today’s Readings

Posted on March 2 2012 by aarontgrogg

I’m not sure if I’d ever grab this to start a new site, but Pea.rs seems like a great playground for testing HTML and CSS, at the very least! What I dig most is that everything is responsive, all the code samples AND the actual site itself!! Nicely done,
SimpleBits, and a shout-out to my good friends in Salem!

Could WP-Remote be the biggest thing to hit fellow WordPressers since multisite? Why yes, I think it just might be! So smart and easy, it’s seriously delicious…

My guess is that you could replace the word “design” in this article title with whatever-it-is-that-you-do, and the same result would hold true…

I consider Dave Artz to be one of the smarter people on the web. And when he writes, I read. Interesting findings on web performance with regards to web fonts. Also interesting to me is how hot the topic of web fonts was in late-2011-early-2012, and how fast it got cold… When was the last time you read an article about web fonts?

And if we’re going to talk web performance, Steve Souders really has to be in that conversation… A recap of web performance for 2011. I guess not surprisingly, is that, aside from Flash, website sizes are mostly increasing: we’re pushing more and more of everything at our users. Sad is the adoption of best practices once you get beyond “biggest and best” websites… Seems like our evangelism only goes so far, and makes me fearful of a widening “best practices divide”… How do we reach those down the list and convince of the benefits of improving their development techniques and practices?

This is great! Even with the above news about web fonts, the reality is that the graphic text is still around, and might even be better for performance if you’re talking low-bandwidth (when you could download a single sprite for multiple fonts rather than multiple font files), but on those mobile devices (I’m looking at you, iPad!), sending your in-page, semantic text off-stage by -9999px absolutely kills you! Nicely done, Mr. Kellum! Once more, seems like I have a lot of CSS files to update…

Thinking about responsive design? I am. And so is Elliot Jay Stocks. He brings us what is basically the designers’ versionof what Richard Rutter gave us a long time ago for responsive font sizes. Love it all.

And speaking of responsive design, thanks Luke (and Ethan :-)!

Every once in a while you come across something that makes you wish you were on a flight to, oh, maybe Mars, so you’d have plenty of time to do nothing but read, read, read…

I knew most of these, but there is always something new that developers can learn about Photoshop…

I like this technique. Wish it were more practical.

But if the current browser trends continue, it will be soon…

Oof, okay, I think that’s enough for today, what?

Happy reading,
Atg

Responsive vs. Design

Posted on March 2 2012 by aarontgrogg

As a developer, when I think of responsive design, I get a little (geekily) excited: I love coding, I love building, I love finding a way to make things work. Surely this is why I do what I do.

However, when I think of responsive design on “the grand scale”, I picture (many, but not all) designers cringing… I reflect back to conversations I’ve had, repeatedly reminding that “pixels no longer exist, it’s all about relativity, percentages of screen-estate”.

And tonight, I had a thought… And yes, I’ve been “sipping”… :-)

I think many designers look at responsive design, much the same way they looked at fluid/flexible design when those terms were first coined, as too difficult, because “it changes”… You can’t simply say “I want this there, and I want to this tall, and this wide, always.”

And such is the “new web”: shit changes.

But (he says, leaning in), the other viewpoint is this: here is the opportunity to redesign web design… It’s destined to happen anyhow, as “kids” get sick of their parent’s Internet once again, as executives decide to make the web “fresh” and “new.”

So, here is your chance designers, the chance to redesign our web experience: from design to interaction, across devices, not just a single, static appearance everywhere, but a mutating layout, based on the device the user is using, a chance to design for multiple experiences, for multiple users, across multiple screens. Think of all the billable hours! (Kidding, sort of.)

But that’s the point I want to make: responsive design does mean new stuff, but it’s exciting, and that’s how you have to face it. When the world suddenly became round, surely there were masses that hated it because it meant shit changed. And just as surely there were others that saw it as an opportunity to reach, stretch, and discover new things. To evolve.

So, who’s in?

Happy designing,
Atg