In last couple of weeks, I have been spending a lot of time tweaking my website for a better user experience on both the Desktop and Mobile. Before diving into mobile web design, though, I wanted to make all of my animated GIF files not play automatically every time a page loads. It was very overwhelming when you have ten or so animations playing at the same time, at different intervals or increments. e.g. my BIRDS!'s game page, it was like, the birds were flapping, attacking your screen! If I was overwhelmed, I can't imagine how the people who visits my site feel.
After seeing what Facebook has done for their GIF files, I did light research on how to replicate the same concept, unfortunately, with little coding experience, the journey led me to a dead end quickly after it began. Since I am designing in WIX, coding is limited, and their support system for adding new features is way back-logged. Fortunately, after a quick conversation with Ben Wiley (fellow game designer from Louisville Makes Games), I found a solution! He showed me his website and taught me how he had implemented a "GIF" icon onto his animated GIF files, letting viewers know that they are looking a playable, animated image. Simpler and a mock of Facebook's style.
He gave me the JavaScript code and after a little tweaking to the style visual (particularly with the play button unicode and a few additional lines of code for not having to upload a "still image"), we came to this marvelous example below:
Clicking the play button will play the GIF's animation and clicking it again will bring it back to the first freeze-frame. This also works on the mobile UI flawlessly. Speaking of mobile UI, mobile users will now be able to navigate my website with ease after extensive adjustments were made to optimize the mobile web layout. Thanks for visiting!
