I am pretty ignorant when it comes to design. As such, I had never heard of Hillman Curtis, sadly, until reading of his passing. This video is a pretty cool introduction. I want to know more.

The Aurora Borealis, from above the Earth… Sweet…

And speaking of space (or sort of, anyway), here’s one more thing to occupy the free time I used to have!

Publishers love the prospect of “rejuvenation” that the iPad and it’s wanna-be-cousins have brought to their world, but I have heard more and more of these types of conversations… Soon, some day soon, even the publishing world will embrace the idea of the One Web…

I thought the idea of using fonts for icons went out with the <font> tag, but I am loving the rebirth I am seeing…

Google Chrome continues to prove it is by far the best browser for developing… If you’re a developer, and are still using FireFox, you owe it to yourself to give it up. It’s like switching from Notepad to an a real IDE…

Ever wanted to help further science while out for a nice leisurely walk or bicycle ride? Me neither, but if you ever do, you can now help document roadkill while you’re out-and-about via the web!

A dead-simple (and therefore brilliant!) code viewer using nothing but CSS…

And finally, ever accidentally erased something? Of course. Any chance you had a back-up? Unlikely, but congrats if you did. Ever then discover that the back-up was no good? Oh shit… And ever had all this happen to an animated movie that required some 20-30 people about a year to create? Well, that’s exactly what happened to Toy Story 2… Good thing one of the technical director was a mom!

Happy reading (and watching!),
Atg

The reason WTSTW is such a pain is simple: connection speed.  You can only fit so much turkey through the tubes at one time.  If someone is on a crappy connection (be it a mobile network, dial-up (yes, people DO still use that), satellite, DSL, cable, slow proxy server, doesn’t matter), 500kb worth of whatever is going to take longer than on a good connection.  Basic, right?  Good.

Phone Home, IE (sorry, Chrome, you just didn’t rhyme right…)

One of the first swings people took at improving speed across slow connections was to reduce HTTP Requests (the number of times a user’s browser asks a web server for something).  We now combine our CSS files into a single CSS file.  We do the same for our JS.  Then we crunch those files into un-(humanly)-readable code to squeeze every last unnecessary byte we can from them.  And we scrunch all our design graphics into a single image file.  Or we use CSS magic to create images out of thin air!

Where in the World is…

Next, we took advantage of several server techniques.  We now serve our site assets via a CDN so users in Mumbai didn’t have to wait for a roundtrip to Palo Alto to get an icon.  And we set Expire Headers and Last Modified dates so browsers don’t even have to ask for assets if they already have a current version.

And all of this is really good stuff, all proving to be really worthwhile!

My Phone is DYING!  But Nice Background Image…

Next, we started looking at the images we were serving people.  A JPG that is 400×400, still pretty small by desktop standards, is pretty big on a mobile phone, and can really clog the tubes on a slow connection!  So people started looking at responsive images, and there are some really clever ideas out there, from trying to create new elements to handle this, to simply using JavaScript to fetch what is needed, if anything at all.

Again, moving the right direction, though I’m sure we aren’t there on this one just yet.

Why is My Monitor Sideways?

Then came layout: what happens when a page designed for a 1280×1024 screen hits a 320×480 screen?  Or when that typical horizontally-oriented desktop layout hits a vertically-oriented mobile phone?  Well, @media queries soon became the darling of the ball, getting plenty of use, and, like any good drug, abuse.

You Can’t Do That Here…

Somewhere amongst all the above happenings came Progressive Enhancement, the immaculate offspring of Graceful Degradation, that says “start out doing dead-simple stuff, and if the user’s device can handle cooler stuff, add it”.  So, we started writing basic CSS and JS, then building on that in such a way that devices that could understand the new stuff would get it and use it, but the simpler devices would just run right past that stuff and still look okay, and still work okay, no-harm, no-foul.

Which is f-ing fantastic, exactly the way we should be doing things!  Right?

So, WTSTW?

But the real trick comes with content (and I’m using “content” to represent anything that appears in any page that ends in something like “.html” or “.php” or the like).  Should people on slower connections be forced to download all of the stuff that someone on a faster connection has to download?

This is the question that has been dancing around my head lately, in my spare time, like when I’m sitting on the bus or not paying attention to the movie I’m watching…

Well, it seems to me that something like Progressive Enhancement for content is needed…

The basic concept that I’d like to discuss is to make an initial page that is lightweight, indexable by search engines and readable by screen readers and devices with poor connection speeds, and can be enhanced into a better experience based on the device’s connection speed, screen size, and capabilities.

This is really the core of what has been talked about some time now as Mobile (or Content) First.  But how do you go about this, exactly?  I mean, sending a basic content file to someone on a Nokia phone makes a lot of sense, but to someone on a 24″ LCD with a T3 connection?  That seems like underkill to me, and besides, we do still want to make money and stuff, right?

Though still through a good bit of haze, I can picture something like a JSON “config file” of component URLs and horizontal and vertical DOM builds.  Once the proper components arrive, build both the horizontal and vertical layouts as DOM fragments, store both in memory so they could easily be switched on orientation change, and innerHTML the current orientation’s layout to the existing DOM.

Much the same way general assumptions are made using @media queries, assumptions could be made to create “standard blocks” of pre-built HTML that could be combined, minified and fetched as a single HTTP Request.  These standard blocks might also include the CSS and JS necessary for them on arrival, especially now that we have scoped CSS on the horizon…

The essential criteria to me would be:

1. The main content must initially be in-page, so it is indexable by search engines, readable by screen readers, and viewable on primitive devices/connections
2. As few files as possible are fetched, in a performant manner, so we are not killing the experience we are trying to save
3. Maintenance should be minimal, so we aren’t spending 4 times the hours building and caring for our sites

This is Where You Come In…

As I’ve alluded to, this is far from a fully-developed thought, just ideas that have been bouncing around in my cranium, and I wanted to get a feel for what the smart people of the world thought…

Does this make sense?  What limitations / pitfalls would you see with this approach?  What improvements / alterations / adjustments would you make?

Thanks,
Atg

A really great, easy-to-follow tutorial on how to build a responsive design site, from the ground-up.  For some it may seem a little basic, but I usually find that no matter how far beyond something I think I am, I can always find one or two nuggets tat either teach me something new or remind me of something I had forgotten.

Now that we’re finally getting to the point where we can start reliable using “advanced” CSS Selectors, you too might find a refresher course useful…

Since we’ve already talked about responsive sites and CSS, let’s combine them together and talk about an exciting new unit of measurement intended for viewports!  Support is still spotty, but getting there…

Sticking with CSS for just another sec, interesting article regarding vendor-prefixes, and whether the standard-version should be included, or not…

Ok, sticking with CSS for just one more second… CSS-only tooltips, nice!

Do you care about “the fold/scroll”?  Your designers and business people do, that’s for sure! jQuery Scroll Depth is an easy-to-use plug-in for tracking scroll depth. Setting options let you track if users scroll a certain number of pixels or percentage of the page, or my fave, whether certain elements are scrolled into view!  Currently only set-up to use Google Analytics, and not sure if they plan to open it to other analytic programs, but it seems like a minor edit to the sendEvent function would make a change pretty easy.

I want so badly to one day read and actually understand design patterns. I really, really do. And for that one day when I can stay awake while trying to read about them, I have saved this link, because it looks like a really fantastic book.

And here is the article from which the above link doth come. Plenty more there to make me feel badly about m’self…

Get to know the Webkit Inspector a little better.

And while we’re in the Webkit Inspector, how about getting to know the Timeline a little better too?

And finally, no, time travel still isn’t here, but thanks to the wonders of technology and the Internet, you can flashback as if it were, and even see things never actually happened!

Happy reading,
Atg

View Source bookmarklet for iPad/iPhone with syntax highlighting, formatted/selectable text, and clickable links.  Definite improvement over previous option (which was a definite improvement of the previous option), but of course there are already requests for more: line numbers, no wrapping of text, and mine, adding proper indenting for readability.  The code is offered, if anyone cares to contribute!

I’m not sure what kind of witchcraft is going on behind the curtain here, but JPEGmini seems like a fantastic technology! Oh wait, the FAQ link is at the bottom of the page, and here it is:

JPEGmini works by analyzing the input image using a unique quality detector which imitates the human visual system, and based on this analysis applying the maximum amount of compression which will not cause visible artifacts.

And speaking of images, yet another responsive web image approach, this one focusing on WordPress, but could easily be applied anywhere, with either smaller black-and-white, or color, images.

And speaking of WordPress, here’s a nifty plug-in to add touch features to WP admin screens.  Thanks, Furf!

A pretty hilarious series of “honest” movie trailers.

Sci-Fi fan? Well here’s a little something for your next extended bus/train/plane trip!

Thanks, Dan, for pointing out the latest Zepto.js release. At 8.4k, when minified and compressed, it is one sexy option to jQuery, in my opinion, as long as you don’t need IE, it appears to be a great, lightweight way to go!

Want to know what computers will look like in the future?  Well, if the year were 1982, they’d look like this…

A very slick, responsive, no JS slideshow!  (Okay, there is ONE bit of JS, just to fix <label>s in iOS, but none to make stuff move…)  Play with your screen size (I personally like leaving the screen size large, then clicking the monitor size icons at the top of the page…), read the explanation, then dig into the code.  So simple… Not sure why I never realized one could use more than one <label> per <input>…

The idea is great, but I cannot imagine being able to properly set-up, or remove, the one-handed beer bottle opener, with just one hand…

And finally, if you still struggle with understanding why some people have such trouble with technology, it’s because most of what we say sounds to them like this… :-)

Happy reading,
Atg

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

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

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

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

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

• No longer needing the GPS every time you drive somewhere…
• Walking into the grocery store and knowing where to go to get the couple things you quickly need…
• Being recognized by people working at stores you frequent…

For us, another huge step was when our household goods finally arrived (2+ months after we did).

Well, another couple milestones happened today…

First, it was a gorgeous day, probably the best weather we’ve seen since arriving 01-Dec-2011, so I decided to scrub-down the old, filthy, rusted charcoal grill that the last tenant left in our back yard; the image of finally being able to grill, in my own back yard, has been a fantasy for me for some time, and I was eager to get it started!

By the time Marianne arrived home from work, I had the coals nearly ready for the brats to hit the grill. We poured a couple ice-cold biers into our chilled glasses and walked out the back door. Our American neighbors were outside in their back yard, building a swing set for their kids, so we finally had a chance to chit-chat with them a little; it was nice.

And as they went inside to prep for their dinner, the neighbors on our other side (Germans, this time) came out, so we had a chance to speak with her as well, auf Deutsch! :-)

But my really big news for the day was something that has been building since before we left New York: I officially have a job! Thanks to having worked at Time, Inc., and having been on a project that connected me to someone that knew someone that works for a company that just happens to be located less than 20-minutes from where we now live, and thanks to a very welcoming, cordial, and helpful staff at that company, I will start working full-time at Netbiscuits on Montag Morgen. It’s a huge relief…

Though I have been working on a couple freelance projects since we arrived, and I knew this was “in the works” (while I applied for and got my German Tax ID, registered myself with the Kaiserslautern City Hall, and applied for my required German Health Insurance), until you “have a job”, you somehow just don’t feel… here. Sad, I suppose, but that’s the facts, Jack.

And I have to admit that I am a little nervous about the new gig (Will they like me? Will I like them? Will I grasp what they’re doing? Will my fledgling German be compatible with their partial English?), but I’m also quite excited to be starting at a new place, with new people, in a new place, on new projects!

So anyway, here I am, nearly “all growed-up” and ready for the real world! Wish me luck, hopefully I won’t need it, but it could never hurt, you know?

Tschüss,
Atg