document.write('\x3cmeta http-equiv=\x22x-dns-prefetch-control\x22 content=\x22off\x22/\x3e\x3col class=\x22tumblr_posts\x22\x3e\x0a    \x0a        \x0a\x0a        \x0a            \x3cli class=\x22tumblr_post tumblr_photo_post\x22\x3e\x0a                \x3cimg src=\x22http://26.media.tumblr.com/tumblr_lxe7gjrioj1qzndazo1_400.jpg\x22 alt=\x22The packaging for Tycho\x26amp;#8217;s \x26amp;#8220;Dive\x26amp;#8221; album is gorgeous, which I was completely unaware of having been introduced to the record through Rdio. Currently mourning the slow-moving death of album art at the hands of digital delivery.  (Taken with instagram)\x22 class=\x22tumblr_photo\x22/\x3e\x0a                \x0a                \x0a                    \x3cdiv class=\x22tumblr_caption\x22\x3e\x0a                        \x3cp\x3eThe packaging for Tycho\x26#8217;s \x26#8220;Dive\x26#8221; album is gorgeous, which I was completely unaware of having been introduced to the record through Rdio. Currently mourning the slow-moving death of album art at the hands of digital delivery.  (Taken with \x3ca href=\x22http://instagr.am\x22\x3einstagram\x3c/a\x3e)\x3c/p\x3e\x0a                    \x3c/div\x3e\x0a                \x0a            \x3c/li\x3e\x0a        \x0a\x0a        \x0a\x0a        \x0a        \x0a        \x0a        \x0a        \x0a\x0a                        \x0a    \x0a        \x0a\x0a        \x0a\x0a        \x0a            \x3cli class=\x22tumblr_post tumblr_quote_post\x22\x3e\x0a                \x3cdiv class=\x22tumblr_quote\x22\x3e\x0a                    \x3cspan class=\x22tumblr_open_quote\x22\x3e\x26#147;\x3c/span\x3eAt the very least, Hitchens\u2019s antireligious writings carried a whiff of something absent in many of atheism\u2019s less talented apostles \u2014 a hint that he was not so much a disbeliever as a rebel, and that his atheism was mostly a political romantic\u2019s attempt to pick a fight with the biggest Tyrant he could find.\x3cspan class=\x22tumblr_close_quote\x22\x3e\x26#148;\x3c/span\x3e\x0a                \x3c/div\x3e\x0a                \x0a                \x0a                    \x3cdiv class=\x22tumblr_source\x22\x3e\x0a                        Ross Douthat\x3cp\x3e(Source: \x3ca href=\x22http://www.nytimes.com/2011/12/18/opinion/sunday/douthat-the-believers-atheist.html?_r=1\x22 title=\x22The New York Times\x22\x3e\x3cem\x3eThe New York Times\x3c/em\x3e\x3c/a\x3e)\x3c/p\x3e\x0a                    \x3c/div\x3e\x0a                \x0a            \x3c/li\x3e\x0a        \x0a\x0a        \x0a        \x0a        \x0a        \x0a        \x0a\x0a                        \x0a    \x0a        \x0a\x0a        \x0a            \x3cli class=\x22tumblr_post tumblr_photo_post\x22\x3e\x0a                \x3cimg src=\x22http://26.media.tumblr.com/tumblr_lwbabsapyi1qzndazo1_400.png\x22 alt=\x22Really enjoyed Bill Frisell\x26amp;#8217;s take on \x26amp;#8220;Strawberry Fields\x26amp;#8221; at today\x26amp;#8217;s Tiny Desk Concert.\x22 class=\x22tumblr_photo\x22/\x3e\x0a                \x0a                \x0a                    \x3cdiv class=\x22tumblr_caption\x22\x3e\x0a                        \x3cp\x3eReally enjoyed Bill Frisell\x26#8217;s take on \x26#8220;Strawberry Fields\x26#8221; at today\x26#8217;s Tiny Desk Concert.\x3c/p\x3e\x0a                    \x3c/div\x3e\x0a                \x0a            \x3c/li\x3e\x0a        \x0a\x0a        \x0a\x0a        \x0a        \x0a        \x0a        \x0a        \x0a\x0a                        \x0a    \x0a        \x0a\x0a        \x0a\x0a        \x0a\x0a        \x0a            \x3cli class=\x22tumblr_post tumblr_link_post\x22\x3e\x0a                \x3ca href=\x22http://fontsinuse.com/bostonglobe-com/\x22 class=\x22tumblr_link\x22 \x3eFonts In Use: BostonGlobe.com\x3c/a\x3e\x0a                \x0a                \x0a                    \x3cdiv class=\x22tumblr_description\x22\x3e\x0a                        \x3cp\x3eStephen Coles:\x3c/p\x3e\x0a\x0a\x3cblockquote\x3e\x0a  \x3cp\x3eDespite the emphasis on maintaining the newspaper\u2019s identity, BostonGlobe.com is not merely a skeuomorphic replication of the printed paper. Font sizes, column widths, and navigation are informed by best practices in digital media, and specifically \u201cresponsive\u201d design, resizing and repositioning text and images for optimal viewing at any window size. Not every window width results in a beautiful page, but overall it\u2019s a much better and more consistent experience from the big screen to the iPhone than most digital newspapers today.\x3c/p\x3e\x0a\x3c/blockquote\x3e\x0a\x0a\x3cp\x3eThe calculus of brand consistency vs. page weight is critical in making decisions about typography on the web, particularly for a responsive site that will see significant mobile browser use.\x3c/p\x3e\x0a\x0a\x3cp\x3eThis is as complex a case study as you\x26#8217;ll find on the subject, and the insight from \x3ca href=\x22http://twitter.com/mirandamulligan\x22\x3eMiranda Mulligan\x3c/a\x3e, \x3ca href=\x22http://upstatement.com\x22\x3eUpstatement\x3c/a\x3e and \x3ca href=\x22http://filamentgroup.com/\x22\x3eFilament Group\x3c/a\x3e is invaluable.\x3c/p\x3e\x0a                    \x3c/div\x3e\x0a                \x0a            \x3c/li\x3e\x0a        \x0a        \x0a        \x0a        \x0a        \x0a\x0a                        \x0a    \x0a        \x0a\x0a        \x0a\x0a        \x0a\x0a        \x0a            \x3cli class=\x22tumblr_post tumblr_link_post\x22\x3e\x0a                \x3ca href=\x22http://www.elezea.com/2011/11/future-of-web-reading\x22 class=\x22tumblr_link\x22 \x3ePlease let this not be the future of reading on the web\x3c/a\x3e\x0a                \x0a                \x0a                    \x3cdiv class=\x22tumblr_description\x22\x3e\x0a                        \x3cp\x3eRian van der Merwe:\x3c/p\x3e\x0a\x0a\x3cblockquote\x3e\x0a  \x3cp\x3eAs advertising clickthrough rates continue to drop, the ads become more desperate and invasive, and readers are starting to notice and do something about it. I\u2019m doing the majority of my reading in RSS and Instapaper where I can read in peace without being pummeled by distractions.\x3c/p\x3e\x0a\x3c/blockquote\x3e\x0a\x0a\x3cp\x3eThe chorus decrying the exodus of readers to quiet alternative reading experiences is growing. My hope is that this exodus will serve as a wake-up call to publishers deluded in their belief that readers have an endless well of patience to endure intrusive advertising and cluttered pages.\x3c/p\x3e\x0a\x0a\x3cp\x3eRequired reading for editorial experience designers.\x3c/p\x3e\x3cp\x3e(Source: \x3ca href=\x22http://daringfireball.net/linked/2011/11/24/bifurcation\x22 title=\x22daringfireball.net\x22\x3edaringfireball.net\x3c/a\x3e)\x3c/p\x3e\x0a                    \x3c/div\x3e\x0a                \x0a            \x3c/li\x3e\x0a        \x0a        \x0a        \x0a        \x0a        \x0a\x0a                        \x0a    \x0a        \x0a\x0a        \x0a\x0a        \x0a\x0a        \x0a            \x3cli class=\x22tumblr_post tumblr_link_post\x22\x3e\x0a                \x3ca href=\x22http://www.markboulton.co.uk/journal/comments/responsive-advertising\x22 class=\x22tumblr_link\x22 \x3eResponsive Advertising\x3c/a\x3e\x0a                \x0a                \x0a                    \x3cdiv class=\x22tumblr_description\x22\x3e\x0a                        \x3cp\x3eMark Boulton:\x3c/p\x3e\x0a\x0a\x3cblockquote\x3e\x0a  \x3cp\x3eRecently at Mark Boulton Design, we\u2019ve been working on a redesign of the global visual language for a large sports network. Like many web sites delivering news and editorial content, they rely on advertising for their revenue \u2014 either through multiple ad slots on the page, or from video pre-rolls.\x3c/p\x3e\x0a  \x0a  \x3cp\x3eEarly on in the project, we discussed Responsive Web Design at length. From an editorial and product perspective, it makes perfect sense. Who wouldn\u2019t want their content adapting to a device their reading it on? Who wants to pinch-zoom again and again? From a business and product perspective, we\u2019ve seen this from multiple clients who want to take advantage of certain interactions on certain devices \u2014 swiping for example \u2014 for users to better engage with the content in a more native way. All good. And then advertising comes along and things get challenging.\x3c/p\x3e\x0a\x3c/blockquote\x3e\x0a\x0a\x3cp\x3eThere\x26#8217;s a lot of good thinking in this piece on a topic I\x26#8217;ve been wrestling with since the BostonGlobe.com design started making waves. For sites that rely on display ad revenue, I\x26#8217;m not sure responsive design solves more problems than it creates.\x3c/p\x3e\x0a\x0a\x3cp\x3e/via \x3ca href=\x22https://twitter.com/#!/A_L/status/136458837774434304\x22\x3eAl Shaw\x3c/a\x3e\x3c/p\x3e\x0a                    \x3c/div\x3e\x0a                \x0a            \x3c/li\x3e\x0a        \x0a        \x0a        \x0a        \x0a        \x0a\x0a                        \x0a    \x0a        \x0a\x0a        \x0a\x0a        \x0a\x0a        \x0a            \x3cli class=\x22tumblr_post tumblr_link_post\x22\x3e\x0a                \x3ca href=\x22http://www.ui-transitions.com\x22 class=\x22tumblr_link\x22 \x3eMeaningful Transitions\x3c/a\x3e\x0a                \x0a                \x0a                    \x3cdiv class=\x22tumblr_description\x22\x3e\x0a                        \x3cp\x3eJohannes Tonollo:\x3c/p\x3e\x0a\x0a\x3cblockquote\x3e\x0a  \x3cp\x3eMeaningful Transitions have the purpose to communicate the process of the interaction and the structure of the user interface. They focus on specific events, or explaining the user\x26#8217;s interaction by animation. All transitions are clustered in 6 categories in order to differentiate the certain field of use. The aim is to present a scaleable collection of existing transitions. The transitions are documented in an abstract visualization to explain their purposes and filled with concrete examples. The close look at a transition offers the field of use, the mental model, the consistency, the cognitive benefit and the illusion.\x3c/p\x3e\x0a\x3c/blockquote\x3e\x0a\x0a\x3cp\x3eGreat resource.\x3c/p\x3e\x0a                    \x3c/div\x3e\x0a                \x0a            \x3c/li\x3e\x0a        \x0a        \x0a        \x0a        \x0a        \x0a\x0a                        \x0a    \x0a        \x0a\x0a        \x0a\x0a        \x0a            \x3cli class=\x22tumblr_post tumblr_quote_post\x22\x3e\x0a                \x3cdiv class=\x22tumblr_quote\x22\x3e\x0a                    \x3cspan class=\x22tumblr_open_quote\x22\x3e\x26#147;\x3c/span\x3eClutter is what happens when we fill a page with things the user doesn\u2019t care about. Replace the useless stuff with links, copy, and content the users really want, and the page suddenly becomes uncluttered.\x3cspan class=\x22tumblr_close_quote\x22\x3e\x26#148;\x3c/span\x3e\x0a                \x3c/div\x3e\x0a                \x0a                \x0a                    \x3cdiv class=\x22tumblr_source\x22\x3e\x0a                        Jared Spool\x3cp\x3e(Source: \x3ca href=\x22http://www.uie.com/brainsparks/2011/11/04/clutter/\x22 title=\x22uie.com\x22\x3euie.com\x3c/a\x3e)\x3c/p\x3e\x0a                    \x3c/div\x3e\x0a                \x0a            \x3c/li\x3e\x0a        \x0a\x0a        \x0a        \x0a        \x0a        \x0a        \x0a\x0a                        \x0a    \x0a        \x0a\x0a        \x0a\x0a        \x0a\x0a        \x0a            \x3cli class=\x22tumblr_post tumblr_link_post\x22\x3e\x0a                \x3ca href=\x22http://www.andismith.com/blog/2011/11/25-dev-tool-secrets/\x22 class=\x22tumblr_link\x22 \x3e25 Secrets of the Browser Developer Tools\x3c/a\x3e\x0a                \x0a                \x0a                    \x3cdiv class=\x22tumblr_description\x22\x3e\x0a                        \x3cp\x3eAndi Smith:\x3c/p\x3e\x0a\x0a\x3cblockquote\x3e\x0a  \x3cp\x3eHistorically developers have used Firefox\u2019s Firebug add-on to develop and debug their websites, but more recently each browser has developed its own set of tools and each comes with its own advantages and disadvantages. Nowadays it seems hard to imagine ever building a website without one of these handy tools, which are normally accessible by either pressing \u201cF12\u2033 in Windows or \u201cCmd\u201d \u2318, \u201cOption\u201d \u2325 and \u201cI\u201d on the Mac, or by right clicking on the page and selecting \u201cInspect Element\u201d.\x3c/p\x3e\x0a  \x0a  \x3cp\x3eBut are you using the developer tools to their full potential? The biggest positive about the developer tools is that they are incredibly easy to use, but as a result developers often miss out on a large proportion of the functionality provided. Inspired by a video talk by Paul Irish and Pavel Feldman, I\u2019ve compiled a list of \u201csecrets\u201d of the developer console. I\u2019m not expecting every one of these to be unknown to you, but hopefully some of these will help you to become an even better web developer.\x3c/p\x3e\x0a\x3c/blockquote\x3e\x0a\x0a\x3cp\x3eMy favorite Chrome trick is clicking to flip through the various methods of describing a color.\x3c/p\x3e\x3cp\x3e(Source: \x3ca href=\x22https://twitter.com/shancarter/status/132495438619217920\x22 title=\x22twitter.com\x22\x3etwitter.com\x3c/a\x3e)\x3c/p\x3e\x0a                    \x3c/div\x3e\x0a                \x0a            \x3c/li\x3e\x0a        \x0a        \x0a        \x0a        \x0a        \x0a\x0a                        \x0a    \x0a        \x0a\x0a        \x0a\x0a        \x0a            \x3cli class=\x22tumblr_post tumblr_quote_post\x22\x3e\x0a                \x3cdiv class=\x22tumblr_quote\x22\x3e\x0a                    \x3cspan class=\x22tumblr_open_quote\x22\x3e\x26#147;\x3c/span\x3eThere are a lot of people I dislike in the world. I mean, a lot. I don\x26#8217;t follow any of them on Twitter.\x3cspan class=\x22tumblr_close_quote\x22\x3e\x26#148;\x3c/span\x3e\x0a                \x3c/div\x3e\x0a                \x0a                \x0a                    \x3cdiv class=\x22tumblr_source\x22\x3e\x0a                        John Gruber\x3cp\x3e(Source: \x3ca href=\x22http://www.theverge.com/2011/11/1/2529005/5-minutes-on-the-verge-john-gruber\x22 title=\x22theverge.com\x22\x3etheverge.com\x3c/a\x3e)\x3c/p\x3e\x0a                    \x3c/div\x3e\x0a                \x0a            \x3c/li\x3e\x0a        \x0a\x0a        \x0a        \x0a        \x0a        \x0a        \x0a\x0a                        \x0a    \x0a\x3c/ol\x3e');