The Web Design & Development Megathread

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

«‹›2 »

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

Oh My Science posted:

Keep the suggestions coming! I'm taking a few days to work on the freelance and design section a bit more so stay tuned if that's all you want.

I would probably add Coda to the code editors section, and remove Textmate 1, since it's unlikely to even get bugfixes now that 2 is open source.

# ¿ Jun 18, 2013 01:23

Adbot: ADBOT LOVES YOU

# ¿ Apr 28, 2024 18:00

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

To use margin: 0 auto on an <img> tag, you have to make it a block-level element. You could also just apply text-align: center to the #logo div, or in your case, the entire body tag, not just the elements containing text.

You should also add max-width: 100% to the #logo img style, so this doesn't happen:

# ¿ Jul 23, 2013 13:46

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

Winter is Cuming posted:

http://macaw.co/peek/

gmq posted:

The beginning of the end of my job if it actually works as advertised. I guess I can always learn and go full stack.

One of our designers has been messing with Edge Reflow, Adobe's similar new tool. It seems like the code it can generate could save us a ton of time, but there's no way what it generates will be able to be used without a human fixing quirks intelligently and hooking it up to a CMS.

# ¿ Jul 24, 2013 15:11

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

Newf posted:

Why is it that everyone in web design uses hex colour codes rather than rgb? I can't believe that people find it easier to read the hex representation; is it just a convention held over from some time before rgb colours 'existed' on the web?

It's easier to copy and paste, particularly out of Photoshop:

# ¿ Aug 6, 2013 14:49

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

kedo posted:

Sadly that's for inputs, and I'm talking about these buggers: <a href="tel:1-800-YOUR-MOM">Call your mother</a> But thanks anyhow!

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.

# ¿ Aug 20, 2013 04:01

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

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

You need to be more specific in each declaration of a, like:

code:

#maincontent > a, #maincontent > a:link, #maincontent > a:visited { link stuff; }

Your code is setting the color for <a> tags that are direct children of #maincontent, and then overriding the styles for a:link and a:visited page-wide.

# ¿ Sep 26, 2013 20:08

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

mmm11105 posted:

I'm doing a small site for a friend, that he needs to be able to edit. However, all he needs to be able to do is edit the text in a few boxes and upload photos (with auto resizing, and thumbnails). What would be the best CMS? Everyone seems either too complicated (he doesn't need page management or a blog of anything of that sort), or too simple to handle the photo gallery. I'd rather not confuse him with a UI that has a million options he won't use.

If you don't mind paying a one-time fee, you might check into Perch. It lets you just define areas of the page that can be edited using a super simple backend. If he starts wanting anything fancier, though, you'll quickly outgrow it, but it's great at what it does do..

# ¿ Sep 28, 2013 18:10

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

It probably varies a bit between the browsers and OSes, but yes, once you load a site, all that stuff is stored on your computer. The browser will probably keep it in a hidden folder somewhere, and it will eventually be deleted to load new stuff or when you clear your cache. You can choose to save the image again outside that folder so it has a name and location easily understood by humans, and will never be automatically deleted by the browser.

Edit: On the responsive design issues, I'm pretty sure your media query is malformed and doesn't need that first 'and':

code:

@media (max-width: 360px) {
}

You probably also don't need the device-pixel-ratio stuff, unless you're specifically loading higher-resolution images. CSS pixels on 'retina' devices are actually points made of varying numbers of pixels (in Apple's case, a clean doubling). That way your 1080p phone doesn't have insanely tiny desktop-size sites loading in.

cbirdsong fucked around with this message at 20:55 on Oct 9, 2013

# ¿ Oct 9, 2013 20:46

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

pipes! posted:

You want a CSS reset, declared at the beginning of your external, linked CSS stylesheet before any other author-written styles. Normalize and Eric Meyer’s Reset are the current favorites, I believe, although Normalize is less a "zero out everything" approach and more one that provides sensible cross-browser considerations.

Yeah, after using both, I think I greatly prefer Normalize. Normalize is a scalpel, Eric Meyer’s Reset is a sledgehammer.

# ¿ Oct 22, 2013 20:16

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

A highly disconcerting chart:

Why are IE 7, 8 and 9 on an upswing all of a sudden? Some kind of change in how the stats are compiled?

# ¿ Oct 31, 2013 19:09

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

caiman posted:

Brackets are for targeting a certain attribute of the element, such as href, alt, etc.

As far as examples go, this is a pretty weird use of that selector, since table#Container or just #Container would do the exact same thing.

I've found this to be a pretty good overview of the weirder CSS selectors: http://coding.smashingmagazine.com/2009/08/17/taming-advanced-css-selectors/

# ¿ Nov 1, 2013 22:31

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

Is it just me, or does the ::selection pseudo element no longer work in any browser running on OS X Mavericks?

# ¿ Nov 8, 2013 18:35

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

This is a pretty solid typography guide, though you'll have to track fonts down yourself: http://practicaltypography.com

# ¿ Nov 11, 2013 22:34

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

Tatsuta Age posted:

I posted this in the wrong thread in SH/SC, and strwrsxprt suggested I post this here instead:

My work wants to get an iPad for testing how our sites look when viewed through various browsers, and we don't have a native Safari device here. We can virtualize a copy of OSX for testing the desktop version, but we're having trouble deciding what to do for the iPads.

Is there a way to make a new iPad or iPad mini display in the same version an older iPad would? Obviously there wouldn't be a pixel-perfect representation, but they'd want to test various versions of Safari, and different resolutions. Doesn't make a lot of financial sense to buy various iPad models just for testing in our case, and if they can only get the latest stuff tested, that's the direction it will have to go. I was just wondering if anyone know of ways to test "older" resolutions and versions of Safari on newer hardware.

You can run the Xcode-supplied iOS Simulator for the iPad, as mentioned, but there are basically two iPad resolutions, 1024x768 and that doubled (2048x1536). Safari presents the exact same number of pixels for both of them, so you really only have to worry about a single iPad-specific resolution. (though you have to consider both portrait and landscape mode)

# ¿ Dec 13, 2013 22:01

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

I've generally enjoyed using Font Awesome, which covers a lot of bases: http://fortawesome.github.io/Font-Awesome/

This is a pretty good icon font generator, if you have vector files to build a custom one with: http://icomoon.io/app/

# ¿ Jan 10, 2014 02:51

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

You could also tell him Windows XP is getting end of lifed in April: http://www.microsoft.com/en-us/windows/enterprise/endofsupport.aspx

# ¿ Jan 18, 2014 22:45

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

You might also consider Tumblr, if you're trying to promote yourself.

# ¿ Jan 25, 2014 20:04

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

I have no idea about that angle, all I know that Tumblr is a really popular way to share drawings/cartoons, because it makes it really easy for people to re-share stuff they like.

# ¿ Jan 25, 2014 21:41

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

LeftistMuslimObama posted:

I get the feeling that for the project I have in mind, I'll need a web front-end, a mobile app, and a database. I know HTML and CSS, and Android is Java-based, so I can make the client side of things with my existing skills. What I don't know how to do is set up a database server and make my clients talk to it. What's a good place to start reading?

I think you are confusing Java and Javascript, which are two very different things.

# ¿ Jan 27, 2014 18:39

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

Sergeant Rock posted:

I believe in IE11 the situation is even worse: emulated earlier versions don't understand Conditional Comments targeted at them. Which pretty much makes them fuckin' useless.

Thanks Microsoft.

Thansoft.

I can't really complain too much, since they're giving away VMs for every IE that matters. (at http://modern.ie if you missed it)

# ¿ Feb 10, 2014 15:12

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

iosSlider has really nice touch support: https://iosscripts.com/iosslider/

Not sure how suited it is for more than a few images, though.

# ¿ Feb 21, 2014 17:51

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

PlesantDilemma posted:

Everything I've googled up tells me that our best bet is to ditch the hover concept and go all click-based for opening menus, but I doubt the boss will like that.

Click-based dropdowns are superior even on the desktop, because everywhere else in desktop computing, hovering over something is not how interact with it, it's how you discover what you can interact with. You might get somewhere with this line of thinking.

# ¿ Feb 27, 2014 18:21

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

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))

To use Bootstrap 3 with IE8, I have a separate IE8 stylesheet that defines the width of the container class and has all the column classes BS3 keeps in media queries. (If you compile BS3 from LESS, you can use Bootstraps .make-grid-columns mixins to do this easily.) IE8 gets the widest breakpoint and only the widest breakpoint, since that's usually the easiest to support. It's not exactly elegant, but it gets the job done, and that's all I'm worried about for IE8.

# ¿ Apr 6, 2014 15:56

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

Couldn't you just do something like:

code:

.outer > * {
     display: none;
}
.outer > .inner {
     display: block;
}

Would break if .inner is nested in anything, but you could work around that.

# ¿ Apr 10, 2014 17:39

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

You could also do it this dumb way. It's the least dumb way I've found that works in all browsers back to IE8.

# ¿ May 20, 2014 23:45

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

Suspicious Dish posted:

This is cool.

It seems super-interesting, but I can't imagine shifting stuff this fundamental onto a weird Javascript dependency.

# ¿ May 21, 2014 05:33

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

fletcher posted:

Is there an easy way to simulate a slow internet connection in a web browser?

If you use a Mac, Apple has a "Network Link Conditioner" dev tool: http://nshipster.com/network-link-conditioner/

# ¿ May 21, 2014 20:35

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

I encountered that recently, and my workaround was to just have it offscreen and set to visibility: hidden, and then to manually animate it in when needed.

# ¿ May 29, 2014 19:53

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

Is this the right thread to ask what the fastest way to compile Less CSS locally on a Mac is? I currently use LiveReload, and it can take a second or three to finish recompiling after a file is saved. Are task runners like Grunt or Gulp appreciably faster?

# ¿ Jun 4, 2014 16:26

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

Kobayashi posted:

Are you trying to do something like include Bootstrap's LESS files from scratch? If so, I'd just compile those into a CSS file, then include that file in your actual app's LESS file.

If you compile the entire thing, you can change Bootstrap variables on a per-project basis, which is a much easier way to change colors than trying to override all the elements they apply to.

# ¿ Jun 4, 2014 20:11

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

Rotating a tablet between portrait and landscape is probably a real-world use case for crossing that particular width.

# ¿ Jun 18, 2014 14:42

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

I've had a reasonably okay experience with Zurb: http://zurb.com/ink/docs.php

(also, ugh, HTML emails)

# ¿ Jun 21, 2014 21:59

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

nadav posted:

Another option is respond.js, which is a bit lighter and faster: https://github.com/scottjehl/Respond

The Dave posted:

Yeah I've used respond.js with bootstrap to solve those headaches easily.

With Bootstrap, I like just creating an IE8-specific .less file and setting up the container width and all the column widths in there. That way, you only have to worry about one breakpoint working correctly in IE 8. I'm sure you could do something similar with other front-end frameworks.

# ¿ Jun 30, 2014 04:51

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

The Merkinman posted:

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.

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.

# ¿ Jul 15, 2014 19:49

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

The Merkinman posted:

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

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.

# ¿ Jul 15, 2014 20:38

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

fuf posted:

Can someone (preferably a safari user) take a look at the logo on this site and tell me if it looks blurry?
http://bespokedrywall.campbellmarsh.co.uk/
(The orange "bespoke drywall" logo on the left)
The client is insisting it's blurry but it looks fine to me.

How should I be turning a svg into a png logo? I just picked an arbitrary large size (700px wide), but is that a bad idea if it's usually going to get squashed down to like 150px wide?

It is a bit blurry, definitely.

If you know exactly how wide it will be, pick a size that is an even multiple of that. If I change this one's width to 175px (25% of 700), then the scaler can do its job much more cleanly:

Pivo posted:

I don't know why you're downloading a 700x351 image just to display it at 185x90! BAD BAD BAD Scale it first!

If you just use a 185x90 image, it will look like poo poo on retina displays.

Of course, the real best answer is using an SVG and swapping the PNG in for IE 8 and Android 2.x.

# ¿ Sep 2, 2014 16:11

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

The best way to do it is probably inserting the FA icon using CSS content properties: http://stackoverflow.com/questions/20782368/use-font-awesome-icon-as-css-content

# ¿ Sep 3, 2014 21:27

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

Yeah, if he's okay editing them by hand, you could probably just skin them with Bootstrap or Foundation and improve the look substantially.

# ¿ Sep 26, 2014 21:38

Adbot: ADBOT LOVES YOU

# ¿ Apr 28, 2024 18:00

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

fuf posted:

Does the iphone browser try and detect phone numbers on pages and make them clickable? Client is complaining that when she clicks the phone number link it doesn't work and the number is invalid, but there is no link on the phone number.

Weirdly, on the iPad, it also does this, and then usually can't do anything when you click the number, which may be what your client is seeing.

# ¿ Oct 15, 2014 15:37

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

«‹›2 »