The Web Design & Development Megathread

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

«‹›361 »

streetlamp: May 7, 2007; Danny likes his party hat
He does not like his banana hat

Heskie posted:

Susy is great though I still find it a little restrictive. I spent ages trying to create a very simple masonry layout (gallery grid but with some items spanning 2 rows, fluid widths, fixed gutters). Eventually I conceded and manually built it with CSS/Sass in 5 minutes.

I don't know if its because I'm very comfortable with CSS or I've not quite 'got' grid frameworks, but is that something you've ever come across?

Can you throw up a quick codepen of it in SASS? Susy is pretty drat open to doing whatever you want it do.

fake edit: like this? http://www.zell-weekeat.com/smarter-layouts-with-susy/

# ? Nov 11, 2014 15:03

Adbot: ADBOT LOVES YOU

# ? May 14, 2024 11:18

Heskie: Aug 10, 2002

streetlamp posted:

Can you throw up a quick codepen of it in SASS? Susy is pretty drat open to doing whatever you want it do.

fake edit: like this? http://www.zell-weekeat.com/smarter-layouts-with-susy/

Sort of like that but where some grid items span 2 rows (vertically) rather than 2 columns.

My first attempt was on a prototype but I'll be doing the real thing tomorrow. I'll give Susy another go and see if I fare any better.

I know Masonry/Isotope would make this trivial but I really hate relying on JS for this sort of thing.

# ? Nov 11, 2014 23:40

RobertKerans: Aug 25, 2006; There is a heppy lend
Fur, fur aw-a-a-ay.

enthe0s posted:

Has there been any must read book on JavaScript since Crockford's "The Good Parts"? It was released in 2008, so I was wondering if there was a more recently released book that I should read instead.

Functional JavaScript by Michael Fogus is pretty excellent. Not instead though, more as well as.

# ? Nov 12, 2014 12:01

Noah: May 31, 2011; Come at me baby bitch

KARMA! posted:

It won't do anything to the stylesheet but it will make the mail work, though.

Thanks so much for that! I got it all up and running, and it's doing exactly what I need it to.

# ? Nov 12, 2014 21:15

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

Foundation question:
Is there a way to get columns to not reset when nesting? I'm just getting our Creative team to design responsive and made grids for them, but I think the idea of it resetting every time it gets nested is more of how I, as a dev, would code it.

# ? Nov 13, 2014 20:53

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

Brain fart help for correct :google:

needed.

I have a form where a user can make a new Thing. One of the fields required in making a new Thing is "Customer". You can pick from existing customers via an auto-complete, but if you want to add a new one, the form needs to expand out and allow inputs for address, phone, etc. What the hell is this UI design pattern called so I can see how others have handled it before I make my own crappy version?

# ? Nov 13, 2014 21:29

Chris!: Dec 2, 2004; E

The Merkinman posted:

Foundation question:
Is there a way to get columns to not reset when nesting? I'm just getting our Creative team to design responsive and made grids for them, but I think the idea of it resetting every time it gets nested is more of how I, as a dev, would code it.

I'm not sure I understand what you mean by reset? Do you mean when a column is nested with another row inside another row and column, you want to change how it scales down?

# ? Nov 13, 2014 21:52

Boosh!: Apr 12, 2002; Oven Wrangler

I just want to confirm, there's no way to use TypeKit fonts for HTML emails correct? I know Google fonts has very limited support (I believe nothing Windows based).

# ? Nov 13, 2014 22: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!

Chris! posted:

I'm not sure I understand what you mean by reset? Do you mean when a column is nested with another row inside another row and column, you want to change how it scales down?

An exaggerated example:

code:

<div class="row">
	<div class="small-6 columns">
		this is half the width of the document in 12 columns
		<div class="row">
			<div class="small-6 columns">
			this is one quarter the width since it counts from the closest row, but I'd like it to be half the document again
			</div>
		</div>
	</div>
</div>

The real example is something was designed 10 columns wide, but then its contents were assumed to be divisible by 10, not 12.

# ? Nov 13, 2014 22:43

kedo: Nov 27, 2007

Boosh! posted:

I just want to confirm, there's no way to use TypeKit fonts for HTML emails correct? I know Google fonts has very limited support (I believe nothing Windows based).

No. The best thing you can do is use a good font stack and cross your fingers. Or put your text in images :unsmigghh:

# ? Nov 13, 2014 23:16

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

If you use gulp, and hate having gigs of disk space in node_modules folders, I wrote up how to use gulp with global packages: http://simblestudios.com/blog/development/gulp-saving-disk-space.html

# ? Nov 13, 2014 23:16

Chris!: Dec 2, 2004; E

The Merkinman posted:

An exaggerated example:
code:
<div class="row">
	<div class="small-6 columns">
		this is half the width of the document in 12 columns
		<div class="row">
			<div class="small-6 columns">
			this is one quarter the width since it counts from the closest row, but I'd like it to be half the document again
			</div>
		</div>
	</div>
</div>
The real example is something was designed 10 columns wide, but then its contents were assumed to be divisible by 10, not 12.

Hey, I'm posting from my phone without ability to test, but with that example you'd need to just change your markup - so:

Row
Small-6 columns
Row
Small-12 columns

This would appear as you expect, is there a reason you can't do that?

Or with the other thing:

Row
Small-10
Row
Small-12

The small-12 would take up 100% the width of the small-10. Is this not what you need it to do?

# ? Nov 14, 2014 00:01

Ghostlight: Sep 25, 2009; maybe for one second you can pause; try to step into another person's perspective, and understand that a watermelon is cursing me

I think what they mean is that they know, as a developer, that a small-6 is half of whatever it is in; but, they worry that the creative team will have a tendency to think that every small-6 is a half of the document, and the question is if there's any way to 'fix' it so that nested column classes aren't relative to their container.

I'm not that familiar with Foundation, but I'm fairly sure the answer is no.

# ? Nov 14, 2014 02:22

Chris!: Dec 2, 2004; E

Ghostlight posted:

I think what they mean is that they know, as a developer, that a small-6 is half of whatever it is in; but, they worry that the creative team will have a tendency to think that every small-6 is a half of the document, and the question is if there's any way to 'fix' it so that nested column classes aren't relative to their container.

I'm not that familiar with Foundation, but I'm fairly sure the answer is no.

Oh that makes more sense, I misunderstood. No, not without rewriting a bunch of css rules for nested behaviour, which is a bad idea. You could use the block grid instead, which doesn't nest the same as a regular grid, but to be honest you're better off just getting them using it how it's meant to be used!

# ? Nov 14, 2014 06:33

lunar detritus: May 6, 2009

Lumpy posted:

If you use gulp, and hate having gigs of disk space in node_modules folders, I wrote up how to use gulp with global packages: http://simblestudios.com/blog/development/gulp-saving-disk-space.html

This is bad and you should feel bad.

(You do address the problems in your post but still, there's a reason projects are self contained, sooner or later you'll update a gem or package and weeks later you'll notice because it introduced breaking changes in one of your projects. :v:

)

# ? Nov 14, 2014 13:47

yoyomama: Dec 28, 2008

Ghostlight posted:

I think what they mean is that they know, as a developer, that a small-6 is half of whatever it is in; but, they worry that the creative team will have a tendency to think that every small-6 is a half of the document, and the question is if there's any way to 'fix' it so that nested column classes aren't relative to their container.

I'm not that familiar with Foundation, but I'm fairly sure the answer is no.

I'm not super-familiar with foundation, but I've used it and I'm pretty sure the answer is no, unless you went in and tweaked the foundation css to try to get it to work this way.

# ? Nov 14, 2014 14:48

revmoo: May 25, 2006; #basta

Anyone seen random javascript breaking after upgrading to Firefox 33? I have a bit of code that is basically:

length = obj.length;
for (a = 0; a < length; a++) {}

I'm getting undefined errors on obj[a] inside the for loop which seems impossible.

# ? Nov 14, 2014 18:04

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

revmoo posted:

Anyone seen random javascript breaking after upgrading to Firefox 33? I have a bit of code that is basically:

length = obj.length;
for (a = 0; a < length; a++) {}

I'm getting undefined errors on obj[a] inside the for loop which seems impossible.

Fiddle please

# ? Nov 14, 2014 18:05

revmoo: May 25, 2006; #basta

Unfortunately I can't as it's proprietary, though I'm working on narrowing down the issue at the moment. Just wondering if there were any known bugs in the new FF.

vv That's what I mean by narrowing it down. If I can get it down to a proof-of-concept then I'll put that in a jsfiddle.

revmoo fucked around with this message at 19:03 on Nov 14, 2014

# ? Nov 14, 2014 18:15

kedo: Nov 27, 2007

revmoo posted:

Unfortunately I can't as it's proprietary, though I'm working on narrowing down the issue at the moment. Just wondering if there were any known bugs in the new FF.

A for loop is proprietary? Can't you abstract it?

# ? Nov 14, 2014 18:33

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

gmq posted:

This is bad and you should feel bad.

(You do address the problems in your post but still, there's a reason projects are self contained, sooner or later you'll update a gem or package and weeks later you'll notice because it introduced breaking changes in one of your projects. )

Counterpoint: :feelsgood:

For me making wireframes, prototypes, and goof-off projects, if the version of gulp-uglify changes, I'll live. "Real" projects still get stuff installed locally.

# ? Nov 14, 2014 18:43

bpower: Feb 19, 2011

revmoo posted:

Anyone seen random javascript breaking after upgrading to Firefox 33? I have a bit of code that is basically:

length = obj.length;
for (a = 0; a < length; a++) {}

I'm getting undefined errors on obj[a] inside the for loop which seems impossible.

Im going to guess its a problem with your code and FireFox hasn't broken javascript for loops or the length function.

# ? Nov 14, 2014 23:03

DimpledChad: May 14, 2002; Rigging elections since '87.

revmoo posted:

Anyone seen random javascript breaking after upgrading to Firefox 33? I have a bit of code that is basically:

length = obj.length;
for (a = 0; a < length; a++) {}

I'm getting undefined errors on obj[a] inside the for loop which seems impossible.

stab in the dark, but a is missing a var keyword, which would make it a global var. Could there be something else modifying its value so that it's out of range?

# ? Nov 15, 2014 00:17

zfleeman: Mar 12, 2014; I wonder how you spell Tabasco.

I don't really know what's going on, but when I have a max-width:780px; set on my website, it scales really poorly on iPhones/smaller screens. Web inspector is telling me there is a fixed 92px margin on either side. For some reason when I set my max-width to 970px a la Bootstrap, that 92px margin goes away. What am I missing? I've never set a 92px margin anywhere.

# ? Nov 15, 2014 00:43

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

zfleeman posted:

I don't really know what's going on, but when I have a max-width:780px; set on my website, it scales really poorly on iPhones/smaller screens. Web inspector is telling me there is a fixed 92px margin on either side. For some reason when I set my max-width to 970px a la Bootstrap, that 92px margin goes away. What am I missing? I've never set a 92px margin anywhere.

A total guess is that margin: 0 auto; is set somewhere. I'm phone posting so I can't inspect your page easily.

# ? Nov 15, 2014 01:16

zfleeman: Mar 12, 2014; I wonder how you spell Tabasco.

Lumpy posted:

A total guess is that margin: 0 auto; is set somewhere. I'm phone posting so I can't inspect your page easily.

You are 100% correct. Why is that messing everything up?

# ? Nov 15, 2014 01:59

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

Can anyone recommend some good reading on information architecture?

I've got zero background in the subject and I'm kind of stumped about how to ... information architect ... a somewhat-complex site I'm thinking about.

# ? Nov 15, 2014 02:32

Kobayashi: Aug 13, 2004; by Nyc_Tattoo

Thermopyle posted:

Can anyone recommend some good reading on information architecture?

I've got zero background in the subject and I'm kind of stumped about how to ... information architect ... a somewhat-complex site I'm thinking about.

Peter Morville's "Information Architecture for the Web" is the canonical starting point:
http://www.amazon.com/Information-Architecture-World-Wide-Web/dp/0596527349

Since it's really about how information is arranged in relation to other information and tasks, the basics are still relevant. There are lots of other books out there, but as a discipline it hasn't been the hot thing in quite some time. With that said, Abby Covert wrote a new book that is high on my reading list:
http://smile.amazon.com/gp/aw/d/1500615994

# ? Nov 15, 2014 03:00

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

Kobayashi posted:

but as a discipline it hasn't been the hot thing in quite some time.

By this do you mean that there's something newer/better I should be looking at or just that most everything that can be said about it has been said?

# ? Nov 15, 2014 03:53

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

http://uxmastery.com/practical-ia/

This was pretty good, been a while and was the first edition when I last read it though.

# ? Nov 15, 2014 07:36

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

zfleeman posted:

You are 100% correct. Why is that messing everything up?

A margin value of auto means "give me a margin on either side that fills up the difference between my width and my parent container's width". So in your case your container was 184px narrower than its parent for whatever reason. So, halve that, and it got 92px margins on either side.

# ? Nov 15, 2014 17:43

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

Thermopyle posted:

By this do you mean that there's something newer/better I should be looking at or just that most everything that can be said about it has been said?

I suspect that it lost steam as an individual thing and has been rolled into the broader umbrella of UX.

# ? Nov 15, 2014 17:46

zfleeman: Mar 12, 2014; I wonder how you spell Tabasco.

Okay, then what is Bootstrap doing here? I'm just trying to replicate it.

# ? Nov 15, 2014 17:48

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

You might want to check this out if you wish to know how bootstrap grid works:

http://www.helloerik.com/the-subtle-magic-behind-why-the-bootstrap-3-grid-works

# ? Nov 15, 2014 17:51

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

Kobayashi posted:

Peter Morville's "Information Architecture for the Web" is the canonical starting point:
http://www.amazon.com/Information-Architecture-World-Wide-Web/dp/0596527349

Since it's really about how information is arranged in relation to other information and tasks, the basics are still relevant. There are lots of other books out there, but as a discipline it hasn't been the hot thing in quite some time. With that said, Abby Covert wrote a new book that is high on my reading list:
http://smile.amazon.com/gp/aw/d/1500615994

Maluco Marinero posted:

http://uxmastery.com/practical-ia/

This was pretty good, been a while and was the first edition when I last read it though.

Got all these. Thanks!

# ? Nov 15, 2014 19:09

Kobayashi: Aug 13, 2004; by Nyc_Tattoo

Thermopyle posted:

By this do you mean that there's something newer/better I should be looking at or just that most everything that can be said about it has been said?

Oh no, it's definitely still relevant, but it's been rather subsumed by UX as a whole. Personally, I think it is one of the most overlooked aspects of design. It leads to beautiful sites/apps that are otherwise impossible to use, because the information isn't organized in a comprehensible way. Definitely look into IA.

# ? Nov 15, 2014 20:47

Robot Arms: Sep 19, 2008; R!

We use pullquotes on our site, styled with p.pullquote. But that means in RSS feeds and emails they are unstyled and screw up the flow of the article. I've noticed the same thing on feeds from much bigger websites with big development budgets, so it's not just my site.

Is there a good way to add styles to that paragraph in the feed, or is there a best practice for indicating that they are pullquotes in some other way?

# ? Nov 17, 2014 17:13

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

samglover posted:

We use pullquotes on our site, styled with p.pullquote. But that means in RSS feeds and emails they are unstyled and screw up the flow of the article. I've noticed the same thing on feeds from much bigger websites with big development budgets, so it's not just my site.

Is there a good way to add styles to that paragraph in the feed, or is there a best practice for indicating that they are pullquotes in some other way?

What's wrong with <blockquote>?

# ? Nov 17, 2014 17:38

Diabolik900: Mar 28, 2007

For pullquotes, I think <aside><blockquote></blockquote></aside> would actually be the semantically appropriate syntax since the quote isn't supposed to be part of the main flow of the content. I don't know what RSS readers actually do with <aside> tags though.

# ? Nov 17, 2014 17:51

Adbot: ADBOT LOVES YOU

# ? May 14, 2024 11:18

Robot Arms: Sep 19, 2008; R!

Maluco Marinero posted:

What's wrong with <blockquote>?

Pullquotes and blockquotes are different things. A pull quote isn't really part of the content like a blockquote is. A pullquote is basically a typographical teaser. They also look nice.

# ? Nov 17, 2014 20:41

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

«‹›361 »