There's a scourge that messes with poor music producers everywhere: the crappy onboard sound cards that come with Windows laptops and desktop computers. They're ultra-slow. So when you hit a note on a midi controller or whatever, it takes forever for that note to get processed by your software synths and come out the other end. And the pops, clicks, ticks etc that interrupt your sound, wrecking your concentration. So you absolutely must spend at least $300 on an external USB soundcard or something.
Except that the problem isn't the crappy soundcards themselves, it's the crappy drivers written for them. So why not just have a good driver? Well, that's what ASIO4all is: a low-latency, universal audio driver. So now you can keep your crappy onboard soundcard and use your laptop as an autotune box. Or whatever kind of pedal you want. And you can leave your expensive external extremely buggy soundbox that crashes your laptop at home. Let it gather dust.
Jan 26, 2015
Jan 24, 2015
Typographic gems from FontSquirrel's hottest fonts list
Something I love to do, both as a DJ and a designer, is to make lists from other people's lists. As a DJ, I do this by, say, taking five amazing songs from someone else's long DJ set, and remixing them into a shorter set, and making that part of one of my sets. So I might make a full-length set out of my favourites from several other sets. It's an ultrafun thing to do. Same with fonts. So when I find a new source of awesome web fonts (let's not kid myself, I've been behind the curve on web fonts, so I've basically just been going with Google Fonts), it makes me a tremendously happy designer.
Check out these gorgeous fonts from FontSquirrel's hottest fonts list (this is as of late January 2015):
Check out these gorgeous fonts from FontSquirrel's hottest fonts list (this is as of late January 2015):
Jan 17, 2015
When your links just aren't pretty enough: Fancy Underlines
Of course, links are ugly as hell. We're all sorry. If you want to do something about it, venture into the sketchy world of replacing underlines with borders on the anchor tag.
Your journey starts with a {text-decoration: none; }, which is usually the beginning of bad things. Hey, it can be fine. It can be just fine. Maybe it's something that's obviously a link and doesn't need to be underlined. A button, for example. That's great. But if it's inside a piece of text, and it's also a piece of text, you're venturing into the dark woods of anchor styling. But it's OK.
Obviously, underlines should have been styleable from the beginning. But they weren't. It must be the same colour as the text. It must be a certain width (too thick). It must be a certain distance from the text. Of course. As with many things in life, rigidity can often lead to transgression. So as with most of those things, we must be careful in how we transgress.
First I'll let you know what you can get away with, and what the limitations are: You can totally change the colour, width, and space from the text, of your wonderful new underline. You can make it dotted or dashed instead of solid. That's super cool. But there's one thing: if the link wraps to a new line, or if it's a whole paragraph that's linked, that's a problem. Only the bottom of it will have the underline. So you'll have a block of text with a line underneath it. So this is for the kind of links where you don't want them to wrap to a new line anyway. I find that there are a lot of links like that. You want the links to display as their own title, all together, the link is not terribly long, and it's better if it causes a line break before it than one in the middle. So assuming all those things are cool, here's how you do it:
a {
text-decoration: none;
border-bottom: 1px solid;
line-height: 0.9em;
display: inline-block;
white-space: nowrap;
}
That's it. Change the colour of the underline by adding a colour after "solid" in the "border-bottom" thing. Change the thickness of the line by changing the "1px" thing. Make it dotted by replacing the word "solid" with the word "dotted," or "dashed," if you want to do that. That's actually a useful thing if you've got a site with a few different kinds of links on it. Let's say, all your offsite links are dotted lines. Or all your in-site links. And users are ready to learn the difference.
You can change the distance between the underline and the word above it by changing the "0.9em" thing in the "line-height" thing.
So in terms of colour, it'll automatically match the colour of the text, so that's nice. That's convenient. But if you want to make the underline colour different from the text colour, then you're specifying an underline colour, so then you'll have to specify an underline colour for your a:visited state as well. At the very least. Don't, please, don't, just... don't make your visited links and your unvisited links identical in style. I mean, okay, fine, maybe. But generally, don't. Just find a colour that's nice. And force the element state or whatever you have to do when you're demonstrating it to your client or whoever. If they're usability-hostile. Which they probably are. But please. C'mon. Don't make people wonder where they are in a big list of things of yours that they're checking out. Like your portfolio items. I know you want as few different styles as possible. Just find a way to make them different that's good. That you like. Overthink it, if that's what you think that is, then go ahead and overthink it.
Okay, love you, have a good one...
-Dorian
Your journey starts with a {text-decoration: none; }, which is usually the beginning of bad things. Hey, it can be fine. It can be just fine. Maybe it's something that's obviously a link and doesn't need to be underlined. A button, for example. That's great. But if it's inside a piece of text, and it's also a piece of text, you're venturing into the dark woods of anchor styling. But it's OK.
Obviously, underlines should have been styleable from the beginning. But they weren't. It must be the same colour as the text. It must be a certain width (too thick). It must be a certain distance from the text. Of course. As with many things in life, rigidity can often lead to transgression. So as with most of those things, we must be careful in how we transgress.
First I'll let you know what you can get away with, and what the limitations are: You can totally change the colour, width, and space from the text, of your wonderful new underline. You can make it dotted or dashed instead of solid. That's super cool. But there's one thing: if the link wraps to a new line, or if it's a whole paragraph that's linked, that's a problem. Only the bottom of it will have the underline. So you'll have a block of text with a line underneath it. So this is for the kind of links where you don't want them to wrap to a new line anyway. I find that there are a lot of links like that. You want the links to display as their own title, all together, the link is not terribly long, and it's better if it causes a line break before it than one in the middle. So assuming all those things are cool, here's how you do it:
a {
text-decoration: none;
border-bottom: 1px solid;
line-height: 0.9em;
display: inline-block;
white-space: nowrap;
}
That's it. Change the colour of the underline by adding a colour after "solid" in the "border-bottom" thing. Change the thickness of the line by changing the "1px" thing. Make it dotted by replacing the word "solid" with the word "dotted," or "dashed," if you want to do that. That's actually a useful thing if you've got a site with a few different kinds of links on it. Let's say, all your offsite links are dotted lines. Or all your in-site links. And users are ready to learn the difference.
You can change the distance between the underline and the word above it by changing the "0.9em" thing in the "line-height" thing.
So in terms of colour, it'll automatically match the colour of the text, so that's nice. That's convenient. But if you want to make the underline colour different from the text colour, then you're specifying an underline colour, so then you'll have to specify an underline colour for your a:visited state as well. At the very least. Don't, please, don't, just... don't make your visited links and your unvisited links identical in style. I mean, okay, fine, maybe. But generally, don't. Just find a colour that's nice. And force the element state or whatever you have to do when you're demonstrating it to your client or whoever. If they're usability-hostile. Which they probably are. But please. C'mon. Don't make people wonder where they are in a big list of things of yours that they're checking out. Like your portfolio items. I know you want as few different styles as possible. Just find a way to make them different that's good. That you like. Overthink it, if that's what you think that is, then go ahead and overthink it.
Okay, love you, have a good one...
-Dorian
Remember CSS Resets? They haven't gone anywhere, but they've gotten way smaller!
Okay if you don't know what CSS resets are, I'll explain them in this paragraph, which you can skip if you do know what they are: You know how every browser under the sun has a somewhat different interpretation of how things should look? You say "make this thing go this far away from that thing" and some browsers go "ok I'll make the middle of the edge of this thing this far away from the middle of the edge of that thing" and another one goes "ok I'll make the outside of the edge this far away from the outside of the other edge" and so on. Maybe you do know, maybe you don't know, but if you're making layouts with HTML and CSS, you probably have noticed that. And you're either not required to be precise enough to have to care about it (that's awesome, you lucky, evil designer) or you do have to care (you poor, unfortunate soul). CSS resets tell every single browser to shut up about all those little variations, by neutralizing everything out, so that nothing looks like anything. Everything has no style. Which is great. It's not great if you want to not really do much in the way of CSS work, but if you want you CSS work to be what you think it's going to be, and be the same everywhere, and your boss/client/broke friend to be happy about their site, then it's wonderful. It's totally wonderful.
The old Eric Meyer reset was massively long. It was like... you'd have to explain it to your person who pays you, type long. The "minified" version, these days, is super short. Here it is:
/* Eric Meyer's Reset CSS v2.0 - http://cssreset.com */ html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{border:0;font-size:100%;font:inherit;vertical-align:baseline;margin:0;padding:0}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:none}table{border-collapse:collapse;border-spacing:0}
So what you do with this is, you put it at the beginning of your <style> tag. Or in your first imported/linked .css file. Or, hey, as a prank, put it right at the end, or in your last import. Great prank.
So obviously, nothing has style. So you have to write in every single aspect of style that you want for every single type of element. Don't muck about in Dreamweaver with it. Don't grab your silly list of what's what, just open up your Dom Inspector (sounds kinky, I know) that's built into your web browser. You can invoke it by right-clicking on something, or on a mac it's in some developer menu, maybe hitting "inspect element" will do it, they each have their own silly word for it. But in there, somewhere, probably on the right, you'll be able to find which HTML elements you want to mess with, and you'll be able to try adding different characteristics to their CSS, and then you just copy the code back into your authoring program. Then open it up in a different browser, and see whether that evil monster interpreted things in the same way. If you need two different versions of the same code, like you do for some esoteric, not-yet-integrated selectors or whatever they're called, then go ahead. Use two or three different repetitions of the same thing. Sure, we're all supposed to be using CSS frameworks now, so none of that is necessary, and our lives are rosy and perfect and of course nothing ever goes wrong with those frameworks, so knowing anything about actual CSS is perfectly useless and embarrassing. In the magical, mystical world of proposals, and inside the minds of creative directors. There are whole universes of beautiful impossibilities locked in there along with your imaginary day. In your actual day as a web designer, this is all a total lifesaver.
Love you, have a good one!
-Dorian
The old Eric Meyer reset was massively long. It was like... you'd have to explain it to your person who pays you, type long. The "minified" version, these days, is super short. Here it is:
/* Eric Meyer's Reset CSS v2.0 - http://cssreset.com */ html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{border:0;font-size:100%;font:inherit;vertical-align:baseline;margin:0;padding:0}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:none}table{border-collapse:collapse;border-spacing:0}
So what you do with this is, you put it at the beginning of your <style> tag. Or in your first imported/linked .css file. Or, hey, as a prank, put it right at the end, or in your last import. Great prank.
So obviously, nothing has style. So you have to write in every single aspect of style that you want for every single type of element. Don't muck about in Dreamweaver with it. Don't grab your silly list of what's what, just open up your Dom Inspector (sounds kinky, I know) that's built into your web browser. You can invoke it by right-clicking on something, or on a mac it's in some developer menu, maybe hitting "inspect element" will do it, they each have their own silly word for it. But in there, somewhere, probably on the right, you'll be able to find which HTML elements you want to mess with, and you'll be able to try adding different characteristics to their CSS, and then you just copy the code back into your authoring program. Then open it up in a different browser, and see whether that evil monster interpreted things in the same way. If you need two different versions of the same code, like you do for some esoteric, not-yet-integrated selectors or whatever they're called, then go ahead. Use two or three different repetitions of the same thing. Sure, we're all supposed to be using CSS frameworks now, so none of that is necessary, and our lives are rosy and perfect and of course nothing ever goes wrong with those frameworks, so knowing anything about actual CSS is perfectly useless and embarrassing. In the magical, mystical world of proposals, and inside the minds of creative directors. There are whole universes of beautiful impossibilities locked in there along with your imaginary day. In your actual day as a web designer, this is all a total lifesaver.
Love you, have a good one!
-Dorian
Jan 11, 2015
And I'm back! Looking for new web clients.
Well, whatever it was that I needed from not doing web design for awhile, I got. And I managed to do enough stuff on my own music site, agreatwhitebird.com, that I kept my html, css and design skills up.
I'm still looking to form a little web agency with one or two partners, but I'm also looking for small business clients and part-time employment opportunities.
So let me know if you need some support with little web projects. I never did stop using the 'net, or stop having a nice computer, but I did stop using phones for awhile. And then, whatever I needed to get out of that, I got, and now I've got one again. But I don't publish the number anymore. So it's start-out-by-email, continue-by-phone type business again.
In terms of how to do usability testing on a small scale, for little projects, my plan is to agree on a group of three testers with whoever my client is, and then they can compensate them with product or whatever. The smaller the project, the shorter and more casual the testing can be. I'm not sure why it's tough to explain usability testing to clients. It's just like proofreading. You're not asking for feedback, you're not asking for editing, you're just noticing where somebody gets confused while using your site. It can be done over Skype, it can be done at the client's place of business, it can be done through email, whatever. It's not a big deal. It's just been weird not to be able to do it at all, given how much insight I've always gotten from even the quickest, simplest sessions. Five minutes of watching somebody using some site, and both my client and I are like "oh, yeah, okay, we'll just retitle that section" or "oh, those links aren't obvious enough" and you get a massively improved situation. That's the deal with that.
So I'm still not offering the whole suite of creative web services. I'm still not doing Flash, dynamic HTML, interactivity, scripting, databases, stuff like that, and I don't plan to. It's not my game. There's tons of cash in the field, and other people can have it. I'm into making web documents that users understand, and I can fit into a team of people who, together, offer the full package. But for a basic site for a little company, artist or whatever, I've got that stuff. I do HTML, CSS, web graphics, typography, and a smattering of other bits and pieces of stuff that often go along with those things, with a focus on small business consulting and usability. Looking forward to some new projects after a bit of a break.
I'm still looking to form a little web agency with one or two partners, but I'm also looking for small business clients and part-time employment opportunities.
So let me know if you need some support with little web projects. I never did stop using the 'net, or stop having a nice computer, but I did stop using phones for awhile. And then, whatever I needed to get out of that, I got, and now I've got one again. But I don't publish the number anymore. So it's start-out-by-email, continue-by-phone type business again.
In terms of how to do usability testing on a small scale, for little projects, my plan is to agree on a group of three testers with whoever my client is, and then they can compensate them with product or whatever. The smaller the project, the shorter and more casual the testing can be. I'm not sure why it's tough to explain usability testing to clients. It's just like proofreading. You're not asking for feedback, you're not asking for editing, you're just noticing where somebody gets confused while using your site. It can be done over Skype, it can be done at the client's place of business, it can be done through email, whatever. It's not a big deal. It's just been weird not to be able to do it at all, given how much insight I've always gotten from even the quickest, simplest sessions. Five minutes of watching somebody using some site, and both my client and I are like "oh, yeah, okay, we'll just retitle that section" or "oh, those links aren't obvious enough" and you get a massively improved situation. That's the deal with that.
So I'm still not offering the whole suite of creative web services. I'm still not doing Flash, dynamic HTML, interactivity, scripting, databases, stuff like that, and I don't plan to. It's not my game. There's tons of cash in the field, and other people can have it. I'm into making web documents that users understand, and I can fit into a team of people who, together, offer the full package. But for a basic site for a little company, artist or whatever, I've got that stuff. I do HTML, CSS, web graphics, typography, and a smattering of other bits and pieces of stuff that often go along with those things, with a focus on small business consulting and usability. Looking forward to some new projects after a bit of a break.
Subscribe to:
Posts (Atom)