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.

Hello world!

As this is the inaugural blog, I thought I would take a little bit of time to explain who I am, and what the purpose of this blog will be.

My name is Joe Mayberry, and I am a web developer in Caldwell, Idaho. I have been working on the web for almost 15 years now, in both the private and public sectors, and now I am expanding into some freelance work. I primarily work with ASP.Net and C# and front-end development, but I have also been learning PHP in my spare time.

On Twitter, I go by the name @jaytem. My wife and I came up with the name Jaytem a few years ago, when we decided to purchase our own personal domain. We took our initials (Joe and Tara Mayberry) and spelled them out phonetically. thus Jaytem was born.

Okay, so that explains where Jaytem came from, but this blog is named Jump The Map. When I decided to start this blog, my wife and I discussed it, and decided to go back to the original initials, but to give them a new, and hopefully clever meaning. We chose Jump The Map, to show that we will be jumping around a bit, and sometimes off of the beaten path for the topics that will be discussed here.

As for the topics here, I plan to focus mainly on the lessons that I learn while on my journey of web enlightenment.

Initially, I will be documenting the learning process that I am going through to prepare for a presentation in September at the National Association of Government Webmasters conference. I proposed a topic about Responsive Web Design, and they asked me to speak.

Since I am far from an expert on the subject, I have a long road ahead of me. I will be building a sample site, using the RWD principles, and posting that here, in various stages. My hope is that this site will be part of the materials that I will use for the presentation, and that the trials and tribulations that I go through will help others.