Hawkins International PR

Role:

  • Web Development
  • Flightpath

Smart transitions and animations

All animations on the site take advantage of CSS3’s transforms property. Hardware transforms, unlike positions, are hardware accelerated and take advantage of sub-pixel rendering. While the performance difference on a desktop computer is subtle, on a smartphone, tablet, or similarly underpowered device, this makes a difference between stuttery, jarring transitions and animations, and smooth experiences.

Additionally, all transitions on the site were performed with class modifications to represent status. This allows JavaScript to have minimal modifications on the DOM, and leaves CSS to handle the animation, meaning increased performance.

Building full responsiveness

Hawkins International on a Nexus 7

Original comps for this project had called for a desktop view and mobile view of the site. Under this plan, the site would be "semi-responsive" in that there would be a single media query to transition to a mobile layout, and a desktop layout. There are a number of practical issues with that approach. For one, this technique failed to account for the emerging 7" and 8" market of devices such as the Nexus 7 and Galaxy Note 8. It would also fail to account for future large screen smartphones and phablets similar in vein to the Samsung Galaxy Note line. In addition, under this method, either the user would have a fixed desktop width to contend with but a viewport locked to 1, or there would need to be a JavaScript based method of detecting device size and adjusting the viewport meta tag.

Instead, I opted to build the site in a manner that would make it fully responsive and more future proofed. Page elements would have their settings adjusted when their readability was compromised in the viewport rather than hard universal breakpoints for all elements to transition to. This allowed for smartphone-centric interfaces in areas where it was most appropriate, such as slideout menus on 7" devices, while preserving the two column layout for case study documents.

Visit Website