Finer Details of Elytra.app

Sep 6, 2018

There are some very interesting details on Elytra’s website which you most likely have not noticed. This is by design. These are invisible details that are engineered to make your experience on the website more private and be good to your devices. 

Respecting your Privacy

Like most landing pages for apps, products and services, Elytra’s website too loads the Google Analytics script. But the script itself does not respect the DNT Header your browser may be sending. To work around this, I added a simple check before calling the code that begins tracking page views. 

if ((‘doNotTrack’ in navigator) && navigator.doNotTrack == “1”) {
    console.info(“Do not track is enabled. Exiting”);
}
else {
    // Regular GA code
}

This simple piece of code will respect your privacy settings and only if you allow will begin page views tracking via Google Analytics. Considering the critical role Privacy plays in Elytra’s core, this seemed obvious. 

Respecting your Devices

Elytra’s landing page also includes 3 videos. These are kind of big. Total to about 35MB but varies depending on what codecs your browser supports. It is obvious that it does not make sense to load videos on all devices. It is also obvious that loading these videos on metered or cellular connections like 2G and 3G would be wasteful as the page would never complete loading. Most people would close the tab and move on. 

Elytra’s website uses the new navigator.connection object to determine if videos should be shown. If it determines that videos should be discarded, it simply replaces them with cover images that fit the context. 

Safari on iOS and macOS does not support it yet, so the viewport size is used to determine this. As soon as Safari supports it, directly or by using the webkit prefix, it’ll kick into action. 

This not only correctly conserves data bandwidth, but also power and is respectful towards batteries of your untethered devices. 

Respecting Accessibility Requirements

Just like the iOS App, the website tries its best to be accessible. When designing the FAQ and Press pages, I decided to use the details and summary tags instead of hacking something on my own for creating collapsible sections. There is a lot of sample code, some which is even accessible, out there which creates collapsible sections, but nothing seemed to work as effectively as these two tags in tandem. You can read more about them on MDN. 

This made the two pages  accessible not only to screen readers, but also for people who use the keyboard more than a pointer device to navigate webpages. If this is new to you, I’d love for you to try it out. Its fun!

While on the surface, Elytra’s landing page may look simple or even boring to some, I wanted to focus on getting the information to people who seek it. Aesthetics are important, but making and keeping your website Accessible, Private and Fast was paramount. 

Something I want to explore when updating the website next is to localise it. So if you have any tips for me, do let me know. 

Back