Responsive Design in Practice

What the heck does "Repsonsive" mean when it comes to a web site?

For my own practical purposes it means that I have a single web site with one set of HTML, CSS, and JavaScript being served to all web browsers, but the appearance of the website changes based upon the width of the web browser’s window to give a great viewing experience to everyone.

Haha, that is a mouthful.

So here it is in action:

davenelson.com Desktop Web Browser Screen Shot

Desktop Web Browser


davenelson.com iPad Screen Shot

iPad


iPhone

davenelson.com iPhone Screen Shot

The great thing is I did not need to build three different websites, no "mobile" version, just "The Website." Another great thing is that I was able to start with a WordPress theme that someone else spent a lot of time an effort in building. I just tweaked it to fit my needs.

Sunspot WordPress Theme Screen Shot

Sunspot WordPress Theme Screen Shot

The theme is called Sunspot by Automattic and I really like the way my content looks when using it.

From the author:

A sharp theme with subtle grid lines and sun-splashed accents, Sunspot is a great all-purpose blogging canvas, especially for those who prefer a dark color scheme. Sunspot offers two arrangements for posts on the front page. Additional features include a custom header and a custom background, two optional widget areas, and a responsive layout that adapts gracefully to smaller screen sizes.

Responsive design is not a fit for all web sites, content and interactions that work great in a desktop web browser are not always appropriate for the really small screens of smartphones and conversely content made for smartphones does not always scale well for big screens. But for a blog or any site that is primarily text-based I think responsive design is a great way to reach a broader audience.

Leave a Reply

Your email address will not be published. Required fields are marked *