Recently, I revisited a side project website that I had built for a close friend of mine some years back. I'd originally used WordPress as a content management system; being that my friend had experience with it and an intention of blogging as a creative outlet. Since crafting the original design, I've learned a lot of new & powerful CSS skills. Most importantly, a working knowledge of responsive web design and some advanced CSS3 properties. I'd been looking for an outlet to apply these new skills, and decided to revisit this project.
The best option in this case is of course to start from scratch; building a new website up within a mobile-first mentality. However, this is also the most time-intensive approach to this type of project. Seeing that and I'm about two months away from my wedding and I was doing this completely for the purpose of experimentation; I decided to move forward on a lesser travelled road. Thus began my two day journey through the responsive retrofitting of exiting code, using a desktop-down approach.
I'm a firm believer in the agile way of "responding to change over following a plan" which led me to jump right into the code and get started
Shifting Towards a Fluid Layout
The first step was to change all fixed width layout elements to max-widths with percentage-based child elements. I began applying these changes on the least visited pages of this website, as I didn't want to break anything major whilst hacking together my new styles on a live website. Once all content areas were fluid widths, I jumped into the trickiest step, navigation.
Responsive Navigation Patterns
Menus are notoriously difficult when approaching a project using the top-down method. They need to be meticulously designed mobile-first in order to have a successful transition from mobile to desktop interactions. This led me to apply the footer anchor solution, as demonstrated here by Brad Frost. This not only saved me the massive headache of redesigning the primary navigation from the ground up, but also saved lots of precious screen real estate in the header.
At this point, I went ahead and tackled the project one page at a time. In order to maintain zero downtime of the website, I approached it from the least visited page, up through to the landing page. This way, most of the big layout classes were already behaving responsively once I reached pages more actively seen by users.
In the case of this website, I had lots of embedded video content to work with. Video can get very tricky in a responsive environment, especially when it comes to the maintenance of aspect ratio. After some research I chose to use Todd Moto's FluidVids.js for the videos. As he mentions on the github page, it is smaller and more lightweight than many other solutions and it JUST WORKS. Lightweight and works, sounds right up my alley! This tiny 2kb file plus a few lines of CSS solved the responsive video riddle for this entire site.
At this point our website is fully responsive and adapting well across an array of screen sizes. Our initial goal has been met, but it's difficult to stop here. Throughout the process of adding responsive styles to the website, you'll have come across your old code. In this case, the code was years old from my very early days of web design. Shudders.
Needless to say I got carried away and applied most everything I've learned since last touching the code. This isn't necessary, and can be considered the icing on the cake. Specifically in this case I converted everything I could to icon fonts, reduced the size of each and every image on the website, and compounded much of the CSS using shorthand.
OK, now we're done, right? Nope! The most important step is to really test the ever-loving hell out of your new styles sheets. This means as many devices as you can get your hands on plus the usual suspects of browsers and resolutions. What's the point of these amazing new responsive styles if they don't work or present bugs! You're sure to come across a few bugs at this point, and you'll be glad you squashed them early.
Now we're done! Please view the completed website, With or Without Justin Productions, and let me know what you think in the comments below.