Carrd reinvents the WebPage with hash-sections: #winner or made a hash of it? (#tech)
Psst. it’s a total winner… unless you specifically need your pages to lead separate lives.
Benefits
Let’s get on the same page
Every Carrd site is technically a 1-pager: there is only one page: for example my debut double album website: Smalltown Dreamer.
But the content is divided into ‘Sections’ designated by a /#url, and when you navigate to that section, all the other sections are hidden.
i.e. when people scan the QR code on the A-side of the tape they get to the /#a-side url which contains: the Header, the #a-side section & the Footer - but not the #beast-side section.
!Cheap!
I believe this is one reason Carrd is so cheap: each website hosting is only a single page. But regardless if it’s from a cost-side, AJ’s found a business model where you pay a tenner for a website, a year, instead of a month, as is the case with the Big Website Builders.
Quick
Because the #beast-side is technically already loaded, but hidden, when you do click a link to it, it renders super-fast.
And the speed isn’t just limited to users. Editing is also faster, because your editing view contains content across sections, which can be easily moved between them.
Scroll Points
I should also mention /#urls can be useful for navigating users to a location without hiding other content. E.g. my Ceru.Li/nk takes Instagramers to Linkstagram.CeruleanSounds.com/#links so they get straight to the Post Links. They choose to scroll up for the parody bio if they wish.
Time to Turn the Page on Pages then?
Not quite yet! Here are some benefits of proper /page urls. These are functions hash-pages fail to serve, and therefore necessitate a more expensive traditional page setup.
But first, I’ll deal with a couple red-herrings: problems easily solved:
Analytics
Google Analytics automatically track /#urls (probably a legacy of AJAX websites which used /#urls in a different way).
But of course you don’t use such a horrible piece of surveillance capitalism, you use a modern PrivacyFocusedAnalytics tool, like SimpleAnalytics.
FIne: Adriaan’s got a tweak, as does my choice for small-sites Plausible.
Unfamiliar Symbol in URLs
AJAX websites went out of fashion, so no one expects random symbols in urls. But by a stroke of luck, Chris Messina picked this particular HTML symbol to become a cultural phenomenon for branding. Kids have grown up with the octothorpe, so they won’t mind navigating to a /#url.
In actual fact, you could actually capitalise on it to get MORE on-brand. Make your hash-page’s name the same as your hashtag and it will reinforce the brand.
Staging Edits
Since AJ implemented Hidden Section option, you’ve been able to draft new /#pages without them being accessible.
E.g. I’ve got one at smalltowndreamer.ceruleansounds.com/#draft which just redirects - like all incorrect hash pages - to smalltowndreamer.ceruleansounds.com/# (i.e. the homepage) by stripping the name.
Actual Reasons to Use Traditional Pages
A Unique Page Identity
In 2 important senses:
1). Page Link Branding
Page-specific OG Tags, so that the page has a unique photo & name when it is shared on socials. In the Carrd hash-setup you only set OG tags sitewide. This was one reason we decided to make a separate Carrd for the tour SmalltownDreamers.co.uk. When people shared the gig link SmalltownDreamer.co.uk/#launch it simply shares the main site OG:
2). Searchable Page
if you want pages indexed by Google or other major search engines, best to avoid Carrd. Google treats each Carrd as a single 1-pager, as you can see here by the fact that the #url is not offered:
As far as I can tell, the situation for SEO is even worse, because Google only indexes content which is not hidden on the main page.
e.g. using keywords only found in SmalltownDreamer.co.uk the website is not surfaced at all!
My friend Tyler at Centori.io has advised AJ that he could update the sitemap.xml pages to instruct Google to treat the hash-urls like pages, but AJ seems loath to implement this unfortunately.
Redirect Pages
Update Jan 13th ‘22: If you use DNS routing service like Cloudflare, this section can be moved to the above one of solved problems! See discussion of how using Page Rules on a Proxied domain.
If you might want to do page-specific 30X redirects, get proper pages.
If you think you might one day move your site to a new domain, like when I moved my blog I set a 301 redirect moved from wa.rner.me/2021/05/24/jasraj-i-discuss.html to wa.rner.me/2021/05/24/jasraj-i-discuss.html, make sure you get separate pages.
301 & 302 redirects simply can’t happen on hash urls. If I move SmalltownDreamer.co.uk to SmalltownDreamer.CeruleanSounds.com one day, I will simply have to redirect every page to the main domain. [See Appendix for Update]
SEO-heads would have a fit, but given that there is no S to O (see above) it may not be a huge deal. I mean the A-side tracks are still on the home page!
My workaround to suggest, is distribute short links (generated using Cutt.ly) like Ceru.li/sd-a (that’s actually what the QR encodes!), which can be manually redirected to get to the new page. In other words, use /urls to advertise /#urls to get the best of both worlds!
Completely Separate Pages
If you scroll while a hash page is loading, you can sometimes glimpse (for less than the 1-second it takes modern pages to load) another section.
I don’t BELIEVE this is true for ‘Hidden Sections’ but haven’t thoroughly tested.
UTM Parameters
If you want to use UTM params - a human-readable system for tracking the sources of links, which using public analytics like SimpleAnalytics.com/SmalltownDreamer.co.uk can be completely transparent - it is technically possible.
Good link shorteners like Cutt.ly adapt to this and stick the ?query before the #link (as per URL syntax standards)
However, in practice it is inadvisable. Some link shorteners UTM tools will will strip the #anchor which is crucial for getting correct page on Carrd. More importantly, the #page-name to the back of the link makes for poor UX (as per unfamiliar symbols discussion).
Conclusion: #SometimesWinners
In conclusion, I’ll be advising my clients who hire me to design a modern website to go minimalist and use AJ’s ingenious invention.
So unless you really need the features listed above, in which case I’ll usually suggest Webflow, join me lobbying AJ to integrate these solutions into Carrd (while keeping prices down of course!).
Then we’ll be #winners.
removed outdated links 31 Jul 2023 + here’s a recent guide about setting up Cloudflare proxy (for Redirects)
