I hate making a new login that I have to remember for things I might not even use. It would be nice if you could create the website first, then only sign up if you liked it and wanted to save it. This stops me from testing cool looking projects like this all the time :(
EDIT: that being said, I love that you can edit the landing page itself, that at least gives me some idea of how it works, although then if I turn it into something interesting I have to start over when I sign up.
So I think this is an excellent point. I'd love to do something like that for my product as well.
However, there are a few considerations, some of bigger consequence than others:
- How do you keep users from losing their data when they leave and come back? Cookies with an ID are a brittle solution. You could have a unique link, where the user's work is saved right up until they want to register
- How do you deal with the inevitable onslaught of people using an open system? If you're bootstrapping like me, I don't think I could possibly handle the influx of an HN frontpage's worth of people simultaneously hammering the system
- When do you clean house? You won't necessarily know whether someone wants to build a site, disappear for a month and then come back to it. Feels unlikely, but it's still possible.
All of this would be solved by having (at the very least) a quick email-only signup, which auto-generates a password and a welcome email, but also takes you straight into the system. It's a small barrier to entry, but perhaps one that's worth putting in place to avoid hammering the server(s) too much?
What do you think of video content showing off the system, could that help as a sort of interim solution?
You could require a login after someone has added at least 5 objects and/or spent at least 5 minutes making edits. This makes sure that if data is lost, it's nothing that can't be easily recreated.
After at least 30 seconds of activity, you can display a prominent banner at the top of the page that says "make a free account to ensure your work is saved". Then it's clear that your ability to retrieve their data upon their next visit is a favor and not something they're obligated to. It's not exactly the same, but you can look at CoderPad's sandbox notice as inspiration for how to word this: https://app.coderpad.io/launch-sandbox (Note: you'll only be able to make one sandbox per cookie, so visit this in incognito mode)
To address scaling, you can probably limit the total number of "logged-out users" who are currently editing. If more users visit the site during the same time period, require them to make an account, just like you are now. If you're worried about users expecting a playground and getting confused, you can look at Google Docs's "This is getting a lot of traffic, you're in read only mode" notice that appears when more than 50 people are visiting a doc as an example of how explain the situation in an easily understandable way.
Now that you've properly set user expectations, you can clean house whenever and it should be okay.
btw, I just tried out this tool and I think it's awesome for a lot of the reasons mentioned in the top replies. Hope some of this is helpful + wishing you best of luck!
I never watch videos personally, but that's more because most of them are terrible and don't help than anything (they either just talk about it and never show the actual product, or take 5 minutes introducing themselves before the 1 minute demo, etc.). I'm sure it could be done right though, but I'd bet other people have also been trained not to click videos.
The email gate sounds good (except don't generate a password that will then be visible in plain text, generate a one-time login that can't be reused after a certain amount of time and give the user the option to set a password later if they want one); sites could expire after a bit and a real account (where the site doesn't expire) could only be created if/when the user chooses to create a password and you can't save or use features that could trigger emails until you've verified your email or something.
Yeah, I can't stand those videos. With anything I do, it's straight to the content and as short as possible always. Though I agree with you about videos in general. I always prefer text-based tutorials. But many friends of mine are video fiends, so I always make both :)
Serializing the user's session state to LocalStorage comes to mind as a reasonable solution. Comes with it's own caveats, of course (you now have a state versioning problem), but addresses all the points you bring up pretty adequately:
1. As long as their on the same device/browser, they lose zero data. This is a pretty reliable happy-path use case.
2. The only onslaught you'll deal with is simple pageviews since everything in the trial is stored client side, which also makes #3 no problem.
Very good point about LocalStorage, I haven't explored that avenue yet.
Re your second point, unfortunately with my product this works a bit differently. I'm generating static websites in the background, as part of a realtime-preview functionality. That, unfortunately leads to reasonably high server load.
I'll have to have a think about how to approach that in the future :)
Would be disgusting chaos but also would be cool to let anyone edit the page so it is forever changing -- obviously working out the issues of blocking/hiding texts.
Or social, imagine how much fun it would be to leave stickers/stamps on approved friend's websites.
- Instagram has recently become much more aggressive in not showing anything to logged out users. Because of this, when you create a button (on your site) linking to an Instagram page, the button name ends up being "Login • Instagram" (that's because you're getting the Open Graph preview of the page you're redirected to, i.e. the login..!)
You could probably have an exception for Instagram and when linking to instagram.com/<username>, force the button name to be @<username>. Not ideal, certainly, but maybe a bit better?
Congrats again and happy launch!
EDIT: I initially didn't see that the mobile viewport /is/ visible when designing on desktop! my bad! I removed my original note
> Websites shouldn't all look the same. We prefer campy, kitschy, messy, imperfect.
I really like the design aesthethic this product encourages. There's so much charm and fun and eccentricity that's lost in a web where full-height responsive image backgrounds and blocky design frameworks are ubiquitous.
If this can help people express just a little bit of the wild creativity of things like early 2000's MySpace layouts or GeoCities pages I'll be a big fan!
I think now that many live in a youtube/twitter/twitch/facebook/insta sandbox where you can't customize your "space" very much, those days of people crafting their own corner of the internet is really gone.
My daughter is a professional illustrator. I don’t often show her things I learned about on HN, but I just showed her this site and she loves it. She has already signed up and is playing with her new site now.
Yes!! Why not, the website as art? As the medium and the message? A network of creative expression? Or as a "diary" where every entry is more scrapbook-y and less uniform blog?
Honestly, because it takes work. I'm not even talking about technical work, but creative work. To do this well, you want to think about your message and then about how to convey that message not just in the content, but in how the content is presented (sometimes geocities-esque chaos isn't quite the right vibe). Then you need to figure out how to fit that presentation into the assumptions of your web technology (I personally feel like the DOM is a straitjacket, but I'll concede since I don't work heavily in the front-end myself, maybe there are cute hacks that make it less so, short of just making the page a full canvas for something else like three.js)
Anyway, I've developed two "fun" pages myself, playing around with alternative ways to present content on the web:
Neither of them really flesh it out to what one might consider a full website, but are more light-weight experiments in alternative ways webpages can present content.
> To do this well, you want to think about your message and then about how to convey that message
We all have to do some version of this in PowerPoint for school or for our jobs. We can go nuts with PPT transitions and animations, but we usually don't.
This is the same principle. You can use it to make a nice Squarespace like site, or go full lo-fi punk rock zine if you want. IMO that's what computers promised in the '80s and later with desktop publishing software. It's been missing from the web for far too long.
Work? Or time? Hobbies aren't "work"? Time sucked up by FB or Tw isn't work? If that tool / platform gives me a way to expess myself and I want to express myself, that's not work.
I don't know, on the other hand, "random" is kind of a tired aesthetic.
Little inspires less confidence about someone's creativity than schizophrenic jumbles of gifs.
Besides, there wasn't a reduction in fun and eccentricity. So lets permit for a second that being "random" and being fun and eccentric are the same thing (they're not). Part of fun and eccentric moved to video games, the real safe space on the Internet for it. Part of it went away because personal websites became public facing destinations in a way MySpace and Geocities pages never really were.
And before you say that MySpace was a public facing destination, it is proving my point that musicians rapidly moved away from it long before Spotify homogenized the way we access music - it wasn't a music industry thing. It's that Instagram does a better job at doing what MySpace did, and it's because non-random people just communicate with pictures of themselves, particularly their bodies, as the lowest common denominator.
Why is the loss of "wild creativity" no real great loss? Ultimately we can appreciate how hard it is to design nice looking stuff a lot more. Even nostalgia for that old Internet you're talking about is kind of toxic, especially to people who are genuinely random, because nostalgia is a huge obstacle to getting people to try new things. And that's why maybe those blocky design frameworks are here to stay - because stuff that feels visually familiar on something that doesn't really matter, like a website, convinces the visitor to try something new that does matter - whatever you're writing, composing, making, etc. that you're putting on the web in the first place.
> I don't know, on the other hand, "random" is kind of a tired aesthetic.
In graphic design (as I learnt it 20 years ago) there's broadly two categories, stable and dynamic. A stable design follows the rules, has quite a logical structure, and even a dilettante can easily use templates to make one without even understanding the rules all that well.
OTOH, to execute a dynamic design well you need to have a strong intuition for aesthetics, as well as a deep understanding of the rules. My teacher put it more plainly, you need to understand the rules to break them properly - otherwise it just looks like you screwed up.
The tool provides full freedom to break the rules, it doesn't mean everyone will break them well, but it does open more possibilities for a capable designer. And if there's anything tired, it's the same-y stable designs that cover almost the entirety of the web.
Seeing websites as just being a tool to get you to the thing “that does matter” is a shame. There’s a place for that for sure, but that’s all the modern web is now. I miss the time when the site itself was an expression of the person who made it.
Was a website in the mid 00's where you could build your own website (anameofyourchoosing.piczo.com) and then decorate it using a WYSIWYG editor via drag and drop. Was really popular with kids when I was in primary school (including myself).
There were no templates or any grid systems etc, you'd start with a totally blank white page and you'd just add different premade widgets or HTML snippets to the page, customise the background etc. etc.
Made for some interesting designs to say the least. You'd have to be pretty good at it to make anything that looked professional due to the impreciseness of it all though.
Shame there doesn't seem to be really much archived of the service or any of the sites, unlike Geocities. You can see some examples of sites if you look on Google Images though.
"There's so much charm and fun and eccentricity that's lost in a web where full-height responsive image backgrounds and blocky design frameworks are ubiquitous."
This reminds me of this web design "meme" from 2016: Which one of the two possible websites are you currently designing?
I miss a 'Jump to random mmm.page'. No time or creativity to add something myself, but I'd like to get a few impressions on the jumbly messy things that are being made..
Great idea, would be good to see what users have created. It shouldn't be totally random though, as that could just go to a bunch of incomplete sites. It should be curated a little bit.
I would rather pay $79 USD a month for this than what I get with leadpages that I mostly use for easy editing/creation. One click editing was awesome right on the homepage. Love this and can imagine using it for a number of quick things.
If I were leadpages or a similar company I'd buy this outright right now before y'all build up your own community and the price reflects that.
If you're thinking of a model I'd suggest doing pay per export for source code/external host, let people build & then export full css/html/etc for like $9 a project. Keep the hosted on your domain free or mostly free and you'll make an industry of people who will justify the small project cost for the time savings of a true drag & drop editor
This is going to get some love. Its the right product insight(even the simplest template driven sites are too hard once you get past the basics). You're working off a good consumer insight ("i want this site to look very different"). I like the details (chaos monkey). Super simple to understand and use.
I wish the "edit" button was more visible. I noticed it only on my second visit. After I found it, I enjoyed playing with the page and the first hand experience a lot more than reading about it. During my first visit I wasn't impressed but now the product looks cool to me.
I was about to say the same. Make it bigger. Make it pulse. Mention high up in the text.... Or something. I scanned through the page and was annoyed there didn't seem to be a way of testing it without signing up and was about to leave when I spotted the edit button.
The editable landing page is a great intro to the product, but it would maybe be good to have a big CTA button above the fold that's like "Edit this page". Much more noticeable than the bottom right corner pencil button.
EDIT: though of course your main CTA is to drive signups. That makes sense too. Maybe this is a secondary CTA right under the signup button?
Also the signup button is below the fold on smaller windows, might want to reconsider the size of the text above it (at least on viewports that are <700px tall?)
This feels like it’s in the same family as straw.page[1]. Both are a really refreshing break from homogeneous minimalist web design that’s taken hold over the past few years.
The flexible WYSIWYG editing is top-notch! I’m sure you’ll get a thousand feedback ideas, but... if a next goal was to get folks to make it an expression/view of themselves, it would be good to help them connect content that they are already making back into their page. Being able to drop in a API feed of their tweets, blog posts or videos — and then applying some of your kitschy formatting to it — might bring back even more of that MySpace feel...
This looks like a lot of fun, speaking as someone who loves the weirdness of the old web, but understands the challenges of re-creating such 'messy by design' sites with pure HTML/CSS.
Wordpress has moved in this direction with Gutenberg (where you can add 'blocks' inside the <article> element for things like columns, tables, images, iframes. Full Site Editing has been "coming soon" for a while however.
But even so, Wordpress (or Wix or Squarespace) isn't offering the "Clippy meets PowerPoint" level of drag and drop that can result in fun sites. For example, rotating an element so it appears a little off-centre and askew isn't supported out of the box in WP Gutenberg. You have to be able to edit your CSS file to do this. Whereas in PowerPoint, you can rotate and scale elements easily.
It looks very nice! I played around with it a bit, and one of the main things I missed is some kind of hierarchy/grouping.
If some text is inside a box, and I drag the box around I'd want the text to move with it. Currently I have to drag each individual part of a group to move it.
Hey HN! Been thinking about something like this for a long time, and finally decided to work on it three months ago. Excited to show everyone today!
.
———— TLDR ————
I built a website builder (works on desktop & mobile) that makes it easy to create automatically-responsive, collage-like websites -- websites that allow you to overlap text, images, GIFs, YouTube videos, etc. etc.
* Every page is automatically responsive (a demonstration of how is shown on the homepage).
* Allow text, images, GIFs, shapes, YouTube videos to start (much more planned).
* Everybody gets their own URL/namespace @ mmm.page/USERNAME
* _Actual_ drag and drop! No grid-locking (though there are layout alignment guides).
* Tiny cool thing -- try pinching and zooming on your touchpad (rotate works on Safari too).
.
———— Motivation ————
There seems to be fewer and fewer personal websites -- many of which now look increasingly similar -- and, yet, more people than ever have some Graphic Design Lite experience (a la Snapchat & Instagram), so I figured, it could be interesting to see websites made with a similar style, WYSIWYG composer as Snapchat/IG. (That, and the math to do these layouts manually is always too much hassle for me.)
.
———— Updates to Come ————
A lot still needs to be done, but wanted to share today to gather some feedback -- hope you find it useful!
Awesome work, I really like what you're doing with this.
I created my own personal page and followed each of the steps. However, I can't update the email, Twitter and IG links on each button. Am I missing something, or is this a bug? I'm on desktop using FF.
Those buttons are filler buttons, you have to drag a new button out to customize it (it showed a message about this for me, perhaps the developer updated it since your comment?)
I'd love to be able to use this sort of editor to produce a static site that I control. My websites are currently static and deployed via netlify, but it would be awesome to create some pages with a tool like this.
Not the creator, but looking at the source - everything is sized using 'rem' units. (Height, width, positioning of all the elements.) Kind of like using a percentage.
FYI nothing happens after clicking on Chaos Monkey → Proceed. I thought it was because uBO blocks sentry requests, but even when whitelisted, requests are made, but nothing happens.
awesome work! I love the flow, the simple concept of toolbar+modals for the UI, the premade sensible options. Oh and those menus and icons are very cool, did you use any special frontend framework?
Very nice but don't really understand "Every page is mindlessly responsive so they work across screen sizes". Doesn't seem to do anything to make it responsive unless I misunderstand something (just tried to resize the window and anything not in the narrow column in the middle ended up outside the screen).
I would like to add "breakpoints" and make adjustments just for the screen size I'm currently viewing it in.
While my inner webdev agrees with you, my interpretation of the mmm.page philosophy is that planning "breakpoints" etc takes too much thought, and hence runs against the "mindless" aspect.
"Mindlessly responsive" -> When the content is outside the demarcated safe zone, it's not visible on little screens. Simple ruleset, no brain required. If I just want to get some fun content on a webpage, I either paint in the lines or intentionally paint beyond them.
Really awesome tool and just what I was looking for. As someone with a design background, I do miss some tools that I'm used to having - like the eyedropper for example. One thing that would be cool to see in iteration would be responsiveness instead of just showing the mobile cutoff, but overall for a first-pass I think this is a great tool! Nice job.
I found it amusing that the 'stroke' tab of the sticker presets gives you a variety of random brush strokes, smudges etc.
It also gives you a single sticker of a brain flashing 'aphasia', which is a literal type of medical stroke that causes brain damage and possibly insensitive on that tab!
Great stuff! love the idea, design and animations are slick! Everything is so simple and smooth!
A few things that come to my mind if you'd like to continue developing this project:
- if a user enters a link to a subpage owned by the same user I think there shouldn't be a `target="_blank"`
- maybe add a button to disable the layout red lines tips as it could get annoying when you have lots of overlapped objects, although it might be an edge case [1]
- one minor advice is some folks are probably going to complain about collection of the user emails for the sign-up so I'd suggest making some privacy policy just to be transparent.
I love the concept, and I was having a lot of fun building my first page; however, I had to restart my computer after adding about half a dozen page elements, and all my progress was lost. It'd be great if work was saved as it was edited on the page.
I like it, but I won't consider using it until it lets me set a username and password (and preferably with 2FA as well) instead of the "we'll email you a login link" thing.
Messed with editing the landing page for a bit. I like it, well done. Editing is intuitive, not much of a hassle. Things react & do what I expect they should.
As others have mentioned, definitely add a random mmm link, to see other mmms, or otherwise add a spotlight to show off what people can / have done with it.
Also make it more obvious you can edit the landing page, maybe provide a clickable link in the text that points out that you can edit the page (below the signup button at the top). And then provide a blank canvas page where people can screw around; if they like their mess, they can sign up and save it.
This is pretty fun, but I can't figure out how you do most of what you have on the home page. I'm not sure if it's just me or some of the coolest things are too hard to discover. A few examples: When I go to shapes they're all 2d and I can't find a way to make them 3d like yours are. I'm also not sure how to rotate objects, even if I click on the rotated YouTube video I can't figure out how to do it/how I can change its rotation.
Also is this a typo? "Every page is mindlessly responsive so they work across screen sizes" Should mindlessly be automatically?
The 3d shapes are images, so "Add Image" rather than "Add Shape". You would have to find your own images.
To rotate, click on something and move your cursor just to the outside of one of the corners. Your cursor will change to a curved arrow, and you can rotate.
This is awesome, I’ve been looking for something like this (particularly for mobile) for a while. One small issue I came across is a photo I uploaded came out with the wrong aspect ratio and I can’t seem to fix it.
First impression is very good. However, it requires signup to actually try / use. I have several websites, but currently have no need for such so I just left again. Probably to never return because I never remember sites that I only visit a few seconds. Would be better to let my try and get me hooked, to get ideas for remodeling one of my existing websites.
Damn, I didn't think I'd spend so much time on it, it's awesome. There are basic features lacking imo but it's great ! Oh and you can check my page here : https://mmm.page/Rphad.yolo
I love that it fuels creative freedom, but this seems to be proprietary, which means freedom is still restricted.
Consider releasing code under AGPLv3 and styling/pictures GFDLv1.3? (GFDL has very strong attribution requirements: you must keep it as part of the title and include other parts.)
This is really fun and cool. I haven't said that about a web tool in years. I think some other outfit, maybe it was ".me" or something had something personal but it wasn't fun. Great job! Hope you can keep it going!
Why is everyone forcing email logins? How can i give this to my coworker to work on with my email if he doesnt have a password? What is the easy solution for me without me having to forward the login email each time?
I found it unusable on Firefox 81 (including with No addons). Clicks don't work at all - seems to work fine on Chromium. I suggest testing on a broader range of browsers.
Edit: It's just my version, not an issue with the site.
The issue on Firefox 81 seems to be a z-index issue with the edit toggle button. Setting it up a 100 fixes it. On Firefox 81 the z-index seems to be calculated to z-index: -2147483648;
Is there a particular reason you are using a 1 year old version of Firefox?
I am using Firefox 88 (std, auto update) and it works fine. Most polyfill libraries only support the last 2 major versions on greenfield browsers because they update themselves -- perhaps there is a problem with your auto updater?
Probably - stupid "managed" updates from my organization. Probably should just uninstall the managed version and install the normal version from the web.
This does feel quite myspace-y, but the burning question would be... is this all just like myspace. e.g. if I leave or spend hours creating something, it is nearly impossible to move it or back it up to something else?
Great job! The builder is fun and intuitive. I especially like how you handle responsiveness - very smooth.
Do you basically use relative units (eg percentages) for all sizes and distances to accomplish that?
Hey, I really liked the registration process - getting the email verification in first and then having really simple onboarding makes for a great experience.
Also, the aesthetic is so fun!
Looks great, but little bug on my system (Firefox 87 for Android 11), scroll does not work.. But on my computer, it sure looks good, will recommend to my less tech-savy friends!
upvote for the "messy encouraged" a lot of times tools decide how the works will generally look like, hope people can really make something wildly different with this
EDIT: that being said, I love that you can edit the landing page itself, that at least gives me some idea of how it works, although then if I turn it into something interesting I have to start over when I sign up.