The Web Design & Development Megathread

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

«‹›361 »

Skiant: Mar 10, 2013

fletcher posted:

I'm curious what you design savvy folks think of linkedin.com. I haven't used it much but my god it feels like such a clusterfuck of a UI.

linkedin is really the worst. The whole experience, not just the UI.

# ? Nov 15, 2013 08:30

Adbot: ADBOT LOVES YOU

# ? May 8, 2024 14:38

A MIRACLE: Sep 17, 2007; All right. It's Saturday night; I have no date, a two-liter bottle of Shasta and my all-Rush mix-tape... Let's rock.

Pollyanna posted:

what's so wrong with my style

Just indent your nested tags consistently, everything else is good.

Pollyanna posted:

edit: Finally fixed! Here's how it is now. Comments are greatly appreciated.

give the header divs a grid-70 prefix-15 suffix-15 class too? instead of the grid-60. it looks weird

Dietrich posted:

It's specifically designed to make corporate users feel right at home!

Linkedin is a cesspit of tech recruiters. most of them are pretty nice though

A MIRACLE fucked around with this message at 09:47 on Nov 15, 2013

# ? Nov 15, 2013 09:40

pipes!: Jul 10, 2001; Nap Ghost

fletcher posted:

I'm curious what you design savvy folks think of linkedin.com. I haven't used it much but my god it feels like such a clusterfuck of a UI.

It's a miserable, skeevy echo chamber of dark patterns.

# ? Nov 15, 2013 17:38

Pollyanna: Mar 5, 2005; Milk's on them.

A MIRACLE posted:

Just indent your nested tags consistently, everything else is good.

give the header divs a grid-70 prefix-15 suffix-15 class too? instead of the grid-60. it looks weird

I do try to do this, but either PyCharm or JFiddle makes it look weird when I copy it v :shobon:

v

And that makes sense. I changed it so it's all in the same column. As long as the header is further away from the rest of the document it should work fine.

# ? Nov 15, 2013 19:07

A MIRACLE: Sep 17, 2007; All right. It's Saturday night; I have no date, a two-liter bottle of Shasta and my all-Rush mix-tape... Let's rock.

Pollyanna posted:

I do try to do this, but either PyCharm or JFiddle makes it look weird when I copy it vv

And that makes sense. I changed it so it's all in the same column. As long as the header is further away from the rest of the document it should work fine.

You've got a double dose of div.grid-containers going on on the main section too. It's adding a bit extra padding which is still throwing off your alignment. This is mostly just nitpicking though, your resume is fine. I get great job offers and my resume is just in markdown format gently caress the system

A MIRACLE fucked around with this message at 19:17 on Nov 15, 2013

# ? Nov 15, 2013 19:13

Pollyanna: Mar 5, 2005; Milk's on them.

A MIRACLE posted:

You've got a double dose of div.grid-containers going on on the main section too. It's adding a bit extra padding which is still throwing off your alignment. This is mostly just nitpicking though, your resume is fine. I get great job offers and my resume is just in markdown format

Wuh oh, you're right. Thanks for letting me know. Fixed. And yeah, this resume is partly to show that I do have a couple of the skills I mentioned (HTML, CSS), so that should make it more impressive.

also gently caress the system

# ? Nov 15, 2013 19:19

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

Speaking of Markdown - I downloaded the Markdown plugin for PyCharm and opened up my README.md file and...nothing was different. It didn't give me little Text/Preview tabs like in the screenshot. Any ideas as to why it's not working?

# ? Nov 15, 2013 20:42

silentpenguins: May 9, 2013; Abysswalking

Didn't see a CSS thread, so I'll post here. Is there a way to have a background image then repeat the last line of pixels on the image instead of tiling it? For reference site is nftech.com/blog/, the rest of the site is designed with a fixed image as the background and if they make a post that's too long it's going to look pretty bad, so trying to figure our the best way to retain the look of the site and be able to scroll. Maybe splice the head and then have another image be the fixed background?

# ? Nov 17, 2013 19:48

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

You want to use CSS3 multiple backgrounds when you can't just use a colour to cover the repeating section. Unfortunately not supported by IE8 and below, so if you want to do that you'll need multiple divs, using absolute positioning to move them around so they each take one of the backgrounds.

http://caniuse.com/multibackgrounds
http://www.css3.info/preview/multiple-backgrounds/
http://css-tricks.com/stacking-order-of-multiple-backgrounds/

Have a gander at that and see how you go.

# ? Nov 17, 2013 23:13

Pollyanna: Mar 5, 2005; Milk's on them.

Is it bad if I only just figured out what HTML5 is and what it changed? :suicide:

I thought it was like a minor thing. Dammit.

# ? Nov 18, 2013 16:19

Suspicious Dish: Sep 24, 2011; 2020 is the year of linux on the desktop, bro; Fun Shoe

No, because HTML5 is a dumb buzzword.

http://www.whatwg.org/specs/web-apps/current-work/multipage/introduction.html#is-this-html5?

# ? Nov 18, 2013 16:25

A MIRACLE: Sep 17, 2007; All right. It's Saturday night; I have no date, a two-liter bottle of Shasta and my all-Rush mix-tape... Let's rock.

HTML5 is basically javascript, canvas, more semantic tags (like <header>, but you're already using that), and some "new" css stuff like media queries

# ? Nov 18, 2013 16:27

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

Suspicious Dish posted:

No, because HTML5 is a dumb buzzword.

http://www.whatwg.org/specs/web-apps/current-work/multipage/introduction.html#is-this-html5?

But I want a new HTML5 website! It should look just like the old one, and no functionality needs to change, but it has to be HTML 5. Can you do that?

# ? Nov 18, 2013 18:49

Pollyanna: Mar 5, 2005; Milk's on them.

Oh, phew. Thought I missed something big. This is stuff I've been working with already, so no biggie.

Also, I'm having a really weird issue with printing an HTML page to PDF. Everything looks alright, except that all the li elements are bolded in the PDF preview for some reason. :confused:

I tried setting font-style: normal under @media print for the list elements, but they still come out way too strong. What's even weirder is that they aren't bolded when they start a page: if a list is broken by a page break, the first half of the list will be bolded, but the second half won't be.

What's going on? Is this a CSS issue or a PDF printing issue?

edit: There are even cases where one of the li's is bold and the one immediately after isn't! :wtf:

Pollyanna fucked around with this message at 18:53 on Nov 18, 2013

# ? Nov 18, 2013 18:50

Bognar: Aug 4, 2011; I am the queen of France; Hot Rope Guy

Try font-weight: normal.

# ? Nov 18, 2013 19:33

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

Lumpy posted:

But I want a new HTML5 website! It should look just like the old one, and no functionality needs to change, but it has to be HTML 5. Can you do that?

code:

<!DOCTYPE html>

Done.

# ? Nov 18, 2013 19:36

pipes!: Jul 10, 2001; Nap Ghost

Lumpy posted:

But I want a new HTML5 website! It should look just like the old one, and no functionality needs to change, but it has to be HTML 5. Can you do that?

Make sure you also embed the official W3C HTML5 logo and companion technology class badges, to inform users that your site is utilizing the cornerstone of the W3C's open web platform! For example, here is SA's:

# ? Nov 18, 2013 20:13

Suspicious Dish: Sep 24, 2011; 2020 is the year of linux on the desktop, bro; Fun Shoe

SA's HTML is semantic? News to me.

# ? Nov 18, 2013 20:32

pipes!: Jul 10, 2001; Nap Ghost

Suspicious Dish posted:

SA's HTML is semantic? News to me.

About as semantic as any other major site's.

# ? Nov 18, 2013 20:38

Fuck them: Jan 21, 2011; and their bullshit

I hired RtR to do me a resume, and I'm a full stack web dev. I've wondered about throwing something up on heroku myself.

Would it be a good idea to try to put my resume in html and style it myself (or try to copy RTR) with CSS? I really don't have any aspirations or goals for a personal site, so it would be mostly to show "hey I can also do stuff that work doesn't do" such as struts or whatever instead of just .NET MVC.

I guess if I implemented my own fiddle of sorts and made some test pages showing I know how to implement knockout or whatever that would also be a good way to indicate that I'm not just lying on my resume, right? Or is that really not worth doing once you have work experience with it?

# ? Nov 18, 2013 20:53

jackpot: Aug 31, 2004; First cousin to the Black Rabbit himself. Such was Woundwort's monument...and perhaps it would not have displeased him.<

silentpenguins posted:

For reference site is nftech.com/blog/, the rest of the site is designed with a fixed image as the background and if they make a post that's too long it's going to look pretty bad, so trying to figure our the best way to retain the look of the site and be able to scroll.

It'd be sort of a dirty way to do it, but you could put overflow:scroll on that site's content div, and then be able to scroll all the content inside that one background image. Edit: That's what they've done on their gallery page.

# ? Nov 18, 2013 22:05

Mister Chief: Jun 6, 2011

Does anyone have any idea what's going on here?

Here's a responsive table as it appears on IOS7 in both chrome and safari:

But when you scroll it to the right:

The content which isn't initially visible doesn't have a background-color applied to it. It probably goes without saying but this doesn't happen on a desktop browser.

# ? Nov 19, 2013 10:42

Griffith86: Jun 19, 2008

Mister Chief posted:

Does anyone have any idea what's going on here?

Here's a responsive table as it appears on IOS7 in both chrome and safari:

But when you scroll it to the right:

The content which isn't initially visible doesn't have a background-color applied to it. It probably goes without saying but this doesn't happen on a desktop browser.

In my experience in working with the iOS/Android browsers, if it isn't viewable in the viewport when it's rendered, a background won't be rendered for it.

# ? Nov 19, 2013 12:35

A Big... Dog: Mar 25, 2013; HELLO DAD

Mister Chief posted:

Does anyone have any idea what's going on here?

Here's a responsive table as it appears on IOS7 in both chrome and safari:

As an aside, whatever it is you're making, I need it.

# ? Nov 19, 2013 13:07

Mister Chief: Jun 6, 2011

Griffith86 posted:

In my experience in working with the iOS/Android browsers, if it isn't viewable in the viewport when it's rendered, a background won't be rendered for it.

Is there a workaround for it?

a_big_dog posted:

As an aside, whatever it is you're making, I need it.

Hopefully I'll have it up soon.

# ? Nov 19, 2013 13:20

Bognar: Aug 4, 2011; I am the queen of France; Hot Rope Guy

I think you can do some stupid poo poo with position: absolute and negative z-index. Like so:

HTML code:

<div class="container">
    <div class="bgFix">
        <table>
            Yada yada
        </table>
    </div>
</div>

CSS code:

.container {
    position: relative;
}

.bgFix {
    background: #000;
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    z-index: -1;
}

# ? Nov 19, 2013 15:54

darthbob88: Oct 13, 2011; YOSPOS

This might belong in the Javascript thread, but I need a good way to set up a default image. On this page, the 1 gallon pump has no image. My service guesses that it has an image at one URL, then fails over to a second, then it just fails. I'd much prefer it if that final failure went to nophoto.gif. I'm trying to do that with the onError event, that's how I got it to failover from the first URL to the second, but it doesn't always fire, or so it appears. Is there a much better solution?

darthbob88 fucked around with this message at 19:56 on Nov 19, 2013

# ? Nov 19, 2013 19:51

Bognar: Aug 4, 2011; I am the queen of France; Hot Rope Guy

Why can't you handle this server-side? That seems much better than trying to detect for properly loaded images in JS.

Optionally, you could just wrap the img tag in a div and set nophoto.gif as the div background. If an image loads it will cover the background, otherwise nophoto.gif will be shown. This is assuming that all your potential images are larger than nophoto.gif.

# ? Nov 19, 2013 20:56

darthbob88: Oct 13, 2011; YOSPOS

Bognar posted:

Why can't you handle this server-side? That seems much better than trying to detect for properly loaded images in JS.

The short version is that the images aren't loading from my servers. All I control is the JS, which gets passed a URL for the image. I don't know if the image actually exists at that URL, hence the need to guess at alternate URLs or fail over to nophoto.gif.

quote:

Optionally, you could just wrap the img tag in a div and set nophoto.gif as the div background. If an image loads it will cover the background, otherwise nophoto.gif will be shown. This is assuming that all your potential images are larger than nophoto.gif.

Most of them are, so this is definitely an option, at least for the nophoto.gif issue. On the other hand, I've got a project that needs a more general case, where I attempt to load a new image and fail back to the previous image. Suspect I can apply this method, but more options are always appreciated.

# ? Nov 19, 2013 21:39

Mister Chief: Jun 6, 2011

Bognar posted:

I think you can do some stupid poo poo with position: absolute and negative z-index. Like so:

Adding the same background-color to its parent container fixed it. :shrug:

# ? Nov 20, 2013 11:43

Munkeymon: Aug 14, 2003; Motherfucker's got an
armor-piercing crowbar! Rigoddamndicu𝜆ous.

I just did this with (a) sass (plugin for Visual Studio):

code:

%ui{
	position: absolute;
	bottom: $borderWidth;
	z-index: 2;
}

/*other ui-extending classes*/

%arrow{
	@extend %ui;
	/*blah*/
}

.leftArrow{
	@extend %arrow;
	left: $borderWidth;
	background-image: url("images/leftArrow.png");
}

and I'm getting %arrow classes in the generated CSS and a non-working .leftArrow class. Is my plugin broken or do extend chains not work by design?

Munkeymon fucked around with this message at 20:57 on Nov 20, 2013

# ? Nov 20, 2013 20:49

A MIRACLE: Sep 17, 2007; All right. It's Saturday night; I have no date, a two-liter bottle of Shasta and my all-Rush mix-tape... Let's rock.

Wait, what does the % selector do in SASS? Is that like a wildcard? I've never seen it before.

# ? Nov 20, 2013 21:28

darthbob88: Oct 13, 2011; YOSPOS

A MIRACLE posted:

Wait, what does the % selector do in SASS? Is that like a wildcard? I've never seen it before.

It's a placeholder, just used to create something to extend, AFAIK. Shouldn't appear in the compiled code, I think it might be a bad plugin maybe. Not sure, not actually a SASS person.

# ? Nov 20, 2013 21:40

Depressing Box: Jun 27, 2010; Half-price sideshow.

Munkeymon posted:

Is my plugin broken or do extend chains not work by design?

Looks like the plugin might be broken. If I run this through the command-line tool:

code:

$borderWidth: 12px;

%ui {
  position: absolute;
  bottom: $borderWidth;
}

%arrow {
  @extend %ui;
  color: blue;
}

.leftArrow {
  @extend %arrow;
  left: $borderWidth;
  background-image: url("images/leftArrow.png");
}

.rightArrow {
  @extend %arrow;
  right: $borderWidth;
  background-image: url("images/rightArrow.png");
}

I get this:

CSS code:

.leftArrow, .rightArrow {
  position: absolute;
  bottom: 12px; }

.leftArrow, .rightArrow {
  color: blue; }

.leftArrow {
  left: 12px;
  background-image: url("images/leftArrow.png"); }

.rightArrow {
  right: 12px;
  background-image: url("images/rightArrow.png"); }

EDIT:

A MIRACLE posted:

Wait, what does the % selector do in SASS? Is that like a wildcard? I've never seen it before.

Placeholders are pretty handy when you're trying to cut down on duplicate rules or with OOCSS.

Depressing Box fucked around with this message at 21:58 on Nov 20, 2013

# ? Nov 20, 2013 21:50

Munkeymon: Aug 14, 2003; Motherfucker's got an
armor-piercing crowbar! Rigoddamndicu𝜆ous.

Depressing Box posted:

Looks like the plugin might be broken. If I run this through the command-line tool:

code:

$borderWidth: 12px;

%ui {
  position: absolute;
  bottom: $borderWidth;
}

%arrow {
  @extend %ui;
  color: blue;
}

.leftArrow {
  @extend %arrow;
  left: $borderWidth;
  background-image: url("images/leftArrow.png");
}

.rightArrow {
  @extend %arrow;
  right: $borderWidth;
  background-image: url("images/rightArrow.png");
}

I get this:

CSS code:

.leftArrow, .rightArrow {
  position: absolute;
  bottom: 12px; }

.leftArrow, .rightArrow {
  color: blue; }

.leftArrow {
  left: 12px;
  background-image: url("images/leftArrow.png"); }

.rightArrow {
  right: 12px;
  background-image: url("images/rightArrow.png"); }

EDIT:

Placeholders are pretty handy when you're trying to cut down on duplicate rules or with OOCSS.

Thanks for the confirmation.

The plugin is spitting out this:

code:

%arrow {
  position: absolute;
  bottom: 12px; }

.leftArrow, .rightArrow {
  color: blue; }

.leftArrow {
  left: 12px;
  background-image: url("images/leftArrow.png"); }

.rightArrow {
  right: 12px;
  background-image: url("images/rightArrow.png"); }

So close

Edit: just found the part of the docs that says that should work. I really like this thing - probably because I was up and running after skimming the docs for about 30 minutes this morning :v:

Munkeymon fucked around with this message at 23:59 on Nov 20, 2013

# ? Nov 20, 2013 22:22

DreadCthulhu: Sep 17, 2008; What the fuck is up, Denny's?!

Migrated our bootstrap site to 3.0. Anything exciting I should be aware of with the new version? Didn't quite get a chance to fully power through it.

# ? Nov 21, 2013 07:39

Depressing Box: Jun 27, 2010; Half-price sideshow.

The official docs have a pretty good rundown.

# ? Nov 21, 2013 16:14

shdwdmg: May 16, 2008

I have been playing with Skrollr for the last few days, But I have run into a problem:

I can string together 5 images and get them to scroll properly. However I want to add a permanent footer. I have the footer made, Just cannot get the skrollr file to take it and make it appear. Any thoughts?

# ? Nov 21, 2013 16:22

Spatulater bro!: Aug 19, 2003; Punch! Punch! Punch!

So I just tried out the developer tools in Internet Explorer 11 on Windows 8.1. What the holy hell happened? There's not even a browser mode option? Why does Microsoft insist on turning lovely products into hard-to-use lovely products?

# ? Nov 21, 2013 21:05

Adbot: ADBOT LOVES YOU

# ? May 8, 2024 14:38

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

caiman posted:

So I just tried out the developer tools in Internet Explorer 11 on Windows 8.1. What the holy hell happened? There's not even a browser mode option? Why does Microsoft insist on turning lovely products into hard-to-use lovely products?

Even Microsoft is on the whole "stop writing <!--[if IE]> poo poo and develop standards" mentality. The browser option never worked 100% anyway and you were always better with running an actual instance of the browser, even in a VM

# ? Nov 21, 2013 22:05

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

«‹›361 »