{"id":153301,"date":"2013-10-17T16:10:28","date_gmt":"2013-10-17T23:10:28","guid":{"rendered":"http:\/\/css-tricks.com\/?p=153301"},"modified":"2016-11-06T09:17:32","modified_gmt":"2016-11-06T16:17:32","slug":"art-directed-articles-still-good-idea","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/art-directed-articles-still-good-idea\/","title":{"rendered":"Art Directed Articles. Still a Good Idea?"},"content":{"rendered":"<p>I was recently quoted in a tweet about this and I thought it might be worth a revisit and new discussion.<\/p>\n<p><!--more--><\/p>\n<blockquote class=\"twitter-tweet\">\n<p>Re Art Direction&#10;&#10;&quot;This is more than just a trend, it&#39;s just a good idea.&quot; ~ <a href=\"https:\/\/twitter.com\/chriscoyier\" rel=\"noopener\">@chriscoyier<\/a>&#10;&#10;Still?&#10;&#10;And, is AD plugin the best way in 2013?<\/p>\n<p>&mdash; James Burgos (@JamesBurgos) <a href=\"https:\/\/twitter.com\/JamesBurgos\/statuses\/389190373203279872\" rel=\"noopener\">October 13, 2013<\/a><\/p><\/blockquote>\n<p><script async src=\"\/\/platform.twitter.com\/widgets.js\" charset=\"utf-8\"><\/script><\/p>\n<p>The idea of an &#8220;art directed article&#8221; is that it is designed specifically for the content of the article. It might share some characteristics from the parent site (it probably should), but lots of design elements change to suit the specific article. Layout, colors, type, backgrounds, images, interactions&#8230; all custom just for the article. <\/p>\n<p>Here&#8217;s a simple example on Jason Santa Maria&#8217;s blog (who has championed this idea):<\/p>\n<figure id='post-153302 media-153302' class='align-none'><img src='https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2013\/10\/art-directed-article.jpg' alt='' data-recalc-dims=\"1\" \/><figcaption>The standard article template on the left, an art-directed article on the right.<\/figcaption><\/figure>\n<h3>Was this just a trend?<\/h3>\n<p>I&#8217;m going with: yes and no. <\/p>\n<h4>Yes<\/h4>\n<ul>\n<li>I see far less of it these days then in its hayday (2009-2010). I totally jumped on the bandwagon at the time. It was fun, but I didn&#8217;t stick with it.<\/li>\n<li>There used to be two dedicated &#8220;gallery&#8221; sites dedicated to the idea: Blogazines and HeartDirected. Both offline.<\/li>\n<li>Some examples have deteriorated over time. For instance <a href=\"http:\/\/www.smashingmagazine.com\/the-death-of-the-blog-post\/\" rel=\"noopener\">this post<\/a> that is <em>about<\/em> posts like this.<\/li>\n<\/ul>\n<h4>No<\/h4>\n<ul>\n<li>The sites doing it have shifted somewhat from individuals to large organizations.<\/li>\n<li>The sites that are doing it these days are taking it to all new levels of impressiveness. See the examples section below.<\/li>\n<li>Good design is good design. If you can design a page that enhances the content, that&#8217;s a good idea that transcends a trend.<\/li>\n<\/ul>\n<h3>How do they hold up over time?<\/h3>\n<p>Let&#8217;s see if we can collect some real data. <a href=\"http:\/\/www.smashingmagazine.com\/2009\/11\/10\/20-extraordinary-blogs-unique-post-designs\/\" rel=\"noopener\">This article<\/a> lists 20 sites with art-directed posts, with two examples per site. Let&#8217;s rate how they held up in the four years since 2009. <\/p>\n<table>\n<thead>\n<tr>\n<th>Link from 2009<\/th>\n<th>Status in Oct 2013<\/th>\n<th>Status in Nov 2016<\/th>\n<\/tr>\n<\/thead>\n<tr>\n<td><a href=\"http:\/\/www.acwe.co.uk\/?p=154\" rel=\"noopener\">Avoid Contact with Eyes #1<\/a><\/td>\n<td>Same<\/td>\n<td>Gone<\/td>\n<\/tr>\n<tr>\n<td><a href=\"http:\/\/www.acwe.co.uk\/?p=142\" rel=\"noopener\">Avoid Contact with Eyes #2<\/a><\/td>\n<td>Same<\/td>\n<td>Gone<\/td>\n<\/tr>\n<tr>\n<td><a href=\"http:\/\/anidea.com\/news\/food-drink-digital-features-our-travel-marketer-tips\/\" rel=\"noopener\">An Idea #1<\/a><\/td>\n<td>Reverted to regular template<\/td>\n<td>Still there with regular template<\/td>\n<\/tr>\n<tr>\n<td><a href=\"http:\/\/anidea.com\/strategy\/charting-a-shift-from-communications-to-services\/\" rel=\"noopener\">An Idea #2<\/a><\/td>\n<td>Reverted to regular template<\/td>\n<td>Still there with regular template<\/td>\n<\/tr>\n<tr>\n<td><a href=\"http:\/\/www.thebolditalic.com\/articles\/11-the-unseen-city\" rel=\"noopener\">The Bold Italic #1<\/a><\/td>\n<td>Minor updates, mostly the same<\/td>\n<td>Redirects to Medium article<\/td>\n<\/tr>\n<tr>\n<td><a href=\"http:\/\/www.thebolditalic.com\/articles\/27-getting-trashed\" rel=\"noopener\">The Bold Italic #2<\/a><\/td>\n<td>Minor updates, mostly the same<\/td>\n<td>Gone<\/td>\n<\/tr>\n<tr>\n<td><a href=\"http:\/\/abriefmessage.com\/\" rel=\"noopener\">A Brief Message #1<\/a><\/td>\n<td>Offline<\/td>\n<td>Still Offline<\/td>\n<\/tr>\n<tr>\n<td><a href=\"http:\/\/abriefmessage.com\/2008\/03\/12\/gordon\/\" rel=\"noopener\">A Brief Message #2<\/a><\/td>\n<td>Offline<\/td>\n<td>Still Offline<\/td>\n<\/tr>\n<tr>\n<td><a href=\"http:\/\/chriscoyier.net\/2009\/10\/29\/10-years-of-simutronics\/\" rel=\"noopener\">Chris Coyier #1<\/a><\/td>\n<td>Updated and OK<\/td>\n<td>Updated (again) and (mostly) OK<\/td>\n<\/tr>\n<tr>\n<td><a href=\"http:\/\/chriscoyier.net\/2009\/11\/03\/hipsters\/\" rel=\"noopener\">Chris Coyier #2<\/a><\/td>\n<td>Not updated, little weird but mostly OK<\/td>\n<td>Not updated, little weird but mostly OK (still)<\/td>\n<\/tr>\n<tr>\n<td><a href=\"http:\/\/www.coldheat.de\/2009\/10\/alles-banane\" rel=\"noopener\">Coldheat #1<\/a><\/td>\n<td>Reverted to regular template<\/td>\n<td>Back to being art directed!<\/td>\n<\/tr>\n<tr>\n<td><a href=\"http:\/\/www.coldheat.de\/2009\/10\/the-blues-brothers\" rel=\"noopener\">Coldheat #2<\/a><\/td>\n<td>Reverted to regular template<\/td>\n<td>Back to being art directed!<\/td>\n<\/tr>\n<tr>\n<td><a href=\"http:\/\/danny-garcia.com\/articles\/full\/6_words\/\" rel=\"noopener\">Danny Garcia #1<\/a><\/td>\n<td>Offline<\/td>\n<td>Still Offline<\/td>\n<\/tr>\n<tr>\n<td><a href=\"http:\/\/danny-garcia.com\/articles\/full\/i_know_its_late_but_lets_go_surfing\/\" rel=\"noopener\">Danny Garcia #2<\/a><\/td>\n<td>Offline<\/td>\n<td>Still Offline<\/td>\n<\/tr>\n<tr>\n<td><a href=\"http:\/\/v2.desandro.com\/articles\/advice-ouroboros\/\" rel=\"noopener\">David Desandro #1<\/a><\/td>\n<td>Old link broken, article at new link is same<\/td>\n<td>Same!<\/td>\n<\/tr>\n<tr>\n<td><a href=\"http:\/\/v2.desandro.com\/articles\/granularity\" rel=\"noopener\">David Desandro #2<\/a><\/td>\n<td>Old link broken, article at new link is same<\/td>\n<td>Same!<\/td>\n<\/tr>\n<tr>\n<td><a href=\"http:\/\/dustincurtis.com\/to-fasten-your-seatbelt.html\" rel=\"noopener\">Dustin Curtis #1<\/a><\/td>\n<td>Minor updates, good shape<\/td>\n<td>Gone<\/td>\n<\/tr>\n<tr>\n<td><a href=\"http:\/\/dustincurtis.com\/how_niko_tinbergen_reverse_engineered_the_seagull.html\" rel=\"noopener\">Dustin Curtis #2<\/a><\/td>\n<td>Minor updates, good shape<\/td>\n<td>Gone<\/td>\n<\/tr>\n<tr>\n<td><a href=\"http:\/\/sports.espn.go.com\/espn\/eticket\/story?page=090618\/dchoops\" rel=\"noopener\">ESPN Outside the Line #1<\/a><\/td>\n<td>Same<\/td>\n<td>Same<\/td>\n<\/tr>\n<tr>\n<td><a href=\"http:\/\/sports.espn.go.com\/espn\/eticket\/story?page=090612\/phil\" rel=\"noopener\">ESPN Outside the Line #2<\/a><\/td>\n<td>Same<\/td>\n<td>Starts to load like it&#8217;s going to be fine, then some JavaScript whisks you away to a 404<\/td>\n<\/tr>\n<tr>\n<td><a href=\"http:\/\/gregorywood.co.uk\/journal\/\" rel=\"noopener\">Gregory Wood #1<\/a><\/td>\n<td>404<\/td>\n<td>404<\/td>\n<\/tr>\n<tr>\n<td><a href=\"http:\/\/gregorywood.co.uk\/journal\/chilli-babies\" rel=\"noopener\">Gregory Wood #2<\/a><\/td>\n<td>404<\/td>\n<td>404<\/td>\n<\/tr>\n<tr>\n<td><a href=\"http:\/\/hazardousink.com\/blog\/pride\" rel=\"noopener\">Hazardous Ink #1<\/a><\/td>\n<td>Redirect to Homepage<\/td>\n<td>Redirect to another site<\/td>\n<\/tr>\n<tr>\n<td><a href=\"http:\/\/hazardousink.com\/blog\/colds-and-overcoats\" rel=\"noopener\">Hazardous Ink #2<\/a><\/td>\n<td>Redirect to Homepage<\/td>\n<td>Redirect to another site<\/td>\n<\/tr>\n<tr>\n<td><a href=\"http:\/\/hiphopquoted.com\/gravediggaz-six-feet-deep\" rel=\"noopener\">Hip-Hop Quoted #1<\/a><\/td>\n<td>Same<\/td>\n<td>Same<\/td>\n<\/tr>\n<tr>\n<td><a href=\"http:\/\/hiphopquoted.com\/the-roots-concerto-of-the-desperado\" rel=\"noopener\">Hip-Hop Quoted #2<\/a><\/td>\n<td>Same<\/td>\n<td>Same<\/td>\n<\/tr>\n<tr>\n<td><a href=\"http:\/\/v4.jasonsantamaria.com\/articles\/royal\/\" rel=\"noopener\">Jason Santa Maria #1<\/a><\/td>\n<td>Same<\/td>\n<td>Same<\/td>\n<\/tr>\n<tr>\n<td><a href=\"http:\/\/v4.jasonsantamaria.com\/articles\/what-the-world-needs\/\" rel=\"noopener\">Jason Santa Maria #2<\/a><\/td>\n<td>Same<\/td>\n<td>Same<\/td>\n<\/tr>\n<tr>\n<td><a href=\"http:\/\/kylefiedler.com\/articles\/my-grandparents-couch\/\" rel=\"noopener\">Kyle Fiedler #1<\/a><\/td>\n<td>404<\/td>\n<td>404<\/td>\n<\/tr>\n<tr>\n<td><a href=\"http:\/\/kylefiedler.com\/articles\/choosing-typefaces\/\" rel=\"noopener\">Kyle Fiedler #2<\/a><\/td>\n<td>404<\/td>\n<td>404<\/td>\n<\/tr>\n<tr>\n<td><a href=\"http:\/\/www.pumpkin-king.com\/index.php\/blog\/your-website-is-nice-but-i-liked-the-book-better\" rel=\"noopener\">Pumpkin King #1<\/a><\/td>\n<td>Shows wrong article<\/td>\n<td>Shows wrong article<\/td>\n<\/tr>\n<tr>\n<td><a href=\"http:\/\/www.pumpkin-king.com\/index.php\/blog\/buying-robots-shouldnt-be-this-difficult\" rel=\"noopener\">Pumpkin King #2<\/a><\/td>\n<td>Shows wrong article<\/td>\n<td>Shows wrong article<\/td>\n<\/tr>\n<tr>\n<td><a href=\"http:\/\/radnauseam.com\/page\/4\/\" rel=\"noopener\">Rad Nauseam #1<\/a><\/td>\n<td>Redirects to Homepage<\/td>\n<td>Redirects to Malware<\/td>\n<\/tr>\n<tr>\n<td><a href=\"http:\/\/radnauseam.com\/page\/6\/\" rel=\"noopener\">Rad Nauseam #2<\/a><\/td>\n<td>Redirects to Homepage<\/td>\n<td>Redirects to Malware<\/td>\n<\/tr>\n<tr>\n<td><a href=\"http:\/\/tonydewan.com\/articles\/chai\/\" rel=\"noopener\">Tony Dewan #1<\/a><\/td>\n<td>404<\/td>\n<td>404<\/td>\n<\/tr>\n<tr>\n<td><a href=\"http:\/\/tonydewan.com\/articles\/indianapolis\/\" rel=\"noopener\">Tony Dewan #2<\/a><\/td>\n<td>404<\/td>\n<td>404<\/td>\n<\/tr>\n<tr>\n<td><a href=\"http:\/\/v1.travisgertz.com\/articles\/progress\/\" rel=\"noopener\">Travis Gertz #1<\/a><\/td>\n<td>Redirect, minor updates, good shape<\/td>\n<td>&#8220;Service Unavailable&#8221;<\/td>\n<\/tr>\n<tr>\n<td><a href=\"http:\/\/v1.travisgertz.com\/articles\/analog\/\" rel=\"noopener\">Travis Gertz #2<\/a><\/td>\n<td>Redirect, minor updates, good shape<\/td>\n<td>&#8220;Service Unavailable&#8221;<\/td>\n<\/tr>\n<tr>\n<td><a href=\"http:\/\/trentwalton.com\/2009\/10\/27\/zombie-designers\/\" rel=\"noopener\">Trent Walton #1<\/a><\/td>\n<td>Minor updates, good shape<\/td>\n<td>Same!<\/td>\n<\/tr>\n<tr>\n<td><a href=\"http:\/\/trentwalton.com\/2009\/08\/22\/a-fresh-coat-of-paint\/\" rel=\"noopener\">Trent Walton #2<\/a><\/td>\n<td>Minor updates, good shape<\/td>\n<td>Same!<\/td>\n<\/tr>\n<\/table>\n<p>2013: Art direction only survived on 18\/40 articles. Less than half.<\/p>\n<p>2016: Down to 13\/40 articles still in good shape.<\/p>\n<p>Of course this is a very small sample size and there is nothing to compare it to. It would be interesting to compare against another roundup from 2009 of a totally unrelated topic and see what shape those URL&#8217;s are in.<\/p>\n<h3>Did responsive design influence things?<\/h3>\n<p>2009 was a bit before responsive web design was &#8220;a thing&#8221; as we know it today. It&#8217;s easier to customize a design in a fixed environment than a fluid one. <\/p>\n<p>Want the text &#8220;Kapow!&#8221; lined up right next to Batman&#8217;s fist in an article about old comics? That&#8217;s fairly easy to do when you can count on that fist being at the exact same place at all times. But likely you&#8217;ll need that graphic to shrink and grow to accommodate the screen size. Now you&#8217;ll have to get tricky with how you position that text. And likely about 50 other little minor adjustments you have to make as the the screen size available goes from tiny to huge. <\/p>\n<p>It multiplies an already time-consuming job.<\/p>\n<h3>Did a focus on performance influence things?<\/h3>\n<p>Often what happens with art directed articles is:<\/p>\n<ol>\n<li>Serve everything you normally do<\/li>\n<li>Plus more stuff! (e.g. extra images, extra fonts, extra CSS, etc)<\/li>\n<\/ol>\n<p>There is definitely a more-is-worse vibe going on on the web right now. A common theme in art directed articles is adding stuff like interactive maps, scrolling effects, animations, and super large images. All of that stuff is heavy and slow when it comes to web performance. <\/p>\n<p>That doesn&#8217;t mean you can&#8217;t do it right and progressively enhance, but that&#8217;s yet-another-difficulty. That may be contributing to less enthusiasm for art-directed posts.<\/p>\n<h3>How can you plan for the future with your art-directed articles?<\/h3>\n<p>Websites will change. It&#8217;s going to happen, so you need to plan for it. The customizations to an article you make now might not make any sense to that same article in a new template. Did you change the background on <code>.article-wrap { }<\/code> &#8211; well maybe that&#8217;s an <code>&lt;article class=\"module\"&gt;<\/code> now, so that custom CSS doesn&#8217;t do anything.<\/p>\n<p>The trouble is, redesigns are generally for the better. They accommodate a new advertising structure. They make a non-responsive design responsive. They increase performance. Whatever. We might want to be totally gone with the old design and totally in with the new. <\/p>\n<p>Here&#8217;s some options for various scenarios:<\/p>\n<ul>\n<li><strong>Preserve the article exactly as is.<\/strong> This is how Jason Santa Maria&#8217;s site works. Posts that were art directed under a certain version of the site get served under that version forever. He&#8217;s doing it, so clearly it&#8217;s doable. There are WordPress plugins that <a href=\"http:\/\/wordpress.org\/plugins\/theme-test-drive\/\" rel=\"noopener\">change themes with a URL parameter<\/a>, so I can imagine you could code something that shows a different theme based on a publication date.\n<p>In talking to some folks from The Verge (and companion sites), they plan to either serve a legacy template specifically for these URL&#8217;s, or &#8220;flatten&#8221; the page into a one-off static page. Either way, they design remains forever.<\/li>\n<li><strong>Update the design.<\/strong> It shouldn&#8217;t be off the table that you just revisit the articles when you redesign and fix them up to work with the redesign. Time permitting, this is probably the best option.<\/li>\n<li><strong>Build them outside the template\/theme\/CMS from the start.<\/strong> If the article doesn&#8217;t rely on a template anyway, it won&#8217;t break when you update that template.<\/li>\n<li><strong>Revert to a normal template.<\/strong> Worst case, just remove all the custom art direction. It&#8217;s a fairly common approach to just add assets to customize a page anyway, so removing them will hopefully allow the content to drop back to a normal looking article. Hopefully the markup wasn&#8217;t so customized that it breaks. The lesson here: use namespaced classes that will likely have no future meaning.<\/li>\n<\/ul>\n<p>Whatever you do, don&#8217;t just nuke the article or redirect it to something unrelated. <a href=\"http:\/\/www.w3.org\/Provider\/Style\/URI.html\" rel=\"noopener\">Because<\/a>.<\/p>\n<h3>More Recent Examples<\/h3>\n<p><a href=\"http:\/\/www.nytimes.com\/projects\/2012\/snow-fall\/#\/?part=tunnel-creek\" rel=\"noopener\">New York Times: Snow Fall<\/a><br \/>\n<a href=\"http:\/\/www.theverge.com\/2013\/7\/31\/4395960\/john-wilkes-booth-killed-lincoln-but-who-killed-john-wilkes-booth\" rel=\"noopener\">The Verge: John Wilkes Booth<\/a><br \/>\n<a href=\"http:\/\/www.nytimes.com\/newsgraphics\/2013\/10\/13\/russia\/\" rel=\"noopener\">New York Times: Russia<\/a><br \/>\n<a href=\"http:\/\/travisneilson.com\/fun-with-jquery-show\/\" rel=\"noopener\">Travis Neilson: Fun with jQuery .show()<\/a><br \/>\n<a href=\"http:\/\/www.complex.com\/covers\/danny-brown-interview-sky-high-2013-cover-story\/\" rel=\"noopener\">Complex: Danny Brown<\/a><br \/>\n<a href=\"http:\/\/www.washingtonpost.com\/wp-srv\/special\/local\/the-perils-of-great-falls\/\" rel=\"noopener\">The Washington Post: Great Falls<\/a><br \/>\n<a href=\"http:\/\/www.latimes.com\/local\/la-me-earthquake-concrete-20131013-dto,0,1555748.htmlstory\" rel=\"noopener\">LA Times: Concrete Risks<\/a><br \/>\n<a href=\"http:\/\/www.nytimes.com\/projects\/2013\/tomato-can-blues\/\" rel=\"noopener\">New York Times: Tomato Can Blues<\/a><br \/>\n<a href=\"http:\/\/www.nytimes.com\/projects\/2013\/the-jockey\/#\/?chapt=introduction\" rel=\"noopener\">New York Times: The Jockey<\/a><br \/>\n<a href=\"http:\/\/danielmall.com\/articles\/responsive-mobile-entertainment-weekly\/\" rel=\"noopener\">Daniel Mall: Entertainment Weekly Site<\/a><br \/>\n<a href=\"http:\/\/trentwalton.com\/2013\/08\/12\/human-interest\/\" rel=\"noopener\">Trent Walton: Human Interest<\/a><br \/>\n<a href=\"http:\/\/www.polygon.com\/features\/2013\/10\/16\/4817988\/watch-dogs-invasion\" rel=\"noopener\">Polygon: Watch Dogs<\/a><\/p>\n<p>Let&#8217;s check these out in another four years!<\/p>\n<h3>So what&#8217;s up?<\/h3>\n<p>Is it \/ was it a trend or not? Do you dig it? Have you done it? Is art directing a post the kiss of death for it over time? Can you think of other ways to handle an art directed post over time? Any more interesting examples?<\/p>\n<p>And to answer James&#8217; question from the tweet up top: I think <a href=\"https:\/\/github.com\/davatron5000\/Better-Art-Direction\" rel=\"noopener\">Dave&#8217;s fork<\/a> of the Art Direction Plugin <em>is<\/em> still the best way to go in WordPress-land, if what you are trying to do is essentially add CSS and JS.<\/p>\n<p>Oh and I&#8217;m totally <a href=\"http:\/\/alistapart.com\/article\/art-direction-and-design\" rel=\"noopener\">mis-using &#8220;art direction&#8221; here<\/a>. Sorry about that, but I feel like it&#8217;s kind of the name that&#8217;s been applied to this thing.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>I was recently quoted in a tweet about this and I thought it might be worth a revisit and new discussion.<\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":[]},"categories":[4],"tags":[],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"","jetpack-related-posts":[{"id":336933,"url":"https:\/\/css-tricks.com\/want-to-write-a-hover-effect-with-inline-css-use-css-variables\/","url_meta":{"origin":153301,"position":0},"title":"Want to Write a Hover Effect With Inline CSS? Use CSS Variables.","date":"March 26, 2021","format":false,"excerpt":"The other day I was working on a blog where each post has a custom color attached to it for a little dose of personality. The author gets to pick that color in the CMS when they\u2019re writing the post. Just a super-light layer of art direction. To make that\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/05\/button-hover.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":320950,"url":"https:\/\/css-tricks.com\/read-me\/","url_meta":{"origin":153301,"position":1},"title":"Read Me!","date":"September 11, 2020","format":false,"excerpt":"A fancy experiential essay from the team at Readymag, which is a tool for building... fancy experiential essays, about fancy experiential essays: With all the technology addressing readability issues, it\u2019s still design basics that distinguish a readable text from one that isn\u2019t. Here are some simple rules we use ourselves\u2026","rel":"","context":"In &quot;Link&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/09\/Screen-Shot-2020-09-10-at-4.13.51-PM.png?fit=1200%2C944&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":307020,"url":"https:\/\/css-tricks.com\/fake-code\/","url_meta":{"origin":153301,"position":2},"title":"Fake Code","date":"April 21, 2020","format":false,"excerpt":"Here's a fun little idea from Knut Synstad. You give it the URL of a GitHub Gist and it converts the Gist into grayscale rounded blobs (SVG) that sorta look like code if you squint. Maybe fun for interesting dynamic backgrounds or for whatever you might use code-looking stock art\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/04\/Screen-Shot-2020-04-17-at-9.36.27-AM.png?fit=1200%2C546&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":340967,"url":"https:\/\/css-tricks.com\/a-cornucopia-of-container-queries\/","url_meta":{"origin":153301,"position":3},"title":"A Cornucopia of Container Queries","date":"June 9, 2021","format":false,"excerpt":"I don't know about y'all, but my feeds have been flooded with articles about CSS Container Queries these past few weeks. The buzz about container queries actually started back in December after Miriam Suzanne posted a proposal (picking up on David Baron's proposal) but it was news in a late-March\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/05\/container-collage.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":304601,"url":"https:\/\/css-tricks.com\/block-links-are-a-pain-and-maybe-just-a-bad-idea\/","url_meta":{"origin":153301,"position":4},"title":"Block Links Are a Pain (and Maybe Just a Bad Idea)","date":"March 10, 2020","format":false,"excerpt":"As we noted in our complete guide, you can put an <a href=\"\"> link around whatever chunks of HTML you like. Let's call that a \"block link.\" Like you are wanting to link up an entire \"Card\" of content because it makes a big clickable target. <a href=\"\/article\/\"> <!-- display:\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/04\/cards-featured.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":330337,"url":"https:\/\/css-tricks.com\/very-extremely-practical-css-art\/","url_meta":{"origin":153301,"position":5},"title":"Very Extremely Practical CSS Art","date":"December 8, 2020","format":false,"excerpt":"I've always enjoyed the CSS art people create, but I\u2019ve never ventured into it much myself. I'm familiar with many of the tricks involved, but still find it surprising every time: the way people are able to make such fluid and beautiful images out of little boxes. I always end\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/12\/Screen-Shot-2020-12-08-at-4.35.09-PM.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]}],"featured_media_src_url":null,"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/153301"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=153301"}],"version-history":[{"count":18,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/153301\/revisions"}],"predecessor-version":[{"id":247533,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/153301\/revisions\/247533"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=153301"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=153301"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=153301"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}