so, while i’m still completely lost on what css (cascading style sheet) has to do with waterfalls, i do know that it can make a webpage look fancier than your mom on a saturday night date with the president…which hopefully only a very select group of people can claim witness to. in the most simple terms, css is the clothing to html. where as you can dress a webpage with html, once you put on the delicate threads of css you will realize how naked you were before and never go back to those rags again. if you’re still not convinced, check out CSS Zen Garden. tell me you’re not impressed. (check out the one called “retro theater”. WHAT?!)
alright, now that you’re impressed, you obviously want to know how to do it. or you hope that you can tell your designer how to do it. well, you’re in luck, because below there are a list of links that may just tickle your fancy. from beginner to advanced, here are some good resources to get the info you need.
w3 schools - great for everyone, especially if you just want to test something out. they have a neat little tool that lets you practice things and see how they work. it reminds me of an sat prep website, except cooler. maybe.
a list apart - this place is fantastic resource in general, with articles submitted by other designers/developers/etc. who just want to help you out. if you need something that feels more personal to help you learn.
lynda - another wonderful resource for everyone, but with videos! costs money (unless you’re a txstate student, since we were recently informed we can access it for free through the library’s website) but is well worth every penny.
when it comes down to it, the things you really need in a website are what will make or break it. without (and in many cases, even with) a solid execution of these bare bones, anything else added to the site will simply be clutter. here is my list of what those basics are and how they should be:
1. layout - should be consistent from page to page, unless it makes sense not to, but in this case should only change slightly. consistency will help with…
2. navigation - also keep this as consistent as possible. nothing too flashy, but the most comprehensive it can be without losing simplicity. visitors need to focus on the content of a site, not on how to find the content.
actually, that’s about it. the rest is just nit-picky. let’s make a list for those things too.
1. nothing that flashes. this includes, but is not limited to: backgrounds, links, images, text, or THE ENTIRE WEB PAGE.
2. keep it simple. this should apply to color palette, content, image choices, etc.
3. typography. no comic sans or papyrus. pay attention to kerning/tracking and leading of everything.
4. ads and external links. don’t waste your space. if ads are necessary to keep your site running, put them in a reasonable place, otherwise you’re going to destroy your design, in which case you’re wasting your time. external links to facebook, twitter, youtube, flickr…should all be small and/or integrated into your design. not an afterthought.
5. credit the designer. this point may be debatable, but i for one like knowing who created certain websites. even if you are the designer, credit yourself somehow. don’t be shy.
houston’s free press summer fest lineup was announced this week, and one of the headliners is yeasayer, whom i saw play an outstanding live show at sxsw in 08. since i haven’t heard any of their more recent music, i decided to do some catching up, which brought me to this gem here. nerdy? yes. awesome? double yes.
from the site:
THE CODEORGAN ANALYSES THE *BODY* CONTENT OF ANY WEB PAGE AND TRANSLATES THAT CONTENT INTO MUSIC. THE CODEORGAN USES A COMPLEX ALGORITHM TO DEFINE THE KEY, SYNTH STYLE AND DRUM PATTERN MOST APPROPRIATE TO THE PAGE CONTENT.
USING THE UNIQUE SOUNDS OF BROOKLYN BASED EXPERIMENTAL ROCK BAND YEASAYER, YOU CAN NOW HAVE YOUR FAVORITE WEBSITE PLAYED BY YOUR FAVORITE BAND.
THE SAMPLES USED IN THE CREATION OF THIS MUSIC ARE FROM “O.N.E”, THE LATEST SINGLE FROM YEARSAYER’S NEW ALBUM ODDBLOOD.
this week’s list of websites revolves around site navigation. getting from point a to point b (and back to point a, and then to point c, then to point c-2, then to point q, back to point c….you get the idea). here are some sites which should make you think more about how website navigation should work, both in form and function.
aardman - the guys who brought you wallace & gromit, chicken run, the serta sheep (and countless other adorable animations) also have a pretty quirky website. who would of guessed? interactive nav bars for the win.
threadless - the main navigation is pretty standard with drop-down menus and such. it’s easy to find your way around. the best part, however, is the sorting navigation when you are actually looking at the shirts. guys, small, tees, please. thanks.
relevant magazine - nav bar is simple and easy, and it looks pretty tight. yes, i grew up in the nineties. deal with it.
adidas - here you will find that the navigation bar works differently from most websites. instead of getting a drop-down menu from hovering, you actually have to click. this is preferable in some ways, mainly because you don’t get annoying drop-down menus (coughcoughmyspacecough) getting in the way of what you actually want to see.
polaroid - despite the fact that lady gaga is crowding entirely too much of their webspace, the nav is pretty clean here, at least between most of the pages. some of the pages need more consistency, but other than that, i dig it.
“Our Father in heaven,
Reveal who you are.
Set the world right;
Do what’s best— as above, so below.
Keep us alive with three square meals.
Keep us forgiven with you and forgiving others.
Keep us safe from ourselves and the Enemy.
You’re in charge!
You can do anything you want!
You’re ablaze in beauty!”—(via popestvictor)
last week i posted a few good websites to take notes from. today i bring you a shortlist of some terrible website designs, also to take notes from. again, i’m not choosing for content (otherwise you’d see sites like twitter and fml on here), but purely for their structure (or lack thereof). some of these are even sites that i frequent.
the design blog - this is an obvious first choice. despite that “design” is in the site’s title, it’s increasingly difficult to decipher posts from ads. coincidentally, they announced yesterday that they’ve moved to designbuzz.com, and have done a considerable amount of cleanup.
myspace - it’s hard for one to admit that they still use myspace, but as a musician it’s almost necessary. they’ve been having some very annoying internal problems that have caused me to reconsider the necessity of it, but that’s more about content. about the design, well, when we all started using myspace in the beginning, it was very clean and easy to navigate. now it’s gotten so many links and add-ons and ads that it’s so hard to find your way around. i just want to change my photo! how many links to i need to click to do that??
godtube - before today i’d never actually typed that url into a browser, ever. i’d seen links to it from friends and have probably followed said links twice at most. that being said, this site isn’t terrible in the content. it really is just a christian version of youtube, just done very poorly. it looks like a simple directory website. you know, one of those you get sent to when you misspell a web address.
cats that look like hitler - does anybody expect this website to be designed well? does anyone care if it isn’t? it looks like it was made in 1998, there is way too much text, and you can only view four photos at a time…but for some reason i don’t mind…
photojojo - i’ve been to this site on occasion, but the typesetting, the colors and patterns, the horrifically-styled text…all so very unappealing. it’s like a bad cafepress site. oh hey, two sites in one! sorry photojojo.
swiss-miss mentioned pinterest in this post about a headboard. yes, i was afraid that it might just be a website about home decorating, but i am glad i checked it out. it’s a good place to get inspired. the sorting feature is nice. check it.