<?xml version="1.0" encoding="UTF-8"?>
<rss xmlns:dc="http://purl.org/dc/elements/1.1/" version="2.0"><channel><atom:link rel="hub" href="http://tumblr.superfeedr.com/" xmlns:atom="http://www.w3.org/2005/Atom"/><description>Interaction Designer &amp; Developer, lives in East London, UK.
Works for BBC News Online. By night works as Build 
Awesome Museum.</description><title>Mark Hurrell</title><generator>Tumblr (3.0; @mhurrell)</generator><link>http://blog.mhurrell.co.uk/</link><item><title>LX3 to DP2</title><description>&lt;p&gt;I’ve been using a Lumix LX3 for a few years, but today I became the proud owner of a Sigma DP2x. Took a few test shots this morning (auto exposure, manual focus) and I’m really excited with the results. Click through to see full-size images on Flickr 
&lt;a href="http://www.flickr.com/photos/markhurrell/6851361975/in/photostream/"&gt;&lt;img height="333" src="http://media.tumblr.com/tumblr_lz6ipekbzT1qzyi42.jpg"/&gt;&lt;/a&gt;
&lt;/p&gt;

&lt;p&gt;
&lt;a href="http://www.flickr.com/photos/markhurrell/6851362521/in/photostream/"&gt;&lt;img height="333" src="http://media.tumblr.com/tumblr_lz6iq8Mz4q1qzyi42.jpg"/&gt;&lt;/a&gt;
&lt;/p&gt;

&lt;p&gt;
&lt;a href="http://www.flickr.com/photos/markhurrell/6851363057/in/photostream/"&gt;&lt;img height="333" src="http://media.tumblr.com/tumblr_lz6iqn3WiL1qzyi42.jpg"/&gt;&lt;/a&gt;
&lt;/p&gt;

&lt;p&gt;
&lt;a href="http://www.flickr.com/photos/markhurrell/6851363613/in/photostream/"&gt;&lt;img height="333" src="http://media.tumblr.com/tumblr_lz6ir0lQvA1qzyi42.jpg"/&gt;&lt;/a&gt;
&lt;/p&gt;</description><link>http://blog.mhurrell.co.uk/post/17370949259</link><guid>http://blog.mhurrell.co.uk/post/17370949259</guid><pubDate>Fri, 10 Feb 2012 09:02:00 -0500</pubDate><category>sigma</category><category>Bethnal Green</category><category>DP2x</category><category>London Fields</category></item><item><title>Acceptance</title><description>&lt;blockquote&gt;“Everyone says the 21st century is the information century, and even complains of too much information, but I disagree. All the information we get is fragmented, halfbaked. I’ll give you an example of lots of information: I was in Bali recently, and I walked around barefoot on the hotel’s stone floors. Eventually my feet began to go numb. That actually felt really good. The amount of information my feet were picking up was enormous. The human brain likes to receive massive amounts of information. The technology and media today give us very little, so our brains are unhappy. I’m looking forward to a sense-driven world, after the end of the technology-driven phase.”&lt;/blockquote&gt;

&lt;p&gt;&lt;cite&gt;— Kenya Hara, in &lt;a href="http://www.thememagazine.com/stories/muji-kenya-hara/"&gt;Theme Magazine&lt;/a&gt;&lt;/cite&gt;&lt;/p&gt;</description><link>http://blog.mhurrell.co.uk/post/16128498805</link><guid>http://blog.mhurrell.co.uk/post/16128498805</guid><pubDate>Thu, 19 Jan 2012 15:32:23 -0500</pubDate><category>KenyaHara</category><category>communication design</category><category>information design</category></item><item><title>Attention to detail</title><description>&lt;p&gt;What came first, the building or the kerning?
&lt;a href="http://www.flickr.com/photos/markhurrell/6462818513"&gt;&lt;img height="300" src="http://media.tumblr.com/tumblr_lvr9ygwkEP1qzyi42.jpg"/&gt;&lt;/a&gt;
&lt;/p&gt;</description><link>http://blog.mhurrell.co.uk/post/13800913522</link><guid>http://blog.mhurrell.co.uk/post/13800913522</guid><pubDate>Mon, 05 Dec 2011 19:15:00 -0500</pubDate><category>kerning</category><category>Cologne</category><category>Koln</category><category>attention to detail</category></item><item><title>Comprehensive propensities</title><description>&lt;blockquote&gt;“Of course our failures are a consequence of many factors, but possibly one of the most important is the fact that society operates on the theory that specialisation is the key to success, not realising that specialisation precludes comprehensive thinking. This means that the potentially-integratable techno-economic advantages accruing to society from the myriad specialisations are not comprehended integratively and therefore are not realised.”&lt;/blockquote&gt;

&lt;p&gt;&lt;cite&gt;— R. Buckminster Fuller, &lt;a href="http://www.amazon.co.uk/Operating-Manual-Spaceship-R-Buckminster-Fuller/dp/3037781262"&gt;Operating Manual for Spaceship Earth&lt;/a&gt;&lt;/cite&gt;&lt;/p&gt;</description><link>http://blog.mhurrell.co.uk/post/12569760895</link><guid>http://blog.mhurrell.co.uk/post/12569760895</guid><pubDate>Wed, 09 Nov 2011 16:57:02 -0500</pubDate><category>specialisation</category><category>Buckminster Fuller</category><category>design</category><category>technology</category></item><item><title>The news</title><description>&lt;p&gt;&lt;blockquote&gt;“But what’s most interesting, to me, are the assumptions baked into the Trending Topics algorithm in the first place. On the one hand, it’s perfectly fair — in fact, it’s perfectly necessary — to define ‘trends’ as brief ruptures of the ordinary. Spikes, you know, speak. But the algorithm’s assumption is also one that’s baked into the cultural algorithm of journalistic practice: We tend, as reporters and attention-conveners, to value newness over pretty much everything else. &lt;br/&gt;&lt;br/&gt;Again, on the one hand, that’s absolutely appropriate — ‘the news,’ after all — but on the other, the institutional obsession with newness often impedes journalists’ ability to address the biggest issues of the day — the economy, the environment, the effects of the digital transition on global culture — within conventional narrative frameworks. Just as #OccupyWallStreet, in Twitter’s algorithm, competes against #KimKWedding, we pit the long-term and the temporary against each other, forcing them to compete for people’s (and journalists’) attention. We accept that the slow-burn stories have to fight for space against the shocking, the spiking, the evanescent. &lt;br/&gt;&lt;br/&gt;Which is unfortunate, since the most important topics for journalists to address are often the ones that are the opposite of ‘trending.’”&lt;/blockquote&gt;
&lt;cite&gt;— Megan Garber, &lt;a href="http://www.niemanlab.org/2011/10/why-hasnt-occupywallstreet-trended-in-new-york/"&gt;Nieman Journalism Lab&lt;/a&gt;&lt;/cite&gt;&lt;/p&gt;</description><link>http://blog.mhurrell.co.uk/post/11624474075</link><guid>http://blog.mhurrell.co.uk/post/11624474075</guid><pubDate>Tue, 18 Oct 2011 17:16:00 -0400</pubDate><category>Journalism</category><category>twitter</category><category>trends</category><category>newness</category></item><item><title>Courier, like new</title><description>&lt;p&gt;Areaware’s &lt;a href="http://www.fastcodesign.com/1663813/a-dock-that-turns-the-iphone-into-an-analog-alarm-clock"&gt;alarm clock app&lt;/a&gt; woke me up to the fact (pun, hah!) that &lt;em&gt;Courier New&lt;/em&gt; has a lovely set of numerical characters. Who knew! &lt;/p&gt;

&lt;p&gt;
&lt;img height="456" src="http://media.tumblr.com/tumblr_lt65xaj1jO1qzyi42.jpg"/&gt;&lt;/p&gt;</description><link>http://blog.mhurrell.co.uk/post/11531025443</link><guid>http://blog.mhurrell.co.uk/post/11531025443</guid><pubDate>Sun, 16 Oct 2011 13:34:00 -0400</pubDate><category>Courier New</category><category>Areaware</category><category>web typography</category></item><item><title>Purchased</title><description>&lt;p&gt;Well-considered, inspiring &amp; beautiful. I’ve hardly put this book down in the week since I bought it 
&lt;a href="http://svpply.com/item/719482/grain_edit__Function_Restraint"&gt;&lt;img height="360" src="http://media.tumblr.com/tumblr_lsv6b5raKq1qzyi42.jpg"/&gt;&lt;/a&gt;
&lt;/p&gt;</description><link>http://blog.mhurrell.co.uk/post/11282408716</link><guid>http://blog.mhurrell.co.uk/post/11282408716</guid><pubDate>Mon, 10 Oct 2011 15:06:00 -0400</pubDate></item><item><title>The opportunity to buy something better</title><description>&lt;blockquote&gt;“When I was a kid, my first printer was an Epson dot matrix, hooked up to a Tandy 1000. While it could only print two fonts, serif and san serif, it was as reliable as a tank. I bet if it were still around, it would still be running. At that time home printing technology progressed at such a fast rate, that the Epson became obsolete before it broke down. I believe this rapid progression in performance influenced a commoditization in the printer market. No one wanted to invest in a home printer when a higher resolution, faster, quieter one was just a few months away. &lt;br/&gt;&lt;br/&gt;Today, the resolution and speed of printers have relatively plateaued. I asked a group of IT professionals if I could buy a printer that would last several years? I figured I could spend up to maybe $500. If it would last me five years, it would cost $100 per year. Which is less than I had spent over the past five years on new printers that broke every 18 months or so. I was willing to invest up front if it meant preventing wasting materials on more printers down the road. Unfortunately, according to my cabal of IT experts, it didn’t exist. The market has stopped producing a printer that will last. There was no company like Icon, making the sturdiest printer in the world.”&lt;/blockquote&gt;
&lt;cite&gt;— Michael DiTullo, &lt;a href="http://designmind.frogdesign.com/blog/nurturing-the-desire-to-keep.html"&gt;Design Mind&lt;/a&gt;&lt;/cite&gt;
&lt;p&gt;This article doesn’t even mention Apple — it doesn’t have to.&lt;/p&gt;</description><link>http://blog.mhurrell.co.uk/post/11281224258</link><guid>http://blog.mhurrell.co.uk/post/11281224258</guid><pubDate>Mon, 10 Oct 2011 14:35:00 -0400</pubDate><category>forced obsolescence</category><category>product design</category><category>apple</category><category>commoditization</category></item><item><title>The anti-social web</title><description>&lt;blockquote&gt;“It is tempting to see the internet as the ultimate fulfillment of the ideals of modernism – after all, the world wide web seems the perfect embodiment of Paul Otlet’s “Mundaneum.” Also, when you look at it from a strictly formalist viewpoint, the whole visual landscape of the internet is made up of exactly those elements that most people seem to associate with International Style: templates, grids, sans-serif type, the specific use of “empty” space, flush-left ragged-right columns. Even the use of all-lowercase letters in text messaging can be seen as stylistically linked to International Style. But still — we would say there is one fundamental, crucial difference between the print culture of modernism and the digital culture of the internet. In our view, print is still a more public medium. If a poster is hanging in the street, it is seen by every passerby in more or less the same way. Sure, the interpretation of the poster will differ from person to person, but by and large, the poster itself will appear in roughly the same way to every viewer, regardless of his/her class, race, gender, age, personal preferences, etc. &lt;br/&gt;&lt;br/&gt;This is different on the internet, where websites and pages conform themselves instantly to cater to the personal tastes and preferences of the individual viewer. Google search results change from person to person, the advertisements that clutter online profiles are specifically targeted toward the viewer, etc., etc. This makes the online environment ultimately an individualistic, isolated experience, despite the promise of “being connected.” It also makes most online activity a somewhat unadventurous, undialectical affair, as you only will be confronted with stimuli that are algorithmically curated for you, based on what large corporations (such as Facebook and Google) expect you to want to see. Whereas, within the context of the street, you will be confronted with information that is not specifically intended for you — posters you might not immediately understand, slogans you might disagree with (or not), kiosks carrying newspapers that are not necessarily tailored toward your specific lifestyle, book stalls displaying secondhand books expressing conflicting opinions. In our view, it is this notion of print culture within the urban environment that offers the most dialectical, and therefore most modernist, experience. So it’s exactly that idea that we try to explore most in our work. And, as paradoxical as it may sound, it is this theme of modernist print culture that is also one of the main subjects of our online presence — whether it is our actual website or our Facebook group.”&lt;/blockquote&gt;
&lt;cite&gt;— Experimental Jetset, &lt;a href="http://www.printmag.com/Article/Autoreply-Modernism"&gt;Printmag&lt;/a&gt;&lt;/cite&gt;
&lt;p&gt;As much as I want to read Experimental Jetset’s opinions as just another reactionary criticism of modern communication from a traditional practitioner, I think they’ve touched on something uncomfortable about the way the internet has evolved as content medium. As the first liberated, democratic communication platform it has the potential to introduce us to a broader range of ideas &amp; experiences than tradional media could ever provide, but in practice the sheer quantity of content online totally exceeds human mental bandwidth. The only way to manage the endless flow of information is to filter it down, with the bizarre result that reading a physical newspaper exposes me to a far wider &amp; more eclectic range of experiences than browsing that same newspapers website - even though the website contains many more stories. The physical newspaper selects a wide range of stories to appeal to a wide audience, whereas on the website I get to choose the type of stories that I think I want to see. Instead of broadening my horizons, I’ve narrowed them.&lt;/p&gt;
&lt;p&gt;But wishing away a technology is pointless (and ignores all the benefits that connectedness has brought), so Experimental Jetset’s focus on print as a reaction to the internet is really only interesting when considered alongside their use of Facebook. Rather than printed media being a safe default, they appear to be using posters and Facebook in much the same way - making tightly contained nuggets of content and then deliberately placing them within messy, social contexts far outside of their control. This is in direct contrast with most web content, which by technical-neccessity is architected context-first (although there are exceptions to this, such as RSS).&lt;/p&gt;
&lt;p&gt;This physical contextuality is part of what makes the iPad such a satisfying way to consume digital content. Even though interacting with the iPad is still a closed-off, personal experience, the device can break that isolation by being handed between friends in a way that’s impracticle with a traditional PC. Taking the concept of a social interface for consuming digital content even further, &lt;a href="http://www.niemanlab.org/2011/08/the-new-york-times-imagines-the-kitchen-table-of-the-future/"&gt;this recent prototype&lt;/a&gt; by the NYTimes encourages multiple users to explore the digital paper simultaniously on a single device, even allowing them to exchange articles. It may not be a feasable product right now, but it’s exciting to see interaction designers starting to reclaim internet-connectedness as a social, communial experience.&lt;/p&gt;</description><link>http://blog.mhurrell.co.uk/post/11193189203</link><guid>http://blog.mhurrell.co.uk/post/11193189203</guid><pubDate>Sat, 08 Oct 2011 15:42:00 -0400</pubDate><category>social web</category><category>interaction design</category><category>digital content</category><category>modernism</category></item><item><title>Materials that barely decay</title><description>&lt;p&gt;&lt;blockquote&gt;“We’re making things that don’t need to be cared for. The old aesthetics of wabi and sabi depended on constant care by someone, but we designers cannot govern this someone… &lt;br/&gt;&lt;br/&gt;Furthermore, no matter how poor the material, if it’s polished with affection its value will grow. But even though the existence of someone to polish it is important, that very culture is fading. The interaction between human beings and objects has undergone a metamorphosis, and we designers are left trying to reach an unattainable goal.”&lt;/blockquote&gt;
&lt;cite&gt;— Naoto Fukasawa, &lt;a href="http://www.amazon.co.jp/HAPTIC-%E2%80%95%E4%BA%94%E6%84%9F%E3%81%AE%E8%A6%9A%E9%86%92-%E6%A0%AA%E5%BC%8F%E4%BC%9A%E7%A4%BE%E7%AB%B9%E5%B0%BE/dp/4022579315"&gt;Haptic&lt;/a&gt;&lt;/cite&gt;&lt;/p&gt;</description><link>http://blog.mhurrell.co.uk/post/9558545383</link><guid>http://blog.mhurrell.co.uk/post/9558545383</guid><pubDate>Mon, 29 Aug 2011 17:28:00 -0400</pubDate><category>Naoto Fukasawa</category><category>interaction design</category></item><item><title>From Templates to Algorithmic Design</title><description>&lt;p&gt;The current issue of &lt;a href="http://www.idpure.ch/ang/home.asp"&gt;IDPURE magazine&lt;/a&gt; leads with a couple of features on ‘Magazine Designs and the Digital age’. Rather than dwelling on paper &amp; printing techniques, the articles make a direct (and well justified) leap to responsive design - or ‘algorithmic design’ as they refer to it.&lt;/p&gt;
&lt;p&gt;&lt;img height="300" src="http://media.tumblr.com/tumblr_lqniqfVRUH1qzyi42.jpg"/&gt;&lt;/p&gt;
&lt;p&gt;There’s already a lot of writing on the internet about responsive design from technical design perspectives, but until now I haven’t encountered any that acknowledge the deeper editorial issues that arise from algorithmically-generated content combinations. The article &amp; dialogue in IDPURE doesn’t pretend to have any answers, instead they raise open-minded questions about digital content design and its relationship to the printed content it has disrupted.&lt;/p&gt;
&lt;p&gt;&lt;img height="300" src="http://media.tumblr.com/tumblr_lqnisoxHxA1qzyi42.jpg"/&gt;&lt;/p&gt;
&lt;p&gt;If you’re working with responsive design and editorial content it’s worth reading.&lt;/p&gt;</description><link>http://blog.mhurrell.co.uk/post/9510626104</link><guid>http://blog.mhurrell.co.uk/post/9510626104</guid><pubDate>Sun, 28 Aug 2011 14:51:00 -0400</pubDate><category>responsive design</category><category>magazines</category><category>editorial</category><category>art direction</category><category>IDPURE</category></item><item><title>Fluid grids and orientation</title><description>&lt;p&gt;Designing for tablets is hard. Designing for tablets with a 16:9 aspect ratio is harder. If you’ve created web layouts for the iPad using fluid grids, you’ve no doubt seen your perfectly formatted layout change when shifted from landscape orientation to portrait (or vice-versa).&lt;/p&gt;
&lt;p&gt;&lt;img height="900" src="http://mhurrell.co.uk/demos/4-3-ratio.jpg"/&gt;&lt;/p&gt;
&lt;p&gt;This happens because whilst the layout and embedded content (images, video etc) are sized relatively to the pixel width of the viewport, the typography is not. It’s not too hard to design with enough affordance to cope with the variation caused by the iPad’s 4:3 aspect ratio, but most of the Android tablets have 16:9 displays. These displays make the orientation difference even more pronounced.&lt;/p&gt;
&lt;p&gt;&lt;img height="822" src="http://mhurrell.co.uk/demos/16-9-ratio.jpg"/&gt;&lt;/p&gt;
&lt;p&gt;In this second illustration the photograph is so large that it can’t fit onto a single screen when the device is in landscape orientation, yet the image is small and the text overflowing in portrait mode.&lt;/p&gt;
&lt;p&gt;At this point I feel I should make a few disclaimers. I know &lt;a href="http://www.flickr.com/photos/adactio/535249433"&gt;there is no fold&lt;/a&gt;. I understand designing with affordance for the vagueries of CSS text flow and unpredictable content. But it should also be obvious that design variance at this scale is going to affect the visual hierarchy of the page in a significant way.&lt;/p&gt;
&lt;p&gt;As I suggested earlier, this issue is caused by the typography being sized absolutely to the viewport rather than relatively to it. Even if we use &lt;em&gt;em&lt;/em&gt;s or %s in our CSS to relatively size text, the base font-size (the value which our other font sizes are scaled in relation to) is still an absolute value* (‘font-size: 62.5%’ will be 10px no matter what your viewport size is). Although I could use a media query to apply a smaller font-size to the text when it’s in portrait orientation, choosing to branch styles might add significant hidden complication and cost for development and QA further down the line.&lt;/p&gt;
&lt;p&gt;To style typography that can scale in relation to a fluid grid, we need the ability to specify the base font-size relatively. To express that the font-size for a 960px box should be 150% of the font-size for a 640px box. I suppose it would be simple enough to create this styling with javascript or a gradiated stack of media queries, but it feels like it could (should?) be as simple to set in CSS as setting a layout box to have 50% width. Something like:&lt;/p&gt;
&lt;pre&gt;.example {font-size[width="640"]: 10px;}&lt;/pre&gt;
&lt;p&gt;Whereby when the .example is 640px wide the font-size is 10px, but when the .example is 960px wide the font-size is 15px. Descendent elements would then simply have their font-size set in &lt;em&gt;em&lt;/em&gt;s or %s.&lt;/p&gt;
&lt;p&gt;*Until you zoom your browser window.&lt;/p&gt;</description><link>http://blog.mhurrell.co.uk/post/6806897529</link><guid>http://blog.mhurrell.co.uk/post/6806897529</guid><pubDate>Wed, 22 Jun 2011 19:34:25 -0400</pubDate><category>fluid grids</category><category>typography</category><category>responsive design</category><category>ipad</category><category>android</category></item><item><title>Product nurturing</title><description>&lt;blockquote&gt;“Verbalising design is another act of design”&lt;/blockquote&gt;

&lt;p&gt;&lt;cite&gt;— Kenya Hara, &lt;a href="http://www.amazon.com/Designing-Design-Kenya-Hara/dp/303778105X"&gt;Designing Design&lt;/a&gt;&lt;/cite&gt;&lt;/p&gt;

&lt;p&gt;I had that phrase echoing around in my head as I discovered Takram’s website  yesterday.&lt;/p&gt;

&lt;blockquote&gt;“Takram is a product and service nurturing firm based in Tokyo, Japan that integrates design and engineering skills to help companies create and nurture successful businesses. Takram doesn’t simply create products or services. Instead, we nurture them with our clients through cycles of prototype testing, evaluation, and redesign. Takram’s tight collaboration with the client throughout the entire process ensures high satisfaction and superior quality of the outcome. The product nurturing service includes market research, concept development, R&amp;D, Engineering, Design, Prototyping, and Testing &amp; Evaluation among others.”&lt;/blockquote&gt;

&lt;p&gt;&lt;cite&gt;— &lt;a href="http://www.takram.com/"&gt;Takram Design Engineering&lt;/a&gt;&lt;/cite&gt;&lt;/p&gt;

&lt;p&gt;I’m sure it’s not a coincidence that their output looks phenomenal.&lt;/p&gt;</description><link>http://blog.mhurrell.co.uk/post/6077405553</link><guid>http://blog.mhurrell.co.uk/post/6077405553</guid><pubDate>Wed, 01 Jun 2011 14:15:00 -0400</pubDate><category>Takram Design Engineering</category><category>product design</category><category>specialisation</category></item><item><title>Space 2011</title><description>&lt;p&gt;I’m in complete awe of the retro/sci-fi style of my girlfriend’s new Casio LDF50-7CF (discovered &lt;em&gt;via&lt;/em&gt; the addictive &lt;a href="http://svpply.com/mhurrell"&gt;Svpply&lt;/a&gt;).
&lt;a href="http://www.flickr.com/photos/markhurrell/5687875801/sizes/l/in/photostream/"&gt;&lt;img height="300" src="http://media.tumblr.com/tumblr_lkowwmCEGc1qzyi42.jpg"/&gt;&lt;/a&gt;
&lt;/p&gt;
&lt;p&gt;It’s quite the contrast to my F-91W, ownership of which I last week discovered is being used as a &lt;a href="http://www.guardian.co.uk/world/2011/apr/25/guantanamo-files-casio-wristwatch-alqaida?INTCMP=SRCH"&gt;contributing factor to continued detention of prisoners stationed at Guantánamo Bay&lt;/a&gt;.
&lt;a href="http://www.flickr.com/photos/markhurrell/5687876321/sizes/l/in/photostream/"&gt;&lt;img height="300" src="http://media.tumblr.com/tumblr_lkoxbhxOsT1qzyi42.jpg"/&gt;&lt;/a&gt;
&lt;/p&gt;</description><link>http://blog.mhurrell.co.uk/post/5199152208</link><guid>http://blog.mhurrell.co.uk/post/5199152208</guid><pubDate>Wed, 04 May 2011 17:49:00 -0400</pubDate></item><item><title>VW Golf</title><description>&lt;p&gt;Found this beauty parked outside my flat this morning
&lt;a href="http://www.flickr.com/photos/markhurrell/5533272316/sizes/l/in/set-72157626156783213/"&gt;&lt;img height="300" src="http://media.tumblr.com/tumblr_li68fhnjCK1qzyi42.jpg"/&gt;&lt;/a&gt;
&lt;/p&gt;</description><link>http://blog.mhurrell.co.uk/post/3906582971</link><guid>http://blog.mhurrell.co.uk/post/3906582971</guid><pubDate>Wed, 16 Mar 2011 18:15:30 -0400</pubDate></item><item><title>2010</title><description>&lt;p&gt;A year in photographs
&lt;a href="http://www.flickr.com/photos/markhurrell/5523550583/sizes/l/in/set-72157626259362654/"&gt;&lt;img height="300" src="http://media.tumblr.com/tumblr_li0q04Urdj1qzyi42.jpg"/&gt;&lt;/a&gt;
&lt;/p&gt;
&lt;p&gt;
&lt;a href="http://www.flickr.com/photos/markhurrell/5523660775/sizes/l/in/set-72157626134222967/"&gt;&lt;img height="300" src="http://media.tumblr.com/tumblr_li0q173Jkw1qzyi42.jpg"/&gt;&lt;/a&gt;
&lt;/p&gt;
&lt;p&gt;
&lt;a href="http://www.flickr.com/photos/markhurrell/5330876513/sizes/l/in/set-72157625764121210/"&gt;&lt;img height="300" src="http://media.tumblr.com/tumblr_li0q31M9AI1qzyi42.jpg"/&gt;&lt;/a&gt;
&lt;/p&gt;
&lt;p&gt;
&lt;a href="http://www.flickr.com/photos/markhurrell/5524172366/sizes/l/in/set-72157626134014983/"&gt;&lt;img height="300" src="http://media.tumblr.com/tumblr_li0q4973Tn1qzyi42.jpg"/&gt;&lt;/a&gt;
&lt;/p&gt;
&lt;p&gt;
&lt;a href="http://www.flickr.com/photos/markhurrell/5524147340/sizes/l/in/set-72157626259303136/"&gt;&lt;img height="300" src="http://media.tumblr.com/tumblr_li0q56gTrW1qzyi42.jpg"/&gt;&lt;/a&gt;
&lt;/p&gt;</description><link>http://blog.mhurrell.co.uk/post/3841751203</link><guid>http://blog.mhurrell.co.uk/post/3841751203</guid><pubDate>Sun, 13 Mar 2011 19:02:33 -0400</pubDate></item><item><title>1941</title><description>&lt;p&gt;Ten Mile Map of GB, Military Edition 1941
&lt;a href="http://www.flickr.com/photos/markhurrell/5523330308/sizes/l/in/set-72157626257182486/"&gt;&lt;img height="300" src="http://media.tumblr.com/tumblr_li0bhiHkpk1qzyi42.jpg"/&gt;&lt;/a&gt;
&lt;/p&gt;
&lt;p&gt;The full set is over on &lt;a href="http://www.flickr.com/photos/markhurrell/sets/72157626257182486/"&gt;Flickr&lt;/a&gt;&lt;/p&gt;</description><link>http://blog.mhurrell.co.uk/post/3834614624</link><guid>http://blog.mhurrell.co.uk/post/3834614624</guid><pubDate>Sun, 13 Mar 2011 13:41:26 -0400</pubDate></item><item><title>London Transport Bus Map</title><description>&lt;p&gt;London Transport Bus Map from 1947
&lt;a href="http://www.flickr.com/photos/markhurrell/5393990978/sizes/l/in/set-72157625794363961/"&gt;&lt;img height="300" src="http://media.tumblr.com/tumblr_lfp9579yFq1qzyi42.jpg"/&gt;&lt;/a&gt;
&lt;/p&gt;
&lt;p&gt;&lt;a href="http://www.flickr.com/photos/markhurrell/sets/72157625794363961/"&gt;More images&lt;/a&gt;&lt;/p&gt;</description><link>http://blog.mhurrell.co.uk/post/2963538163</link><guid>http://blog.mhurrell.co.uk/post/2963538163</guid><pubDate>Thu, 27 Jan 2011 16:09:00 -0500</pubDate></item><item><title>Updating the Helvetica font stack</title><description>&lt;p&gt;For the last few years specifying Helvetica Neue followed by Arial in your CSS has been the favoured technique if you wanted Helvetica on your website. The aim is to present Mac users with Helvetica Neue, whilst Windows users see Arial (a Helvetica variant optimised for Windows). I don’t know who invented the technique, but I’ve seen it recommended by countless &lt;a href="http://webtypography.net/sxsw2007/webtypography-sxsw2007-notes.pdf"&gt;web luminaries&lt;/a&gt; and I’ve used it in many projects myself. Recently I’ve encountered a few problems with this method that have lead me to rethink this approach.&lt;/p&gt;
&lt;p&gt;The first issue affects pre-&lt;em&gt;Snow Leopard&lt;/em&gt; Macs with Adobe’s extended font pack installed. On these machines Safari renders Helvetica Neue Bold as Helvetica Neue Bold Outline, making it almost illegible onscreen.&lt;/p&gt;
&lt;p&gt;&lt;img height="300" class="shadow" src="http://media.tumblr.com/tumblr_lflimvZtMP1qzyi42.jpg"/&gt;&lt;/p&gt;
&lt;p&gt;Considering raw numbers alone this issue is quite rare, but unfortunately there’s a pretty notable demographic where this setup comes as default on every desk - large creative agencies. The same large creative agencies that commission websites by the hundred.&lt;/p&gt;
&lt;p&gt;Another bug hits Windows users with a pirated version of Helvetica Neue installed on their system. This can cause some CSS styles to trigger Webkit into having… a bit of a breakdown.&lt;/p&gt;
&lt;p&gt;
&lt;img height="300" class="shadow" src="http://media.tumblr.com/tumblr_lfnbfrHisO1qzyi42.jpg"/&gt;&lt;/p&gt;
&lt;p&gt;These are the bugs I can consistently reproduce, I’ve had reports of others but I haven’t managed to replicate them myself. Either way, both bugs occur in modern browsers &amp; render the page unreadable, which is enough reason for me to look into a different solution. As I was mid Wikipedia-ing some background information for the problem, I noticed that Wikipedia itself renders in Helvetica (on a Mac) yet doesn’t have the bug. Turns out that Wikipedia simply specify the following:&lt;/p&gt;
&lt;pre&gt;font-family: sans-serif;&lt;/pre&gt;
&lt;p&gt;A bit of testing revealed that for the most part, just specifying &lt;em&gt;sans-serif&lt;/em&gt; will give Windows users Arial and Mac users Helvetica. The catch? Opera for Mac interprets sans-serif as Lucida Grande, whilst Linux browsers seem to pick an arbitrary font from a hat (but then as they don’t have Helvetica Neue or Arial installed, this was how they were behaving previously anyway).&lt;/p&gt;
&lt;p&gt;We can reign in Linux by specifying a couple of open-source Helvetica derivatives that are installed on all the main Linux distros; Helmet &amp; Freesans. Opera for Mac are planning to change their sans-serif output to Helvetica or Arial within the next couple of releases to benefit platform consistency.&lt;/p&gt;
&lt;p&gt;So here’s the font stack:&lt;/p&gt;
&lt;pre&gt;font-family: Helmet, Freesans, sans-serif;&lt;/pre&gt;
&lt;p id="post-update-1"&gt;[Update] &lt;br/&gt;I’ve had the opportunity to test this font stack on a few other devices recently, and have updated the table to show those findings.&lt;/p&gt;
&lt;p&gt;Due to the limited selection of fonts available on many mobile platforms (and my unfamiliarity with many of them) I’ve added more options to the &lt;a href="http://mhurrell.co.uk/demos/mobile-sanserif-test.html"&gt;test page&lt;/a&gt;.&lt;/p&gt;
&lt;table cellspacing="0"&gt;&lt;tr&gt;&lt;th colspan="2"&gt;Windows&lt;/th&gt;
   &lt;/tr&gt;&lt;tr&gt;&lt;th&gt;IE&lt;/th&gt;
      &lt;td&gt;Arial&lt;/td&gt;
   &lt;/tr&gt;&lt;tr&gt;&lt;th&gt;Firefox&lt;/th&gt;
      &lt;td&gt;Arial&lt;/td&gt;
   &lt;/tr&gt;&lt;tr&gt;&lt;th&gt;Webkit&lt;/th&gt;
      &lt;td&gt;Arial&lt;/td&gt;
   &lt;/tr&gt;&lt;tr&gt;&lt;th&gt;Opera&lt;/th&gt;
      &lt;td&gt;Arial&lt;/td&gt;
   &lt;/tr&gt;&lt;tr&gt;&lt;th colspan="2"&gt;Mac&lt;/th&gt;
   &lt;/tr&gt;&lt;tr&gt;&lt;th&gt;Firefox&lt;/th&gt;
      &lt;td&gt;Helvetica&lt;/td&gt;
   &lt;/tr&gt;&lt;tr&gt;&lt;th&gt;Webkit&lt;/th&gt;
      &lt;td&gt;Helvetica&lt;/td&gt;
   &lt;/tr&gt;&lt;tr&gt;&lt;th&gt;Opera&lt;/th&gt;
      &lt;td&gt;Lucida Grande &lt;br/&gt;(upcoming release will change this to Helvetica)&lt;/td&gt;
   &lt;/tr&gt;&lt;tr&gt;&lt;th colspan="2"&gt;Linux&lt;/th&gt;
   &lt;/tr&gt;&lt;tr&gt;&lt;th&gt;Firefox&lt;/th&gt;
      &lt;td&gt;Helmet or Freesans &lt;br/&gt;(open source alternatives to Helvetica)&lt;/td&gt;
   &lt;/tr&gt;&lt;tr&gt;&lt;th&gt;Webkit&lt;/th&gt;
      &lt;td&gt;Helmet or Freesans&lt;/td&gt;
   &lt;/tr&gt;&lt;tr&gt;&lt;th&gt;Opera&lt;/th&gt;
      &lt;td&gt;Helmet or Freesans&lt;/td&gt;
   &lt;/tr&gt;&lt;tr&gt;&lt;th colspan="2"&gt;Other&lt;/th&gt;
   &lt;/tr&gt;&lt;tr&gt;&lt;th&gt;Android 1.6&lt;/th&gt;
      &lt;td&gt;Tahoma &lt;br/&gt;(is displayed for all sans-serif font stacks)&lt;/td&gt;
   &lt;/tr&gt;&lt;tr&gt;&lt;th&gt;Android 2.2&lt;/th&gt;
      &lt;td&gt;Tahoma &lt;br/&gt;(is displayed for all sans-serif font stacks)&lt;/td&gt;
   &lt;/tr&gt;&lt;tr&gt;&lt;th&gt;Android 3.0.1&lt;/th&gt;
      &lt;td&gt;Droid Sans &lt;br/&gt;(is displayed for all sans-serif font stacks)&lt;/td&gt;
   &lt;/tr&gt;&lt;tr&gt;&lt;th&gt;Blackberry OS 5&lt;/th&gt;
      &lt;td&gt;BBAlpha Sans &lt;br/&gt;(is displayed for all sans-serif font stacks)&lt;/td&gt;
   &lt;/tr&gt;&lt;tr&gt;&lt;th&gt;Blackberry OS 6&lt;/th&gt;
      &lt;td&gt;BBAlpha Sans &lt;br/&gt;(is displayed for all sans-serif font stacks)&lt;/td&gt;
   &lt;/tr&gt;&lt;tr&gt;&lt;th&gt;Blackberry Playbook&lt;/th&gt;
      &lt;td&gt;Arial&lt;/td&gt;
   &lt;/tr&gt;&lt;tr&gt;&lt;th&gt;iPhone&lt;/th&gt;
      &lt;td&gt;Helvetica&lt;/td&gt;
   &lt;/tr&gt;&lt;tr&gt;&lt;th&gt;iPad&lt;/th&gt;
      &lt;td&gt;Helvetica&lt;/td&gt;
   &lt;/tr&gt;&lt;tr&gt;&lt;th&gt;Kindle 2&lt;/th&gt;
      &lt;td&gt;PMN Caecilia &lt;br/&gt;(is displayed for all sans-serif font stacks)&lt;/td&gt;
   &lt;/tr&gt;&lt;tr&gt;&lt;th&gt;Kindle 3&lt;/th&gt;
      &lt;td&gt;Helvetica Neue&lt;/td&gt;
   &lt;/tr&gt;&lt;tr&gt;&lt;th&gt;Nook&lt;/th&gt;
      &lt;td&gt;Tahoma &lt;br/&gt;(is displayed for all sans-serif font stacks)&lt;/td&gt;
   &lt;/tr&gt;&lt;tr&gt;&lt;th&gt;Windows Mobile 6.1&lt;/th&gt;
      &lt;td&gt;Tahoma &lt;br/&gt;(is displayed for all sans-serif font stacks)&lt;/td&gt;
   &lt;/tr&gt;&lt;tr&gt;&lt;th&gt;Windows Mobile 7&lt;/th&gt;
      &lt;td&gt;Tahoma&lt;/td&gt;
   &lt;/tr&gt;&lt;/table&gt;</description><link>http://blog.mhurrell.co.uk/post/2946358183</link><guid>http://blog.mhurrell.co.uk/post/2946358183</guid><pubDate>Wed, 26 Jan 2011 17:00:00 -0500</pubDate></item><item><title>Aspen</title><description>&lt;p&gt;&lt;a href="http://www.flickr.com/photos/markhurrell/5330878165/sizes/l/in/photostream/"&gt;&lt;img height="300" src="http://media.tumblr.com/tumblr_lemjjectSX1qzyi42.jpg"/&gt;&lt;/a&gt;&lt;/p&gt;</description><link>http://blog.mhurrell.co.uk/post/2628472965</link><guid>http://blog.mhurrell.co.uk/post/2628472965</guid><pubDate>Thu, 06 Jan 2011 18:22:09 -0500</pubDate></item></channel></rss>

