The idea of “art directing” posts is very popular lately. It’s the idea of applying unique styling to an article on the web in the way that print designers uniquely style articles for, say, a magazine. This is more than just a trend, it’s just a good idea. In this screencast I show and example of doing this with WordPress and a specific plugin made for helping with this idea.
Links from Video:
Thanks a lot Chris, I have requested for this Tutorial and there it is, or maybe you just planned on creating this screencast :) Thanks a lot much appriciated.
I am at school right now so cant watch the screencast as soon as i get home i will watch this =]
Take care.
I am at school right now
Thank you very much for this tutorial. i am very interested in creating unique layouts for articles like in printed magazines.
I will watch it more in detail later as I downloaded it. It will be be very helpful for my project.
thanks again
Why not use an .OGV video rather than an .M4V one… you could even embed it with the HTML5 tag
well I meant… the HTML5 video tag, of course ;)
well, good idea, but it will never work in safari or ie.
at least by the time i last saw that discussion, its up to the browser maker what exactily video will support.
also to create a ogv file on a mac is painful, even more then watching, which would require vlc which seems to run out of dev—
anyway, embedding an mp4 would work better on safari as apple intends to stick with its own format, ogv good for firefox, etc. ^-^
btw. going to use free containers: how bout an mkv? nice idea for an overkill? ^-^
sorry for my long reply
One really good example of this is:
http://www.panic.com/blog/
Indeed. My personal favourite is this one:
http://www.panic.com/blog/#post-187
Also take note of the suddle effect using -transform-rotate.
been thinking about this for some time, but like yourself trying to employ it without overhauling each post with total drama.. a more subtle implementation of the same concept.. still at the drawing board on that one!
the white looks great for that post, loving the huge icons, when they decide to show up
Great screencast,
Albeit your excuses, you explained well enough for your target audience.
Tho I gotta admit I’ve been laughing pretty hard about those weird lil’ images not behaving, not to mention the huge whitespace on the bottom xD.
“Ohw… beháve !”quote…
Hi Chris,
Great vid! This is a little off subject, but I noticed that you are storing files in the root of WordPress. Example…your css folder is in the root and I think I saw your images were link to the root of wp-content. Why is this? I am fairly new to WordPress and I thought you store all your content in your specific theme folder.
Also, how should I handle documents. I hate link my documents to something like this (http://www.mysite.com/wp-content/themes/my-theme-v1/docs/mydocument.pdf). How do I clean this URL to something like (http://www.mysite.com/docs/mydocument.pdf)?
Thanks!
m
Just get a FTP program and create new folders just as you wish. Like cyberduck (if that’s what it’s called). Then you can ‘work’ on your files and folders as if you were using the finder.
Hope that helps
btw: great post. Highly appreciate your work and effort!
Awesome man, this is a world of insight into the plugin which I had installed but never understood.
Surely this would be a nightmare from a maintenance POV? Going forward, if an even modestly large site decides to change its layout, each of these custom edits would need to be rewritten or else discarded (assuming, of course, the customisations have been set up in such a way that they *can* simply be discarded).
I think that’s true to an extent… It’s definitely something you should be aware of. It’s also part of the reason that using the plugin is smart. Come my own redesign (long in the future), I’ll probably alter the plugin so that it only does it’s insertion thing on NEW posts (past a certain date), and all those old posts I used the plugin to style it stops doing the insertion. So all those old posts just revert to the standard set of CSS. As for the “reusable” CSS classes, I can just adjust those in the new theme to do what they were intended to do in this theme.
Ofcourse, like Chris suggested a bit above, it depends on the kind of edits you make.
It’s not unlikely that most smaller edits will be compatible with a future redesign, but ofcourse this depends a lot on the way you write the CSS and wether or not one has in mind that a redesign is possible.
Personally I use the plugin in such a way and write the themes in such a way that it’s probebly gonna be compatible with a future theme.
Things like absolute positioning can be a pain tho, but what I did to solve that is introduce a few variables in the Art-Direction plugin.
ie.
#post-id .post-content img.biggie { margin-top: -{{TOPPER}}pxIn which {{TOPPER}} could be replaced with “215”. In a redesign I could then change that, or maybe put it to “0” if the design it too different.
Now that I think about it, rather then doing these find&replaces in the code of the plugin, I could make a settings-page out of it, but I guess since I’m the only editor that won’t be neccecary (hint).
Thankyou for the informative screencast. Does anyone know of any more examples of this, I’d like to implement this on my site and am looking for examples of how to do it so that each post can look individual but still have a common wrapping, if that makes sense.
Great as usual. Keep up the great work!
Hi Chris, Thank you for the screencast. I have a question. I notice that when you we’re drafting the post within wordpress, you used tags like h3 for the headers and li for the list items and all. Why didn’t you put p tags for the paragraphs? In the admin area, your introductory text right below the article title is just typed without inserting them within p tags, i inspected the site in firebug and it’s magically inside p tags? how is this done..thanks again for sharing
WordPress does this “Auto P” thing where paragraphs are ultimately added to all plain blocks of text. It can be annoying and there are plugins to turn it off, but I’ve been using it so long I’m just used to it.
I loved this screencast! A couple of things though…
Rather than use
, why not just select the images that are full width with CSS?img[width="875"]Also, if we don’t want plugins (or can’t get permission to use them with clients), could we theoretically just use a custom field for each post and paste our custom CSS there? It seems so if we needed to – though not quite as user-friendly as the plugin.
Thanks again for the great screencast!
Whoops! I forgot to escape. I meant to say:
“Rather than use
<img class="full-width-image" ... />That’s a good point, rather clever. Although I do have a few images that don’t actually stretch the FULL FULL width, like one is 865 px, but I wanted to give it the same treatment being stuck to the left edge, so in that case it’s a big more flexible to have the generic class name. I love the idea though.
The thing about custom fields is, you need to output those within the loop. And to get CSS to be applied properly, it really should be in the head section. That’s where the plugin comes in, which ultimately does use Custom Fields to do the job.
To use custom fields, run another loop in the header which checks if the custom field exists for that post, and if it does, output the css into it. Just remember to put
rewind_posts()after it so as not to affect the main loop or any others you have on the page. This is the solution I came up with for a new version of my personal site which I’m launching within the next few days.
Great screencast, as usual!
I’ve been interested in the Art Direction plugin for some time, and am now feeling much more confident about diving right in.
As with the majority of your posts/screencasts, they are right on time for my learning curve. I can definitely say that I wouldn’t be pursuing a second job in web design if it wasn’t for you and this site!
Cheers,
Jacob
One of ur best screencasts. Been thinking about this a lot, more re pages than posts. On pages I went the route of custom fields which are great, but not client friendly. The plugin you found answers a lot of questions for me.
Dude! You saved my life! Thanks a lot.
Great screencast! It’s pretty ironic though, that you work on an article that explains the benefits of Safari and it can’t even load up images properly.. I’ll stick with Firefox for now, but I will use the individual article styling! Thanks!
I may not be a designer at heart, but if I ever want to look like one, I can do so thanks to you! Great screencast.
hmm…. maybe i am the only one, but what i don’t like about the plugin is the header styles.
would it not be better sticking with the rule and create an individual stylesheet for each page?
for example i used a special 404 stylesheet and a special search results sheet on a client page.
i hope the plugin will offer that possibility too in the future ^-^
(i honestly forgot why it was better to use external stylesheets, except for maintenance, but i believe there was another reason. anyhow i would not want my html be cluttered by css or js, as the plugin offers that too… but cool!)
I was really looking forward to the quick “see-ya-later-bye” at the end, maybe next time?
thnax man it’s useful .
I don’t like this idea. To me a site should have a uniform. If you make it look drastically different now and then it feels like you’ve linked to a third party.
time before i’ve no idea how to use that pretty plug-in,thanks pretty article.
cheer up.,
Nice tour of your portfolio. You got a PowerPoint I can download? J/k!
The best video casts/tutorials are when the pros take a step back and go over the basics with us.
Thanks for the RSS tip: http://jasonsantamaria.com/articles/rss/
hey chris, I’ve been following you posts for almost a year, i really appreciate it..as a newbie in web development…helped me a lot…
You rock….
\m/\m/
Nice to see a tutorial website that realizes good design. Thank you so much for everything you do to improve our creative.
Great screencast, thanks. Disappearing images seemed to be a WP Super Cache conflict with the Art Direction plugin if anyone having problems, see this support issue.
Not clear if the plugin has been patched to fix this yet though…
Sorry if this has already been commented/asked, but do you think that this kind of styling is appropriate for tutorial, informational blogs (such as this one)?
I’ve noticed that most normal tutorial, information blogs (Smashing Magazine, CSS-Tricks, Vandelay Design, etc.) All use the “standard” formatting. I was wondering if there was a reason for this. Perhaps on a tutorial site, if a new post style came with every post it would both decrease the rate of new posts, and also distract the user from the content. On the other hand, it would further motivate users to return, it would also be a great way to demonstrate new techniques. Do you have any thoughts on this?
I currently am designing a brand new blog and I always have trouble deciding on an idea. It takes me months to get one I like, and then by the time I’m done designing and coding it, I’m tired of it. So this would make a great way to side-step that problem by being able to try new things in each post.
It also seems to be roaming into the realm of unusable. Probably not this specifically, but just doing things “differently”. Obviously styling each new post a different way would not bring up a whole big usability issue, but depending on how far a designer goes with it, it could. When I design something I like to do new things, but the question that always stops me is: is this usable? Obviously, as the designer it will be usable to you, but will it be to others who have never seen it before?
Sorry for getting a little off topic, but I’m just trying to get others’ thoughts on the matter. Anyways, great post and great blog!
-iMaster
Look for the post eCommerce Considerations on this site. I used it just to do some simple stuff like CSS image replacements for the titles of different sections.
I use the plugin on this site, but this isn’t really the perfect site for it. I use it much more commonly on my personal site.
Great episode and something I probably will try to use for my site in the future. By the way, started reading the DiW book … great stuff! Job well done!
Damn dude just get to it already!
People who love to hear themselves talk should not do screencasts!
Good God man!
~kraymer
Great. I love your articles.
And I am new to web design. I am learning it.
Could you please tell where we can get good looking images? What is approach and pro and con
Thank you Buddy.
— Kiruba
IGN is blocked at the clinic I work at. Hopefully I can download when I get back to my office.