Unconventional websites: breaking the rules creates unique challenges
Being in the software development market means we get to make our own company website, and, being Angry Ventures, it means we get to revolt and defy conventional assumptions about company websites. How? With lots of challenges.
Our Design and Content team did a great job conceptualizing an interactive experience that takes the risk of not being understood and pushes the envelope on how humans interact with screens. That, of course, posed some very unique and exciting challenges when converting those ideas to functioning code. Here are some of the interesting quirks that were a part of this project.
Haaaave you met… our website?
You can find it here. Let me introduce it to you.
In hindsight, Next.js would have been a better choice for SEO reasons. Being a SPA (Single-page Application), the whole website is presented through a single HTML page where all the JS enters and leaves as needed. Unfortunately, search engine crawlers don’t really jive with that concept, so we took a few steps to ensure our SEO is in tippy-top shape.
We used react-helmet to generate unique meta tags for each indexable page. In the same sense, react-snapshot takes care of building those static pages Google crawlers love so much, and Prerender.io free tier was actually only used to make Open Graph social media previews work.
As for cookie blocking & GDPR concerns, we used Iubenda, which made it ridiculously easy to generate legal documents and consent banners to embed into our site directly through the <head> of the main index.html file. Additionally, all marketing tracking is done through a Google Tag Manager container, where we set up Iubenda consent conditionals to make cookie blocking possible.
On the backend, we set up a straightforward Express App that serves the production build.
Homepage — diagonal layouts and dance of animations
As you may know, HTML elements occupy space in rectangular blocks. Since our design had interactable and animated diagonal stripes on the homepage, some CSS wizardry had to be pulled. On top of that, the angle of said diagonal stripes should be the same as the diagonal lines on our logo. To recreate that angle, we uploaded our logo into an online protractor tool (yes, this is not a joke) and measured that angle to surpass this challenge. Then, we used that information to apply a transform(skewX) CSS property that angled the stripes in precisely the way we wanted. Of course, this means that any content inside those stripes would also become slanted.
Interesting but not what we wanted.
To fix this, we pulled a UNO reverse card and transformed all the content inside the stripes to the negative value of the stripes. To summarize, the strips were angled at 20° while the content inside those stripes was angled at -20°, which actually sets the content straight. Strangely enough, this twisting and untwisting of the content didn’t negatively affect the look of the text elements, but image edges wound up getting a little bit blurrier.
Homepage mobile — compromises were made to face challenges
For the mobile version of the homepage, we had a great design that, once again, relied on diagonal elements, but in this case, not only were the stripes diagonally displayed, but the emojis were to be diagonally aligned as well. On top of all of this diagonality, these elements were also meant to be cycled through dragging.
I was really hyped for this design.
We didn’t even get to try to set up the dragging: j ust maintaining the proportions of the layout on a variety of screen sizes proved to be too much of a challenge. So we ended up compromising on another design with a similar look and feel to the desktop version.
Homepage — animations
To maximize homepage impact on users, we made a rather elaborate entrance and exit animations using GSAP (GreenSock Animation Platform).
This means that the emotion buttons on the homepage don’t directly send you to a new UR. Instead, what we did was set up those buttons to trigger the exit animations. These animations trigger React state updates detected in the render method and programmatically navigate the browser at just the right point in the animation timeline. Had we not done so, the user would never see the exit animations because react-router would have sent the user to another URL and mounted another component before the animation would have even begun.
But that’s not the end of this ballet. In order to keep these animations flowing without any jankiness, we prevented navigation to emotions before the intro animation was complete. The technique we used was the same, a React state update in the middle of the intro animation timeline.
How we made the project timeline and overcome the time challenge
Right at the beginning of the project, we wanted to be able to foresee how the website would develop in the following months. For this reason, we produced this handy timeline in our Project Management Tool ClickUp.
This allowed us to predict a launch for the website since the first periods of development. This is how we did it. First, we noted down all foreseeable development steps and created a task for each of them in ClickUp while, at the same time, giving each task a time estimate. Then we distributed all listed tasks over time according to the developers’ availability. We ran with it for two weeks, and then we adjusted the whole timeline’s time estimates according to the results we got in that time. This adjustment occurred only once and allowed us to predict a launch for late December/early January accurately.
Also visible in the timeline is that a lot more tasks were done in the late stages of the project. We observed this as being the result of two factors:
- We closed other projects throughout this development, so the developers’ availability increased with time.
- In the project’s late stages, a lot more code was pre-prepared to be reused since plenty of the tasks were very similar in nature. React reusable components and CSS classes are MVPs in this department.
AV7 is proving to be an exhilarating project for me. It was bold, unconventional, and undoubtedly a challenge that made me look at the tools I am so familiar with in different ways. React’s reactiveness was great for an app with a high degree of interactivity such as this. GSAP integrated beautifully with our needs, and Iubenda saved us a ton of time and effort.
These were some of the challenges we faced and how we handled them. In some, we thrived, and in others, we made compromises, but these were only a few examples.
There will be a second part of blog post where we address additional unique challenges and gather a few final thoughts.
If you thought this post was interesting, be on the lookout for the continuation.
Until then, stay ANGRY!! 😡
This blog post is part of a series titled “AV7”, a section where we write about building our new website from different perspectives: CEO and management, design, software development, and digital marketing.
Take a look at it here: https://bit.ly/3AC1is0
Originally published at https://angry.ventures on March 8, 2022.