Responsive Web Design

Can a Silver Bullet Save a Unicorn?

Originally Posted on WSOL.com

Have you ever gone looking for a unicorn? They’re really hard to find now-a-days. Very reclusive. They don’t give interviews, and they never publish their addresses online. In fact, finding a unicorn is the closest thing to an impossible goal that there is.

For those of us in the web industry, a “unicorn” is that perfect website. You know the one I’m talking about—the one with the stunning design that makes everyone who sees it stop and marvel at the sheer brilliance of the mind that created such a wonderful thing. And the content! Words fail to describe the pure literary perfection. The message speaks to everyone in a way that is both deeply moving and compelling.

Yeah, I haven’t found that website either. But I keep looking. The problem is that everybody has different needs, interests, and goals. So while your website might be that perfect unicorn for one person, for someone else it might just be a donkey with a plunger stuck to its head.

Here I Come To Save The Day

Silver Bullet Just Ahead Green Road Sign and Clouds It seems like everyone is looking for that magic silver bullet that will change the donkey into a beautiful unicorn. They are searching for the latest and greatest thing that will solve all of their website’s problems, all while helping their hair grow back, shine their shoes, and do the dishes. (Okay, maybe not that last one, but that would be so cool, wouldn’t it?)

The truth is that a silver bullet, magical or otherwise, is as much an impossible dream as catching that unicorn. Things come along all the time that do something really, really well, and then, for some reason, people try to get it do everything else. They try to make it into the silver bullet, promising wild claims about how great this new thing is, and how it will do anything and everything you could ever need or want. But it can’t.

There is no silver bullet. What you need instead is a whole box full of silver bullets.

Let Things do What They do Best

Over the last few years, several new technologies, like Responsive Web Design, jQuery, CSS, and Inbound Marketing —to name a few—have emerged that have fundamentally changed the web, helping clever designers, developers, and marketers build some truly incredible sites.

How do they do that? They take a little bit of time to understand the strengths and weaknesses of each technology and use it to its fullest. Then they stop there. Could they make it do more? Sure. Would that be a good idea? Probably not. The cool thing is that so many of the things we use on the web play very well together. So don’t pick just one, thinking it will do everything. You have a box full of these options, allowing you to choose the ones you need, and use them well. Responsive web design is wonderful, but it won’t do a thing if you don’t have a good content strategy in place. Donkey-Plunger

But will it Save the Unicorn?

Now that you have done all of that work, found your box of silver bullets, and gotten them all loaded up, will that plunger-encrusted donkey become a unicorn? I’m sorry to say, probably not. Having the perfect website for everyone is —and always will be— unattainable. So stop trying to achieve that unreachable goal of perfection, and focus on building a great website for the people you are trying to reach: your target audience. It might not be a unicorn, but it won’t be a donkey either.

What year is it anyway?

Over the last few years, Ektron has focused on a key theme each year, where most of their communications, presentations, and community outreach all focus on that theme. In 2010, it was the ‘Year of the Marketer’; 2011, the ‘Year of the Developer’, and now we are into 2012, and the new theme is clearly the ‘Year of the Designer.’

2010 Year of the Marketer

I was lucky enough to attend the Synergy conference in 2010. This was a great conference, with a focus on the Marketing and Business side of a website. I remember sitting in a session listening to Tom Wentworth ( @twentworth12) and Nicole Rogers ( @nicolekrogers), two dynamic and fun speakers, talk about how, if content is king, then context is queen.

We saw a big push on things like PageBuilder, which allows the non-technical folks to build complex pages on an Ektron site; the Analytics integration, which puts key demographic information of who is using what parts of your website into the hands of those who can make the most of it; and showing us how Ektron could leverage a visitor’s context, from sources such as their recent browsing history, Facebook, or their physical location, to provide a unique, targeted experience.

Note: These are all very important things, but I am a developer at heart. While I find all of that interesting, not as important as how to build something cool.

2011 Year of the Developer

If you were an Ektron developer, then 2011 was your year!

We saw the release of version 8.5, which brought a slick new interface for the WorkArea; powerful new features and technologies such as the new FAST Search; and a completely redesigned Framework API, that makes building custom functionality to interact with the CMS so much easier.

In the Developer Community, there was the rise of the Ektron Exchange, that finally gave Ektron developers a place to share the widgets and code samples that they had developed over the years. The developer forums got a needed infusion of answers from knowledgeable Ektron folks, such as Andrew Eddy, James Stout, and Bill Cava, to name just a few. ( @andrew_eddy, @egandalf, and @billcava)

Developer Meetups were scheduled all over, where folks could get together and share their experiences and knowledge with other Ektron developers over dinner and drinks. If you were lucky enough to have a Local User Group (LUGs) meeting somewhere close by, you go to see new examples of what was available today, and more importantly, what was coming in the future.

2012 Year of the Designer

We are now seeing the direction of 2012, which I am dubbing the ‘Year of the Designer’. In 2012, we are finally starting to see that a well designed website is so much more than something nice to look at, it also has to work for the user.

Part of this I am sure is driven by the enormous momentum that we all see with the mobile web, where having a well designed, functional site that works on any device (smartphone, tablet, desktop computer), could very well be the difference between a business’s success or failure.

Ektron has embraced the Mobile First philosophy, made famous by Luke Wroblowski ( @lukew, Mobile First), and they are busy promoting the relatively new, and fundamentally game-changing web design trend called Responsive Web Design, pioneered by Ethan Marcotte ( @beep, Responsive Web Design). The really great thing about 2012, is that Ektron is going to have both of these incredible individuals speaking at the annual Synergy conference this year. This one is not to be missed.

Note: These are two of my biggest web heroes. They are changing they way that we look at the web.

P.S.: Responsive Web Design is something that I have been interested in for some time. In 2011, I made a short presentation at the Seattle LUG, where I showed what might have been the first Ektron site using RWD (at least I like to think that it was), and that was followed up with a Developer interview with Bill Cava (Developer Webinar – Interview with Joe Mayberry), where I talked about Ethan Marcotte, and the potential that RWD has with the Ektron Platform.

An argument could be made that I had a hand in starting the momentum that led to the Year of the Designer. With that, a trip to D.C. in November, to see Luke and Ethan speak, would be the culmination of my efforts. What do you think? Maybe I should take up a collection.

An Answer to the Problem – Responsive Web Design

In my earlier post, “What is Responsive Web Design? The Problem…“, I outlined one of the many issues facing web developers today, namely how to deal with all of the different devices, screen sizes, and capabilities now available for users to interact with a web site.

One answer is to use Responsive Web Design.

Responsive Web Design is a concept that was first introduced by Ethan Marcotte on the A List Apart web site on May 25, 2010. His article title simply Responsive Web Design lays out a concept of designing and developing a web page that adapts to it’s environment to provide an elegant and efficient user experience, regardless of whether a user is using a high definition desktop monitor, or a cell phone with 320 x 480 pixel resolution.

Responsive Web Design uses a combination of fluid grids, flexible images, and CSS3 media queries to create a platform agnostic web site, that adapts and reflows as needed,hiding or reveling elements, or changing font sizes, line heights and leading to introduce alternate page layouts as the resolution changes. to optimize the reading experience on different screen sizes.

While Ethan’s solution is powerful, and elegant, it is not the solution for every situation. Careful consideration needs to be given to each project, to provide the most appropriate solution. This is a topic that Ethan himself addressed in a blog post on his website Unstoppable Robot Ninja, which is a great read for anyone who is serious about web development.

The great news is that people are jumping on the Responsive Web Design bandwagon, and producing some incredible websites. Here is just a small sampling of some of the websites that I have run across:

And there are so many more. In fact, this concept is catching on so well, that Ethan has written a book Responsive Web Design, which is being released from A Book Apart on June 7. I am very excited to get my hands on this book. I follow several people on Twitter who have gotten a sneak peek, and they all have rave reviews.

I am a firm believer in the power of Responsive Web Design, and over the next several months I will be spending a lot of time researching, investigating, and practicing with the concepts. I will do my best to share what I learn in this blog, so I hope you will continue reading.

What is Responsive Web Design? The Problem…

As I said in my last post, one of the initial purposes of this blog is to document my learning curve in the use and understanding of a relatively new methodology called Responsive Web Design. But what is Responsive Web Design?

The Problem

In the past, web development focused exclusively on the desktop web browsers. We worried and agonized over how different browsers would present our code; if Internet Explorer’s handling of web standards and CSS would break everything, and cause us hours or rework and hacks; if we should use a fluid of fixed width design; and if we decided on fixed width, how wide?

As computer hardware evolved, bigger monitors become accessible to the average consumer with higher screen resolutions. In the not to distant past, we would build a website with dimensions to fit into an 800 x 600 resolution monitor, then into 1024 x 768, and it keeps changing. As I write this, I am looking at a 27″ monitor, running 1920 x 1080, and there are desktop monitors with much higher resolution available.

What about laptops? They generally have a smaller screen, but quite often have high pixel resolution available. Then there are the netbooks; those small, ultra-portable laptop computers that sold like the proverbial hotcakes, with a cramped 9″ or 10″ screen, and some strange resolution such as 1024 x 600.

Then there are mobile phones, which do so much more than just make phone calls today. Smart phones include some very sophisticated software, including full or almost full versions of web browsers, displaying an entire website in a 3″ screen, with a resolution of 320 x 480 or 480 x 320 (the iPhone), or smaller. Not a particularly good web browsing experience.

Now let’s throw in the latest online media and web consumption devices, tablets, in various flavors and screen resolutions.

As web developers, we would quickly (and some would say already have) go crazy trying to make a website work on all of those different devices and resolutions.

That’s where the concept of Responsive Web Design comes in, to save what is left of our sanity.