The Web Design Critique Thread

The Something Awful Forums > The Finer Arts > Creative Convention > The Web Design Critique Thread

pipes!: Jul 10, 2001; Nap Ghost

It's actually really loving difficult to "get" the separation between content and form for web design when first starting out, and the move towards responsive designs definitely ups the complexity. I try to keep tabs on "beginners guide"-type sites, since they tend move closer to the pace of the industry than printed books. I quite like this site for starters:

http://learn.shayhowe.com/html-css/

Followed by using the Mozilla Developer Network (MDN) as a reference (for faster searching use a Google search string like "mdn div tag" or the like):
https://developer.mozilla.org/en-US/

I'd shy away from using W3Schools as a reference, even though they're usually the first search result, because a lot of the information is contradictory, buried, out-of-date, or just simply presented counter-intuitively (plus a lot of spammy, sketchy SEO practices).

If you really do want to peruse web design/development, I'm echoing what people are recommending here: start from scratch, keep at it, and read everything you can get your hands on. It's actually a pretty good time to start, as a lot of the technologies that build the web have normalized, and there are now best practices out there that you can refer to to ensure at least a modicum of compatibility.

# ¿ Aug 30, 2013 15:14

Adbot: ADBOT LOVES YOU

# ¿ May 17, 2024 17:35

pipes!: Jul 10, 2001; Nap Ghost

Mewnie posted:

I'm getting into HTML at school and this is really how it's done? I find it really hard to read and when coding it just looks really messy to me
Maybe I'm broken, but I've formatted it like so:
code:
a	{ example: test;
	 size: #; }
Using tabbing to keep things seperated and easier for me to read. Unless having tabs like that is bad. I know semantics is being heavily stressed in class.

Xoidanor's sample is probably the most common style you'll come across on tutorials, etc. What you prefer looks really weird to me personally, but unless you're writing something that someone else has to work with, do whatever works best for you, especially if it's CSS that's going to get minimized before deployment anyways. For example, the house style I've developed over time is along the lines of:

code:

.apricot, 
.elderberry 
{
    box:          value;

    border:       value;

    background:   value;

    text:         value;

    other:        value
}

With relevant attributes listed in each "section" in alphabetical order, i.e.:

code:

/* I am a button used for ordering lard via cannon */
.button
{
    display:          block;
    float:            right;    /* A note about why I did this, if it's weird */
    height:           60px
    width:            100px

    border:           1px solid red;
    border-radius:    12px;

    background:       pink url('../images/foo.png') no-repeat center center;
    box-shadow:       0px 3px 3px 0px #000;

    color:            white;
    font-weight       bold;

    cursor:           pointer;
}

A little more upfront work, yes, but I find it helps you build more discrete, modular blocks of page elements, and then quickly get the gist of and edit them down the line. Also remember to comment liberally! I don't know about you, but I can barely even remember what I had for lunch two days ago, much less the innermost secrets of a two year old site.

pipes! fucked around with this message at 23:54 on Sep 3, 2013

# ¿ Sep 3, 2013 23:35

pipes!: Jul 10, 2001; Nap Ghost

Lumpy posted:

So another design tip: bookmark everything! I now have a nice nested folder structure for design and development and I bookmark the bejesus of everything I find useful, because invariably, if I don't, I want to read it again and can't find it.

Pinboard is fantastic for this. Daily reads, converter resources, reference material gets bookmarks, theory and design ephemera gets rigorously tagged and saved externally. It's saved my bacon more times than I can count, and also keeps your bookmarks streamlined for daily use.

# ¿ Sep 14, 2013 18:05

pipes!: Jul 10, 2001; Nap Ghost

Here is a nice post about the "Dribbblisation of design", discussing both how echo chambers are dangerous places, and it tends to produce things that look pretty, but don't function well:
http://insideintercom.io/the-dribbblisation-of-design/

# ¿ Sep 25, 2013 19:51

pipes!: Jul 10, 2001; Nap Ghost

Lumpy posted:

I think you meant: "..which it will be, as soon as IE11 rolls out, and it's widely adopted, which will be several years later."

I don't know what's worse: a seven or so year wait for mass-adoption, or the gigantic pile of crappy polyfill js hacks that will be created to get it working in the interim.

# ¿ Sep 26, 2013 22:19

pipes!: Jul 10, 2001; Nap Ghost

RobertKerans posted:

I used it in production for 2 sites that went up several months ago, with zero complaints: audience for both is rich and youngish and trendy, and 99% of the traffic is from some combination of tablets/modern browsers/macs, and autoprefixer sorts out IE10. It is excellent, if unusable for more general use.

http://grooveshark.com/s/Man+Of+La+Mancha+The+Impossible+Dream/2pSWFR?src=5

# ¿ Oct 1, 2013 16:59

Adbot: ADBOT LOVES YOU

# ¿ May 17, 2024 17:35

pipes!: Jul 10, 2001; Nap Ghost

Man_of_Teflon posted:

Take the number of words you have on that site, and halve it. Then halve it again. People will never read that much about a juicer, much less things they actually passionately care about.

# ¿ Nov 13, 2013 20:54

The Something Awful Forums > The Finer Arts > Creative Convention > The Web Design Critique Thread