The Web Design & Development Megathread

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

«‹›361 »

Kobayashi: Aug 13, 2004; by Nyc_Tattoo

Munkeymon posted:

Do you guys set this on your new work?
code:
<meta name="viewport" content="user-scalable=no, width=device-width" />

Set viewport yes, disable scaling no, unless you have a really, really good reason to.

# ? Aug 20, 2013 23:40

Adbot: ADBOT LOVES YOU

# ? May 8, 2024 15:08

lunar detritus: May 6, 2009

Munkeymon posted:

Do you guys set this on your new work?
code:
<meta name="viewport" content="user-scalable=no, width=device-width" />

Only if it's actually responsive, 'width=device-width" does weird things if the layout can't adjust to the device's width.

# ? Aug 20, 2013 23:47

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

Munkeymon posted:

Do you guys set this on your new work?
code:
<meta name="viewport" content="user-scalable=no, width=device-width" />

No, because users should be able to zoom.

I use: <meta name="viewport" content="width=device-width, initial-scale=1">

# ? Aug 21, 2013 00:17

kedo: Nov 27, 2007

Winter is Cuming posted:

Charge more. The full $1000. Welcome to freelance. And beer money.

Basically, you're gonna want:

Project summary

Project features

Timeline for completion

Payment schedule and terms

Make it look nice, no lovely Times New Roman or anything. Other than that, you're set.

Even though this is more of a development gig, consider cribbing some terms from the AIGA standard agreement. Not the whole thing because it's insane, but the most important bits. Include a cover letter (just a normal letter template), and then have the rest be pretty basic headlines + paragraphs. And like Winter said, pretty it up a bit. Make sure the budget is obvious too... have a total + terms page.

Be extremely specific with your project summary and features, mostly the features. Project creep will kill you, especially if you're going to be answering to any sort of committee which seems likely if you're dealing with the university. Specify when and how your involvement with the project ends, but do it in a nice way (eg. "Includes 10 post delivery maintenance" is a killer, just make sure you build it into your budget).

Also yes, charge the full $1000, but if you're serious about freelancing in the future you need to figure out your rate (use this calculator and add what you feel is a comfortable % on the top) and then begin estimating hours for projects and then hopefully tracking them.

And that's basically my Freelancing 101.

In fact, I'm going to put my template up somewhere... you can steal it, I really don't mind. Let me find that thing.

kedo fucked around with this message at 02:01 on Aug 21, 2013

# ? Aug 21, 2013 01:35

Turkeybone: Dec 9, 2006

Great, thanks for all the help folks! I came back to school to finish my degree (used to work in kitchens) so the notion of charging $1000 for probably a weekend of sitting on my butt (roughly, I know there's a lot more to it than just the actual coding) blows my mind -- I literally have no concept what's appropriate. I'm really comfortable with business writing in general, just not what specifically should go into a proposal, so this is all EXTREMELY helpful.

# ? Aug 21, 2013 01:52

kedo: Nov 27, 2007

No worries... and I'm actually not going to put one of my unsantized proposals online... it contains way too much crap that doesn't make sense for you. :P But my terms is more or less what I described and that's the most important bit. Good contracts build good projects just like good fences build good neighbors.

e: Also, this is a really great read about what you can charge for freelancing, since you seem so blown away by it. Don't give your time away so cheaply!

kedo fucked around with this message at 02:05 on Aug 21, 2013

# ? Aug 21, 2013 01:54

tarepanda: Mar 26, 2011; Living the Dream

Turkeybone posted:

Great, thanks for all the help folks! I came back to school to finish my degree (used to work in kitchens) so the notion of charging $1000 for probably a weekend of sitting on my butt (roughly, I know there's a lot more to it than just the actual coding) blows my mind -- I literally have no concept what's appropriate. I'm really comfortable with business writing in general, just not what specifically should go into a proposal, so this is all EXTREMELY helpful.

The problem is that it may not just be a weekend -- you might run into problems/bugs/other demands. $1000 for 16 hours is great, $1000 for 32 hours is still nice, $1000 for 64 is pushing it.

# ? Aug 21, 2013 02:33

Boner Slam: May 9, 2005

kedo posted:

I want to know about this project.

If it includes personal data (also data which might make a person identifyable, which I don't want to rule out), I can not upload it to an unsafe place - which is already the case if the country does not have the same data protection standards (USA). This would literally be a crime here in Germany.

# ? Aug 21, 2013 09:54

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

kedo posted:

No worries... and I'm actually not going to put one of my unsantized proposals online... it contains way too much crap that doesn't make sense for you. :P But my terms is more or less what I described and that's the most important bit. Good contracts build good projects just like good fences build good neighbors.

e: Also, this is a really great read about what you can charge for freelancing, since you seem so blown away by it. Don't give your time away so cheaply!

The CEO of Freshbooks wrote a book about pricing your work / time, that is worth a read: http://www.freshbooks.com/blog/2013/06/12/breakingthetimebarrier/

The gist is don't think "My time is worth $X an hour", think "The thing I am making is will provide $Y in value to the client, so what is *that* worth to them?"

# ? Aug 21, 2013 14:48

pipes!: Jul 10, 2001; Nap Ghost

If I may, I'd also like to plug our very own thread:
http://forums.somethingawful.com/showthread.php?threadid=3468091

But yes, charge for your time. You're performing a service.

# ? Aug 21, 2013 19:19

kedo: Nov 27, 2007

Boner Slam posted:

If it includes personal data (also data which might make a person identifyable, which I don't want to rule out), I can not upload it to an unsafe place - which is already the case if the country does not have the same data protection standards (USA). This would literally be a crime here in Germany.

That's not nearly as interesting as I was hoping it would be.

cbirdsong posted:

I do this:
code:
$('a[href^="tel"]').click(function(event){
	if( /Android|webOS|iPhone|iPod|iPad|Blackberry|Windows Phone|Opera Mobi|Opera Mini|Symbian|Fennec|Nokia|Skyfire/i.test(navigator.userAgent) ) {
	}
	else {
		event.preventDefault();
	}
});
I suppose I could do something with Modernizr's 'touch' class instead, but that seems like a sidegrade at best. I'd love to hear about a better way.

By the way delayed thanks for this. Sadly I think you've confirmed my suspicions that there's no real way to detect tel: support... guess I'll just hide the link unless it's a touch user.

# ? Aug 21, 2013 19:29

Scaramouche: Mar 26, 2001; SPACE FACE! SPACE FACE!

Probably a bit basic for most of us but I came across this neat little site:
http://webflow.com

Basically a web based layout/design tool. Might be useful for fast prototyping.

# ? Aug 21, 2013 19:42

leftist heap: Feb 28, 2013; Fun Shoe

How on earth do people keep their Angular apps from turning into directive soup? Or should they? Is directive soup better than the alternatives? Some of my templates are getting a bit ridiculous with the amount of directives attached to certain elements, between the built-in Angular directives needed to do anything useful (ng-model, ng-required, ng-show, ng-class and things like that) to the growing list of custom directives I use to provide application specific behaviour.

I'd love it if Angular had a simple mechanism to extend directives or some sort of mixin style system. For example, I have a directive (ng-clear-when) that clears an input and its model value when a scope expression evaluates to true, but for almost every input this expression is just the opposite of whatever expression is used in the ng-required attribute, so I have a ton of elements that look like this:

code:

<input type="text" ng-model="myModel" ng-required="someCondition" ng-clear-when="!someCondition"/>

When really it'd be nice to have something like this...

code:

<input type="text" ng-depends-on="someCondition"/>

...which would provide the behavior of both directives, but to achieve that I'd essentially have to rewrite ngModel, which ain't gonna happen. The soup gets worse when you take into account the absolutely asinine way Angular handles validation...

code:

<input type="text" name="myName" ng-model="myModel" ng-required="someCondition" ng-clear-when="!someCondition"/>
<span ng-show="someForm.myName.$error.required">This field is required</span>

Now my input needs a name attribute for no good reason (since Angular doesn't actually submit forms, just model objects) AND to be nested in a form (again, for no reason since Angular doesn't actually use forms) AND I need to drill down into a bizarro parallel error holder (whose structure might be entirely different from my model objects since it relies on the name attribute) to get at my validation errors. What I REALLY want is something like this:

code:

<input type="text ng-model="myModel" ng-depends-on="someCondition"/>
<span ng-show="myModel.$error.required">This field is required</span>

But I really don't see a way for that to happen beyond flat-out rewriting whole swathes of built-in directives.

# ? Aug 21, 2013 20:11

silentpenguins: May 9, 2013; Abysswalking

Lately, I've been working on integrating videoJS into our video service because one of our clients has some people that still use IE9. IE9 apparently has significant issues with videoJS that were causing essentially the same problem as our previous player. I've done a significant amount of trying to figure out what the hell is wrong with it, trying all sorts of solutions from stack overflow and the videojs help site.

Today on a whim I changed the src's from http to https, and it made it work in IE9 while breaking it in every other browser. Ended up with an if statement that gives the correct sources if not in IE9.

This really, really baffles me because the other client videos I tested with work fine in IE9 and every other browser without this hack. I'm thinking it's an encoding issue or something server side. At least I have working code now, though. Opened up a ticket with the people in charge of the servers hoping to come to a better resolution.

Sorry if this is the wrong thread, just wanted to vent.

# ? Aug 21, 2013 20:11

kedo: Nov 27, 2007

Are you using an absolute or relative path for the video? I've had that issue before (not with videoJS specifically, but with video in IE9 generally), and using an absolute path fixed it.

Otherwise: Internet Explorer :argh:

# ? Aug 21, 2013 20:46

Mrs. Wynand: Nov 23, 2002; DLT 4EVA

Munkeymon posted:

Decorators can't contain script nodes because they can live ~anywhere on the web~, but their examples show decorators that contain templates which can contain script and the quote above seems to treat them as interchangeable There needs to be a way to get people fired from the W3C. Or killed. I'm good with either

To be fair, the WHATWG does actually listen to input and you can get involved in the clusterfuck to prevent it from going further. But who got time for that. It's just this penchant for plain weirdnes that just can't figure out. What sort of diseased mind comes up with the box model and floats and then decides to fix it using ASCII art diagrams instead of something like a constraint system that defines element layout in terms of their relationship with eachother and guide-rules like pretty much everything else on earth does.

# ? Aug 21, 2013 22:11

silentpenguins: May 9, 2013; Abysswalking

kedo posted:

Are you using an absolute or relative path for the video? I've had that issue before (not with videoJS specifically, but with video in IE9 generally), and using an absolute path fixed it.

Otherwise: Internet Explorer

Tried absolute, saw that suggested a lot. Video's on a CDN so I can't really try relative.

# ? Aug 21, 2013 22:37

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

Mr. Wynand posted:

To be fair, the WHATWG does actually listen to input and you can get involved in the clusterfuck to prevent it from going further. But who got time for that. It's just this penchant for plain weirdnes that just can't figure out. What sort of diseased mind comes up with the box model and floats and then decides to fix it using ASCII art diagrams instead of something like a constraint system that defines element layout in terms of their relationship with eachother and guide-rules like pretty much everything else on earth does.

I learned the other day that <input> and <button> use border-box while everything else is content-box, then finally realized why setting a pixel width resulted in differently sized <div>s than <input>s. I hung my head and sighed at the W3C (and bitched loudly to anyone who would listen).

# ? Aug 22, 2013 00:04

hedgecore: May 2, 2004

RE: Vertical centering discussion on the last page, I just came across this today:

http://coding.smashingmagazine.com/2013/08/09/absolute-horizontal-vertical-centering-css/

Will be trying this next time it comes up.

JSFiddle demo: http://jsfiddle.net/mBBJM/1/

# ? Aug 22, 2013 01:48

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

Quick question - I'm using jQuery .toggle to show/hide divs based on their class as part of a filter and I've come onto a stumbling block on alphabetical filtering because the divs are assigned a single letter class but the page design has the filters covering a range like A-B and J-L.

The code I have at the moment is

code:

$(document).ready(function(){
	$("a").click(function(){
		var id = $(this).attr( 'id' );
		$("." + id).toggle(200);
		$(this).toggleClass("filterinactive");
	});
});

The alphabetical class is being assigned by PHP pulling a substr of a filename.

I'm completely brainfarting on whether there's a way that isn't like 25 ifs and an else to conglomerate the alphabetical categories and whether it would be better to handle it during the PHP substr or in the jQuery. The categories are kind of arbitrary because the designer was trying to split the actual content evenly across the alphabet so it's A-B, C, D-H, J-L, M, N-R, S and T-Y.

# ? Aug 22, 2013 05:26

daggerdragon: Jan 22, 2006; My titan engine can kick your titan engine's ass.

Ghostlight posted:

Quick question - I'm using jQuery .toggle to show/hide divs based on their class as part of a filter and I've come onto a stumbling block on alphabetical filtering because the divs are assigned a single letter class but the page design has the filters covering a range like A-B and J-L.

The code I have at the moment is
code:
$(document).ready(function(){
	$("a").click(function(){
		var id = $(this).attr( 'id' );
		$("." + id).toggle(200);
		$(this).toggleClass("filterinactive");
	});
});
The alphabetical class is being assigned by PHP pulling a substr of a filename.

I'm completely brainfarting on whether there's a way that isn't like 25 ifs and an else to conglomerate the alphabetical categories and whether it would be better to handle it during the PHP substr or in the jQuery. The categories are kind of arbitrary because the designer was trying to split the actual content evenly across the alphabet so it's A-B, C, D-H, J-L, M, N-R, S and T-Y.

Switch?

code:

switch (id)
{
    case 'a':
    case 'b':    $do_ab;    break;
    case 'c':
    case 'd':    $do_cd;    break;
    case etc...
}

# ? Aug 22, 2013 06:33

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

Ghostlight posted:

I'm completely brainfarting on whether there's a way that isn't like 25 ifs and an else to conglomerate the alphabetical categories and whether it would be better to handle it during the PHP substr or in the jQuery. The categories are kind of arbitrary because the designer was trying to split the actual content evenly across the alphabet so it's A-B, C, D-H, J-L, M, N-R, S and T-Y.

Hmm. Maybe a regular expression? Then you could check for a range of letters (e.g. [a-h]):

XML code:

<a href="#" id="a-h">Filter A-H</a>

JavaScript code:

$('a').on('click', function(e) {
	e.preventDefault();

	var letterRange = this.id;

	$('div').filter(function() {
		return this.className.match(new RegExp('\\b[' + letterRange + ']\\b'));
	}).toggle(200);

	$(this).toggleClass('filterinactive');
});

You also use something like that to separate them into A-B, D-H etc. groups on the PHP side, then assign them classes based on their group. In that case, the selector would be something really simple like:

JavaScript code:

	$('.a-h').toggle(200);

Less processing on the client side but more changes on the backend.

# ? Aug 22, 2013 06:54

Boner Slam: May 9, 2005

kedo posted:

That's not nearly as interesting as I was hoping it would be.

.. but then of course the project itself is a top secret Illuminati machinery, used to control the entire population of the Baltic countries to produce, ultimately, the largest IKEA "Lack" table ever built.

# ? Aug 22, 2013 14:09

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

Boner Slam posted:

.. but then of course the project itself is a top secret Illuminati machinery, used to control the entire population of the Baltic countries to produce, ultimately, the largest IKEA "Lack" table ever built.

You're working on that too?

Oh god.. I've said too much

# ? Aug 22, 2013 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!

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

cbirdsong: Sep 8, 2004; Commodore of the Apocalypso; Lipstick Apathy

In that particular case, you could set the line-height on .footer-info to the same pixel height you're scaling the images to, though "stay in touch via" would not gracefully go to two lines if the site is responsive.

# ? Aug 22, 2013 16:00

leftist heap: Feb 28, 2013; Fun Shoe

Is this where we bitch about stupid clients? Just got feedback from a client:

quote:

User X is having the following error in IE8:

"In IE8 I get the following error message �Geolocation is unsupported by your browser or device�."

# ? Aug 22, 2013 21:30

kedo: Nov 27, 2007

rrrrrrrrrrrt posted:

Is this where we bitch about stupid clients? Just got feedback from a client:

1) Use modernizr
2) Hide that poo poo from no-geolocation users
3) ???
4) Recycle an old joke

# ? Aug 22, 2013 21:32

leftist heap: Feb 28, 2013; Fun Shoe

They specifically requested for it NOT to be hidden.

# ? Aug 22, 2013 21:35

silentpenguins: May 9, 2013; Abysswalking

In case anyone was wondering, that IE9 video got solved when I asked them to re-encode the video. I'm gonna go drink now.

# ? Aug 22, 2013 21:49

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

silentpenguins posted:

In case anyone was wondering, that IE9 video got solved when I asked them to re-encode the video. I'm gonna go drink now.

Best practices indicate to start drinking *before* dealing with IE-specific behaviors.

# ? Aug 22, 2013 22:03

Sil: Jan 4, 2007

Is there a specific term for blog themes/site skins that don't use images? I googled 'imageless theme' and 'font only theme' and nothing really came up, I'm not sure how to even phrase it for the search engine.

The client for the site I'm working on isn't interested in uploading stock images with every post, which leaves me stuck for inspiration(ie. themes to copy from people with actual talent) since everything I see out there is full of carousels and image banners for every blog post.

I apologize if there's an obvious answer that I'm missing(it feels like there must be). At this point I'm looking to have it look mostly like Google or Twitter's blogs, since it's a boring tiny business app anyway.

# ? Aug 22, 2013 22:44

kedo: Nov 27, 2007

rrrrrrrrrrrt posted:

They specifically requested for it NOT to be hidden.

Your client is an irreparable idiot. You may as well take them out back and put them out of their misery.

# ? Aug 22, 2013 22:44

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

Lumpy posted:

Best practices indicate to start drinking *before* dealing with IE-specific behaviors.

http://xkcd.com/323/

It's like getting drunk to remember what you did when you were blacked out.

EDIT:

Sil posted:

Is there a specific term for blog themes/site skins that don't use images? I googled 'imageless theme' and 'font only theme' and nothing really came up, I'm not sure how to even phrase it for the search engine.

Try looking for "clean" or "minimalist".

Bognar fucked around with this message at 22:50 on Aug 22, 2013

# ? Aug 22, 2013 22:48

kedo: Nov 27, 2007

Generally speaking in ya'lls experience, how reliable is geolocation data for people on traditional internet connections (ie. everything that's not going through a cell tower)? I have a "find the nearest location" function on a site I'm building and am wondering if I should hide it for no-touch users.

I ask because on my work connection instead of finding my actual location it just plops me right in the middle of DC, and at home it plops me up in Maryland somewhere. Granted both are business accounts with static IPs and other weird stuff that most normal users won't need to worry about, so not sure how much that has to do with it.

# ? Aug 22, 2013 22:54

Sil: Jan 4, 2007

Bognar posted:

EDIT:

Try looking for "clean" or "minimalist".

D'oh! Thank you, exactly what I was looking for.

# ? Aug 22, 2013 23:00

leftist heap: Feb 28, 2013; Fun Shoe

kedo posted:

Your client is an irreparable idiot. You may as well take them out back and put them out of their misery.

I would love, love, love, love LOVE nothing more right now. This is a client that asked for a mobile webapp that worked on "modern" mobile devices, all but insisted on AngularJS, and is now upset that it doesn't work right on BlackBerry 5.

# ? Aug 22, 2013 23:59

substitute: Aug 30, 2003; you for my mum

Sil posted:

Is there a specific term for blog themes/site skins that don't use images? I googled 'imageless theme' and 'font only theme' and nothing really came up, I'm not sure how to even phrase it for the search engine.

The client for the site I'm working on isn't interested in uploading stock images with every post, which leaves me stuck for inspiration(ie. themes to copy from people with actual talent) since everything I see out there is full of carousels and image banners for every blog post.

I apologize if there's an obvious answer that I'm missing(it feels like there must be). At this point I'm looking to have it look mostly like Google or Twitter's blogs, since it's a boring tiny business app anyway.

Try using "typography" as a keyword.

http://www.thebestdesigns.com/design/gallery/typography/

http://stylesinspiration.com/category/typography/

substitute fucked around with this message at 00:30 on Aug 23, 2013

# ? Aug 23, 2013 00:27

Scaramouche: Mar 26, 2001; SPACE FACE! SPACE FACE!

kedo posted:

Generally speaking in ya'lls experience, how reliable is geolocation data for people on traditional internet connections (ie. everything that's not going through a cell tower)? I have a "find the nearest location" function on a site I'm building and am wondering if I should hide it for no-touch users.

I ask because on my work connection instead of finding my actual location it just plops me right in the middle of DC, and at home it plops me up in Maryland somewhere. Granted both are business accounts with static IPs and other weird stuff that most normal users won't need to worry about, so not sure how much that has to do with it.

I don't find it super reliable to tell the truth. Depending how you're doing it (e.g. simple WHOIS) you're only going to get the registered block for the owner. So in the case of the mega bigs it's not that useful. For example, roadrunner/comcast/aol/etc. will generally show either their corporate headquarters, or maybe their NOC the next state/city over if you're lucky.

For everyone else, I had a question:
Have any of you dabbled with rich data snippets and/or Google Highlighting? I've just implemented both on an ecommerce site and it's kinda... neat? The problem being I have no idea what it will actually accomplish. For product pages I've communicating product name, image, url, price, stock, and review ratings where applicable. For informational/article pages I'm communicating title, url, author, date published, etc. I've even put in breadcrumb rich snippets for site navigation. The impression I get is that this will have almost no effect whatsoever except on how the actual organic Google result is displayed, if Google decides to use the information. Has anyone here implemented it and have any success/failure stories to share?

# ? Aug 23, 2013 01:01

Adbot: ADBOT LOVES YOU

# ? May 8, 2024 15:08

jusion: Jan 24, 2007

Scaramouche posted:

I don't find it super reliable to tell the truth. Depending how you're doing it (e.g. simple WHOIS) you're only going to get the registered block for the owner. So in the case of the mega bigs it's not that useful. For example, roadrunner/comcast/aol/etc. will generally show either their corporate headquarters, or maybe their NOC the next state/city over if you're lucky.

I've had the opposite experience. Using Javascript Geolocate() and then using Google Maps, or some other Lat/Long data, I'm able to fairly accurately pinpoint an area to within a mile at maximum.

# ? Aug 23, 2013 01:45

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

«‹›361 »