I finally got around to updating my own website to have a responsive layout for phones and tablets. In order to achieve the desired result, I spent considerable time trying to retrofit my site to the responsive world. I very quickly learned why many experts say to design for mobile first. I simplified the work by setting 2 media query breakpoints:

  • @media only screen and (min-width: 768px) and (max-width: 959px)
  • @media only screen and (max-width: 480px), only screen and (max-width: 767px)

In addition, I replaced the outdated jQuery innerfade plugin with Flexslider. This allow my slideshow to be sized for smaller screens.

I am now testing out the site using Browser Stack.