Surf the Dream A discourse of links and articles from Justin Avery

Responsive Retrofitting:

Natalie Lussier’s site is clean and vibrant on a desktop, but I found it a little difficult to sign up for some email marketing tips while I browsed the site on my smartphone. Retrofitting time!

Queue the “laptop and developer tools”! For around twenty minutes I went through the websites CSS in the chrome developer tools removing any mention of a px measurement and replacing them with a 100% value.

There are a few elements on the page that are background images which took a bit longer to fix, but setting 100% on the container and a background-size: 100%; seemed to fix most of the issues. I had to readjust the :hover style because the background positioning had changed, but at the end of the day that section should have been done with HTML instead of an image in the first place.

A shot of the chrome developer tools during the retrofit
In the middle of the retrofit for Nathalie’s site

Unfortunately it wasn’t until too late that I realised that you can save the CSS changes you’ve made in the developer tools.

I made this quick screen cast to show what I had done. It starts with a look at the current website on a desktop, shows how you need to scroll if your browser is less than 946px. Switching pages it shows the retrofitted site on the left with everything now displayed linear along side what the current site would look like without the retrofitting on the iphone.

There’s not a huge difference between the second view but it is much easier to hit the navigation elements without accidentally hitting the logo and getting sent back home, and the form targets are easier to click on.

If I was seriously going to take on reworking this site I would,

Surf the Dream is a blog that has been running since the mid 2000's when it started on BlogSpot. Over the years it's been rebranded as (now my resume) and (which now redirects back to this site).

I offer consultation services through Simple Things, produce a range of high quality pocket notebooks(including a Solar System Notebook, Space Notebook, and a Guitar Notebook), write about the Universe and run a responsive web design knowledge hub and a RWD Weekly Newsletter.