Squarespace is fun for non-tech people to build their website on, especially since it boost its own CMS system with a drag-and-drop user experience. However, it also means customization via coding is limited, as documented by my previous post. In this post though, I am going to write about my experience with its browser compatibility, which is also extremely limited.
This poses a major problem: our client’s organization is a non-profit that target non-tech user. How many of them have an updated browser? More over, I found articles mentioning how Squarespace goes complete haywired in Android phones!
After an entire day (and night!) of research of which HTML/JS/DOM features are compatible with which browsers, my guess is that the issues lies in the platform’s drag-and-drop feature. Drag-and-drop, however common it seems nowadays, is a recent development even as a HTML5 features. At first, when I read Squarespace’s Supported Browser page, I am not sure how they came up with the version numbers:
After my research accompany by coffee and too many open browser, I realized that their version numbers matches drop-and-drop’s browser compatibility chart in w3schools. Ah, so that’s what that was about.
Talk about real-life demonstration of why feature testing is praised whenever I look up on browser testing, instead of the easier, no-research-needed User Agent testing. To summarized of the various article opened in my browsers, User Agent relied on information given by the client browser, which can be change by the client user. It is, therefore, susceptible to spoofing. In addition, Squarespace only shows 4 browsers in its chart. Opera, for example, is not listed. It’s why I took the time to look up on feature testing – totally worth it!
Currently, to solve the problem, I am using Modernizr. While Squarespace comes with its own Modernizr preloaded – no additional src code needed – after some tweaking, I realized its Modernizr has various problems. Most importantly, one of the testing, Modernizr.draganddrop, did not work! My guess is that Squarespace either used an outdated version or customized it and decided the dropanddrop testing was unnecessary. *Sigh*. In the end, I found a CDN that Modernizr recommended (CDNJS) and src link it instead. Now the code works.
Prior to that, I also used noscript and “if lte IE 8” tag to test for 1) if JS is enabled 2) if IE browser is 8 or higher. In all 3 testings, I made it so that a fixed, orange bar (website color theme is black and orange) would float on top, warning users that they will not get full viewing experience with disabled JS or outdated browser. That way, users can still access the website, but they would know what’s going on.