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!

For "Sites don't need to render the same across all browsers", http://dowebsitesneedtolookexactlythesameineverybrowser.com/ is a good URL.
I'm going to guess "Design Principles and Theory" will cover responsive design? Having designers make something FLUID really messes with them when they are used to print. See also:

Lumpy posted:

I agree whole-heartedly. The "problem" isn't CSS or browsers, or shivs / polyfills (well, maybe a little) but that somehow "the web" is the one place where designers are allowed to completely ignore the constraints of the format / media, and font end guys are supposed to be wizards; and if they fail, it's *their* fault, not the designer's.

Can't remember if it was in this thread or not where I said this, but if a designer was tasked with delivering art for a billboard, and they produced a square piece with alpha transparency at 150dpi, would the printer be blamed if--after telling the designer this was not viable art to print on a billboard, and being told "just make it work!"--the resulting billboard looked like poo poo and wan't see-through in the right spots?

But the web is just giant poster you can click on, stop restricting me < :mad:

>

I've successfully...educated... the designers here, but now I move on to a new job next week :unsmith:

# ¿ Jun 26, 2013 20:12

Adbot: ADBOT LOVES YOU

# ¿ Apr 27, 2024 10:18

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 asked this in the recommend me a tablet thread a while ago and wanted to ask here as well:
Tablets (iOS, preferably Android) still aren't suited for web development are they?

# ¿ Jul 7, 2013 19: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!

There is no way to style the options in a select box in Android/iOS, right? I can't find any definitive documentation from Google/Apple

code:

<select>
 <option value="foo">Foo</option>
 <option value="bar" style="color:red">Bar</option>
 <option value="baz" style="font-weight:bold">Baz</option>
</select>

All those look the same on mobile.

# ¿ Jul 24, 2013 13: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!

Using Foundation 4:
Is it possible to vertically center columns? My research shows either 'no' or 'yes with horrible hacks that won't work in your situation'

code:

	<div class="small-10 small-centered columns">
		<div class="small-6 columns footer-info" style="padding-left:0;">
			<span>Or stay in touch via:</span>
		</div>
		<div class="small-2 columns stayInTouch" id="fb"><a href="#"></a></div>
		<div class="small-2 columns stayInTouch" id="tw"><a href="#"></a></div>
		<div class="small-2 columns stayInTouch" id="pt"><a href="#"></a></div>
	</div>

Basically I have the copy "Or Stay in touch via:" that I want vertically aligned with larger Facebook/Twitter/Pinterest social media icons that in this case I used svg/sprite in order for them to scale. Basically something like this:

code:

                             FFFFF     TTTTT     PPPP
                             F           T       P   P
stay in touch via:           FFF         T       PPPP
                             F           T       P
                             F           T       P

# ¿ Aug 22, 2013 15: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!

What's a "best practice" when it comes to amount of JavaScript on a page? Client wanted yet another carousel (in addition to the two existing ones) but upon initializing the third I now get the unresponsive JavaScript popup in Firefox referring to jQuery.
If I search for .js I see 20 external .js files
If I search for simply <script, I get 48 results. Yes I realized this includes the aforementioned 20.
Is this too much JavaScript on a single page?

Some of the JavaScript is social buttons and tracking.

# ¿ Sep 19, 2013 15: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!

Lumpy posted:

Yes, it is. Combine and minify. Adding another of a component that's already on the page should add no code though... just one line to instantiate using the plugin / object that is creating the others.

Obligatory: http://shouldiuseacarousel.com/

I think changing the ID on the carousel helped, hard to tell since one required JavaScript has performance issues internally.
Yes I knew about that web page, but two things:

It's a carousel that is completely user driven, doesn't animate on it's own (EDIT: Something like this)
You forget that marketers/designers wouldn't care about the negatives.

I'll see about combining, I may not be able to all of it since some .js is on some pages that isn't on others, thankfully it seems some JavaScript is superfluous given all the iterations of the page. Minifying of course will be an option.

# ¿ Sep 19, 2013 16:29

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:

I've just discovered http://www.google.com/fonts and it seems like a pretty ideal way of allowing unconventional fonts.

I vaguely remember some controversy about web fonts. Is there anything I should look out for? Is there a proportion of users it won't work for?

Google's API is pretty good with cross browser compatibility, works with mobile/desktop(even old versions of IE!). The only controversy I can think of would be making sure you have the license to use the font in that way. All of the fonts on Google Web Fonts are fine, it's more if you wanted to use ~my favorite font~ that you got from somewhere else.

# ¿ Sep 23, 2013 14:00

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

What's the right way to do breakpoints and/or how are they done in Foundation?
I know the new thought is make breakpoints based on your layout, not device. Problem is breakpoints are "max-width:800px" and with 4-5" phones and 7,10" tablets having higher resolutions than laptops wouldn't it result in no recent device getting a small form factor layout?

# ¿ Sep 28, 2013 18:19

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

darthbob88 posted:

Probably a stupid question, but what are the most common screen sizes for mobile devices? 480x800px, 640x960px, what else? I can't rely on percentages, so I need to use raw px for some things.

This is related to the question I just asked. Do not think in pixels nor device speicifics. What's common today won't be common tomorrow.

# ¿ Sep 30, 2013 13:50

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 know of code/jQuery plugin to "pinch to zoom" an image on mobile? Anything I've seen is either not possible unless I open a new window without the viewport meta tag, or involves building the whole site in jQuery mobile or Sencha.

# ¿ Oct 10, 2013 14:00

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

pipes! posted:

What does your viewport tag look like?

<meta name="viewport" content="width=device-width,max-scale=1,user-scalable=0"> We want something where you click on an image and then can zoom, not the whole time. I tried temporarily removing/editing the tag via JavaScript but it had no effect.

# ¿ Oct 10, 2013 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!

Maybe I'm overthinking this, but when making an SEO friendly URL how do you distinguish between a two word phrase and a list of two separate things?
For example: "kitchen utensils" and "pots, pans, & appliances".
If the former converted to /kitchen-utensils and the latter /pots-pans-and-appliances; how does Google know the first is two words that go together where as the second is a list?

# ¿ Oct 12, 2013 18: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!

How does everyone deal with client-side caching when rolling out new .css or.js? We just rolled out a facelift so some files are cached and others aren't, creating a broken Frankenstein's Monster of a site. I've seen appending ?dateOfEdit to the end of the file, but in that case I'd have to update every .html page too (or at least the most popular ones).

# ¿ Oct 29, 2013 13:59

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:

The more pertinent question is why is Chrome going down?

I wonder if a new version of Chrome is bring incorrectly identified as older versions of Internet Explorer.

# ¿ Oct 31, 2013 22:42

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 two, completely different questions. One design one development.

Design:
Say a new site is being worked on by a designer. Should it first go to other designers for input/approval and then User Testing, or User Testing and then other designers?

Development:
I recently updated a page with HTML5 schema, however Google's Rich Snippets Tool isn't seeing it. Any idea why?

# ¿ Nov 2, 2013 18:07

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:

Do you mean User Interface Design, or Graphic Design?

I think that's part of the problem, we don't have a UI designer (but are looking) so UI would be done by a graphic designer (most of which have a print background, not web). As such I'd want to make sure the process is clear since the people involved aren't ideal.
I'm no designer, I'm the front end developer, and also the "owner" of any front end changes to the site.
Thanks for the input though!

I need to get back to answering questions in this thread, I feel like I've asked too many.

# ¿ Nov 2, 2013 19: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!

2banks1swap.avi posted:

Is there a good best practice or strategy out yet for dealing with small monitors (1024px wide for the viewport) and having a left hand nav in the page? Thoughts that occurred to me were the transparent show/hide overlapping scroll bar like on the right hand side of a facebook profile page, a show/hide left hand nav entirely, or a drop down left hand nav from a top hand nav having a bit arrow to mouse over.

I've only recently gotten into the front end of things with my current full-stack job, having come from the back end.

I suppose another option is to just tell people "Hey, so, guess what? There's only so much room. 5 lbs of bologna won't fit in a 3lb bag!"

The site I work for now is only 990-1000px wide and most pages have a left nav. I think it really depends on what is in the left nav and what takes up the reast, so context.
Also, I usually say "you can't fit a gallon of milk in a shot glass"

# ¿ Nov 4, 2013 22: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!

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

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 Merkinman: Apr 22, 2007; I sell only quality merkins. What is a merkin you ask? Why, it's a wig for your genitals!

Munkeymon posted:

It's not residual when the old versions refuse to die because Microsoft won't backport the new versions to the old OSs. I still see several hundred variations on Mozilla/4.0 (compatible; MSIE 6% in our logging database for this very month.

I have no idea what Mozilla/4.0 (compatible; MSIE 6.0; AOL 6.0; Windows 98) saw, but it looks like he didn't come back, so

Edit: Actually, based on the number of these poor bastards that are still on SP1, I doubt they would have the new versions installed, anyway, so gently caress 'em.

Edit 2: I should point out that the % is the SQL wildcard, not 6% IE 6 or something. I just wanted to point out that they're out there and they want your spicy pages.

Can't really blame Microsoft for people who won't even upgrade to IE8 on XP. If they were on 8 and you wished they were on 9+ you'd have an argument.

# ¿ Nov 22, 2013 15: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!

If Foundation is the "best" responsive framework why are its breakpoints in pixels? Isn't that (and the notion of "phone" "tablet" "desktop" versions) flawed nowadays?

# ¿ Nov 23, 2013 21:07

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

Oh My Science posted:

It doesn't use pixels for breakpoints. The older versions may, but 5 certainly does not.

5? Jeez I just looked at it not too long ago and it was 4. I guess I have some reading to do.
EDIT: still seeing pixels in things like Interchange. Can't see breakpoints right now as I'm on my phone.

The Merkinman fucked around with this message at 22:08 on Nov 23, 2013

# ¿ Nov 23, 2013 21: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!

Kobayashi posted:

Ahh the perks of being a designer. I get all the benefits of playing with new technologies, with none of the bullshit of worrying about IE support, or more than one Android device, or efficiency or maintainability in general. It's pretty nice.

I'm assuming you're a print designer, otherwise the developer could just say "sorry that's not possible in the browsers we need to support"

# ¿ Dec 27, 2013 21:18

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

Has anyone here used GSAP? It looks really nice but I've never heard of it before.

# ¿ Feb 10, 2014 15:06

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

pipebomb posted:

Cool they offer this, but 'mac/parallels' - they made it as Microsoft (awkward) as possible. FFS, they offer a cURL download, but can't make a single zip file?

The multiple file thing is true for any of them, not just some anti mac/parallels :tinfoil:

. They probably broke it up because otherwise it'd be 4GB+ and it'd suck if something happened while downloading and you had to redownload the whole thing again.

# ¿ Feb 10, 2014 21: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!

fletcher posted:

Are CSS3 animations ok to use now if I'm targeting modern browsers?

Depends on which browsers/animations, but you should be ok. Also maybe look at GSAP I asked earlier in this thread if anyone had used it.

# ¿ Feb 24, 2014 21:59

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

Crunk Magnet posted:

I used http://border-radius.com/ in order to generate rounded corners for the website I am developing, but they don't render properly in IE (of course). Is there some simple fix that I can implement? I appreciate the help.

Here is what I am talking about : http://www.crunkmagnet.net/kelly/

Edit: I guess the rounded corner CSS doesn't work in IE8 and below. Never mind.

If your client really needs rounded corners for IE8 (they don't), there's CSS3PIE

# ¿ Feb 25, 2014 18: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!

jackpot posted:

Haha, just found out IE10 doesn't support conditional statements. gently caress those guys, seriously. They've gone from being lovably incompetent to downright hostile.

Edit: And to answer your question, no, so far I haven't found any reason to use them (yay!). But I've needed them for every other goddamn IE release going back to IE6, so I don't see why 10 will be any different.

Because of the standards IE 10 supports it does then well. Is IE hate so bad that Microsoft can do no right?
Conditional statements? Those aren't standard! Microsoft! :argh:

Removing conditional statements to make web pages focus on standards? Microsoft! :argh:

# ¿ Feb 27, 2014 23: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!

fuf posted:

omg Internet Explorer 8
So much wasted time.

Three things:

1) What is the actual market share for IE8? I keep seeing different numbers, ranging from like 1% to 20%.

because those are across different sites. Forget those numbers, what percentage of visitors to your site use IE8?

fuf posted:

2) What are people's thoughts on displaying a "You are using an outdated browser, you should update" message for IE8 users? Do you think maybe it comes across badly and annoys users?

does your boss, project manager, CEO etc feel that the potential loss of revenue from IE8 users outweighs the additional cost in developing for them?

fuf posted:

3) Bootstrap etc advocate a "mobile first" approach where you default to a one-column mobile layout and then use media queries to adjust for wider screens. But IE8 doesn't support media queries. So do you a) write a whole separate stylesheet for IE8? b) use a polyfill to get media queries working in IE8, or c) forget "mobile first" and make your default layout the one that IE8 users will see?
(I couldn't get (b) to work, so I did (a). If I was starting from scratch I think I would do (c))

I ended up using a polyfill for Foundation. No person is going to be running IE8 on mobile.

# ¿ Apr 6, 2014 17:00

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

On the subject of emails... I don't work on them at my job (actually a deliberate stipulation for me to take the job), but it seems like it has a new design for every email. Is this unusual and causing the poor soul coding the emails more work than there really should be?

# ¿ Apr 12, 2014 18:00

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

OtherworldlyInvader posted:

[/url]
I have a stupid newbie question about best practices with HTML, and this seems to be the place to ask.

I understand that versions of IE older than 9 won't display HTML5 tags such as <header>, and google is abound with methods to work around this. Using <div>'s instead seems to be the simplest and most fool-proof solution, and the FAQ in the OP indicates this is acceptable. The problem is I don't really understand what tangible benefits I'm losing by not using these tags. All the arguments I've been able to find for using them have been pretty abstract, and I don't understand why a developer would consider it worth the trade off to use them while there's still a significant number of dinosaurs running IE8.

I feel like I'm missing something here.

Semantics. I mean, why use <p> when <div> exists, right?

Also IE8 and under can display <header>, it'll just be unsure what to do with it. For that there is HTML5shiv like the OP states.

# ¿ Apr 24, 2014 22: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!

Can someone tell me what the deal is with ETags? I'd never heard of them until I used Yahoo Yslow on our site. Any Google results are either documentation for YSlow, or people like myself asking what the hell ETags are. The site I'm working on is Java based and I'm probably the worst person on our team to research this since I'm front-end.

# ¿ May 14, 2014 13:42

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

What are everyone's thoughts on hamburger menus on a mobile site? These two articles cropped up over the weekend, though they seem iOS/App focused and completely contradict themselves when you have over 5 sections.

# ¿ May 27, 2014 14:34

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

If anyone used a the select{-moz-appearance:none; text-indent: 1px;text-overflow: '';} CSS hack to style their selectboxes, it is now broken as of Firefox 30

# ¿ Jun 11, 2014 18:29

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

fletcher posted:

Is there some sort of minimalist self hosted Youtube clone I can host on my own server? I want to upload whatever the hell videos I want without worrying about Youtube taking it down or something because I sampled the wrong piece of music.

Just use the HTML5 video element.
... And forget about anything under IE9
... And convert to mp4 and webm
... And make sure your server can handle the bandwidth

# ¿ Jul 9, 2014 12: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!

Jimlit posted:

All my problems are dead and gone.

But hamburger menus are evil, and you should just do what iOS does. Sorry if you don't want it to look like an iOS app or have more than 5 items though.

# ¿ Jul 15, 2014 19: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!

cbirdsong posted:

This seems like a really dismissive way to react to all the evidence-backed discussion you linked. I still feel like a sticky hamburger menu bar at the top is the least bad one-size-fits-most solution for responsive designs, but it seems patently obvious that having all the navigation options available to users visible instead of hidden would be preferable.

Again, say your site has more than 5 'sections' what do you do then?

Heskie posted:

That's an interesting article, I'd noticed that Facebook had ditched the 'hamburger'...

But they didn't though, they just moved it to the bottom right and called it 'more'.

# ¿ Jul 15, 2014 20:12

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

cbirdsong posted:

Is it not obvious that this is more significant than a simply rearranging things? Four things you can do are immediately accessible and visible, and lead you straight to something labeled "More" where you can find the rest of the stuff you can do. This is a lot more clear about the options available than when everything is hidden behind a single unlabeled icon. It's much harder to elegantly implement this on a web site, but that doesn't mean it isn't easier for users.

but those other things aren't front and center in the users face and are instead hidden behind a scary button so they'll never find them :ohdear:

# ¿ Jul 15, 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!

What are everyone's thoughts on responsive design? As of a few years ago, numerous articles came out saying your website needs to be responsive. It seems once enough websites did that, now a trend in articles is about how you should not make your site responsive. What gives?

# ¿ Jul 28, 2014 12:52

Adbot: ADBOT LOVES YOU

# ¿ Apr 27, 2024 10:18

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:

Ummm can you post some of these articles saying not to make a responsive site? Are they offering a different solution for mobile?

Sorry, here is one I was sent last month and here is one I saw this morning.

# ¿ Jul 28, 2014 13:40

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

«‹›6 »