Landing Pages -- Can TiddlyWiki Learn From Them?

Is this reasoning right:

It would be advantageous if the landing page is loaded without the actual TW being loaded. Then we don’t have to be so nervous about including images! Perhaps even include a demo of TW in the form of an InnerWiki - this “objectifies” TW and makes it less intimidating than actually being inside / using a TW. (Do consider they’ve never seen the beast before. I mean our baby.)

Well we should demonstrate that we are able to do this in TW itself.

I added an animation…which was a little tedious because there is no delay feature in the core. I would love to have @EricShulman 's timeout for this in the core.

Do what?

(If you’re referring to “using TW as a landing page combined with a TW” then I think that’s appropriate for a so called edition but it would just be conceptually confusing, at this stage, to try to convey to the target audience that TW can do this.With the risk of sounding patronizing: The point with the landing page ought only be to make the visitor take “the next step” i.e to try it out, or download it.)

1 Like

Much of this effect is achieved well on the federatial landing page. I think it’s a pretty great model (though its link here would benefit from “description” and “image” in its html):

https://federatial.com/

3 Likes

Yeah, I think the InnerWiki is a great and objectifying visual conceptualizer of what TW is, whereas the federatial effect is a great visual conceptualizer of what tiddlers are.

The “handful of cards” visual (also called “fan” of tiddlers) succeeds, better than any number of words, at giving people the immediate sense that the contents are shufflable, and you can engage with any subset.

Being able to actually click on any of them to see its content brought into more straightforward tiddler focus is both intriguing and intuitive.

-Springer

I think an animation to visualize the change of layouts with a material metaphor like the one posted above is a useful feature anyhow - our normal Layout is very good for editing, but for visualizing data and presentations there are more engaging looks for TW - and it would be great to switch to such a Layout in an sensual.

I do actually like the current demo you have put up here. May be the animation can be made little more soothening to the eyes to avoid eye strain by avoiding frequent rapid movements. I liked the current demo with zoomin storyview, but the downside is that I have to close all the opened tiddlers to go back to the landing page. This can be avoided by providing a quick access button to the landing page on top of all tiddlers or somewhere else.

Or may be you can revive the cecily storyview for TW5 - Project Cecily - a zooming user interface for TiddlyWiki

Then choose two palettes (one dark and light palette) that work well with the landing page and documentation site and provide a button to switch the palette easily.

And finally use more images with only relevant text to convey the matter in the landing page like in bottom part of the Memory Keeper homepage - Memory Keeper — Help 0.0.10

Also the mobile view needs some minor fixes. Mobile view works best with zoomin or pop up story views.

That should be enough. I checked website of many other note taking apps. Almost all of them have a similar pattern with a topbar having links to the contents within the the homepage.

Below given are two examples.

1 Like

yeah, Cecily. I would love to have that working on TW5. It has such a great potential.

Wow, how did I miss that? (I was using TW in 2008, but somehow didn’t catch the Cecily news).

This brings back major Prezi vibes! (Prezi was founded in 2009 – maybe the founders saw Cecily??! But it was all graphics eye candy; they never gave users a powerful handle or text or data.)

-Springer

I made an animation for switching from landing-page to the normal layout
https://szen.io/landing/

Click any link to change the view

I was thinking as I read this thread that something similar to this would be the best way to handle it, but with a twist. I don’t even know if what I would like is possible in web technologies, but I can imagine an animation that looks something like the Mac animation for opening or closing app from the dock. When we close, it looks as though all the content is sucked into the button; when we reopen it simply reverses.

This version shows the consolidation into the button, but the odd delay in showing the new information underneath feels strange. It would be fantastic if it looked as through the old content is just being sucked into the button and the new content had been there all along underneath.

But this is just musings from someone with no idea how to implement it.

Before I knew TW’s Layout tirck I made a grid design for TW:

https://szen.io/Grid/

Perhaps this could be helpful to make the landing page within TW

2 Likes

I made a fun-button for a landing plugin :wink:
http://szen.io/landing/
Switch back to the normal view by clicking any existing link on the landingpage

I have an idea that would address most of the problems above and I think is mostly implementable with existing tiddlywiki.com code. I didn’t find it formulated this way above, but I’m sorry if some of it was already discussed and I repeat too much.

tl;dr: minimalistic initial theme, shorter and simpler default tiddlers, easily accessible buttons to restore initial view and switch to default full theme.

  • Keep the landing content a normal part of the page as it currently is (default tiddlers), not a landing page which needs to be delivered somehow. This solves the main issue discussed above:

The rest of the points are then simply a way to make the initial view more inviting to new users, but equally functional to advanced users.

  • Start with a simplified theme/setup:

    • Sidebar hidden.
    • Top menu bar initially hidden and displayed on scrolling down if technically possible, or just simplified as detailed below.
    • Tiddlers centered (like in Centralised theme), simplified (like in Seamless theme), only title, close button, and text displayed (no edit date).
  • Default tiddlers more split up. For one, to make it less overwhelming for new users (see the many examples of landing pages above, there is always a lot of whitespace and images, and not a lot of text on the screen at once). Second, to make opening inner links more intuitive. Tiddlers open below the current one, if the current one is too long, the animation jumps so far down, that the clicked link is far away up and no longer visible.

  • Remove some overwhelming content from the default tiddlers, leave links to it. For example the current GettingStarted could be split and linked to from simple links Online/ Desktop/ Commercial/ DIY (see Docs: New Quick Start section for HelloThere by Jermolene · Pull Request #7254 · Jermolene/TiddlyWiki5 · GitHub); Community could be at least initially folded.

  • Reduce the Menu bar to: Home (restores default tiddlers), Toggle simple/ full? view. This would toggle between the standard view (with sidebar, edit buttons and so on), it would be an easy way for advanced user to get what they need.

  • Have a tiddler with more or less the following content somewhere in the default tiddlers, not necessarily at the end:

This site itself is a TiddlyWiki! Play around with it: click the links to open tiddlers, click X to close them, Toggle view to see more options like creating new tiddlers.

As obvious as it may be, I don’t see any direct statement that this site itself is a TW. It is of course rather easy to get, e.g. after watching the introduction video or downloading the empty copy. But it is such a rare thing that a website about a thing is the thing itself that it would be good to state clearly.

  • This is purely cosmetics, but I think important and easiest to improve atm. Make the graphics in the Find out more cards more consistent, if they should stay so much exposed. There is currently a mix of a photorealistic illustration, screenshots, vector graphics, and a photo; the cat itself has a couple of different styles. Each of these graphics of course looks good when viewed individually, but I think they don’t work together well in my opinion.

I hope it is understandable as described, I lack the skills to make a demo of it in a reasonable time.

My question: other than this thread, is there some focused discussion/ coordinated effort on improving the visual/ marketing aspect of the home page? I have seen a thread about a video, the PR linked above, and some others, but no central place. I hope I could help with some experience I have.

2 Likes

As demonstrated in alternative layout methods we can simply compose alternative tiddlers and switch layouts, I would like to see a way developed to trigger a switch to a landing page according to a tiddler named on the URL or lack of, apart from a default landing page they are often used to drop people into a particular view of a website, on commercial sites it may be a “specials page” with the link to that eg https://tiddlywiki.com/#specials

  • This makes me think what if we could set a layout name on any tiddler and on open, if there is a layout set, change to that layout?
  • This would allow a URL or permalink to be given that opens the tiddler and or applies the selected layout, but also simply navigating to that tiddler changes the layout.
    • A link catcher widget in the default page template and each alternate layout should be enough to catch all cases.
    • For convivence we could give each layout a tiddler containing actions on selection, to build in other “on layout” switch actions eg;
      • Show / hide sidebar
      • Select a story view
      • Change pallet
      • Save / restore a story list

This is a compelling case for a generic on open tiddler trigger to use named actions. So any tiddler could have a layout switch added.

Can there be a way to open a layout via URL parameters? So there can be a landing page layout that only shows when a parameter exists, and there can be a large “Go to doc” button that switch to the default layout.

When we share tiddlywiki in social, we can share this landing page layout for new users.

Maybe an intro.tiddlywiki.org that shows a wiki with landing page layout by default? And we can remove most of the doc from it, to make it opens quicker.

That is what I want to do when building my TidGi app landing page, and I will make it a static site, to keep the speed. And maybe jump to a doc site in a different url.

Seems I’m late here, glad to see there is a PR for this. When this PR is merged, I’d like to copy it (or make it a plugin somehow?) to build my edition’s intro page.

I’m also curious how to build a page like this in tiddlywiki.

Tiddlymemo has a simple landing page https://tiddlymemo.org/

1 Like