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.
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,
- Add an off canvas or footer based menu
- Rework “6 easy steps” element to text instead of an image
- Update “Brand New” and “Ready to Launch” from images to HTML
- Reworking the logo’s at the bot
- Reduce or concatenate CSS & JS for performance improvements