Show HN: A tool to build real websites built exclusively in SVG
101–110 of 164 posts
Re: Show HN: A tool to build real websites built exclusively in SVG
#102I was getting really frustrated with CSS and HTML (I was originally a print designer), so built a tool for building websites using only SVG content. It's essentially a website builder that uses Adobe Illustrator for creating pages. The results so far have been really promising: - building websites is extremely rapid - very little debugging or verification is needed - it's easy to create beautiful content Techniques t…
Re: Show HN: A tool to build real websites built exclusively in SVG
#103Earlier quoted context omitted.
SVGs are powerful, and probably underused, especially now that browser support is nearly universal. What do you mean by “enables linked images and fonts”? I create SVGs as text, in Vim, as I do with HTML and CSS. I revisited SVGs when redesigning a planetarium website ( https://friendsoftheplanetarium.org/ ). I suppose I could have done all of it in CSS, but the code using SVG was simple and concise. On the way I dis…
Almost all programs that can create SVG content convert images into inline code, and reduct text to glyphs. This means that fonts can't be reused throughout the site, that text can't be read (either by screen readers or Google), and it can't be selected or copied. It also means that images are much larger than necessary and can't be reused (making the site more resource intensive). All of this adds up to "not being a…
Aren't those the two most common vector graphics programs?
Re: Show HN: A tool to build real websites built exclusively in SVG
#104Is the tool can create dynamic websites with proper responsiveness to each devices?
The page adapts to the screen. It means making different versions for different types of screens. But, the development process is so abbreviated that it takes way less time to make a mobile & desktop version than it would take to make the equivalent responsive version. Also many (most?) serious sites already develop separately for different platforms. So far, in 5 years I've been working on this, I've not had a singl…
I looked at the website on my big 1440p monitor. It looked cool.
I resized the window to a still reasonable size (1280-ish width). Now some of the text is waay too small for me to read. 1366x768 is a still pretty common laptop resolution..!
I can't zoom in the text like on a regular page, it just makes the whole thing bigger, like an image.
I also can't use my favourite a11y tool waspline reader [1] because the HTML is hidden :-( but... I'm not a blind person who uses a screen reader. I'm an ADHD'er with visual snow. I can't change the fonts to ones which are a little more readable for me - and the font rendering in SVG images on Firefox on my linux computer isn't the best.
[1] https://addons.mozilla.org/en-GB/firefox/addon/waspline-read... ^ tbh, considering a lot of stuff I read is in PDF form I am thinking about doing an equivalent of this that does OCR on the viewport and applies a shader so it works on anything, and it only really applies to long blocks of text, which aren't a feature of the kinds of things you're targeting (flyers, product landing pages etc) but I wanted to highlight some of the less obvious accessibility stuff that's around.
I get it, pretty much everything posted to HN gets the "I don't like the design of this site for technical reasons" treatment (especially when it's an article on someone's blog and nobody was asking lol), but I do wanna highlight the not-so-obvious accessibility stuff.
Lots of folk will get by without complaining, because they're kinda used to tech and design being a bit difficult, and they aren't aware how we can improve things for them! I've seen my mum pull out a magnifying glass to read stuff on tablets before - she finds it easier than trying to get pinch-to-zoom to work - "I hate the panning from left to right all the time. It's not like reading a book. I'll forget what the start of the bloody sentence was!". Some people will attribute it to just "not being good with technology", which makes me sad for the users.
SVG is great but that "20 years of HTML and CSS" shouldn't be dismissed because it makes designs take longer.
I think it's really exciting that we have such a powerful layout engine in web browsers these days; the best BEST site designs I've seen take the best of vector art and responsive design. It is SO satisfying having a good vector landing page where the text still reflows, different things are visible when you resize the window etc.
I think your tool is great though, I just think you should run with all the "what about responsive design?" HN comments - you could have a really, really really good tool if you can support breakpoints, fluid layouts and reflowable text sections. The kind that people would pay $$$ for...
Plus, it's gotten a lot better since flex layouts became a thing in CSS!
I think Illustrator etc are missing a trick here too because they're designed more for print media, right?? What would be awesome is if there was a similar editor + format where responsiveness and fluidity were baked right into the authoring flow, like at the layer / object-group level, so you could say "those layers have to be pixel perfect, this one will show up at these sizes, this other one will stretch this amount, that one will scale relatively compared to that one" and hopefully end up with designs that you, the designer, are always satisfied with, which require little or no further work to adapt to other screen sizes, DPIs, devices, etc....
Re: Show HN: A tool to build real websites built exclusively in SVG
#105Earlier quoted context omitted.
This was a terrible era. Specifically because of sites that had no business using it making their whole site flash. Like restaurants.
It's not like they were completely unusable, it's just showing text in an annoying way. On the plus side, it's a testament to how nearly anyone could build a website. I'm sure many many people got their feet wet in web dev making simple sites for local businesses because the bar was so low.
Making an html version of most of the stuff i'm talking about would have been much easier than the flash version. when the only interactivity is changing pages.
Re: Show HN: A tool to build real websites built exclusively in SVG
#106I was getting really frustrated with CSS and HTML (I was originally a print designer), so built a tool for building websites using only SVG content. It's essentially a website builder that uses Adobe Illustrator for creating pages. The results so far have been really promising: - building websites is extremely rapid - very little debugging or verification is needed - it's easy to create beautiful content Techniques t…
Out of curiosity, what techniques are impossible in HTML? I ask this because I too am working on a website builder, and wonder what might be too complicated or impossible for people to implement.
Re: Show HN: A tool to build real websites built exclusively in SVG
#107Re: Show HN: A tool to build real websites built exclusively in SVG
#108If you add a dark background inline style to the html root element, you get rid of the white background lurking from behind when pulling down. The white is blinding.
Re: Show HN: A tool to build real websites built exclusively in SVG
#109Earlier quoted context omitted.
It's a proof of concept, but I think it has potential so it's worth exploring. > The web is not paper, don't design for it as if it as. People have said that for literally everything we have on the web now, starting with "the web is only for text and hyperlinks"
> it's worth exploring Hard disagree. > People have said that for literally everything we have on the web now What I meant is that here the intent is to design something once and display it in the browser as if it was an image (or printed media), i.e. without filling the window properly. This is 100% like displaying a PDF in a browser and it does not belong in one.
Well, then I'm thankful people can still develop and test out radical ideas despite others not wanting that.
This is how all good tech develops, like PDFs. It just tends to be through the internet now.
Re: Show HN: A tool to build real websites built exclusively in SVG
#110Axe accessibility report on that website: TOTAL ISSUES 220 AUTOMATIC ISSUES 220 NEEDS REVIEW 160 GUIDED ISSUES 0 Critical 1 Serious 55 Moderate 2 Minor 2
If you read the page called WTF, I talk a lot about accessibility. I totally appreciate the importance of it. But, the fact that I don't a perfect solution right off the bat is not a reason to stop exploring! Also: ALL CAPS.