The Web Design & Development Megathread

The Something Awful Forums > Discussion > Serious Hardware/Software Crap > The Cavern of COBOL > The Web Design & Development Megathread

«‹›362 »

Dominoes: Sep 20, 2007

Re the sliders: I initially had it as a binary yes/no, where you'd toggle by clicking the image. May go back to that based on the unon critique. I switched to sliders thinking it would be more fun for the customer to customize. Maybe a compromise where it toggles by default, but with options for 'a lot' and 'little'.

# ? Aug 13, 2018 20:44

Adbot: ADBOT LOVES YOU

# ? May 27, 2024 07:14

The Dave: Sep 9, 2003

I kind of think of a UI where there is a fixed sidebar that is the mix, and I can use the left hand side to add things to that list, and also use that list to mess with the strength.

# ? Aug 13, 2018 20:46

Maleh-Vor: Oct 26, 2003; Artificial difficulty.

Crafting systems in games tend to have UI similar to what you're going for, as do the sliders on Humble Bundle, and they're usually a nightmare when you start re-adjusting values you had already set since they all have to affect the previouos settings and generally have to choose between keeping the set proportion or keeping the actual value. If you can add a third (or fourth, fifth, etc) item you're going to start having issues.

What you could do is consider it in "parts" or "measures", like drinks sometimes do, where you have 2 parts x and 1 part y then displaying the result as a single bar divided into portions. You click Oolong twice, then Chamomile once, for example, and your mix is 66% oolong, 33% chamomile. It would probably even be easier from a logistics standpoint if this were a real business.
Edit: don't forget to have a plus, minus and current counter on each element.

# ? Aug 13, 2018 20:56

The Dave: Sep 9, 2003

Okay now that I could dive deeper:

On load my eye is immediately drawn to all the images of the teas. If you cared about me seeing the branding, tagline, or weird about toggle button, they are very easy to miss.[/li]
The background image is serving no purpose other than making the content feel more cramped by revealing it's container and making the content look more busy because is has a transparency.
No real directions on the page, not that it's necessarily hard to figure out but
Totally missed the top section that broke down my selections and their percentages, probably because I started playing with the sliders by the time it was out of my viewport.
Size and Price button gets lost, partially because it's out of the white container and is disconnected from that content, and partially because it doesn't contrast with that dark grey background too much.
"Size and Price" doesn't necessarily mean continue to me.
I would work the name and description into the next screen just to de-clutter that space a little, the next screen is also really bare.
Second page could use tons of love. Just sort of slopped together, spacing is messing.
The selection of the size of the blend isn't labeled and the treatment is hard to read especially with the transparent background and giant photo background image. I'd be weary of this passing accessibility standards.
Would be nice to be able to choose quantities here, as well as see a total.
Change ingredients button is too prominent. The checkout button actually looks like the secondary action with the low contrast is has.
This payment page is also a bit of a hot mess. Lots of completing text styles and sizing. The name + description is so strongly treated, not sure that should be the focus here.
Avoid using green/red as border colors on input fields if it's not validation feedback.
Input labels seem to be missing the for attribute.
I would never purchase from this site because of how out of place the CC details looks. It's inconsistent with the other form stylings, there is no labels on Exp. Date or Security, and there's also nothing assuring me that this is a safe form.
The buttons to go back are way to prominent. I would also consider not having them as buttons and just give them a breadcrumb treatment at the top of the page.
I assume this page is still being worked on by the lack of a check out button?

One site that this reminded me of that I liked was: https://thebarshack.com/custom-bars/custom-protein-bars

I was able to track the macros and ingredients the whole way through the process. Though a little bit of a pain to go back and tweak things. Lots of potential though it there's a lot of really cool ui/ux you could do with that process.

The Dave fucked around with this message at 00:46 on Aug 14, 2018

# ? Aug 14, 2018 00:44

Dominoes: Sep 20, 2007

Thank you very much for the detailed break down! Great stuff. I have my work cut out for me. Re the checkout fields: The red/green borders are indeed validation, and an 'Order' button appears once the form's valid.

Dominoes fucked around with this message at 02:44 on Aug 14, 2018

# ? Aug 14, 2018 02:28

Cyber Sandwich: Nov 16, 2011; Now, Digital!

Dominoes posted:

Thank you very much for the detailed break down! Great stuff. I have my work cut out for me. Re the checkout fields: The red/green borders are indeed validation, and an 'Order' button appears once the form's valid.

I would address text styling and buttons afterwards. The color palette for "continue" isn't as obvious as one would hope and the tea labels wrap in a narrow viewport. Minor shading and border additions go a long way.

I like the page structure but I concur that the immediate focus should be on the branding first, however that's done.

# ? Aug 14, 2018 20:09

The Dave: Sep 9, 2003

Dominoes posted:

Thank you very much for the detailed break down! Great stuff. I have my work cut out for me. Re the checkout fields: The red/green borders are indeed validation, and an 'Order' button appears once the form's valid.

I wouldn�t have all the validation triggered on load, give the user a chance to fill the form out and spell out the error in text when they focus off the first time. This will also be more accessible.

Better UX would be having the order button there, and having it direct me to the validation errors if I click it and any still exist.

Thanks for taking my notes in stride.

# ? Aug 14, 2018 20:39

Moto42: Jul 14, 2006

A while ago, Shirec posted something about taking a web dev bootcamp, and that got me looking into this.

So now, after seven weeks of getting up at 4AM to study and code, and forcing myself to get that extra two hours of study in after work when I'm half-dead from heat exhaustion, I've finished my first course.

I don't think I'm anywhere near employably skilled yet, but I'm just happy and a little proud and wanted to say something.

# ? Aug 15, 2018 05:28

Dominoes: Sep 20, 2007

Congrats bro

# ? Aug 15, 2018 09:23

huhu: Feb 24, 2006

Moto42 posted:

A while ago, Shirec posted something about taking a web dev bootcamp, and that got me looking into this.

So now, after seven weeks of getting up at 4AM to study and code, and forcing myself to get that extra two hours of study in after work when I'm half-dead from heat exhaustion, I've finished my first course.

I don't think I'm anywhere near employably skilled yet, but I'm just happy and a little proud and wanted to say something.

One step closer to $$$!

# ? Aug 15, 2018 15:20

The Merkinman: Apr 22, 2007; I sell only quality merkins. What is a merkin you ask? Why, it's a wig for your genitals!

Anyone have any luck with PWA? Specifically getting the Add to Homescreen prompt on Android, and using Workbox?

I used to have it a while ago, but now those same sites don't prompt, debugging gives some stupid error:
Site cannot be installed: no matching service worker detected. You may need to reload the page, or check that the service worker for the current page also controls the start URL from the manifest
Which might be a bug in Chrome (lighthouse) itself, but it's not broken for everything since sites like Smashing Magazine work.

# ? Aug 16, 2018 15:38

Tei: Feb 19, 2011

The Merkinman posted:

Anyone have any luck with PWA? Specifically getting the Add to Homescreen prompt on Android, and using Workbox?

I used to have it a while ago, but now those same sites don't prompt, debugging gives some stupid error:
Site cannot be installed: no matching service worker detected. You may need to reload the page, or check that the service worker for the current page also controls the start URL from the manifest
Which might be a bug in Chrome (lighthouse) itself, but it's not broken for everything since sites like Smashing Magazine work.

https://stackoverflow.com/questions/45534076/site-cannot-be-installed-no-matching-service-worker-detected

here people talk about where you are serving this. https (that you probably already doing) and being root of the site (/).

if you think you are doing everything correctly, delete a existing service worker and try again

it could be something completelly different and this croak about sw because whatever. I think I remember theres a checklist somewhere to see if your site can be PWA, maybe also look there (even if it will point to the lack of service worker).

# ? Aug 16, 2018 16:06

The Merkinman: Apr 22, 2007; I sell only quality merkins. What is a merkin you ask? Why, it's a wig for your genitals!

Tried that, now I get Failures: Service worker does not successfully serve the manifest's start_url, Timed out waiting for fetched start_url
It's interesting that the sites I do see that work, like https://airhorner.com/, don't use Workbox.js. Maybe workbox is just trash :shrug:

# ? Aug 16, 2018 17:02

MrMoo: Sep 14, 2000

These are pretty, for me a new charting library sprinkled with Chinese: https://ecomfe.github.io/echarts-examples/public/index.html

# ? Aug 16, 2018 19:13

The Merkinman: Apr 22, 2007; I sell only quality merkins. What is a merkin you ask? Why, it's a wig for your genitals!

Well so I think it's not working right because I don't have an install event?
IDK, of course the precaching workbox is supposed to do as an install event isn't working. So I wrote my own self.addEventListener('install', (event) => { which of course also doesn't work because it doesn't know what precacheController.install() is.
So then I commented it out and just left the install event, but then it gives an error about 'request failed' I guess requesting importScripts('https://storage.googleapis.com/workbox-cdn/releases/3.4.1/workbox-sw.js');

What now? Who knows? By the time I get an answer the API will have changed again because the entire front-end industry is full of ADHD riddled children.

Advice. don't use Workbox, it's clearly trash fire Google product that doesn't do what it is supposed to.

That looks nice, MrMoo, I see you can do a thing. Apparently I can't even rub to HTML tags together anymore.

# ? Aug 16, 2018 19:26

Tei: Feb 19, 2011

The Merkinman posted:

importScripts('https://storage.googleapis.com/workbox-cdn/releases/3.4.1/workbox-sw.js');

Can you do this? I had the impression importScript is for local scripts, not remote ones.

Maybe you have to copy that file locally an do

importScripts('workbox-sw.js');

gently caress everything about this. And gently caress https.

# ? Aug 17, 2018 09:09

The Merkinman: Apr 22, 2007; I sell only quality merkins. What is a merkin you ask? Why, it's a wig for your genitals!

Tei posted:

Can you do this? I had the impression importScript is for local scripts, not remote ones.

That's what it tells you to do.

Also, since I am getting "Yay! Workbox is loaded" it does work.

# ? Aug 17, 2018 14:58

Tei: Feb 19, 2011

The Merkinman posted:

That's what it tells you to do.

Also, since I am getting "Yay! Workbox is loaded" it does work.

You are forced to use HTTPS because "security", then you load from a remote server you have not control to, and can be hacked and serving a malicious script.

I guess HTTPS works like snake-oil, you put on a lady skin and she become virgin again.

# ? Aug 17, 2018 15:05

LOOK I AM A TURTLE: May 22, 2003; "I'm actually a tortoise."; Grimey Drawer

Is there a way to take a local file from a browser and pass it as input to a desktop app? Supposing a File object is already available, what I would like is for the user to click a link with a custom protocol, which makes the browser ask if they want to open an external program. When the user agrees to open the program, the local file they've chosen on the webpage somehow becomes available to that program.

I realize this is riding the line from a security standpoint. Browsers don't tell you the full path to the files the user has selected, so I can't simply pass the filepath to the desktop app. I've thought about base64 encoding the file contents and passing them in the URL, but that's only practical for small files. Might it be possible to communicate through a websocket?

# ? Aug 17, 2018 15:12

Tei: Feb 19, 2011

LOOK I AM A TURTLE posted:

Is there a way to take a local file from a browser and pass it as input to a desktop app? Supposing a File object is already available, what I would like is for the user to click a link with a custom protocol, which makes the browser ask if they want to open an external program. When the user agrees to open the program, the local file they've chosen on the webpage somehow becomes available to that program.

why not pass the filename to the desktop app, instead of the whole file?

if the desktop app somehow gets the filename, is easy for a desktop app to open and read a file.

...

Edit:
if you need for whatever reason the filename in the serverside, you can have the desktop app listing the files in the directory, and uploading that list to the server, so the server can have links like <a href="custom://logo.png">logo</a> <a href="custom:://logo-big.png">logo big</a>

Edit2:
trying to convince web browsers to relax security and walk the fine line between accepted and forbidden in web land is asking for trouble.

Tei fucked around with this message at 15:35 on Aug 17, 2018

# ? Aug 17, 2018 15:28

LOOK I AM A TURTLE: May 22, 2003; "I'm actually a tortoise."; Grimey Drawer

Tei posted:

why not pass the filename to the desktop app, instead of the whole file?

if the desktop app somehow gets the filename, is easy for a desktop app to open and read a file.

...

Edit:
if you need for whatever reason the filename in the serverside, you can have the desktop app listing the files in the directory, and uploading that list to the server, so the server can have links like <a href="custom://logo.png">logo</a> <a href="custom:://logo-big.png">logo big</a>

Edit2:
trying to convince web browsers to relax security and walk the fine line between accepted and forbidden in web land is asking for trouble.

Like I said, you don't get the full path to the file -- only the filename. If the full path were available I could just do this:

code:

<script type="text/javascript">
  function setLink() {
    document.getElementById('link').href = 'custom://' + file.path;
  }
</script>
<form>
  <input type="file" id="file" onchange="setLink()">
</form>
<a id="link">Open in desktop</a>

But there is no path on the File object -- only the filename. I realize that this is how browser's are designed to work, but that doesn't mean there can't be a way to get additional data if the user authorizes it.

# ? Aug 17, 2018 15:58

Tei: Feb 19, 2011

LOOK I AM A TURTLE posted:

Like I said, you don't get the full path to the file -- only the filename. If the full path were available I could just do this:
...

But there is no path on the File object -- only the filename. I realize that this is how browser's are designed to work, but that doesn't mean there can't be a way to get additional data if the user authorizes it.

why you don't use the desktop app to figure out the path? it would be extremely simple for a desktop app

# ? Aug 17, 2018 16:10

LOOK I AM A TURTLE: May 22, 2003; "I'm actually a tortoise."; Grimey Drawer

Tei posted:

why you don't use the desktop app to figure out the path? it would be extremely simple for a desktop app

I'm sorry, I'm not understanding you here. Figure it out how? Search through the user's entire disk for a matching filename? You realize multiple files can have the same name?

# ? Aug 17, 2018 17:33

Scaramouche: Mar 26, 2001; SPACE FACE! SPACE FACE!

I'm not speaking for Tei, but I believe they're referring to Chrome Apps
https://developer.chrome.com/apps/about_apps

Which can actually run kinda quasi-local and I believe have different security models

(note they're being discontinued eventually for everything but ChromeOS)

# ? Aug 17, 2018 17:47

MrMoo: Sep 14, 2000

Scaramouche posted:

I'm not speaking for Tei, but I believe they're referring to Chrome Apps
https://developer.chrome.com/apps/about_apps

Which can actually run kinda quasi-local and I believe have different security models

(note they're being discontinued eventually for everything but ChromeOS)

The security model is incredibly tedious, especially when using a <WebView>. I'm proxying fetch() requests via postMessage() to workaround it.

# ? Aug 17, 2018 21:13

Tei: Feb 19, 2011

LOOK I AM A TURTLE posted:

I'm sorry, I'm not understanding you here. Figure it out how? Search through the user's entire disk for a matching filename? You realize multiple files can have the same name?

Sorry, I did not knew much about the problem. I trough the files where all in a specific directory. Not random places in the disc.

# ? Aug 18, 2018 08:13

The Merkinman: Apr 22, 2007; I sell only quality merkins. What is a merkin you ask? Why, it's a wig for your genitals!

Tei posted:

You are forced to use HTTPS because "security", then you load from a remote server you have not control to, and can be hacked and serving a malicious script.

I guess HTTPS works like snake-oil, you put on a lady skin and she become virgin again.

Welp, I went though the "Workbox Wizard" using the CLI, and generated some file. It of course, still fails. Has anyone actually done a PWA anymore or is it all snake oil, smoke and mirrors, and lies?

# ? Aug 20, 2018 22:06

Tei: Feb 19, 2011

The Merkinman posted:

Welp, I went though the "Workbox Wizard" using the CLI, and generated some file. It of course, still fails. Has anyone actually done a PWA anymore or is it all snake oil, smoke and mirrors, and lies?

No, I have not used it recently.

But I would not call it bullshit. It can work. You can make a PWA where 60% of the functionality is in the application cache. So it works offline, where otherwise you have nothing. And it launch from a icon, so from the user perspective, is the same thing has a application. Some people has been making money selling PWA has "apps cheaper than a app", and that money is real, the customers are real, and maybe the customer where happy with what they got.

# ? Aug 21, 2018 14:31

The Merkinman: Apr 22, 2007; I sell only quality merkins. What is a merkin you ask? Why, it's a wig for your genitals!

Tei posted:

No, I have not used it recently.

But I would not call it bullshit. It can work. You can make a PWA where 60% of the functionality is in the application cache. So it works offline, where otherwise you have nothing. And it launch from a icon, so from the user perspective, is the same thing has a application. Some people has been making money selling PWA has "apps cheaper than a app", and that money is real, the customers are real, and maybe the customer where happy with what they got.

Well I figured out the reason I wasn't geting the prompt.
I didn't have a fetch event (and/or a install event?). Going through that workbox stuff never creates one, so I have no idea how you're "supposed" to use it. This article was helpful

# ? Aug 21, 2018 14:51

darthbob88: Oct 13, 2011; YOSPOS

I'm trying to put together a website to sell my family's cookies, but between the fact that this isn't big enough to justify actually spending money on a proper e-commerce site, and the fact that I expect custom orders would be a selling point, I'm trying to make the order endpoint an email address rather than an API. I'm trying to just do the "change location to mailto: using JS" trick, but that's failing, and I'm told that it's bad practice to forcefully open a customer's email. Is there a good way to open a customer's email, or should I actually just settle for "here's our email, drop us a line with what you want and we'll send you a Paypal invoice"? Really leaning towards the latter, but also really open to advise.

Also, unrelated: I'm making the site in Jekyll right now, and it's changing locations when I so much as calculate the mailto: string from above. Like, if I just say var string = 'mailto:foo@bar.com', without actually doing anything with that string, the current URL will change to site/?email=foo@bar.com.

darthbob88 fucked around with this message at 22:52 on Aug 25, 2018

# ? Aug 25, 2018 22:50

kedo: Nov 27, 2007

Yeah, don't open a customer's email. People hate it, and a huge portion of users don't know how to setup their browsers to send mailto links to their web mail, so you're usually opening Outlook or some other program they've never even touched until you made them touch it (how dare you)>

The dead simplest ecommerce option out there (imo) is PayPal's buy now button, assuming they're going to use PayPal to process payments anyways. In short, you fill out a bit of information about your product on PayPal's site, it generates all the HTML you need for a button which you then copy and paste into a page. When a user clicks the button, PayPal handles everything.

No need for email!

e: Or if your parents are really trusting, they can do the thing a small restaurant in my hometown does with their famous raspberry preserves: they have a form that sends an email to the restaurant with your address and the number of jars you want, and then they ask you to please do the math for them at $10/jar, and mail them a physical check. 100% of the time I've had jars shipped to me it's been before I sent them the check. (protip: don't do this)

kedo fucked around with this message at 23:37 on Aug 25, 2018

# ? Aug 25, 2018 23:33

The Dave: Sep 9, 2003

darthbob88 posted:

I'm trying to put together a website to sell my family's cookies, but between the fact that this isn't big enough to justify actually spending money on a proper e-commerce site, and the fact that I expect custom orders would be a selling point, I'm trying to make the order endpoint an email address rather than an API. I'm trying to just do the "change location to mailto: using JS" trick, but that's failing, and I'm told that it's bad practice to forcefully open a customer's email. Is there a good way to open a customer's email, or should I actually just settle for "here's our email, drop us a line with what you want and we'll send you a Paypal invoice"? Really leaning towards the latter, but also really open to advise.

Also, unrelated: I'm making the site in Jekyll right now, and it's changing locations when I so much as calculate the mailto: string from above. Like, if I just say var string = 'mailto:foo@bar.com', without actually doing anything with that string, the current URL will change to site/?email=foo@bar.com.

Any reason to not just run the site through Shopify or Squarespace?

# ? Aug 25, 2018 23:39

The Fool: Oct 16, 2003

The Dave posted:

Any reason to not just run the site through Shopify or Squarespace?

I was going to say this too.

Stripe is also an option if you absolutely must do a custom thing.

# ? Aug 25, 2018 23:58

darthbob88: Oct 13, 2011; YOSPOS

The Dave posted:

Any reason to not just run the site through Shopify or Squarespace?

Cost. After we get a couple dozen orders and a little confidence that this will be worthwhile as a going concern, we'll see about taking this quasi-professional and using something like Squarespace or Shopify. Until then, my IT budget for this project is $<20/month.

kedo posted:

Yeah, don't open a customer's email. People hate it, and a huge portion of users don't know how to setup their browsers to send mailto links to their web mail, so you're usually opening Outlook or some other program they've never even touched until you made them touch it (how dare you)>

Yeah, that's what I've heard elsewhere. At least I can drop that JS nonsense.

quote:

The dead simplest ecommerce option out there (imo) is PayPal's buy now button, assuming they're going to use PayPal to process payments anyways. In short, you fill out a bit of information about your product on PayPal's site, it generates all the HTML you need for a button which you then copy and paste into a page. When a user clicks the button, PayPal handles everything.

No need for email!

That does sound good, but I'm still hung up on supporting some degree of customization and personalization, which AFAIK does require emails. I suppose I can compromise, and have the "Buy Now" button(s) for most orders and also a line saying "For orders more complicated than 'a dozen snickerdoodles', our email is foo@bar.com" and manually enter those orders. I'll get that moving along. Thanks!

# ? Aug 26, 2018 00:36

The Fool: Oct 16, 2003

Maybe Stripe would meet your needs?

# ? Aug 26, 2018 01:39

lunar detritus: May 6, 2009

It sounds like Google Forms would be perfect for you and it's free.

# ? Aug 26, 2018 05:24

darthbob88: Oct 13, 2011; YOSPOS

Stripe does sound good, but it also runs into the cost problem, so I'll probably use that if I upgrade to Shopify. Google Forms would serve well for "Literally A Cookie Order Form Online", if I hadn't already built half of that and am only missing good photos of the cookies. I'm sticking with just the email and Paypal invoices for now. If anybody has any further suggestions, please send them with an order for some cookies.
E: And yes, I know there's a whole lot of stupid in here apart from the "order method". My family's better at baking than marketing.

# ? Aug 26, 2018 08:00

huhu: Feb 24, 2006

My two cents having worked with small companies and startups before is that you probably should just pay a few dollars more a month and get something like squarespace. Worst case scenario you're out a few extra bucks if you realize it's not going to work out as a business - just signup for a monthly plan. Worst case the other way - you've now built an entire e-commerce website yourself to save a few bucks and you're stuck maintaining it. Something goes wrong in however you set it up, orders aren't getting processed or whatever. Then you realize you probably shouldn't have done your own e-commerce site and now you're rewriting the entire thing.

I used to hate WordPress because I felt above it and that I could roll my own CMS with Django. And then I realized the project I was working on, it didn't really matter at the end of the day how the site was built and rolling my own was a terrible idea. The customer just needed to access the content on the site and be on their way.

When the end goal of what your building isn't to have a website (your end goal is to sell) it might be best not to do it yourself.

# ? Aug 26, 2018 15:36

darthbob88: Oct 13, 2011; YOSPOS

End goal, sure, but right now this is just a transitional thing, dipping our metaphorical toe in the water. I have no intention of getting stuck with this setup. As soon as it's bigger than I can easily handle, I'm taking it all professional and spending actual money on it, but not until then.

# ? Aug 26, 2018 18:06

Adbot: ADBOT LOVES YOU

# ? May 27, 2024 07:14

22 Eargesplitten: Oct 10, 2010

Are there any good places / communities that will tell a new dev why their site code sucks? I'm going through a Lynda course right now, but I have no illusions that my first website won't be garbage.

# ? Aug 26, 2018 18:54

The Something Awful Forums > Discussion > Serious Hardware/Software Crap > The Cavern of COBOL > The Web Design & Development Megathread

«‹›362 »