Live LETTERING
Chat with professional lettering artists as they share their process creating hand drawn typography.
Watch now
  • Add to Collection
  • Tools Used
  • About

    About

    The SpeedoFit microsite showcases the considerable benefits of water exercise, using the natural compression, resistance and reduced gravitationa… Read More
    The SpeedoFit microsite showcases the considerable benefits of water exercise, using the natural compression, resistance and reduced gravitational friction of H20. The site consists of four pages: Overview, Training, Gear and Classes. The Training page was fairly complicated; it allows users to explore training videos, which in version 2 of this site have been organized into two types of circuits designed around a particular sport or targetted body conditioning. Users can also browse the entire library of 50+ training videos. The main requirements for this page were: • Isolate the video metadata so as to be updatable somewhat independently by content creators. • Give users the ability to filter by circuit or focus area. • Animate the interactions It was determined that a database was out of scope for this site, so I created the catalogue using inline JSON, and built a parser that created the entire catalogue of videos as a hidden div on load, then displayed them as required for the focus areas, using tags to organize them by area. For the circuits, I cloned each piece of video HTML to a new div and displayed them as requested. The other pages benefitted from the JSON solution as well, loading video in the same manner, although not nearly as many. Testing showed that even on mobile the initial load was acceptable, however our internal network was slow; in the wild it was fairly quick. Kudos to our Speedo team who put together such a great design. Read Less
    Published: