I was asked to build out the WIFI landing page for McDonald’s SXSW experience. The catch was I had less than an afternoon before SXSW started to pull it all together.
When it’s a rush job, the workflow means sticking with what I know–yet I did want to try a few new things.
These are some of the few steps and thoughts I had while producing the landing page:
Paper printout
Since the design was pre-made in Photoshop, I printed out the design and made production notes before I started working. While we prototype in the browsers these days, I always enjoyed printing a PSD web page design and marking it up before I start coding.
Photoshop
While the design is based with linear artwork that would make it the right candidate for for SVGs, I only had a Photoshop file to worth with.
I know my around Photoshop and know it very well, Adobe keeps on adding new capabilities. I made use of the new “Quick Export as PNG” function to export assets from their respective layers. It’s a new feature in the Adobe Photoshop CC 2015.1 release.
Page Weight Budget
Oh, and this all had to be under 1MB. The visual design played to the strengths in the way GIFs and PNGs optimize, so I was able to bring the image file sizes way down. This was done first by restricting the number of colors before exporting them Photoshop.
Making sure to strip metadata information the image, I then used ImageOptim to squeeze the image files even more. I found that Quick Export feature in Photoshop does not optimize the image files, if at all.
Expressive CSS
On the Non Breaking Space Show, Allison Wagner made mention of Expressive CSS framework. While the conversation wasn’t about yet another CSS framework, but rather the intent or concept of how it worked differently from other frameworks.
After working on a previous project when the framework seemed counter-intuitive to my needs, this project was all the excuse I needed to try out a small, nimble framework.
Expressive CSS Utilities
I appreciate the modular nature of frameworks, however I wish “some assembly required” note was labelled on the download page. It took me a few minutes for me to realize I didn’t have the utilities installed with the original download. Those minutes were precious on a tight deadline.
JavaScript Knowledge
While I was asked to do this project because I know “CSS,” it became clear that HTML, CSS, and JavaScript were required. The JavaScript required was not anything that serious, but I had to switch my brain from CSS-mode to JavaScript-mode.
Conclusion
While it was a rush project, I loved doing it. Offsite brand experiences are a staple of the SXSW experience. As both a web builder and event organizer myself, it was fun to contribute in a small way to a major brand’s experience at one of our industry’s bigger events.
