Join 3,497 readers in helping fund MetaFilter (Hide)


Resources for blog design?
March 11, 2012 5:27 PM   Subscribe

What do I need to learn in order to make fancy article layouts on the web?

I'd like to start a blog for my short pieces of writing. There won't be any unifying topic and in fact I'm really interested in differentiating pieces through the layout of text and incorporation of graphic elements. Jason Santa Maria's Candygram series and Dustin Curtis's articles are good examples of the kind of thing I'd like to be able to do.

But these are mostly single page posts--I think I want each of my posts to flow on the same page (in typical blog format). I'm liking what Apple did to kind of fake page breaks on their iPad 3 features page and what Panic does with their letterhead backgrounds. The interface and flow of the Edits Quarterly site is incredible too but I'm guessing that kind of coding is way beyond me.

So: where do I start / what service should I use / what web skills are necessary to achieve these kind of flexible layouts in a blog? I get that this question is sort of "how do I learn to do web design" but maybe there is a more targeted path I can take since I *think* what I'm trying to do is relatively specific. Thanks in advance!
posted by Cortes to Computers & Internet (9 answers total) 22 users marked this as a favorite
 
You only really need a good grip on CSS, and HTML to do those. You'll probably want a CMS as well. Something like WordPress with a plugin like this, would work, but you need to concentrate on CSS and HTML first.

It might help to know where your current skills are at.
posted by backwards guitar at 5:58 PM on March 11, 2012


I've done a few CSS tutorials but I'm pretty much a complete beginner.
posted by Cortes at 6:07 PM on March 11, 2012


Pay attention to Jason Santa Maria's css. Do not steal it - learn from it.

Make sure you have a good grasp of the float property.

Don't be afraid of messing up. You will learn tons from wonky html and css.
posted by fluffy battle kitten at 6:31 PM on March 11, 2012 [1 favorite]


Get Firebug and use it to inspect the CSS and HTML behind the pages you admire. Firebug lets you see what a page would look like if you removed a specific line of code, which can help you discover what the code does. See if you can figure out what pieces of the CSS are responsible for the effects you like; then see if you can re-create those effects.

Go one piece at a time and try not to get too frustrated if you can't make your entire vision materialize right away. Pick one element of the layout to work on, such as the "fake page breaks" you mention on the iPad features page, and see if you can build something that looks crappy otherwise but has the fake page breaks. Then extend yourself to the next thing, and the next.

Do you have any background in graphic design? The examples you pointed to make significant use of graphics in their layouts. Do you have a way to create the graphics you want?
posted by Orinda at 6:43 PM on March 11, 2012


CSS Tricks is my go to reference. You could learn a lot going through his screencasts.

Net Tuts is another useful resource.

If you want to pay for training, something like TreeHouse might be worth looking at.

For me, the best way to learn is to see how it was done on the sites you listed, and copy. Watch the screencast on CSS Tricks on Firebug for a better idea of how to do that. I'd recommend learning Firebug very early on.
posted by backwards guitar at 6:45 PM on March 11, 2012


Do you have any background in graphic design?
Yeah, I have a fair amount of graphic design experience. Just never got around to the web side of things.

Thanks everyone, these links look very helpful!
posted by Cortes at 8:02 PM on March 11, 2012


I wrote a bit about this not too long ago, a bit more from the CMS side of things (something like Stacey has unique characteristics that support this style of writing & styling), but it might be helpful to know that some of those people that do that have decided that all the custom work for each article becomes a big reason to procrastinate, so they've moved to simpler setups. :-)
posted by circular at 8:24 PM on March 11, 2012


And some of the people that use simpler setups get bored.

I will say the Edits Quarterly site isn't as complex as it looks. Mostly is jquery stuff. If you set your heart on a design like that it wouldn't be impossible to deconstruct. I looked at his source code and it doesn't seem to have tons of custom scripting or anything. I liked the site a lot. Bookmarked it.

I'll be returning to take a look at his CSS, but I can't imagine he's too far out there with that either.
posted by cjorgensen at 9:03 PM on March 11, 2012


Learn jQuery in 30 Days is a nice set of video tutorials on jQuery. I'd highly recommend a strong grasp on CSS before you tackle jQuery - since the selectors it uses are all based on CSS.
posted by backwards guitar at 5:54 AM on March 12, 2012


« Older What are some good memoirs/sto...   |  Moving out of my parents house... Newer »
This thread is closed to new comments.