Hacker News new | ask | show | jobs
by steve_adams_86 655 days ago

    How does Repaint handle responsiveness?
    
    First you design your website for desktop. Then you make adjustments on different breakpoints. In design terms, Repaint uses autolayout and breakpoints.
I'm curious, why did you choose to go with desktop-first rather than mobile-first here? I'm not saying it's wrong. I'm mostly curious what the thought process was, because my very limited experience has been that mobile-first is a lot easier.

It's easy to go all out with a desktop design and discover it's not practical for a mobile view, nor is it easy to find ways to scale it down and have it make sense both aesthetically and technically for a smaller screen. On the other hand, it's not so difficult to start with limitations that can then scale out into something else as screen real estate allows.

Are these potential issues mitigated by how the tools allow you to layout and design things in Repaint?

Another thing, what are your plans around accessibility and semantics? How is the SEO for these sites? I noticed "Welcome to the Playground" in the playground is a p tag with an id. Almost everything is divs and p tags. Not to detract from what is clearly incredible software so far; you're all doing an awesome job. I'd be extremely happy with myself if I accomplished this.

edit: I ran a lighthouse test on the preview and I see the SEO and accessibility are higher than I expected. The performance score is excellent. The others aren't great, but they likely beat a lot stuff out there. I mean, visit any recipe website and weep for the modern internet.

edit edit: I'm realizing you could probably generate some decent document structure/semantics by having the user indicate the intent of some root items, like headers, subtitles, and sections. That's plenty to get some great meta and intent, right? You've got the hierarchy of the page, you can infer some info from properties of the containers and text, etc. There's a ton of potential to get excellent results here without too much knowledge or input from the users.

My totally unasked for suggestions:

    - a section in the editor for adding these details
    - components
3 comments

You're right that we could make good defaults for SEO, it would probably improve our scores a lot. It would be cool if we could add some sort of checker directly in the editor. It could also give tips on how to remediate.
Looking at the results from lighthouse scores, you can totally translate that into a helpful guide for your users. You can even highlight the objects on the page with missing/poorly defined attributes.

This actually sounds like fun to implement. I suppose it should be opt-in, because some users genuinely won't care. And I imagine doing as much as possible by default would be ideal too, because this can turn into a huge chore which might make your product seem less efficient and convenient by no fault of its own.

Framer does the same thing regarding responsive layouts: desktop > tablet > mobile.
Honestly, we did desktop first because that seemed to be the default for most websites we looked at.

We plan on giving the users control over what tag each element uses for SEO purposes (h1, section, etc.).

We have some SEO related settings that can be set (descriptions, title, etc.) and plan to add more.