The trick is to smoke the meat and not make the meat smoke

Site Improvements - Part 1 - Responsive Design

First Image
I haven’t been posting new picture or blog entires to this site since the end of July. Several reasons for that. The first was some crazy work related deadlines and the second was one of the biggest revisions to this site ever. About half of the changes were under the hood changes invisible to the end user. The other changes were to the look of the site, particularly when viewed on Post PC devices: Tablets & Cell Phones. I will split this blog about the changes to the site. The first (Site Improvements - Part 1 - Responsive Design) will cover the changes in appearance. The second part (Site Improvements - Part 2 - Gear Info) will talk about the addition of Gear information to the Food Photo entries. The third part (Site Imrovements - Part 3 - Infinite Blog Scrolling) will discuss an improvement to the Blog page functionality. The last section (Site Improvements - Part 4 -Warehousing) will discuss the under the hood changes that will make the site easier for me to add onto and expand the site and hopefully will make loading the site a bit faster for the end user.

So first of all what is “Responsive Design”. It is a buzz word that has been around for several years now and refers to website design where the pages on the site are able to adapt themselves to the size screen the site is viewed on. Up until now this site, like many others on the web, would simply shrink the width of the columns and text to suit a smaller screen size. The end result was below some screen size the pages became hard or impossible to view. As the owner of the first generation of iPhone, I was grateful to be able to view any web page on the phone. My attitude was this site is best viewed on a web browser and that is how people should expect to do it. Well time and Google Analytics have proven me wrong. Recently tablet PC sales eclipsed PC sales for the first time and smart phone sales are off the charts. I use Google Analytics to track who uses my site and where they are from. Where this is just a hobby site for me and I am not selling a product, I am just interested in seeing where the traffic comes from. A little while ago i found out that around 30 percent of my traffic was coming from outside of North America. Knowing this prompted me to add metric measurements to my blog entries in addition to the Imperial we use here in the States. Lately there were some months where mobile device traffic was 50 percent of my visitors. The caused me to rethink my position on people should visit my site on a PC. The figures were showing this wasn’t happening and if I wanted people to come back I should think up a plan B.

One way some web sites handle mobile devices is to have a separate site dedicated to mobile traffic. This was out of the question for a couple reasons. First off I hate mobile web sites, so why would I make others view something I don’t like myself. Secondly I really didn’t feel like going through the work needed to create a mobile site from the ground up. The additional links alone would take forever. Going forward every time I posted a page I would have to create two versions. Lastly my site is primarily visual in nature. Mobile sites general shun the use of graphics and images. So this always was and is a nonstarter. Plus the advent f the iPhone and other smartphones marked the start of the obsolescence of text only mobile sites.


The Home Page has 3 columns of links at the bottom of the page. At a large screen size there are 3 full width columns (left) and as the screen size reduces the 3 columns first adjust the width of the content in the columns (right).


As the screen size gets narrower, the columns adjust to 2 columns over 1 column (left) and eventually one single column (right).

A few years ago I started hearing about responsive design. This is where the website detects the screen size you are on and intelligently adjusts the look of the site to suit. It does a combination of adjusting the width of the content, down sizing the content and even rearranging it on the page. I will provide some images to explain this further. For example, there are some areas on my site where the content is contained in 3 columns. Before as the width of the screen went down the column just kept getting narrower & narrower until it became one word per line and was essentially unreadable. Now the columns still get narrower, but at a user selected point the 3 columns reflow so they become two columns with the third column content being moved to a single double wide column below. Grids of pictures will adjust themselves so as the page width reduces, so do the numbers of columns. As columns are reduced the grid rearranges itself to add more rows to make up for the reduced number of columns. The last thing I was able to do is adjust the content on a page so it shows more or less content on the page depending on the device used. My home page shows a message when a certain minimum screen size or below is reached. The large sized movies page will not display on a small smartphone. Instead you get a message telling you the movies have been hidden because you can’t see the entire movie on this screen size. This also saves the end user wasting a lot of cellular data trying to download and view a movie that will be cropped on their current device.

In my opinion the best device for viewing this site is a tablet device with a high resolution screen. In my case it is an iPad 3 with retina display. The pictures look very sharp and it is easy to navigate around the page. Responsive design also works in the reverse direction too. The site rearranges the content to suit larger screen sizes too. The site is more usable on a smartphone with an iPhone sized screen too. You run into some screen sized issues in the portrait mode but most of the pages are doable in landscape. But honestly where this site is so picture intensive I would suggest waiting until you can view the picture content on a iPad sized tablet or bigger.

Here are the links to the other entries in this series



blog comments powered by Disqus