Show HN: Mmm.page – Drag and drop personal website creator
build.mmm.page
build.mmm.page
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.
Agree on onboarding.
You also have to re-enter your email after you click your email link which was annoying.
But... this is 100% nitpicking. I think they crushed launch at making this appealing.
I didn't even notice that! What a cool idea to be able to test out the site by editing the home page itself
Or social, imagine how much fun it would be to leave stickers/stamps on approved friend's websites.
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?
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.
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.
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 :)
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!
A small comment:
- 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
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!
Could be fun. We need more fun.
Anyway, I've developed two "fun" pages myself, playing around with alternative ways to present content on the web:
1. https://maxsond.github.io/ (website traversal as interactive fiction)
2. http://tilde.town/~indigo/ (website traversal as pseudo-CLI)
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.
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.
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.
This reminds me of this web design "meme" from 2016: Which one of the two possible websites are you currently designing?
https://twitter.com/jongold/status/694591217523363840
Five years on, and it still holds true today.
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.
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.
Edit: changed quote
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
Uh... wow.
What about View Page Source > mypage.html? I like the idea of paying per project somehow but this particular method seems not strong
It mentioned I can "click Edit and try" but it was not clear I can do that immediately at the landing page without registration.
Also do you have planned custom domains?
Great job!
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?)
Anyone else making a page out there?
I did the first thing people do when new domain is available - go through hot words and park lol
Personally I much prefer websites that don't use up that much bandwidth.
Let's take https://asset.mmm.page/77/a05aa5533e4f3a97080c63f9b70189/04-.... 4,748,611 bytes, 2602x4336 pixels, actually rendered at a ~150x250px size. Do you really need to ship that many pixels?
I hope more people pay attention to reducing bloat than looking campy, kitschy, messy, imperfect.
[1]: https://straw.page/start / https://news.ycombinator.com/item?id=26124581
I really hope this takes off - so much more creativity-inducing than squarespace or whatever!
Does not really work for me since i am not really the target audience, but i really hope this gets a lot of exposure.
Where are you from? What music inspired you? Why did you choose to remix this or that song?
I did click anyway as I'm a fan of the Prodigy and saw a Climbatize remix.
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.
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.
Just because of Geocities-era sites, I really wanted there to be graphical visit counter elements I could add to a page.
.
———— 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.
Check it out @ https://build.mmm.page
Feel free to RT https://twitter.com/xhfloz/status/1392438711367909376 to help :)
.
———— Nitty Gritty Details ————
* 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!
Feel free to follow me on Twitter for updates (https://twitter.com/xhfloz)
.
-- XH (https://mmm.page/xh.main)
anyway, keep it up! this is great :)
How did you accomplish the responsiveness with such a flexible layout?
style="height: 0.160992rem; width: 1.00383rem; left: 0.5rem; top: 0.273827rem; ..."
This can be used because `font-size` on the root html tag is set to the width in pixels of the screen - or 600px maximum.And then font sizes for all the elements are specified individually.
One thought I had ... it'd be useful if you can add some features to support accessibility.
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.
(by the way, I'm glad you're using "nocookie" for youtube)
I would like to add "breakpoints" and make adjustments just for the screen size I'm currently viewing it in.
"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.
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!
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.
Very well done!
One note though, keyboard shortcuts don't work (pressing delete after clicking on a element doesn't delete it for example)
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.
Also is this a typo? "Every page is mindlessly responsive so they work across screen sizes" Should mindlessly be automatically?
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.
Just hit the bottom right "edit" button
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.)
I always search for apps that let you design web pages with extreme simplicity like this.
One suggestion: please support right-to-left languages like Arabic; not hard at all :)
One feature request that would help a lot is instead of uploading an image, providing the image source.
Edit: It's just my version, not an issue with the site.
Is there a particular reason you are using a 1 year old version of Firefox?
I like it :)
The next time I start a new project, I might use this for a landing page !