Welcome to March's patch notes.
The focus for this month was something that seems small on paper, but in reality was an extremely tough nut to crack.
Website merge
For a lot of reasons (but we can point at SEO being the biggest one), we needed Tutti to reside on one single domain. Before now we have had www.tutti.space AND app.tutti.space.
www was built on Squarespace and was our informational website. app was built entirely from scratch on professional technologies by our wonderfully talented in-house team. We needed all information to be shown on www.tutti.space.
The main reason, as I said, was SEO. If we're going to put enormous amounts of work into improving our SEO for our hosts, we need it to be for the correct domain. If we have multiple subdomains (as it would be in Google's eyes), we would need to do this SEO work for every individual subdomain (in our case 2). So rather than doubling our work over the coming years, the smartest move was to merge our websites.
But you can't simply merge a custom website and a Squarespace site. (for a number of technical reasons involving Domain Name Servers [DNS]). So we had a job on our hands:
- To build all squarespace pages on our own
- OR to find a replacement for squarespace that we can merge into our website
Fortunately, we knew that once we solved how we were going to transfer those web pages over, a DNS transfer would be relatively straight forward.
So we started looking for a suitable replacement for squarespace:
Building them all on our own would have been fine if we were a large team OR if we didn't want to have any sort of immediate ability for non-developers to edit the pages. But both of those statements are untrue.
At first we looked at Wordpress, the obvious first choice. We set a lot of the site up with Wordpress, but we experienced some technical difficulties when testing. Apparently wordpress did not play well with our core site and it even crashed our test site a few times. We couldn't rely on a system that could crash our site at any moment and give us very little visibility as to why.
Another option we explored was a technology called "Headless CMS" - these systems enable you to have admin panels like you do on Wordpress and Squarespace, where marketers can build and adjust pages with no code, but there are no pre-existing templates. Your team has to design and build all the elements on its own, but on the plus side, you have complete control over the CSS.
This seemed like an excellent idea, and there were 2 that seemed like obvious choices: good documentation, within our budget, and worked with our tech stack: Prismic & Butter.
Initially we looked towards Prismic because it's cheaper & was more open about how it works with our tech stack. However, the initial sign up experience was dreadful (a lesson to any SaaS companies reading this). I asked the Sales rep who reached out after I initially signed up mildly technical questions (about CSS and Front end dev work) and he clearly had no clue what "Front end" meant or CSS meant (and didn't bother to ask anyone technical). He also took 3-4 days to reply to a question.
Butter was more expensive but they responded to customer service issues in minutes and were extremely friendly. Once I realised they supported the very same tech stacks, and even had some SEO optimisation features built in, it was a clear winner.
As with using any new technology, there has been a bit of a learning curve, but their system is set up fairly intuitively once you understand the basics. They helped us by transferring 1 of our squarespace pages over to their systems on our behalf, which allowed us to look at what they did with that and replicate. And now we have transferred all core pages over to Butter.
One key problem that kept coming up when we had www. and app. sites before, was that they felt like different websites. They had different navigation bars, and nothing we did in squarespace ever allowed us to replicate the app. navigation bar exactly. And the look and feel of each site was significantly different enough that you felt like you were leaving 1 site and coming to another when switching between the pages. Butter has completely resolved this issue because we can choose what parts of which site to use on which pages. Everywhere across the site, we use our functional navigation bar, whether you're looking at a Butter page, or a custom page.
The only downside to Butter is that it takes away dev time from our core functionality to build components on Butter. Not much but some. And as we only had so many components in mind when we first set the system up, we were not able to create everything ahead of time, like Butter suggests.
On the upside, once a component or page template is made, it's extremely simple for a non-technical teammate to go in, build it, and post without requiring technical support. Which is exactly what we needed. (It did take us a couple of months of tinkering to get to this point, but it was worth it.)
If you want to see how different the pages look from our old squarespace website to our new Butter home page, I have done my best to save occasional snapshots of the old site on webarchive: https://web.archive.org/web/20201101000000*/www.tutti.space
Bug fixes / tweaks
- Replaced the standard Google location auto-complete field with a custom one as the Google one was slowing down our load times significantly
- Refactored our map - removed Google clusters as they slowed down the site. Having the new map pointers, without clusters, actually looks better now that we have almost 500 spaces
- Enabled users to edit slugs (text in their website URL) separate from their account name, location name, space name
- Added pagination instead of endless scroll on search page (to speed up load)
- Added more properties to URL within search, to save things like location and zoom level
- Merged app.tutti.space and www.tutti.space with page forwarding incase people found old links
- Corrected any spelling mistakes
- Fixed some visual bugs with what3words
- When you hover over a listing (on desktop) the relevant map pointer changes colour and bounces
- Fixed a bug with reset password
- Tweaked language in host dashboard
- Tweaked sorting in host dashboard
Bonus feature (created by Dharmil)
We're still months away from creating an app. So for the time being Dharmil has created a system that enables you to download Tutti to your phone, and have it work similar to an app, minus the offline functionality. If you're on Android, when you go to the website a popup should appear saying 'Add Tutti to your home screen' which will do this automatically for you and you will find Tutti in your last page of apps. If you do this, you will not see a browser bar, and Tutti will have a branded loading screen.
On iPhone it's a tiny bit more complicated. When on the Tutti website, click the 'share' button and pull it up. At the bottom of that list should be an option 'Add to Home Screen.' This will add Tutti to your phone's home screen, allowing you to navigate to it without ever going to your browser.
As always, I hope you enjoyed this detailed account of how we're constantly working on improving the site for you.
Let us know if you have any feedback.
All the best,
Gabriel & the Team @ Tutti