The Web Design & Development Megathread

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

«‹›6 »

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

Less versions of IE/Win to debug!
As of 2016, only the latest version of Internet Explorer per Windows version will be supported

# ¿ Aug 8, 2014 13:40

Adbot: ADBOT LOVES YOU

# ¿ May 9, 2024 07:52

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

zfleeman posted:

I've been using cssfontstack.com, which I thought had 'web-safe' fonts.

If you hover over the i you'll see it's installed on approximately 1.08% of Macs and 0% of Windows machines.

# ¿ Aug 8, 2014 18:58

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

zfleeman posted:

Oh, wow. Well, I really like the way it looks on my Mac. How can I figure out what it is that I am seeing so I can use that instead?

If you have Firebug you can inspect an element with that font (i.e. "Zach Fleeman's Website"), then in the Style tab, whichever font is highlighted in the stack is the one that is being used.
If you don't have Firebug, I guess you could manually misspell a font in the stack until you see it change :v:

Even if you find which one it is that you like, you only know it is showing that font on your Mac. If you need everyone to see the exact same font, then either pay for one through typekit or get a free one (converting it with font squirrel and host it like you images, or use Google Fonts.

The Merkinman fucked around with this message at 19:38 on Aug 8, 2014

# ¿ Aug 8, 2014 19: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!

Even if you get it resolved, note that autoplay will not work on iOS or Android

# ¿ Aug 15, 2014 05:56

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

fuf posted:

gently caress me is there some universal law that if you make a website for someone they will only ever look at it on IE8?

Murphy's?

# ¿ Aug 15, 2014 19:14

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

I know there is -moz-appearance:none and -webkit-appearance:none to 'reset' stuff like <select> to make it less like the OS/Browser and give a little more control to style it. However, if something previously set a <select> to -moz-appearance:none, is there some new value to then make the select box back to the default OS/Browser look?

# ¿ Sep 11, 2014 20:24

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:

Here's mine: you probably shouldn't.

I like to say inputs are the electrical outlets of web design. An architect can design the craziest building, but people are going to expect to see the same normal thing when they go to plug in a lamp.

This is also why I asked about returning inputs (specifically selects) to their default appearance.

# ¿ Sep 14, 2014 13:35

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

Newf posted:

How do I show/hide something without having the browser reinterpret the width of the containing element?

I've got a table that's sortable by each of its <th> headings, and the currently selected heading displays a little bootstrap glyphicon to signify. When I change to sort by a different heading, the whole table gets shimmied a little because of the increase in size to the newly selected heading and decrease in size of the old one.

I guess I'd like the table's size to be fixed as if all of the icons were present.

Do you just want a black space where the glyphicon would be? If so, can you do visibility:hidden instead of display:none?

# ¿ Sep 16, 2014 16: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!

fuf posted:

Design I was just given to work with

scream shoot

It's for Halloween. :spooky:

# ¿ Oct 16, 2014 14:26

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

Is there a good resource for creating a Style Guide? I've done some Googling and found stuff like A List Apart, but didn't know if there were any sites/documentation that people here liked.

# ¿ Nov 10, 2014 21:01

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

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

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

How do you feel about lightbox/modal windows that you clicked something to bring up? Personally I'd much rather add the content inline, than via modal.

Lumpy posted:

Come on now... you know you really want to download their mobile app.

# ¿ Dec 11, 2014 17:54

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:

Is anyone using relative units (rems or ems) for media query breakpoints? I've been putting off attempting it for ages in fear that things will get super complex once I change the baseline font-size WITH my media queries, sort of creating a circular paradox. Turns out my fears were unwarranted because, as I'm sure most of you already knew, (r)ems in media queries are based on the browser's initial font value, NOT the values I set in my CSS. So they're consistent regardless of how much I've hosed with things.

Just wondering what others' thoughts are on this.

Foundation uses em, though Bootstrap uses px.
I guess if it's good enough for Foundation, it's good to go. I'm trying to stop using px for anything outside of like border-radius, instead using (r)em and %.

# ¿ Dec 29, 2014 22:10

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

Mister Chief posted:

I want an effect where I have a list and its items are ticked or crossed off with an animation in sequential order. I could have a bunch of nth child rules with different delays but I just wanted to know if anyone knew of a better solution.

You could iterate over the lis with JavaScript.

# ¿ Jan 13, 2015 15:14

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

From comments I've read on both Vivaldi and Spartan apparently there is no 'right' way to make a web browser.
Vivaldi: It's just the same engine as Chrome and Opera, what's the point? :rolleyes:

Spartan: Oh great! M$ made their own engine again instead of going with something like WebKit :argh:

# ¿ Jan 29, 2015 15:04

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

Is there any way to get the visibility classes for Foundation (hide-for-small-only, show-for-small-up, etc) to display inline when visible? It seems it's either block or none which is not what I want. If I do inline!important then it just never hides.

# ¿ Feb 9, 2015 21:27

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

Using <i> for icons, yay or nay? Also using <i class="icon-poo">post</i> or <i class="icon-poo"></i>post , since the latter would allow you to play the icon anywhere?

# ¿ Feb 20, 2015 18:10

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

Any idea why an element with a single line of copy and equal heights and line-heights would be vertically aligned in Firefox but not Chrome? I can't just do a fiddle since it might be some other code conflicting. A simple test of the bare minimum is fine

# ¿ Mar 5, 2015 22:54

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

Ghostlight posted:

Well if it works fine in isolation then the problem is other code, at which point it could be virtually anything.

Yeah I just didn't know if there were certain things to look for like padding or border etc

# ¿ Mar 5, 2015 23: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!

revmoo posted:

Yeah. Use the divide and conquer method, just start ripping code out until the problem goes away.

It's the font? Has anyone had issues like this with Google Web Fonts?

# ¿ Mar 6, 2015 00:46

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

v1nce posted:

Here, have a thing I made for work:

It's mostly for Symfony2 with Doctrine, but happy for people to let me know if I missed anything important.

How do I use Borwser cache?

# ¿ Mar 9, 2015 01:04

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

DrSunshine posted:

Hello, it's me again. I was the guy back a few pages looking for Javascript help in designing my webcomic site. Well now it's active -- or at least a working prototype version -- thanks to you guys and your help!

It's here: http://aricelle.com/

Just wondering if I was committing any kind of "web design 101" rookie mistakes, basically. I don't really know what's current and accepted best practices for web design, I just tried to make something simple and efficient.

Validate your site. It showed some rookie mistakes, like having multiple elements with the same ID, and your page not having a <title>. Also depending on who you talk to, it should be responsive.

# ¿ Mar 17, 2015 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!

Any idea why Foundation and Flex-box don't get along or what exactly is going on here?
In Chrome and IE, the padding to the right of 'add' gets ignored so the copy isn't centered. Not including foundation fixes the issue, but I don't see why. All I see is the calculated width is different, but I don't see WHY it's different. Firefox doesn't have the issue.

# ¿ Mar 30, 2015 18:51

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

Leshy posted:

That took way too much time figuring out, but it was a nice puzzle!

Both the textbox and submit button are flex items, due to the display: flex; statement on the parent div. That means they want to sit next to each other on the same line. The imported Foundation ~~6000-line monstrosity~~ stylesheet, however, contains the statement input[type="text"] {width: 100%;}, which makes the browser attempt to give the textbox as much width as possible. As the submit button is a flex item, it can be shrunk down to give the textbox more horizontal space.

Apparently Gecko and Trident/Webkit have a different opinion on how far it is allowed to be shrunk down. Gecko (Firefox) will not shrink the flex item down beyond the width of its content, whereas Trident (IE) and Webkit (Chrome, Vivaldi, Opera) will do so. This causes the content to overflow over the right padding, giving the illusion that the right padding is ignored, which it isn't. The statement flex-shrink: 0; on the submit button will tell the browser that it should not be shrunk, which fixes the issue.

See this jsfiddle for a more minimal example.

Thank you so much! :worship:

# ¿ Mar 30, 2015 22:41

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 here try out Spartan in the latest Windows 10 build? The Cortana integration seems neat, but it feels like that's the only site it works on. I've looked at the code and not seen anything special, and in fact it looks pretty sub par as far as code (two #footers, no microdata, etc). Any idea how it works?

# ¿ Apr 7, 2015 14:11

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

I hate to interrupt this language chat, but does anyone know if it's possible for a single click to select all text in an input and have the copy/paste widget appear in iOS/Android? Calling .focus() and/or .select() highlights the field, but doesn't bring up the widget.

# ¿ Apr 10, 2015 15:25

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

ufarn posted:

I've only just started looking into replacing my <div>s with modern HTML5 tags, but I have some questions about semantics/best practices:

(1) Which of these two are preferable:
HTML code:
<ul id="nav" role="navigation">
    <li>Foo</li>
    <li>Bar</li>
    <li>Baz</li>
</ul>
vs
HTML code:
<nav id="nav" role="navigation">
    <ul>
        <li>Foo</li>
        <li>Bar</li>
        <li>Baz</li>
    </ul>
</nav>
The same applies to a seemingly redundant <header> around an <h1> with no tagline.

(2) Second, should I use <article> for a similar index list of articles, or should I just leave them in a <a>s inside a <li> inside an <ul>? <article> seems like something you wrap around a bigger blog with title, content, and so on.

(1) I've seen:

code:

<nav id="nav" role="navigation">
    <a>Foo</a>
    <a>Bar</a>
    <a>Baz</a>
</nav>

Something about ul and screen readers.

(2) I would think article is just the article itself not the list of articles. So I'd leave it with li.

# ¿ Apr 15, 2015 20: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!

Lumpy posted:

When does IE10 end of life?

January 12th 2016

# ¿ Apr 18, 2015 22:32

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

MoosetheMooche posted:

Wow, this is way more help and information than I could have hoped for and in such a short period of time. I just woke up so I'm going to spend the day checking out the code and suggestions you guys have posted for me. Just wanted to say thanks, it really seems like a great community in this sub forum.

and here I'll contribute...

MoosetheMooche posted:

e: While I'm here, is it good practice to keep css style info in an external file or is including it in every sub-page of the website a good idea? Since it's a fairly basic website with just a nav-bar and writing I'm thinking an external style page would be good to keep the code looking neater but if I'm wrong please let me know!

Yes, ideally you'd write one external sheet for all pages to share. There is some talk of putting the above-the-fold first page CSS inline, but that's for super optimization with page caching and basically stuff you wouldn't need to worry about for small projects.

MoosetheMooche posted:

Also, is there a good program for design/code view like that website you guys linked to? I've been using Dreamweaver but it seems to do some wonky stuff and I have to manually click refresh every time I make a change which kind of ruins the whole point of the thing (convenience).

There's a few there on the first page of this thread. I haven't used it, but I think Brackets has an auto updating thing.

MoosetheMooche posted:

Doesn't the some-container actually make it more difficult for a browser to resize the website? It seems like I have to put in a set resolution that the page will display as instead of having it adapt to my browser like it would normally. For example you have set the resolution to 800x400 which only looks right if I have my browser window quite small. Is it a necessity to use Media Queries when I nest the menu/website in a container?

Not sure what you're asking here, a block element will be 100% of its parent, if its parent is body then it will be 100% the window. You can also havemin-width and max-width on elements without getting into media queries.Also, don't think in pixels. They aren't what you think they are anyway. If things don't look the right size on a phone you'll need this in the head <meta name="viewport" content="width=device-width, initial-scale=1.0">

# ¿ May 13, 2015 19:04

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:

I agree, and I actually start off in Sketch. Just pointing out that not knowing Illustrator (or not wanting to pay for it) wasn't a deal breaker, and that you can get your feet wet with $EDITOR and your browser.

Another great read on web design I remembered: https://ia.net/know-how/the-web-is-all-about-typography-period

I really wish Sketch were:
1. Cross-Platform
2. Not so arrogant about OS X.

# ¿ May 26, 2015 15: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!

The Dave posted:

If you want to make it even less attractive: what's the role of social media for this brand?

Reminds me of where I used to work:

We need to get Facebook Likes
:confused:

why?

because... Facebook

# ¿ Jun 23, 2015 14:35

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

I've been using Foundation (4 and 5) for quite some time, but now I want to build a main stylesheet uses SCSS.
How do I do something as simple as change the font-family for a label element? It's not in the list of variables. Also am I supposed to be changing _settings.css, make a new _custom.css or put it at the bottom of _app.scss?

I followed the instructions on installing from CLI (because while we spend all day coding GUIs, heaven forbid we use one otherwise more people will be in our sekret club).

# ¿ Jul 20, 2015 18:57

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

Which one of you, probably freelancers, made this site?

# ¿ Jul 27, 2015 18:48

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

I'm sorry if this is off the current discussion, but how do you tackle performance (load time, size)?
I know there are tools to measure, but what am I measuring for? What is too slow? If I don't give an actual number, then others will want to add more and more features and umpteen marketing tags.
I was at a conference with other people from other companies recently and they all mentioned actually removing features/tracking to get the site to be faster, but gave no goal number.

# ¿ Sep 18, 2015 15:58

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

Skandranon posted:

This is really a failure of the business analysis portion. They should have a specific goal for how fast an application should be for various things. For example, Google has a specific < 1s time limit for it's queries. A product doesn't get released until it is faster than 1s. Saying "Make X faster" without a benchmark of what is good enough is impossible to really satisfy.

That's my point. How do I figure out what good enough is? Since one hasn't been provided to me (through the failure of the business analysis) how do I make one of my own to then tell the business analysts?

# ¿ Sep 18, 2015 18:17

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

Skandranon posted:

Well, if you are the developer, and they give you vague requirements, pick the interpretation you like best. 0.01% faster IS faster. Conversely, you can send them some emails explaining how their requirements suck (need clarification). I don't know how contentious your relationship is with the people who do business analysis.

Oh I see the confusion now...
Performance isn't really on anyone's radar, and I'm trying to make it be the case. (in fact I've heard through the grapevine that one associate explicitly said performance didn't matter). So if I'm saying "our site should be faster", I don't want to be the one to vaguely say "faster" instead of something more specific.

Lumpy posted:

Point this at your site and it it's all green you did good? https://developers.google.com/speed/pagespeed/insights/

Thanks, this is measurable and I can point to the readout and say "see? we need to do X to make this stuff green"

The Merkinman fucked around with this message at 21:10 on Sep 19, 2015

# ¿ Sep 18, 2015 21:39

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

HardDisk posted:

Can someone point me to a starting point on how to optimize a bloated template? My designer started from a prebuilt template but it's massively slow on mobile devices, especially when scrolling.

Just blame the devices :v:

# ¿ Oct 23, 2015 20:23

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

Morroque posted:

Okay, I've been wrangling this for the past two days, so I'll ask: is there any way using CSS for truncating single-line text to fit a variable-width div whose size is dictated ? display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; is weirdly specific about when and where it will or will not work. (I have on one page where one DIV is properly cutting off excess text, yet adamantly refusing to do the same for another DIV.) If not, is there some jquery solution to do the same thing?

That should work, do you have a fiddle of the instance(s) where it isn't working?

# ¿ Nov 26, 2015 18:23

Adbot: ADBOT LOVES YOU

# ¿ May 9, 2024 07:52

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

I have this SPA, not written in Angular/React/Anything special.
A user presses a button and content dynamically appears above the button. Depending on how much content it is, it pushes the page down, so it gives the appearance that the page has jumped (ie, the button is no longer in the persons view).
Is there any way around this?
I tried figuring out how far they were scrolled before/after the dynamic content, but as some of the content is an image, my numbers are off. I don't see how I could just hardcode the height of the image as its responsive.

# ¿ Dec 17, 2015 15:13

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

«‹›6 »