The Web Design & Development Megathread

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

«‹›361 »

Chenghiz: Feb 14, 2007; WHITE WHALE
HOLY GRAIL

ChadSexington posted:

I'm setting up a personal site for myself and considering using CSS Grid for layout and responsive design. I'm pretty comfortable with HTML/CSS/JS, but I'm primarily a backend developer and out-of-date with what's going on in web design right now. I'm wondering if there's another option I should be looking at. Bootstrap, maybe?

Css grid serves a specific layout purpose so I'd recommend reading up on grid and flexbox and the differences between them to see what serves your needs. Rolling your own css is a great way to learn and I'd definitely recommend doing that over using bootstrap if your goal is to learn.

# ? Jan 5, 2018 17:45

Adbot: ADBOT LOVES YOU

# ? May 16, 2024 20:48

SurgicalOntologist: Jun 17, 2004

I'm looking to hire a freelance UI/UX designer for a desktop app. What questions should I be asking?

# ? Jan 5, 2018 18:41

my bony fealty: Oct 1, 2008

SurgicalOntologist posted:

I'm looking to hire a freelance UI/UX designer for a desktop app. What questions should I be asking?

Ask them to show your their portfolio for starters I reckon

# ? Jan 5, 2018 18:58

The Dave: Sep 9, 2003

Part of it depends on what exactly you want them to do, ui/ux means a lot of different things to different people.

You want to know about their process, how they stay organized, how they handle pressure, how they work with others. When you interview designers the end product of their work, which is usually all that is in a novice portfolio, doesn't tell you what you're looking for.

You want to see whiteboarding/sketching, how they actually take direction or brainstorm design, and then you want to find out what they do when they have to change their approach.

# ? Jan 5, 2018 19:17

kedo: Nov 27, 2007

The Dave posted:

Part of it depends on what exactly you want them to do, ui/ux means a lot of different things to different people.

You want to know about their process, how they stay organized, how they handle pressure, how they work with others. When you interview designers the end product of their work, which is usually all that is in a novice portfolio, doesn't tell you what you're looking for.

You want to see whiteboarding/sketching, how they actually take direction or brainstorm design, and then you want to find out what they do when they have to change their approach.

Agreed with all of this. As someone who markets themselves as a freelance UX designer I see a lot of variance on what "UX" means to people, but at the end of the day it's all about the process. To some people UX means wireframing and prototyping and nothing else, whereas for others it means everything from IA through to visual design. Ask what sort of deliverables and services they provide as part of their standard UX process.

Keep in mind that every UX designer tends to have their own process and there's really no one "right" way to go about it, though there are a few pieces that are pretty common. What exactly their process will include will likely depend on your budget. If you want to hire someone for 20 hours they'll probably just give you some wireframes whereas if you're going to give them hundreds of hours you should expect some user story development, surveys, whiteboarding workshops, user flows, wireframes, maybe some prototypes, testing, revisions on all of these based on testing/feedback, etc. Don't be cagey about your budget ��ask what you'll get for what you're willing to pay. Most clients tend to want to keep their budget a secret because they think it'll get them a better price, but more often than not what really ends up happening is that they want everything a freelancer has to offer but only have a budget for a fraction. Thus the freelancer proposes a massive project and the client balks at the price, wasting everyone's time and creating a lot of unnecessary friction.

Also ask what their workload is like and how many other projects they'll be working on while they do yours. Anywhere from 2-4 is in the acceptable range (imo), but anything higher than that and you run the risk of playing second (or third, or fourth, or eighth) fiddle to other potentially more important clients.

# ? Jan 5, 2018 19:43

bigmandan: Sep 11, 2001; lol internet; College Slice

I thought bootstrap was somewhat modular. If you pull down the sass/less repo, you can leave out a lot of the modules that is not required for you site.

# ? Jan 5, 2018 19:54

IronDoge: Nov 6, 2008

Yeah that's what got me learning SASS in the first place was me trying to cut out all the crap I didn't need from Bootstrap. I loved all the underlying stuff, but didn't really want any of the extras.

# ? Jan 5, 2018 19:57

SurgicalOntologist: Jun 17, 2004

The Dave posted:

kedo posted:

Thanks! That's very helpful and gives me a good starting point and things to look into/think about.

# ? Jan 5, 2018 23:21

Capri Sun Tzu: Oct 24, 2017; by Reene

Golden Bee posted:

I had a client for a year and a half, the guy who introduced us to the client left their company, everything went to poo poo. Two months later he won�t pay the last two invoices. I tried to file suit here in LA County, they won�t serve him because he�s outside the state in Miami. The contract I have from them says it�s governed by the laws of California but I may have to sue him there. Los Angeles allows you to make a claim and not appear in court if you sent evidence, Miami requires you to appear.

The next step might be to file suit in Miami but ever do a crier me to fly out there, pay a bunch of fees and not necessarily win.

For the amount you mentioned, I personally wouldn't risk racking up a few grand's worth of travel and legal fees unless you're like 99% sure you'll win in court. The freelance software world is the wild west, I've seen stories like yours from both sides and almost every time people got away with it.

# ? Jan 8, 2018 18:37

The Dave: Sep 9, 2003

EDIT: Me dumb

# ? Jan 8, 2018 18:46

Ahz: Jun 17, 2001; PUT MY CART BACK? I'M BETTER THAN THAT AND YOU! WHERE IS MY BUTLER?!

Lumpy posted:

I can't remember which of the 53378 overlapping threads we ask questions about front end stuff in it was, but I asked about this and had my nginx solution sanity checked and it worked well. I had certain paths proxied, then it would try serving a static file, and if there was none there, it would serve index.html without changing the path.

When I'm at a computer, I'll post my nginx config if you think it would be helpful.

If you could, thanks!

# ? Jan 9, 2018 16:57

Lumpy: Apr 26, 2002; La! La! La! Laaaa!; College Slice

Ahz posted:

If you could, thanks!

some stuff redacted, but it looks like so, and I added comments:

code:

## this defines a URL for the Django socket for us to proxy to
## It will be used down in a server block 
upstream django_app.REDACTED.com {
  server unix:/REDACTED/gunicorn.sock fail_timeout=0;
}

## Move everything to HTTPS
server {
    listen 80;
    listen [::]:80;
    server_name REDACTED.com;
    return 301 https://REDACTED.com$request_uri;
}

server {
    set_real_ip_from 0.0.0.0/0;
    real_ip_header X-Forwarded-For;

    listen 443 ssl http2;
    listen [::]:443 ssl http2;
    server_name REDACTED.com;

    root /REDACTED;

    client_max_body_size 4G;

    access_log /REDACTED/access.log;
    error_log /REDACTED/error.log;

## ONLY URLS THAT START WITH THESE PATHS ARE PROXIED
    location ~ ^/(api|api-token-auth)/? {
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto https;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header Host REDACTED.com;
        proxy_set_header Authorization $http_authorization;
        proxy_pass_header  Authorization;
        proxy_redirect off;
        # here's where we use the socket URL we made up top
        proxy_pass http://django_app.REDACTED.com;
        break;
    }

    location /static/ {
        alias   /REDACTED/static/;
    }

##  THIS BIT IS THE IMPORTANT ONE FOR THE SPA-NESS
#     serve a file if found, otherwise, serve index.html without changing URL
    location / {
        try_files $uri $uri/ /index.html;
    }

    ssl_certificate /REDACTED; # managed by Certbot
    ssl_certificate_key /REDACTED ; # managed by Certbot
}

Again, I'm no expert, but this is working well for me!

# ? Jan 9, 2018 17:25

kedo: Nov 27, 2007

Have any of ya'll done any sort of development work for/on a Confluence instance? I'm curious how possible it is to overwrite their default templates for spaces, but I'm honestly not sure what thread (if any) would be the best place to ask questions.

# ? Jan 10, 2018 23:36

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

kedo posted:

Have any of ya'll done any sort of development work for/on a Confluence instance? I'm curious how possible it is to overwrite their default templates for spaces, but I'm honestly not sure what thread (if any) would be the best place to ask questions.

I haven't worked with it since the pre 4.0 days (RIP wiki markup) but it was pretty straightforward back then. Mind you I wasn't doing too much complicated, using it as the glorified wiki it was back then for tracking internal sales/support documents. But making our own branded/custom templates was definitely a thing we did without too much problem.

# ? Jan 11, 2018 00:56

fletcher: Jun 27, 2003; ken park is my favorite movie; Cybernetic Crumb

kedo posted:

Have any of ya'll done any sort of development work for/on a Confluence instance? I'm curious how possible it is to overwrite their default templates for spaces, but I'm honestly not sure what thread (if any) would be the best place to ask questions.

Yup we have all sorts of custom templates for wiki pages at my work. Here's a link to the documentation for creating a template: https://confluence.atlassian.com/doc/create-a-template-296093779.html

They have a community board for questions: https://community.atlassian.com/

# ? Jan 11, 2018 01:36

kedo: Nov 27, 2007

Thanks much! One of the links on that page lead me directly to the information I needed re: overriding default templates.

# ? Jan 11, 2018 20:18

teen phone cutie: Jun 18, 2012; last year i rewrote something awful from scratch because i hate myself

I just started working on my personal site, and I've been playing around with the idea to make every part of the site have an icon with a small description that can be clicked on and will pop-up a modal with more information.

At first glance, do these icons look clickable? What's an easy way to convey to the user that an icon can be clicked on?

teen phone cutie fucked around with this message at 08:11 on Jan 14, 2018

# ? Jan 14, 2018 08:05

Ape Fist: Feb 23, 2007; Nowadays, you can do anything that you want; anal, oral, fisting, but you need to be wearing gloves, condoms, protection.

It would seem obvious to me that they are but I'd offset them with a different color. Also do not use that mustard for a background, try an offset grey, slightly darker than the cells and the image doesn't show it correctly but I'm not sure if that italicized font is a serif font but if it is change it to sans serif. The whole thing needs an accent colour and I'd personally go with a baby blue maybe. It just has a web 1.0 aura about it now for some reason.

Edit: the blue you've used with the heart icon would be a nice accent color.

# ? Jan 14, 2018 08:56

The Dave: Sep 9, 2003

I would lose the two column area, just let me read top to bottom. Between that and the 100% width it feels like a strain to scan the whole page even though the content is so basic.

# ? Jan 14, 2018 13:49

UnfurledSails: Sep 1, 2011

Is there a service that can send people a one-off email when they enter their email address in a form? I'm using Squarespace to whip up with a basic website for my father's company. Due to legal reasons he can't just list the prices, so he needs to send them on demand via email instead.

I've heard of MailChimp but that seems to be more about mailing list subscriptions and not an immediate response.

# ? Jan 14, 2018 13:51

kedo: Nov 27, 2007

Grump posted:

I just started working on my personal site, and I've been playing around with the idea to make every part of the site have an icon with a small description that can be clicked on and will pop-up a modal with more information.

At first glance, do these icons look clickable? What's an easy way to convey to the user that an icon can be clicked on?

I�m gonna be honest, interacting with a site purely through modal windows sounds really terrible.

Agreed about color, treating them like buttons could maybe work as well (some sort of border or containing element per). The white boxes would probably feel like too much with that approach.

Also consider your white space and typographic hierarchy - you currently have very little of both.

# ? Jan 14, 2018 16:00

camoseven: Dec 30, 2005; RODOLPHONE RINGIN'

kedo posted:

I�m gonna be honest, interacting with a site purely through modal windows sounds really terrible.

I agree, this sounds like a miserable design. If you're dead set on something like this, maybe try changing sizes on clicks to show more info, for example like this.

# ? Jan 14, 2018 16:20

teen phone cutie: Jun 18, 2012; last year i rewrote something awful from scratch because i hate myself

Yeah i definitely don�t claim to be a designer. All this is great advice! Thanks!

# ? Jan 14, 2018 17:32

Chenghiz: Feb 14, 2007; WHITE WHALE
HOLY GRAIL

UnfurledSails posted:

Is there a service that can send people a one-off email when they enter their email address in a form? I'm using Squarespace to whip up with a basic website for my father's company. Due to legal reasons he can't just list the prices, so he needs to send them on demand via email instead.

I've heard of MailChimp but that seems to be more about mailing list subscriptions and not an immediate response.

Check out Sendgrid, they have a free plan that lets you send 100 emails/day. We use it at work for one-off emailing (registration, etc).

# ? Jan 15, 2018 04:42

Maluco Marinero: Jan 18, 2001; Damn that's a
fine elephant.

Pretty sure Mailchimp does allow for scheduled emails to signups and would probably be the lightest on developer hours if willing to pay for it. If you want to code your own transactional stuff Mailgun is a great port of call for low volume, 10,000 emails a month for free.

# ? Jan 15, 2018 09:22

mike12345: Jul 14, 2008; "Whether the Earth was created in 7 days, or 7 actual eras, I'm not sure we'll ever be able to answer that. It's one of the great mysteries."

My site is all static, but I still need one of those dynamic e-mail forms. You know, instead of providing an e-mail address, just a form where people can input their name and contact you. Are there ready-made solutions for this online, or is it probably so trivial everyone just writes it themselves?

# ? Jan 15, 2018 12:07

Ape Fist: Feb 23, 2007; Nowadays, you can do anything that you want; anal, oral, fisting, but you need to be wearing gloves, condoms, protection.

I will literally write one for you right now if you just give me the html for the input fields.

edit: or you know what just use this, it's PHP and it'll do the job for you in a hot second.

http://www.freecontactform.com/email_form.php

# ? Jan 15, 2018 12:09

mike12345: Jul 14, 2008; "Whether the Earth was created in 7 days, or 7 actual eras, I'm not sure we'll ever be able to answer that. It's one of the great mysteries."

Ape Fist posted:

I will literally write one for you right now if you just give me the html for the input fields.

edit: or you know what just use this, it's PHP and it'll do the job for you in a hot second.

http://www.freecontactform.com/email_form.php

yeah, that's great, I'll just copypasta that in my page and be done with it. ta!

# ? Jan 15, 2018 12:25

kedo: Nov 27, 2007

One problem to be aware of when using that sort of PHP mailer is that things it sends can get caught in spam and/or rejected wholesale fairly easily. If it's absolutely critical the emails are received you might want to look into the two services that were just suggested (Sendgrid and MailChimp).

# ? Jan 15, 2018 16:19

Tei: Feb 19, 2011

I hate sending email from one of my applications. Theres so many variables at work here, anti-spam strategies, gotchas, dns configurations... I recently used one api to deliver email, and they where slowing down api calls to a max to 20/ minute *roll eyes*. They where kind and helpful other than this limitation.

Thanks for pointing me to mailgun. I will check it for messages that are not newsletters (such has registration notices, and restore password emails ).

# ? Jan 15, 2018 16:57

teen phone cutie: Jun 18, 2012; last year i rewrote something awful from scratch because i hate myself

Grump posted:

I just started working on my personal site, and I've been playing around with the idea to make every part of the site have an icon with a small description that can be clicked on and will pop-up a modal with more information.

At first glance, do these icons look clickable? What's an easy way to convey to the user that an icon can be clicked on?

ended up changing a bit based on feedback. Didn't get rid of the orangey background because I like the way it compliments the blue. Also some information is redacted

And the buttons open up a modal

Thoughts so far?

# ? Jan 15, 2018 19:22

The Dave: Sep 9, 2003

I can't say enough bad things about that background color and how the box-shadows render on top of it. Because of that I will try to stick to UX comments only.

Let's think about what is placed where and what the ultimate goal of the page is. Right now "Favorite Tools" is equal in treatment to your projects. Not only that, it is more visually engaging because of the logos and also pushes down projects.

I assume Favorite Tools is simply for you to say you know how to use these things / have experience in them. You don't need to link out to them, you aren't here to educate the user about them, and they are an extension of About really. Because of that I would make them part of that first card.

Under Projects, I'm left wanting a little teaser because I'm not really compelled to blindly click into the links. Also, with some of the names of the projects (My Reads, Contact Book) I find it easy to miss the projects headline altogether and think those are subpages of your site.

And the modal about readables, is that accomplishing anything better than simply linking to the github page?

I also find the navbar a wrong choice if it's doing nothing but housing social icons. Do you think those links are something the user needs to see and have top access to before consuming the content of the page?

# ? Jan 15, 2018 19:33

fletcher: Jun 27, 2003; ken park is my favorite movie; Cybernetic Crumb

Grump posted:

Thoughts so far?

Is there a live demo version?

# ? Jan 15, 2018 19:34

Lumpy: Apr 26, 2002; La! La! La! Laaaa!; College Slice

Grump posted:

ended up changing a bit based on feedback. Didn't get rid of the orangey background because I like the way it compliments the blue. Also some information is redacted

And the buttons open up a modal

Thoughts so far?

Mini UX / UI review:

- Get rid of the boxes set in the orange BG. If you like the color, then just make the whole background orange, but the boxes are pointless and distracting.

- Your "favorite tools" shouldn't be a section. Just have them be in the 'About' as links since it's relevant there. This is from my website:

quote:

"Hi, I'm Dave. I am a user interface designer, iOS developer, and web application guy based in [ blah blah ]. I design things using tools like Quartz Composer, SASS, & Sketch, and develop things in languages like python & JavaScript."

There is no need to devote huge blocks of screen real estate to a couple words.

- The contents of the modals are so sparse, there is zero reason not to have them just on the page. Especially since you'll get tons more room when you lose the boxes.

- "about : here are some facts about me." That's what 'about' means. Lose that copy. Ditto with all the other section subheadings. The main headline is clear and succinct. There is no need for elaborative content. You could make the headline 'About Me' to be more specific if you felt the need.

Less is more.

# ? Jan 15, 2018 20:28

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

If you're Wordpress based the big form handler plugins also have automatic responses depending on the form being filled out (e.g. Ninja Forms, Gravity Forms).

# ? Jan 15, 2018 20:36

Capri Sun Tzu: Oct 24, 2017; by Reene

Grump posted:

ended up changing a bit based on feedback. Didn't get rid of the orangey background because I like the way it compliments the blue. Also some information is redacted

Thoughts so far?

If you're using this as a job hunting tool to enhance your resume, you need to seriously listen to the posters in this thread. There's major usability issues with the modal design and you're likely to have a recruiter just skip over your portfolio for the next resume on their desk.

If it's just a personal website then have fun, go hog wild and here's some opinions:

Those generic fontawesome icons are the new papyrus/comic sans. They're uninspired and everyone who does this kind of thing has seen those exact icons a million times.
Your colors are a little bland. Maybe check out a predefined palette like google's material design for inspiration.
It's not bad, but I'm not a fan of that font pairing. Personally I wouldn't use a serif font here
Your spacing is all over the place and it's jarring. This is a hard thing to get right for a non-designer

This stuff is subjective, the only thing that is definitely bad imo is the modal structure - you're making your content less accessible for no reason.

Here's some links
Flaticon is a good resource for mixing up your icons a little.
Material design color palette
Material design color tool
Fontpair.co for some ideas on fonts.

# ? Jan 15, 2018 21:18

ModeSix: Mar 14, 2009

mike12345 posted:

My site is all static, but I still need one of those dynamic e-mail forms. You know, instead of providing an e-mail address, just a form where people can input their name and contact you. Are there ready-made solutions for this online, or is it probably so trivial everyone just writes it themselves?

You could try JotForm. It puts some copyright thing as a footer but it works good and is free.

# ? Jan 15, 2018 23:13

geeves: Sep 16, 2004

Grump posted:

Thoughts so far?

The background color looks like crayon skin color. Or a peach crayon that was never really peach.

# ? Jan 16, 2018 05:18

Nolgthorn: Jan 30, 2001; The pendulum of the mind alternates between sense and nonsense

Grump posted:

I just started working on my personal site, and I've been playing around with the idea to make every part of the site have an icon with a small description that can be clicked on and will pop-up a modal with more information.

At first glance, do these icons look clickable? What's an easy way to convey to the user that an icon can be clicked on?

All the changes you made is worse than the original design. Looking at the icons it seems clear to me I can click in those areas, when I hover I would expect the cursor to change around a wide area, a huge area, as big as possible for each of them so that they are touching each other.

I now see that what was clickable is actually a relatively small area, since you changed them to buttons. The buttons look harder to click and makes it feel unappealing to do so. I'm not submitting a form every time I click on something so why are they buttons. Not being able to click on the icon as well as the text looks strange since they are related.

When an accent was suggested, I don't think they meant use two wildly different colours at once. But instead use a shade and a colour or two shades of the same colour.

I'm concerned about your page now. :ohdear:

# ? Jan 16, 2018 05:25

Adbot: ADBOT LOVES YOU

# ? May 16, 2024 20:48

mike12345: Jul 14, 2008; "Whether the Earth was created in 7 days, or 7 actual eras, I'm not sure we'll ever be able to answer that. It's one of the great mysteries."

ModeSix posted:

You could try JotForm. It puts some copyright thing as a footer but it works good and is free.

yeah I went with that, now my site is truly static. At least on my side.

# ? Jan 16, 2018 19:15

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

«‹›361 »