Responsive/Adaptive Web Design

I haven’t posted anything to my blog in way too long of a time, but all I can say is, being a new Poppa can be all consuming. There’s good and bad to that… but mostly good as far as I can see. :-) Anyway, I’ve been excited by the possibilities I’ve been seeing with “Responsive Web Design” for well over a year now, and figured I’d post a little something about it.

The Basics

Previously, if clients were concerned about how their site was viewed on mobile devices, firms would build separate device-specific sites for the more popular devices for their users. Typically the iPhone, for the clients that could worry about and pay for the extra design and development.

So, “Responsive Web Design” is basically creating CSS for your HTML pages that listens to what sort of environment the end-user is using to view the page, and serves up typography, graphics and layout that is best for that environment. What do I mean by “environment”? Well, it’s the difference between viewing a site on your maximized 1600×1200 desktop browser, 1024×768 laptop, or maybe viewing the site from your iPhone oriented vertically. Those are some very different environments, and can be treated differently to make for a better viewing experience for your end user in any of those viewing environments.

Three different sizes (or environments) for viewing the same web page.

The first article I took notice of for this technique was, of course, from the folks at A List Apart:
alistapart.com/articles/responsive-web-design
(Specifically, this article was written by Ethan Marcotte from the famous web blog unstoppablerobotninja.com)

And he even created an example website that had pretty good cross-browser adaptability even for May of 2010. It can be viewed here:
alistapart.com/d/responsive-web-design/ex/ex-site-flexible.html
(If you are on a non-mobile device, try resizing the browser, and watch the page completely respond to your changing environment. If you are on a mobile device, you can rotate the orientation of the device to see 2 potentially different layouts.)

If you’ve ever been tasked to make a beautiful and usable website for a client, and then asked as an after-thought to make an iPhone version of the site, this new methodology can be amazingly exciting.

My Experiment

Just as an experiment, to try and play with this a bit, I made a page using my usual technique of cobbling together other people’s online tutorials and examples and then bashing it into something close to what I want it to look like. I need to read up more about Fluid Images but here is what I have so far:
rizzio.net/home/wp-content/uploads/experiments/responsive/index.html

Some Light Reading

If this is as exciting to you as it is to me, here are some additional links to get more details:

The Basic Concept
webdesignerwall.com/tutorials/responsive-design-in-3-steps

Lots more details and examples
coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/#more-75660

A great grouping of additional articles that would prove quite helpful
catswhocode.com/blog/awesome-tutorials-to-master-responsive-web-design

What about applying this to Email Newsletters?
http://www.campaignmonitor.com/blog/post/3163/optimizing-your-emails-for-mobile-devices-with-media/
(Not sure about the cross-browser/email-browser support of @media queries, but this is potentially a powerful application of Responsive Web Design)

Enjoy!
Dave

My very first SlideShare presentation!

Looky here! My first ever SlideShare.net presentation! It’s a little ditty I created to help our traditional media buying folks transition over to the brave new world of online banner ads and all the specs they have to understand and bring into their Work Orders. It’s pretty basic, and it assumes I’ll be talking through some of the details, but it’s hopefully still somewhat informative… and maybe a little entertaining.

Google Reader is your friend.

Ok. I just wanted to make this post to let all you people out there in the interwebs know that GOOGLE READER IS YOUR FRIEND. If you have a G-Mail account or any other type of Google account, then you can have a Google Reader account with a few clicks, and no cost!   :-)   Just go to www.google.com/reader. It can really make sifting through your daily internets a much more reasonable endeavor. I think I’ve been using it for about a year or so now, and I just want to outline some pointers. But first, here are a couple intro videos…

First, we have “RSS in Plain English” presented by leelefever of http://commoncraft.com. It’s a fun little run-through of the basic concept of Google Reader and utilizing RSS feeds …and it’s less than 4 minutes:

And next, we have “Google Reader in Plain English” presented by Google. Again, it’s basic and clear. And it’s just a smidge larger than a minute long:

So, basically Google Reader is a relatively easy way of taking advantage of all those RSS feeds out there. And if you don’t know what an RSS feed is, don’t worry about it, just start using Google Reader, and it won’t matter that you do, or do not know what Really-Simple-Syndication means. Just be content that it can bring all your favorite daily interweb perusaling to one central place that’s easy to sift through and consume. But here are couple additional tips from me:

Google Reader Images 1. In your Google Reader page, there is a little text link area at the upper left corner of the actual feed called “Show:” and the choices are “Expanded” and “List”. (Please see image to the right) It’s pretty self-explanitory what these 2 text links toggle between, but I wanted to call them out, because this feature is GREAT!

2. There is a little Google drop-down-button under the blue title bar that has “Mark all as read” as a default selection. (Please see image to the right) Get to know this button. It can be your stress relieving pal when your “All items” is showing 1000 unread blog posts. (maybe it’s me, but I feel like I’m “falling behind” when that number gets up there like that, and just selecting a couple prolific blogs and nuking their “unread” status can do wonders for my ability to TURN THE DAMN COMPUTER OFF at night when I get home… or at least at a reasonable hour.) Don’t worry, the articles are still there if you want to read them… they’re just no longer marked as “Unread”. Also, when you’re getting familiar with this great little tool, get to know the other choices in the drop-down, as they allow you to apply a time range for your nuking.

3. And guess what? There’s a supercool SHARE BUTTON TOO!

Here is a little YouTube diddy that walks you through sharing items and how to add friends and what-not:

What that video didn’t cover, is the fact that you can make your shared items completely open to the public if you’d like! (There’s a small text link at the bottom of your “People you follow” area of your left navigation area, click that, and the first item on that screen is a drop-down that will allow you to set the Public or Protected nature of your sharing.) Setting your shared items to public is essentially like starting personal google blog that requires no blog maintenance! WARNING: Depending on the type of daily interweb perambulations you make and decide to share with your friends, you may not want to share these things with the whole world wide webs… but that is entirely your call… I’m just alerting you to the setting’s existence, which by default is set to NOT make all of your shared items public knowledge… just to the people you follow.)

So in conclusion and review:

1. You can use Google Reader to consolidate your daily web travels into a single, easy-to-browse happy-fun-time.

2. Don’t be afraid to nuke stuff when it all comes flooding into your little Google Reader corner of the webs. Sometimes you just gotta say UNCLE. Do it. It’ll make you feel good in the long run.

3. SHARE! Get your friends to start Google Reader accounts and add them to your “People you follow” list! And if you feel so inclined, open your share up to the public masses… like I did here: http://www.google.com/reader/shared/rizzionet

Enjoy!

The future of “Print”?

Wow. Talk about deep content. This little visualization of what Sports Illustrated could turn into on is completely “Game ON!” (sorry, had to do it) This is exactly the type of thing that has so many people excited about the prospect of some sort of Apple “Tablet”. Really nice work Time, Inc. and WonderFactory!

But I tell you this… to create a magazine like this would be no small endeavor. To have content that runs this deep would require a whole lot of people working real hard, probably around the clock. But imagine if Wired magazine were like this? Or how about US News and World Report? Or maybe online news magazines? Like the Huffington Post?

Google Wave

Can’t speak for it’s actual usefulness, as I don’t have an invite yet… but from the videos I’ve seen (good overview video below) it looks like it could be a really amazing new communications shift. Almost like going from paper letters to email… but I’ll hold off judgement until I actually get to try it out. :-)

Total Surface Area Required to Fuel the World (until 2030)

According to the US Department of Energy (Energy Information Administration), the world consumption of energy in all of its forms (barrels of petroleum, cubic meters of natural gas, watts of hydro power, etc.) is projected to reach 678 quadrillion Btu by 2030 – a 44% increase over 2008 levels. That’s a lot of energy. Saw this really interesting article that tries to project the total surface area required to fuel that 2030 world with ONLY SOLAR PANELS!

Below is a surprisingly sparse diagram. It’s kind of amazing to me how small the little squares are! Makes me think solar panel production companies would be a good thing to invest in! Germany, Japan and China seem to be in a really good place to reap the rewards of forward thinking… and dare I say it… socialistic government subsidies and legislation? Maybe a little socialism sprinkled on top isn’t the end of the world?… maybe it’s even the beginning of brave new world? Oh I’m sorry, government help in an industry is the wrong way to go… you might as well hand the country over to the pinko commies! Oh wait, what would you call the help we’ve been giving the corn / high-fructose / ethanol industries for the last 30 years? How about the auto industry? Savings and Loans? How about the financing industry in the last 2-3 years? Oh yeah, and what about that pesky military industrial complex our tax dollars have been funding? …so confused…ARGGG…don’t know who to hate…RRRARR…tree huggers…socialists…bankers…farmers… FOX News can you help me find a target for my rage?
Area Required to Power the World by Solar ONLY

And things don’t look quite as easy for wind turbines:
Area Required to Power the World with Wind Only