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 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?
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 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.
> 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.
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.
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.
> 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.
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.
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 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.
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.
> 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.
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?
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.
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.
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.
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.
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.
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...
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.
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!
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.
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.
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?
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 :)
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!
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!
152 comments
[ 2.1 ms ] story [ 220 ms ] thread.
———— 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?
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)
https://www.producthunt.com/posts/mmm-page-3
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.
https://basecamp.com/
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
Just hit the bottom right "edit" button
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.
Also do you have planned custom domains?
Great job!
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.
It mentioned I can "click Edit and try" but it was not clear I can do that immediately at the landing page without registration.
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.
Very well done!
One note though, keyboard shortcuts don't work (pressing delete after clicking on a element doesn't delete it for example)
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.
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!
Just because of Geocities-era sites, I really wanted there to be graphical visit counter elements I could add to a page.