The Web Design & Development Megathread

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

«‹›361 »

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

Pivo posted:

I ran into a funny issue recently you guys might find amusing. So we had some text we wanted to vertically centre in a div right. Width and height was fixed so it wasn't a challenge, although still used CSS translate or whatever to do it "the right way". The weird thing is, on OS X across all browsers, the + that we were displaying was off! It kept ending up being lower than we expected! But on Windows and Debian, it was always smack dab in the middle just like we wanted. What the gently caress was going on?

Turns out we preferred Helvetica Neue, Helvetica, and Arial in that order. Debian and Windows didn't have the Helveticas so went to Arial. Why does this matter? Arial puts the + symbol vertically centred on the median, Helvetica puts the + symbol on the baseline (WHICH IS STUPID).

Solution? Just use Arial for that element. Macs have that. Dumbest loving thing...

See why I don't like front-end work?

So you don't like front end work because you don't understand typography. Got it.

# ? Aug 29, 2014 02:18

Adbot: ADBOT LOVES YOU

# ? May 9, 2024 17:51

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

Lumpy posted:

So you don't like front end work because you don't understand typography. Got it.

Yeah, frontend is hard but if you can't even get on top of font-stacks you've got a lot more coming.

# ? Aug 29, 2014 02:23

Pivo: Aug 20, 2004

Lumpy posted:

So you don't like front end work because you don't understand typography. Got it.

Errr... Are we being antagonistic towards each other here? I'm not sure of the protocol. Should we start a flamewar?

I'm just saying it's weird to put the + symbol on the baseline, even though I'm sure it was a very intentional stylistic decision (and who am I to question Helvetica?), it's just annoying when it comes to supporting multiple browsers across multiple platforms...

Let's say we wanted to keep that + symbol in Helvetica. But also keep it aligned properly for users who only have Arial. What would you have done?

I'm a backend guy, man, I get roped into this poo poo. Design and all that used to be a *hobby* for me. It's not as much fun when you're getting paid for it. Not knocking anyone, just saying, what a weird problem, right?

But seriously, how would you have fixed it?

# ? Aug 29, 2014 02:30

down with slavery: Dec 23, 2013; STOP QUOTING MY POSTS SO PEOPLE THAT AREN'T IDIOTS DON'T HAVE TO READ MY FUCKING TERRIBLE OPINIONS THANKS

Pivo posted:

But seriously, how would you have fixed it?

If you want to use a font like Helvetica you should be providing it to your users.

# ? Aug 29, 2014 02:33

Chenghiz: Feb 14, 2007; WHITE WHALE
HOLY GRAIL

Pivo posted:

But seriously, how would you have fixed it?

Trying to display a font in a way that it wasn't designed? What's to fix?

# ? Aug 29, 2014 03:12

Pivo: Aug 20, 2004

Chenghiz posted:

Trying to display a font in a way that it wasn't designed? What's to fix?

Eh, you guys have a valid point. The font choices weren't mine. I don't like Helvetica Neue anyway.

But yeah, you're right. Should have thought about that. Just so much work to do, you know? Fonts are the least of your worries. Until they cause problems.

# ? Aug 29, 2014 03:40

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

Pivo posted:

Errr... Are we being antagonistic towards each other here? I'm not sure of the protocol. Should we start a flamewar?

I'm just saying it's weird to put the + symbol on the baseline, even though I'm sure it was a very intentional stylistic decision (and who am I to question Helvetica?), it's just annoying when it comes to supporting multiple browsers across multiple platforms...

Let's say we wanted to keep that + symbol in Helvetica. But also keep it aligned properly for users who only have Arial. What would you have done?

I'm a backend guy, man, I get roped into this poo poo. Design and all that used to be a *hobby* for me. It's not as much fun when you're getting paid for it. Not knocking anyone, just saying, what a weird problem, right?

But seriously, how would you have fixed it?

Not used typography for what probably was supposed to be an icon next to some typography. You never mentioned your use case, but my guess is was something like:

code:

<button>+ Add a Thing</button>

The "+" there should not be part of the text, as you have painfully found out. It should either be an image (icon), or if for some reason, type is *needed*, SPANed out so it can get a different CSS treatment so when your pain the rear end designer people suddenly change your button font to some crazy thing nobody ever heard of, your plus icon doesn't have serifs on it all of a sudden.

And yeah, front end work is not fun for the first few years as you deal with all this weird, obtuse crap that is usually the result of somebody *else* not understanding the constraints of web design. Then Stockholm Syndrome sets in and you convince yourself it's not so bad....

# ? Aug 29, 2014 04:49

obstipator: Nov 8, 2009; by FactsAreUseless

Lumpy posted:

The "+" there should not be part of the text, as you have painfully found out. It should either be an image (icon), or if for some reason, type is *needed*, SPANed out

:before{
content:"+";
}

content before/after is a styler's dream come true. I abuse it all the time to make block elements out of nowhere, and to mix it with position absolute to do some neato things.

# ? Aug 29, 2014 14:27

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

obstipator posted:

:before{
content:"+";
}

content before/after is a styler's dream come true. I abuse it all the time to make block elements out of nowhere, and to mix it with position absolute to do some neato things.

Yep. I'd still use an image instead though, since once again, you are at the mercy of your typefaces, as if you use Helvetica Neue, you still have the "baseline problem": http://jsfiddle.net/2xefqr59/

One of the "solutions" you could use, assuming the use case is what we are guessing is:

code:

// markup
<button class="add_button">Add a Thing</button>

//CSS
.add_button {
    background: url(/plus_icon.svg) 8px 50% no-repeat;
    background-size: 16px;
    padding-left: 2em;
}

Example: http://jsfiddle.net/2xefqr59/2/

You can scale your SVG as needed for different size variants and all that jazz. There are many, many ways to skin that there cat though.

# ? Aug 29, 2014 15:43

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

I'm having trouble with Bootstrap because of course I am not a front-end dev, but I look like one on TV.

I have a pretty typical static top navbar, just like the one at bootstrap.com. But I want my responsive design with the shrinking menu to show a hamburger and the word 'Menu' in the same clickable button or whatever it is.

The example they provide and use for the hamburger is a bunch of spans with icon-bar in it. Now I did a hacky thing where I added another button that says menu, and it works even though they are two separate buttons but they're spaced a bit too far apart for my liking. I tried putting them both in the same div but that just made the thing into an even bigger button and added all sorts of padding or whatever that I don't want.

Example ignoring closing divs/header tags.

code:

<header class="navbar-inverse navbar-static-top bs-docs-nav" id="top" role="banner">
<div class="container">
    <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".bs-navbar-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="sr-only">Toggle navigation</span>
        </button>
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".bs-navbar-collapse">
            <span class="navbar-text">Menu</span>
            <span class="caret"></span>
        </button>

EDIT: Also I have a four line hamburger in this code because it seemed to centre nicely with the rest of the navbar. A 3 line hamburger orients the same as a 4 line, and looks shifted up for some reason.

# ? Aug 29, 2014 16:30

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

Wasn't somebody just asking about whether they should use YUI in this thread?

http://yahooeng.tumblr.com/post/96098168666/important-announcement-regarding-yui

quote:

we have made the difficult decision to immediately stop all new development on YUI

# ? Aug 29, 2014 20:06

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

fletcher posted:

Wasn't somebody just asking about whether they should use YUI in this thread?

http://yahooeng.tumblr.com/post/96098168666/important-announcement-regarding-yui

So look for some big corporations to decide on it in the next 6 months or so....

# ? Aug 29, 2014 20:23

Sulla Faex: May 14, 2010; No man ever did me so much good, or enemy so much harm, but I repaid him with ENDLESS SHITPOSTING

Lumpy posted:

So look for some big corporations to decide on it in the next 6 months or so....

I don't know about other organisations but all of Moodle's stuff uses YUI and between Moodle's autoloading and YUI's autoloading it's just a nightmare.

Looking forward to seeing how they react to this, althoug the writing has been on the wall for god knows how long.

# ? Aug 29, 2014 21:05

Nebulon Gate: Feb 23, 2013

For my icons, I just use

http://fontawesome.io/

# ? Aug 29, 2014 21:33

kedo: Nov 27, 2007

https://symbolset.com/ is pretty great.

# ? Aug 29, 2014 21:57

Griffith86: Jun 19, 2008

I usually use http://iconmonstr.com/ which outputs in SVG or PNG, and I build my own custom fonts based on what I need. Lately though I've just been combining them into one SVG and serving that up.

# ? Aug 30, 2014 02:08

Chenghiz: Feb 14, 2007; WHITE WHALE
HOLY GRAIL

fletcher posted:

Wasn't somebody just asking about whether they should use YUI in this thread?

http://yahooeng.tumblr.com/post/96098168666/important-announcement-regarding-yui

According to some folks in IRC, Yahoo's teams are trying out Ember and React right now.

# ? Aug 30, 2014 02:16

Bastard: Jul 13, 2001; We are each responsible for our own destiny.

Web fonts + chrome + windows = oh god why do I have to explain this font rendering issue to these people :gonk:

# ? Aug 30, 2014 10:17

Gmaz: Apr 3, 2011; New DLC for Aoe2 is out: Dynasties of India

Chrome 37 will alleviate those concerns. It should be live by now anyway

# ? Aug 30, 2014 11:30

pipes!: Jul 10, 2001; Nap Ghost

Hey, it only took 5 years!

# ? Aug 30, 2014 17:20

onionradish: Jul 6, 2006; That's spicy.

I have a client site that uses statcounter � which has terrible load/connect times � as a supplementary JavaScript tracker to what Google Analytics gives them.

What's the right way to insert the SCRIPT code into the HTML for statcounter so it doesn't jam up the other scripts, like jQuery $(document).ready() UI function calls? I'd like lightboxes, etc. to be initialized as soon as possible so they work, regardless of whether statcounter has decided to connect.

# ? Aug 30, 2014 17:29

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

onionradish posted:

I have a client site that uses statcounter � which has terrible load/connect times � as a supplementary JavaScript tracker to what Google Analytics gives them.

What's the right way to insert the SCRIPT code into the HTML for statcounter so it doesn't jam up the other scripts, like jQuery $(document).ready() UI function calls? I'd like lightboxes, etc. to be initialized as soon as possible so they work, regardless of whether statcounter has decided to connect.

Create the script tag for stat counter dynamically and insert it as the last thing in your jQuery document ready function. You can use the 'async' property on a normal script tag, but browser support.

# ? Aug 30, 2014 18:39

onionradish: Jul 6, 2006; That's spicy.

Lumpy posted:

Create the script tag for stat counter dynamically and insert it as the last thing in your jQuery document ready function. You can use the 'async' property on a normal script tag, but browser support.

Will putting the statcounter script into jQuery.getScript() within the "document ready" script work?

onionradish fucked around with this message at 20:35 on Aug 30, 2014

# ? Aug 30, 2014 19:08

Analytic Engine: May 18, 2009; not the analytical engine

Can anyone share a boilerplate invoice for freelance web development? I got my first payed job and I don't know where to start with forms.

# ? Aug 30, 2014 23:42

down with slavery: Dec 23, 2013; STOP QUOTING MY POSTS SO PEOPLE THAT AREN'T IDIOTS DON'T HAVE TO READ MY FUCKING TERRIBLE OPINIONS THANKS

Analytic Engine posted:

Can anyone share a boilerplate invoice for freelance web development? I got my first payed job and I don't know where to start with forms.

I'd suggest something like Freshbooks

# ? Aug 30, 2014 23:50

EAT THE EGGS RICOLA: May 29, 2008

I've been using Xero for all my accounting stuff, it's super useful and will handle all your bank reconciliation/invoicing/etc. Some goon who works with the company mentioned it in one of the computerman threads a while ago.

# ? Aug 30, 2014 23:50

Analytic Engine: May 18, 2009; not the analytical engine

Thanks, I'm trying out Freshbooks.

# ? Aug 31, 2014 15:29

Disharmony: Dec 29, 2000; Like a hundred crippled horses lying crumpled on the ground

Begging for a rifle to come and put them down

How do I remove the space below my Wordpress footer when my theme is on boxed mode?

# ? Aug 31, 2014 16:00

Sulla Faex: May 14, 2010; No man ever did me so much good, or enemy so much harm, but I repaid him with ENDLESS SHITPOSTING

Can you link us to the website so I can fiddle around with CSS in-browser?

# ? Aug 31, 2014 16:01

Disharmony: Dec 29, 2000; Like a hundred crippled horses lying crumpled on the ground

Begging for a rifle to come and put them down

Makes sense!

Here goes

http://urlgone.com/fba910/

Disharmony fucked around with this message at 16:21 on Aug 31, 2014

# ? Aug 31, 2014 16:06

Sulla Faex: May 14, 2010; No man ever did me so much good, or enemy so much harm, but I repaid him with ENDLESS SHITPOSTING

I don't know how your CSS is being generated (e.g. having a class selector followed by an element id) but try adding this somewhere

code:

#wrapper {
    margin-bottom: 0px;
}

Qualification: I'm not a Wordpress guy so I don't know what CSS automators they use. The problem is that your #wrapper div has margin: 40px auto; on it. If you specify margin-bottom: 0px; at the same selector level it'll override it and remove the space at the bottom.

# ? Aug 31, 2014 16:10

Disharmony: Dec 29, 2000; Like a hundred crippled horses lying crumpled on the ground

Begging for a rifle to come and put them down

It didn't work but it did help steer me to the right direction! Turns out the "auto" after margin:0px was crucial.

Super thanks!

# ? Aug 31, 2014 16:20

Sulla Faex: May 14, 2010; No man ever did me so much good, or enemy so much harm, but I repaid him with ENDLESS SHITPOSTING

Now I'm having a problem. I've just noticed on my site that what works in chrome isn't working in firefox.

I have a text input box that, after a form has been submitted, gets disabled and an anchor tag gets through around it. When people click on the anchor tag, it cycles through the content of the input box.

In chrome this works fine. In firefox the jquery .on('click', 'a.incorrectanswer', ... ) event handler isn't getting triggered at all.

The only thing I can think is that in firefox you can't put an input box inside a link. Is this true? Is there a way to overcome it?

The site is: http://www.marianminds.com/latin-verb-conjugator/

Just type an incorrect answer, click the 'check answers' button, and try to click on the glowing red input box. In chrome it works, in firefox it doesn't. I was hoping it was a simple z-index issue but no go. Anybody have any ideas on what's causing it and/or what to do?

e: In fact, firefox isn't registering the triggered event handler for even the input box itself. When I add an event handler for all input.incorrect boxes, it doesn't register a click.

e2: Augh. Apparently disabled elements don't trigger any events, for most browsers, and chrome is the exception.

http://stackoverflow.com/questions/3100319/event-on-a-disabled-input

I'll have to see about creating an invisible overlay or something. Grosssss

e3: Okay all done. Added a <div> after it which would display over it. That can grab the click event and process everything normally from there. Dumb gross non-specified standards

Sulla Faex fucked around with this message at 18:40 on Aug 31, 2014

# ? Aug 31, 2014 18:15

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

Whats a good way from a UX perspective for 'Click HERE to find out more' options?

In this example, I am presenting a progress bar on account setup / configuration and want to tell them to 'click here' on the progress bar if they want to find out more. Should I think of better phrasing, a nice icon? Something else?

# ? Sep 1, 2014 01:53

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

Ahz posted:

Whats a good way from a UX perspective for 'Click HERE to find out more' options?

In this example, I am presenting a progress bar on account setup / configuration and want to tell them to 'click here' on the progress bar if they want to find out more. Should I think of better phrasing, a nice icon? Something else?

Need to learn ux? Here's how

Make your call to action the link, and never, ever, ever, ever use the words 'click here' on a web page. That means you have utterly failed.

# ? Sep 1, 2014 01:58

Chenghiz: Feb 14, 2007; WHITE WHALE
HOLY GRAIL

Lumpy posted:

Need to learn ux? Here's how

Make your call to action the link, and never, ever, ever, ever use the words 'click here' on a web page. That means you have utterly failed.

You got me!

But yeah, call to action.

# ? Sep 1, 2014 03:36

The Dave: Sep 9, 2003

A fun exercise is to say "I want to [cta text". So you want the user to view a detailed view if they press that button, so maybe something just like "View Detailed Information", "Detailed Information", or "See More Details".

# ? Sep 1, 2014 16:40

Thermopyle: Jul 1, 2003; ...the stupid are cocksure while the intelligent are full of doubt. �Bertrand Russell

I need to whip up a dashboard style site with Boostrap 3 (like these, but I don't care where it comes from). For right now I'm just looking for a pre-built theme. Anyone have any they've used an particularly liked?

# ? Sep 1, 2014 21:17

fuf: Sep 12, 2004; haha

Can someone (preferably a safari user) take a look at the logo on this site and tell me if it looks blurry?
http://bespokedrywall.campbellmarsh.co.uk/
(The orange "bespoke drywall" logo on the left)
The client is insisting it's blurry but it looks fine to me.

How should I be turning a svg into a png logo? I just picked an arbitrary large size (700px wide), but is that a bad idea if it's usually going to get squashed down to like 150px wide?

# ? Sep 2, 2014 15:59

Adbot: ADBOT LOVES YOU

# ? May 9, 2024 17:51

Pivo: Aug 20, 2004

At default zoom level, it looks crisp on Chrome - Debian, but it does look a bit blurry on Safari - OS X Mavericks.

It might be the default scaling that's used on OS X vs. others, it's probably optimized more for photography than for line graphics. Different scaling algorithms produce different results and are optimized for different use-cases.

I don't know why you're downloading a 700x351 image just to display it at 185x90! BAD BAD BAD

Scale it first!

# ? Sep 2, 2014 16:07

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

«‹›361 »