A Developer’s Tour Of A Brand-New Web Project

February 8, 2016

There’s nothing quite as satisfying as launching a brand-new website for a fun, creative and innovative client. After all of the deliberation, conversation, crafting and refining, it can be cathartic to know that users are finally interacting with something you made. At first it can feel like putting a piece of artwork on display, but then you remember that your user is not so passive — or even aware of the labor that went into the website they are on. The experience should be natural and intuitive but can, of course, be enjoyable. The intersection of design and development is where that can happen. The new Sportech website is, in my biased opinion, a great example of this. Some of the methods used are at the cutting edge of interface design and development techniques, and we put great care into how they were applied.

Dynamic Font Sizes
One newly supported featured that has been a joy to work with are new viewport-dependent units. The browser knows the width and height of the user’s window, and you can use a percentage of that width/height to set the font size. If the screen size changes, so does the font size. I’ve found that it’s incredibly useful for consistent presentation of headlines, but it can be dangerous for long blocks of text. This feature, above most new offerings, will be common practice in the near future.

Sportech1

CSS Transforms
Blocks of text, images and their border/backgrounds have historically lived in a 2D space. These days we can move these objects around in a simulated 3D space. This has given rise to native-browser games and other niche applications. However, when used sparingly, it creates a subtle design enhancement with a powerful effect. By skewing the background, we’ve angled the content areas while maintaining their 2D perspective. This feature degrades gracefully in browsers that don’t support it.

Sportech

Keyframe Animations
Interaction animations have become prolific in the last few years, but none so much as parallax. Due to performance, support and other design conflicts, we opted to set this site apart by detecting when objects enter the viewport and animating their arrival. Keyframes can be used independent of any interaction, like the arrows on the homepage, but are typically used on buttons and other clickable elements. Logically, you can apply it to scrolling as a way to present content in an engaging way for the user. It’s supported on mobile devices and also degrades gracefully.

Sportech4

Notable Features
This website was so fun to create! I’m over the moon about some of the features we added to this. Here is a short list with some more gifs:
– The push menu is unique and responsive.
– The SVG buttons are animated.
– Atypical navigation and layouts that are still intuitive.
– Use of pseudo elements to align the interface with the brand identity.

Sportech2 Sportech3

Go try it out for yourself!