<?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>Bearded is a full-service design and development agency. We are passionate about creating websites, brands, applications and print materials that help you connect with your audience.bearded.com</description><title>Bearded</title><generator>Tumblr (3.0; @beardedstudio)</generator><link>http://blog.bearded.com/</link><item><title>Zoobean Is Hiring a Lead Developer</title><description>&lt;p&gt;&lt;span&gt;Zoobean is looking for a full-stack web developer!&lt;/span&gt;&lt;/p&gt;
&lt;p&gt;&lt;span&gt;Zoobean (zoobean.com) is a Ruby on Rails web application for children’s books built by Bearded (bearded.com).&lt;/span&gt;&lt;/p&gt;
&lt;p&gt;Zoobean makes it easy to find remarkable children’s educational products, starting with books, that have been recommended and curated by parents. &lt;span&gt;Books on Zoobean are catalogued by recommended age, relevant topics, characters&amp;#8217; backgrounds, and other tags that matter to families. The company offers a subscription service, direct sales of featured books, and affiliate sales of books in its catalog.&lt;/span&gt;&lt;/p&gt;
&lt;p&gt;&lt;span&gt;Zoobean has already secured $500,000 in seed investment, led by Kapor Capital (Mitch Kapor is the &lt;/span&gt;&lt;span&gt;founder Lotus Development Corporation, designed Lotus 1-2-3, and is the founding chair of the Mozilla Foundation&lt;/span&gt;&lt;span&gt;.)&lt;/span&gt;&lt;/p&gt;
&lt;p&gt;&lt;span&gt;Our ideal candidate has a strong working knowledge of:&lt;/span&gt;&lt;/p&gt;
&lt;ul&gt;&lt;li&gt;Ruby&lt;/li&gt;
&lt;li&gt;Source control software (preferably Git)&lt;/li&gt;
&lt;li&gt;Relational databases (we use Postgres, but any will do)&lt;/li&gt;
&lt;li&gt;MVC architecture&lt;/li&gt;
&lt;li&gt;Object-oriented programming&lt;/li&gt;
&lt;li&gt;JavaScript&lt;/li&gt;
&lt;li&gt;CSS and CSS precompilers&lt;/li&gt;
&lt;/ul&gt;&lt;p&gt;&lt;span&gt;Though you may not have worked with everything we’re using on Zoobean, experience with the following technologies and techniques is preferred:&lt;/span&gt;&lt;/p&gt;
&lt;ul&gt;&lt;li&gt;Rails&lt;/li&gt;
&lt;li&gt;SASS&lt;/li&gt;
&lt;li&gt;Compass&lt;/li&gt;
&lt;li&gt;Breakpoint&lt;/li&gt;
&lt;li&gt;jQuery&lt;/li&gt;
&lt;li&gt;Heroku&lt;/li&gt;
&lt;li&gt;Responsive web design techniques&lt;/li&gt;
&lt;/ul&gt;&lt;p&gt;&lt;span&gt;If chosen, Zoobean’s new developer will spend 3-5 weeks working on-site at Bearded in Pittsburgh. Bearded’s developers will work closely with you to help you acclimate to the application, it&amp;#8217;s technologies, and approach. Once you know your way around, you&amp;#8217;ll become Zoobean’s lead developer, communicating and collaborating with Bearded when helpful.&lt;/span&gt;&lt;/p&gt;
&lt;p&gt;The salary for this position is competitive, and the opportunities for honing your skills and employing new web technologies are great.&lt;/p&gt;
&lt;p&gt;Not only that, but you get to help grow this start-up with a heart and give families remarkable resources that empower their children to imagine and achieve anything!&lt;/p&gt;
&lt;p&gt;&lt;span&gt;Interested applicants can send the following to felix@zoobean.com&amp;#160;:&lt;/span&gt;&lt;/p&gt;
&lt;ul&gt;&lt;li&gt;Online résumé&lt;/li&gt;
&lt;li&gt;GitHub profile with examples of relevant work&lt;/li&gt;
&lt;li&gt;Stack Overflow profile&lt;/li&gt;
&lt;/ul&gt;&lt;p&gt;&lt;span&gt;Thanks for your interest, we’ll see you on the internets!&lt;/span&gt;&lt;/p&gt;
&lt;p&gt;&lt;span&gt;Bearded &amp;amp; Zoobean&lt;/span&gt;&lt;/p&gt;</description><link>http://blog.bearded.com/post/50434946173</link><guid>http://blog.bearded.com/post/50434946173</guid><pubDate>Tue, 14 May 2013 15:01:36 -0400</pubDate><category>rwd</category><category>responsive web design</category><category>job</category><category>web development</category></item><item><title>Zoobean Is Live!</title><description>&lt;p&gt;&lt;img alt="image" src="http://media.tumblr.com/0af195308383af69ae797a70c2b76477/tumblr_inline_mmqr8lV6E01qz4rgp.jpg"/&gt;&lt;/p&gt;
&lt;p class="byline"&gt;by &lt;a href="http://twitter.com/elefontpress" title="Matt Griffin"&gt;Matt Griffin&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;OMG, y&amp;#8217;all, &lt;a href="https://www.zoobean.com/"&gt;Zoobean is live&lt;/a&gt;!&lt;/p&gt;
&lt;p&gt;We&amp;#8217;ve been working on this project for some time here at Bearded, and man are we psyched to finally show it off.&lt;a href="https://www.zoobean.com/"&gt; Zoobean is a unique new site for children&amp;#8217;s books&lt;/a&gt;. It has a special filter system that lets you find the right books for children based on things like age, topics (like bullying or holidays), or character background (like gender or ethnicity). All the books are hand-selected by parents, as well as reviewed and rated by users.&lt;/p&gt;
&lt;p&gt;Zoobean also selects special books each month that users can subscribe to receive monthly in the mail, or buy as one-off purchases.&lt;/p&gt;
&lt;p&gt;There are a ton of neat features on this site – so much that I can&amp;#8217;t get into them all here – and of course, the whole thing is responsive. &lt;a href="https://www.zoobean.com/"&gt;You should probably just go check it out&lt;/a&gt;.&lt;/p&gt;
&lt;p&gt;Not only are they helping parents and friends find books that kids can relate to, but Zoobean also contributes a portion of its proceeds to a selected youth literacy charity each month. So there&amp;#8217;s plenty to feel good about with these guys.&lt;/p&gt;
&lt;p&gt;I can&amp;#8217;t thank all the members of the Bearded team enough for their hard work on this site. I can&amp;#8217;t imagine a more creative and talented bunch of folks than the ones who worked on this project. My hat goes off to &lt;a href="https://twitter.com/brettbender"&gt;Brett Bender&lt;/a&gt;, &lt;a href="https://twitter.com/brainvsbraun"&gt;Matt Braun&lt;/a&gt;, &lt;a href="https://twitter.com/patrickfulton"&gt;Patrick Fulton&lt;/a&gt;, and &lt;a href="https://twitter.com/marktfrey"&gt;Mark Frey&lt;/a&gt;.&lt;/p&gt;
&lt;p&gt;Our clients and the owners of Zoobean, Felix and Jordan, were tireless in their support of and commitment to the project. They&amp;#8217;ve been integral parts of the team, and I deeply appreciate that they brought this super fun project to our door.&lt;/p&gt;
&lt;p&gt;But enough about us. &lt;a href="https://www.zoobean.com/"&gt;Go check out some kids books&lt;/a&gt;!&lt;/p&gt;</description><link>http://blog.bearded.com/post/50428142154</link><guid>http://blog.bearded.com/post/50428142154</guid><pubDate>Tue, 14 May 2013 12:59:00 -0400</pubDate><category>responsive web design</category><category>rwd</category></item><item><title>From the Trenches: Breakpoint - easy media queries in Sass &amp; Compass</title><description>&lt;p class="byline"&gt;by &lt;a href="http://twitter.com/patrickfulton" title="Matt Griffin"&gt;Patrick Fulton&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;&lt;em&gt;tl;dr:  We now use nesting and a Compass extension to manage our media queries.&lt;/em&gt;&lt;/p&gt;
&lt;p&gt;Several months ago, we started experimenting with an excellent Compass extension called &lt;a href="http://breakpoint-sass.com/"&gt;Breakpoint&lt;/a&gt;. Breakpoint lets you create variables for your most commonly used media queries, and then it handles all of the heavy lifting for you.&lt;/p&gt;
&lt;p&gt;Previously, we had been managing our media queries in Compass by splitting them out into partials: one for the base / mobile-first styles, one for &amp;#8220;small&amp;#8221; screens, one for &amp;#8220;medium&amp;#8221; screens, and so on. Then, in our main compiled file, we&amp;#8217;d &amp;#8220;@import&amp;#8221; those files inside of their respective media queries. You can see an example of this approach &lt;a href="https://github.com/elefontpress/rwd-grid-example/blob/master/app/scss/screen.scss"&gt;here&lt;/a&gt;.&lt;/p&gt;
&lt;p&gt;Doing this isn&amp;#8217;t wrong, and it&amp;#8217;s not even a bad idea, but for projects that had entered their &amp;#8220;support&amp;#8221; phase, going back and managing the styles across those media query partials isn&amp;#8217;t exactly my idea of fun. Not only do you lose context, but this approach is also prone to unnecessary code duplication and specificity issues.&lt;/p&gt;
&lt;p&gt;Enter Sass 3.2, which lets you do all kinds of &lt;a href="http://thesassway.com/intermediate/responsive-web-design-in-sass-using-media-queries-in-sass-32"&gt;awesome things with media queries&lt;/a&gt;, including letting you nest them and use variables in them. Awesome, indeed.&lt;/p&gt;
&lt;h3&gt;Back to Breakpoint&lt;/h3&gt;
&lt;p&gt;Nesting media queries in Compass is already a huge win, but Breakpoint gives you a more managable workflow by letting you set up the variables &lt;span&gt;that you&amp;#8217;ll use for your media queries. It can also turn your pixel values into ems, if that&amp;#8217;s how you like to roll (&lt;/span&gt;&lt;a href="http://blog.cloudfour.com/the-ems-have-it-proportional-media-queries-ftw/"&gt;and you do, right?&lt;/a&gt;&lt;span&gt;).&lt;/span&gt;&lt;/p&gt;
&lt;p&gt;Breakpoint also provides an easy way to generate CSS for browsers that don&amp;#8217;t support media queries with its &lt;a href="https://github.com/Team-Sass/breakpoint/wiki/No-Query-Fallbacks"&gt;No Query Fallbacks&lt;/a&gt; feature.&lt;/p&gt;
&lt;h3&gt;That&amp;#8217;s a .wrap&lt;/h3&gt;
&lt;p&gt;If you&amp;#8217;re a Compass user, and you&amp;#8217;re developing responsive sites, you definitely need to try Breakpoint. If the benefits aren&amp;#8217;t immediately apparent to you, they will be when you go back to that project six or eight months down the road.&lt;/p&gt;
&lt;p&gt;If you like, you can also check out the Breakpoint presentation that I&lt;span&gt; recently gave at the &lt;/span&gt;&lt;a href="https://twitter.com/sassypgh"&gt;SassyPgh&lt;/a&gt; meetup.&lt;/p&gt;

&lt;p&gt;&lt;em&gt;&amp;#8212; Special thanks to our pal &lt;a href="https://twitter.com/bencallahan"&gt;Ben Callahan&lt;/a&gt; at Sparkbox for planting the idea in our heads that you can &lt;a href="http://seesparkbox.com/foundry/my-media_mixin_old_ie_fixin_without_js"&gt;split IE-specific styles out into their own files&lt;/a&gt;. This ultimately led us to discovering Breakpoint.&lt;/em&gt;&lt;/p&gt;</description><link>http://blog.bearded.com/post/49790099984</link><guid>http://blog.bearded.com/post/49790099984</guid><pubDate>Mon, 06 May 2013 15:08:25 -0400</pubDate></item><item><title>Meet the Neighbors: Bearded | The Beauty Shoppe</title><description>&lt;a href="http://www.thebeautyshoppe.org/journal/meet-the-neighbors-bearded"&gt;Meet the Neighbors: Bearded | The Beauty Shoppe&lt;/a&gt;: &lt;p&gt;You can watch a nifty little video of Matt Griffin talking about Bearded’s approach to responsive web design process and working with clients on a website we built (whoa, meta!). It’s short, and Matt’s hair will never look that immaculate again – check it out!&lt;/p&gt;</description><link>http://blog.bearded.com/post/49276911851</link><guid>http://blog.bearded.com/post/49276911851</guid><pubDate>Tue, 30 Apr 2013 15:25:42 -0400</pubDate></item><item><title>RWD Summit</title><description>&lt;p class="byline"&gt;by &lt;a href="http://twitter.com/elefontpress" title="Matt Griffin"&gt;Matt Griffin&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;I&amp;#8217;m going to to be speaking about responsive web design and client process at &lt;a href="http://environmentsforhumans.com/2013/responsive-web-design-summit"&gt;RWD Summit&lt;/a&gt; this week. RWD Summit is an online web conference, so you can do experience the whole thing right from your desk!&lt;/p&gt;
&lt;p&gt;The conference chock full of great speakers like &lt;a href="https://twitter.com/dmolsen"&gt;Dave Olsen&lt;/a&gt;, &lt;a href="https://twitter.com/TrentWalton"&gt;Trent Walton&lt;/a&gt;, &lt;a href="https://twitter.com/danielmall"&gt;Dan Mall&lt;/a&gt;, &lt;a href="https://twitter.com/sara_ann_marie"&gt;Sara Wachter Boettcher&lt;/a&gt;, &lt;a href="https://twitter.com/timbrown"&gt;Tim Brown&lt;/a&gt;, &lt;a href="https://twitter.com/bencallahan"&gt;Ben Callahan&lt;/a&gt;, &lt;a href="https://twitter.com/jensimmons"&gt;Jen Simmons&lt;/a&gt;, &lt;a href="https://twitter.com/davatron5000"&gt;Dave Rupert&lt;/a&gt;, and more!&lt;/p&gt;
&lt;p&gt;You can still &lt;a href="http://environmentsforhumans.com/2013/responsive-web-design-summit"&gt;sign up&lt;/a&gt;, and if you use the code &lt;span&gt;20MATT, you&amp;#8217;ll get 20% off on your tickets.&lt;/span&gt;&lt;/p&gt;
&lt;p&gt;See you on the internets,&lt;/p&gt;
&lt;p&gt;–MG&lt;/p&gt;</description><link>http://blog.bearded.com/post/48040227360</link><guid>http://blog.bearded.com/post/48040227360</guid><pubDate>Mon, 15 Apr 2013 10:01:10 -0400</pubDate></item><item><title>Lou Ferrigno Gives His Body 110%, Should You?</title><description>&lt;p class="byline"&gt;by &lt;a href="http://twitter.com/elefontpress" title="Matt Griffin"&gt;Matt Griffin&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;The other day, &lt;a href="https://twitter.com/patrickfulton"&gt;Patrick&lt;/a&gt; and I were discussing approaches to setting the base font size of our websites. When we use relative measurements like ems, you see, that relative measure has to come from somewhere. Historically we’d do that by setting the &lt;code&gt;font-size&lt;/code&gt; of the element. There have been several approaches over the years, and perhaps most recently &lt;a href="http://filamentgroup.com/lab/how_we_learned_to_leave_body_font_size_alone/"&gt;the Filament Group made a compelling argument to set it at 100%&lt;/a&gt;. The points they make are great, and it’s an approach we’ve been using on our sites for a while.&lt;/p&gt;
&lt;p&gt;But here’s the rub: 100% (using default browser settings, that translates to 16px) is not a good default font size a lot of the time. Paragraphs are often too big at that size, which mean they need to be set to a lower size, like 0.875em (14px). Once the paragraphs are that size, you generally want other elements to line up, so then you have to set your unordered and ordered lists. And the headings need to fall in line at related sizes, too.&lt;/p&gt;
&lt;p&gt;So, OK, not so bad. Your type is all worked out, right? Well sure, until someone uses a table or a definition list. Then we have a problem again. And this is exactly the situation that bit us just after launching the new site for the &lt;a href="http://www.google.com/url?q=https%3A%2F%2Fwww.pittsburghglasscenter.org%2F&amp;amp;sa=D&amp;amp;sntz=1&amp;amp;usg=AFQjCNFV8mB-9HlmL1rdbFXOdnteDDLb4w"&gt;Pittsburgh Glass Center&lt;/a&gt;. It was an edge case kind of thing, and I doubt anyone besides myself noticed before I fixed it, but – it’s the kind of thing that makes feel like our approach is too brittle. It requires too much attention; it’s not an extensible solution.&lt;/p&gt;
&lt;p&gt;What I really wanted to do was to start with &lt;code&gt;body { font-size: 87.5%; }&lt;/code&gt;, then add some media queries to scale the font size up and down, as necessary, for all elements. Why media queries? Well, something the web world knows from graphic design is the idea of a readable measure. Basically, as line length increases, font size should also increase to limit the number of characters per line and aid in readability. (&lt;a href="http://www.google.com/url?q=http%3A%2F%2Ftrentwalton.com%2F2012%2F06%2F19%2Ffluid-type%2F&amp;amp;sa=D&amp;amp;sntz=1&amp;amp;usg=AFQjCNHCRxeYb1KzGj8vSGkaWZmesXCHqw"&gt;Trent Walton describes the responsive web approach quite well on his blog&lt;/a&gt;.)&lt;/p&gt;
&lt;p&gt;This approach left us with something like this:&lt;/p&gt;
&lt;p&gt;&lt;code&gt;body { &lt;br/&gt;  font-size: 87.5%; &lt;br/&gt;  @media (min-width: 55em) { &lt;br/&gt;   font-size: 100%; &lt;br/&gt;  } &lt;br/&gt;  @media (min-width: 70em) { &lt;br/&gt;   font-size: 110%; &lt;br/&gt;  } &lt;br/&gt; } &lt;/code&gt;&lt;/p&gt;
&lt;p&gt;This has the effect of scaling the base font of everything from 87.5%, to 100%, to 110%. But starting the base body size at less than 100% felt a little weird to me, for all the reasons in the Filament Group post.&lt;/p&gt;
&lt;p&gt;Now this was about the point where I decided (as I often do with issues like this) to bounce the idea off &lt;a href="http://www.google.com/url?q=https%3A%2F%2Ftwitter.com%2Fbencallahan&amp;amp;sa=D&amp;amp;sntz=1&amp;amp;usg=AFQjCNHTSYo5r1w-pdOyMADvUDDPt1_NAw"&gt;Ben Callahan&lt;/a&gt;. Ben was pretty much in the same boat as us. He’d been following similar practices, and also saw the brittleness as an issue. But he had a different perspective on font sizing to contribute. Ben took an issue with our assumption that font size and container width have a linear relationship; that as the container width goes up, so must font size. His feeling was that 100% was actually a great place to start on small screens, simply because touch targets need to be larger, and you’re often holding the little screens further from your face. Small browser widths, he argued, often mean small devices, which users interact with differently than, say, a low width browser window on a desktop computer. Small type on a small screen may have a short line length, sure – but it’s just too darn tiny to read.&lt;/p&gt;
&lt;p&gt;Not only did all of that make sense, but Ben’s approach also got us back to a default font-size of 100% – which feels a lot less heavy-handed and hacky.&lt;/p&gt;
&lt;p&gt;After factoring in Ben’s idea, we ended up with the following:&lt;/p&gt;
&lt;p&gt;&lt;code&gt;body { &lt;br/&gt;  font-size: 100%; // This actually happens in the reset stylesheet.&lt;br/&gt;  @media (min-width: 40em) and (max-width: 55em) { &lt;br/&gt;   font-size: 87.5%; &lt;br/&gt;  } &lt;br/&gt; // In between these two media queries we go back to 100%. &lt;br/&gt;  @media (min-width: 70em) { &lt;br/&gt;   font-size: 110%;&lt;br/&gt;  } &lt;br/&gt; } &lt;/code&gt;&lt;/p&gt;
&lt;p&gt;This final approach has the effect of scaling the base font of everything from 100%, to 87.5%, back to 100%, and finally to 110%.&lt;/p&gt;
&lt;p&gt;We’re feeling like this covers all the main bases for us, and it’s the approach we’re including in our front-end starter kit. Until, of course, we think of something even better.&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;Follow-Up&lt;/strong&gt;&lt;/p&gt;
&lt;p&gt;&lt;a href="https://twitter.com/TrentWalton"&gt;Trent Walton&lt;/a&gt; brought up some good points on Twitter, &lt;a href="https://twitter.com/TrentWalton/status/313690041522216963"&gt;where he wondered if we should be making our type smaller at all&lt;/a&gt;. His point being that right now we tend to associate touch screen interactions with smaller screen sizes, but that this is not a very future friendly mindset, &lt;a href="http://www.microsoftstore.com/store/msstore/en_US/pd/ThemeID.27509700/VIZIO-27Inch-Touchscreen-AllinOne-CA27TA5/productID.257751200"&gt;considering where things are going&lt;/a&gt;.&lt;/p&gt;
&lt;p&gt;Perhaps we&amp;#8217;re seeing my own aesthetic preference for slightly smaller type get the better of my desire for extensible multi-device UX, here, eh? Definitely something to keep in mind as we test our designs on devices. Regardless, it&amp;#8217;s probably best to assume that any size at all may very well end up on a touch screen, with all the UI needs that entails.&lt;/p&gt;</description><link>http://blog.bearded.com/post/45674673681</link><guid>http://blog.bearded.com/post/45674673681</guid><pubDate>Mon, 18 Mar 2013 11:00:00 -0400</pubDate><category>responsive web design</category><category>rwd</category><category>font-size</category><category>media queries</category></item><item><title>Pittsburgh Glass Center</title><description>&lt;p&gt;&lt;img alt="image" src="http://media.tumblr.com/215623641c4eb505f6dbeb9eaa15ab59/tumblr_inline_mis93uvtjH1qz4rgp.jpg"/&gt;&lt;/p&gt;
&lt;p class="byline"&gt;by &lt;a href="http://twitter.com/elefontpress" title="Matt Griffin"&gt;Matt Griffin&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;We just launched the &lt;a href="https://www.pittsburghglasscenter.org/"&gt;new Pittsburgh Glass Center website&lt;/a&gt;, and boy are we excited! We began the planning and research for the project back in June, and now all those ideas and months tapping away at our keyboards have coalesced into a live, functioning piece of the multi-device web. It never ceases to amaze me.&lt;/p&gt;
&lt;p&gt;The new Glass Center site has loads of great functionality (&lt;a href="http://bearded.com/portfolio/projects/pittsburgh-glass-center"&gt;which you can read more about on the Bearded site&lt;/a&gt;), and everything is built responsively, with a fluid layout. It was designed &amp;#8220;in the browser&amp;#8221; using CSS and HTML comps – and to us the resulting designs and approach really show the benefits of &lt;a href="http://alistapart.com/article/responsive-comping-obtaining-signoff-with-mockups"&gt;that process&lt;/a&gt;.&lt;/p&gt;
&lt;p&gt;This site happened only because of the heroic efforts of all involved. This project also saw our client contacts, Sam and Paige, really become part of the team – something we love to see happen on a project. They&amp;#8217;ve been smart, studious, thoughtful, and empathetic – truly ideal clients.&lt;/p&gt;
&lt;p&gt;On the Bearded side, this would not have been possible without the labors of &lt;a href="http://twitter.com/#!/brettbender"&gt;Brett Bender&lt;/a&gt;, &lt;a href="http://twitter.com/#!/brainvsbraun"&gt;Matt Braun&lt;/a&gt;, &lt;a href="http://twitter.com/#!/marktfrey"&gt;Mark Frey&lt;/a&gt;, Lauren Fries, &lt;a href="http://twitter.com/#!/patrickfulton"&gt;Patrick Fulton&lt;/a&gt;, and &lt;a href="https://twitter.com/themichaek"&gt;Michael Hellein&lt;/a&gt;. I&amp;#8217;m immensely proud of this project, and have the intelligence, patience, and skill of all these good folks to thank for it. &lt;a href="https://twitter.com/SamLaffey/status/305440586272497664"&gt;Sam from PGC summed it up pretty well on Twitter this weekend.&lt;/a&gt; And don&amp;#8217;t I know it.&lt;/p&gt;
&lt;p&gt;–MG&lt;/p&gt;</description><link>http://blog.bearded.com/post/44062090766</link><guid>http://blog.bearded.com/post/44062090766</guid><pubDate>Tue, 26 Feb 2013 09:22:00 -0500</pubDate><category>RWD</category><category>responsive web design</category><category>site launch</category></item><item><title>Bearded Work at Indiana University</title><description>&lt;p&gt;Recently we were fortunate enough to have a bunch of Bearded work on display at the Grunwald Gallery at Indiana University in Bloomington, Indiana.&lt;/p&gt;
&lt;p&gt;On display were our responsive websites for the &lt;a href="https://pittsburghkids.org/"&gt;Children&amp;#8217;s Museum of Pittsburgh&lt;/a&gt;, &lt;a href="https://www.aahomecare.org/"&gt;American Association for Homecare&lt;/a&gt;, and &lt;a href="http://bearded.com/"&gt;Bearded&lt;/a&gt; – as well as letterpress posters for &lt;a href="http://www.woodtyperevival.com/"&gt;Wood Type Revival&lt;/a&gt;.&lt;/p&gt;
&lt;p&gt;Check out some of the lovely images, below.&lt;/p&gt;
&lt;p&gt;&lt;img src="http://media.tumblr.com/330021726a2b94ab2dfce624c09ce32f/tumblr_inline_mihlr05jDE1qz4rgp.jpg"/&gt;&lt;img src="http://media.tumblr.com/a2bb79df053d81c42a3d03c96a3594ce/tumblr_inline_mihlps4DfA1qz4rgp.jpg"/&gt;&lt;img src="http://media.tumblr.com/13659635ccd5cbad910e6665bb2b4125/tumblr_inline_mihlqcTqdF1qz4rgp.jpg"/&gt;&lt;/p&gt;

&lt;p&gt;&lt;/p&gt;</description><link>http://blog.bearded.com/post/43511349528</link><guid>http://blog.bearded.com/post/43511349528</guid><pubDate>Tue, 19 Feb 2013 16:47:11 -0500</pubDate></item><item><title>WTR Cosmopolitan Is Here!</title><description>&lt;p&gt;&lt;a href="http://blog.woodtyperevival.com/post/42033325334/wtr-cosmopolitan-is-here" class="tumblr_blog"&gt;woodtyperevival&lt;/a&gt;:&lt;/p&gt;

&lt;blockquote&gt;&lt;p&gt;&lt;img alt="image" src="http://media.tumblr.com/fadde5dce7be0e357c400f54042921ec/tumblr_inline_mhjzyuHAhl1qz4rgp.jpg"/&gt;&lt;/p&gt;
&lt;p&gt;Our latest WTR font, Cosmopolitan, is here! &lt;a href="http://www.woodtyperevival.com/products/cosmopolitan"&gt;Go get it now at the Wood Type Revival store!&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;Not only that, but &lt;a href="https://typekit.com/fonts/cosmopolitan"&gt;Cosmopolitan is also available on Typekit&lt;/a&gt; for all your web font needs!&lt;/p&gt;
&lt;p&gt;Cosmopolitan is a script face that knows how to hold its own. Big and bold, but not afraid of a flourish, it’s the typographic equivalent of getting old gramps to whittle you a doily with his penknife. And it’s everything you hoped it would be.&lt;/p&gt;
&lt;p&gt;Cosmopolitan slides designed by &lt;a href="http://www.reginacasaleggio.com/"&gt;Regina Casaleggio&lt;/a&gt;.&lt;/p&gt;&lt;/blockquote&gt;</description><link>http://blog.bearded.com/post/42111979187</link><guid>http://blog.bearded.com/post/42111979187</guid><pubDate>Sat, 02 Feb 2013 12:36:55 -0500</pubDate></item><item><title>Matt Griffin at Artifact Conference</title><description>&lt;a href="http://artifactconf.com/"&gt;Matt Griffin at Artifact Conference&lt;/a&gt;: &lt;p&gt;Bearded’s Matt Griffin will be speaking at Artifact Conference in May!&lt;/p&gt;
&lt;blockquote&gt;ARTIFACT is a two-day, single-track conference for DESIGNERS adapting to the challenge of designing for a MULTI-DEVICE world.&lt;/blockquote&gt;</description><link>http://blog.bearded.com/post/41461627927</link><guid>http://blog.bearded.com/post/41461627927</guid><pubDate>Fri, 25 Jan 2013 15:45:27 -0500</pubDate></item><item><title>Slide Rules</title><description>&lt;p class="byline"&gt;by &lt;a href="http://twitter.com/elefontpress" title="Matt Griffin"&gt;Matt Griffin&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;I hereby declare this week The Week of The Slider! After seeing &lt;a href="http://weedygarden.net/2013/01/carousel-stats/"&gt;Erik Runyon’s very helpful (if not surprising) post about slider interaction statistics&lt;/a&gt; and &lt;a href="http://bradfrostweb.com/blog/post/carousels/"&gt;Brad Frost’s fervently thoughtful post about the feature we love to hate&lt;/a&gt;, I’ve decided to dredge up my almost-finished-never-published post about same said feature. However, rather than discussing user interaction and statistics, I’m going to throw my thoughts about the Slider Information Design Conundrum into the ring.&lt;br/&gt;&lt;br/&gt;First, I will come clean. We’ve &lt;a href="https://pittsburghkids.org/"&gt;implemented&lt;/a&gt; &lt;a href="http://aitheras.com/"&gt;our share &lt;/a&gt;of &lt;a href="http://rodefshalom.org/"&gt;homepage&lt;/a&gt; &lt;a href="http://almono.org/"&gt;sliders&lt;/a&gt; here at Bearded. It’s a common homepage convention. And there are times when this strikes me as a reasonable thing to do. For instance, a product with multiple key features of equal weight. &lt;a href="http://www.apple.com/iphone/"&gt;Like the iPhone&lt;/a&gt;. But lately – at least for me – it’s started to feel like we’re getting a little habitual with our sliders. &lt;br/&gt;&lt;br/&gt;In some ways, it’s an easy fix to a complicated problem. On the client side, it can be hard to negotiate a perfect hierarchy for a website’s information. And the more complicated and diverse a site’s content is (most sites don’t have the laser focus of a single product) the harder the task becomes.&lt;/p&gt;
&lt;p&gt;Then there are internal opinions and politics. Different departments or individuals will likely think their content is more important, and may push to get it promoted on the site. Personal relationships may factor in – no one wants to let down their co-workers, after all. And let’s face it, it’s easier to just promote four things to a slideshow and largely defer potentially difficult decision-making. Why is that so bad? I didn’t think it was, until I began to feel an itch in the information design part of my brain; a feeling that often signals the arrival of a problem.&lt;br/&gt;&lt;br/&gt;As an example, let’s consider a desktop slider layout like the diagram below:&lt;/p&gt;
&lt;p&gt;&lt;img alt="image" src="http://media.tumblr.com/15f0c72f1ced9f8d7697de076e571e76/tumblr_inline_mh6vqihv7w1r1kkam.png"/&gt;&lt;/p&gt;
&lt;p&gt;&lt;span&gt;The upper area is a slider that&amp;#8217;s packed with three content chunks: 1a, 1b, and 1c. Below the slider are two other pieces of content (marked 2 and 3). The relative importance of these items is assigned by:&lt;/span&gt;&lt;/p&gt;
&lt;ul&gt;&lt;li&gt;&lt;span&gt;&lt;strong&gt;Placement:&lt;/strong&gt; The slider is above and more prominent, while the two featured items are below and less prominent&lt;/span&gt;&lt;/li&gt;
&lt;li&gt;&lt;span&gt;&lt;strong&gt;Size:&lt;/strong&gt; The slider is full width and more prominent, while the four featured items are partial width and less prominent. &lt;/span&gt;&lt;/li&gt;
&lt;/ul&gt;&lt;p&gt;&lt;span&gt;Because we’re talking about the slider as a whole unit, this is pretty clear cut. But now let’s consider the temporal aspect of the individual slider items. Only one is ever on the screen at a time – at which point it has hierarchical dominance on the page. Meanwhile the rest of the slider items are hidden completely, and thus have zero prominence on the page. The items take turns being visible every few seconds, and their place in the information hierarchy shifts accordingly. So what our design is saying about slider content is:&lt;/span&gt;&lt;/p&gt;
&lt;ul&gt;&lt;li&gt;&lt;span&gt;When a slider item is active, it’s more important than everything else on the page.&lt;/span&gt;&lt;/li&gt;
&lt;li&gt;&lt;span&gt;When a slider item is inactive, it’s completely unimportant.&lt;/span&gt;&lt;/li&gt;
&lt;/ul&gt;&lt;p&gt;&lt;span&gt;The problem is that I can’t think of a content scenario when this should be the case. The importance of these items is either all or none, depending on when someone looks at the screen, when they decide to scroll, etc. As an information designer, I find this unsettling.&lt;/span&gt;&lt;br/&gt;&lt;br/&gt;I’m not sure that this means the homepage slider approach is simply bad. But when making design decisions like this, we should consider how it affects the information hierarchy of the page, and ask ourselves (and our clients) if it is appropriate to the content at hand. &lt;br/&gt;&lt;br/&gt;It’s also important to check that we’re not making design decisions that enable our clients to defer making hard content hierarchy choices. If it’s a “let’s get more stuff above the fold” issue, then maybe consider that “below the fold” (wherever that fold may be*) is better than not present entirely.&lt;br/&gt;&lt;br/&gt;Hiding content like this adds a fair amount of chance into our information hierarchy. Will users see the first slide? Probably. Will they see the second one? Maybe. The third? Who knows? &lt;br/&gt;&lt;br/&gt;Is it possible that all the items in a slider are equally important and need to share the same space (albeit not at the same time)? Yes it is. But is it likely?&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;&lt;em&gt;*After all, websites are not newspapers. Where the fold is for any given user is dependent on screen size, browser viewport size, display resolution, device, and of course the user’s act of scrolling. It’s hard to ask for “above the fold” when we don’t even know where the fold is.&lt;/em&gt;&lt;/p&gt;</description><link>http://blog.bearded.com/post/41445520202</link><guid>http://blog.bearded.com/post/41445520202</guid><pubDate>Fri, 25 Jan 2013 11:30:34 -0500</pubDate><category>Information Design</category><category>Sliders</category><category>Carousels</category></item><item><title>Wood Type Revival: WTR Borders and Ornaments Released!</title><description>&lt;a href="http://blog.woodtyperevival.com/post/41363353413/wtr-borders-and-ornaments-released"&gt;Wood Type Revival: WTR Borders and Ornaments Released!&lt;/a&gt;: &lt;p&gt;&lt;a class="tumblr_blog" href="http://blog.woodtyperevival.com/post/41363353413/wtr-borders-and-ornaments-released"&gt;woodtyperevival&lt;/a&gt;:&lt;/p&gt;
&lt;blockquote&gt;
&lt;p&gt;&lt;img alt="image" src="http://s3.amazonaws.com/woodtyperevival/assets/products/44/product/borders-ornaments-retina-sm.png?1358976238" width="500"/&gt;&lt;/p&gt;
&lt;p&gt;Go check out &lt;a href="http://www.woodtyperevival.com/products/borders-and-ornaments"&gt;the latest Wood Type Revival release: Borders and Ornaments&lt;/a&gt;! Loads of fun decorative elements drawn from original wood type from the WTR collection. Just like all WTR fonts, it’s only $15. And if you were one of our wonderful Kickstarter bakers and still have credits – it’s a…&lt;/p&gt;
&lt;/blockquote&gt;</description><link>http://blog.bearded.com/post/41363451908</link><guid>http://blog.bearded.com/post/41363451908</guid><pubDate>Thu, 24 Jan 2013 10:58:35 -0500</pubDate></item><item><title>Bearded Work at the Grunwald Gallery, Bloomington, IN</title><description>&lt;a href="http://www.indiana.edu/~grunwald/exhibitions.php?pid=sofa-revisited-alumni-from-the-henry-radford-hope-school-of-fine-arts"&gt;Bearded Work at the Grunwald Gallery, Bloomington, IN&lt;/a&gt;: &lt;p&gt;Indiana University is showing work representing all the departments in the School of Art, and Graphic Design is being represented by BFA alum and Bearded founder Matt Griffin.&lt;/p&gt;

&lt;p&gt;On display will be letterpress and web work involving the talents of past and current Beardeds: Brett Bender, Matt Braun, Dominic Dagradi, Mark Frey, Patrick Fulton, Matt Griffin, and Michael Hellein.&lt;/p&gt;

&lt;p&gt;If you’re in the Bloomington area, please stop in and take a look!&lt;/p&gt;</description><link>http://blog.bearded.com/post/40211781113</link><guid>http://blog.bearded.com/post/40211781113</guid><pubDate>Thu, 10 Jan 2013 19:18:52 -0500</pubDate><category>letterpress</category><category>web</category></item><item><title>Matt Griffin Interviewed for Responsive Design Weekly</title><description>&lt;a href="http://responsivedesignweekly.com/interview/responsive-interview-with-matt-griffin-ben-callahan/"&gt;Matt Griffin Interviewed for Responsive Design Weekly&lt;/a&gt;: &lt;p&gt;Since December, Responsive Design Weekly has been interviewing people at the forefront of the RWD movement and publishing their answers to the same four questions. This week Bearded’s own Matt Griffin shares the stage with Ben Callahan.&lt;/p&gt;</description><link>http://blog.bearded.com/post/39938547801</link><guid>http://blog.bearded.com/post/39938547801</guid><pubDate>Mon, 07 Jan 2013 12:56:25 -0500</pubDate><category>responsive web design</category><category>RWD</category></item><item><title>Work for $ Design for ♥</title><description>&lt;a href="http://www.aiga.org/a-future-without-clients/"&gt;Work for $ Design for ♥&lt;/a&gt;: &lt;p class="byline"&gt;by &lt;a href="http://twitter.com/elefontpress" title="Matt Griffin"&gt;Matt Griffin&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;A nice excerpt from &lt;a href="http://twitter.com/davidairey"&gt;David Airey&lt;/a&gt;’s new book &lt;a href="http://www.amazon.com/Work-Money-Design-Love-Frequently/dp/0321844270"&gt;Work For Money, Design For Love&lt;/a&gt; on &lt;a href="http://www.aiga.org/a-future-without-clients/"&gt;AIGA’s website&lt;/a&gt; talks about how and why Matt Braun and I created &lt;a href="http://www.woodtyperevival.com/"&gt;Wood Type Revival&lt;/a&gt;.&lt;/p&gt;</description><link>http://blog.bearded.com/post/37401921378</link><guid>http://blog.bearded.com/post/37401921378</guid><pubDate>Fri, 07 Dec 2012 08:47:36 -0500</pubDate></item><item><title>Living in Interesting Times</title><description>&lt;p class="byline"&gt;by &lt;a href="http://twitter.com/elefontpress" title="Matt Griffin"&gt;Matt Griffin&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;&lt;span&gt;2012 is almost over, but in Beard Years, we’ve already hit our big annual milestone. On 11.11.12, Bearded turned four years old. A not insignificant moment, for what began as two guys in their homes with an iMac and a pink laptop.&lt;/span&gt;&lt;br/&gt;&lt;span&gt;&lt;/span&gt;&lt;br/&gt;&lt;span&gt;For Bearded, 2012 has been clearly marked by change. Over the course of the last year, we switched our primary development platform from Drupal to Ruby on Rails, and we &lt;/span&gt;&lt;a href="http://www.alistapart.com/articles/responsive-comping-obtaining-signoff-with-mockups/"&gt;&lt;span&gt;completely re-worked our design process&lt;/span&gt;&lt;/a&gt;&lt;span&gt; to better reflect the new responsive web. I think there might be a few screws in my desk that we haven’t replaced yet, though.&lt;/span&gt;&lt;br/&gt;&lt;span&gt;&lt;/span&gt;&lt;br/&gt;&lt;span&gt;Our new front-end dev, &lt;/span&gt;&lt;a href="https://twitter.com/patrickfulton"&gt;&lt;span&gt;Patrick Fulton&lt;/span&gt;&lt;/a&gt;&lt;span&gt;, has been here nearly eight months now. Not unrelated, his new ginger beard is really coming along. Beard or no, he’s fitting in quite nicely.&lt;/span&gt;&lt;br/&gt;&lt;span&gt;&lt;/span&gt;&lt;br/&gt;&lt;span&gt;Not satisfied with all the ruckus, though – we’ll be enacting another big shift today. Longtime developer &lt;/span&gt;&lt;a href="https://twitter.com/themichaek"&gt;&lt;span&gt;Michael Hellein&lt;/span&gt;&lt;/a&gt;&lt;span&gt;, who has been working remotely from Vermont for the last 2 years, will be leaving Bearded for new adventures up north. His spot will be taken by &lt;/span&gt;&lt;a href="https://twitter.com/marktfrey"&gt;&lt;span&gt;Mark Frey&lt;/span&gt;&lt;/a&gt;&lt;span&gt;, who has been working on Bearded projects as a contractor since the Pittsburgh Children’s Museum website. Mark’s mighty beard puts mine to shame, frankly. Come to think of it, our company will now be roughly three times as hirsute as it was last year. Infer from that what you will.&lt;/span&gt;&lt;br/&gt;&lt;span&gt;&lt;/span&gt;&lt;br/&gt;&lt;span&gt;This year I somehow managed to become &lt;/span&gt;&lt;a href="http://www.alistapart.com/articles/improvising_in_the_boardroom/"&gt;&lt;span&gt;twice&lt;/span&gt;&lt;/a&gt;&lt;span&gt; &lt;/span&gt;&lt;a href="http://www.alistapart.com/articles/responsive-comping-obtaining-signoff-with-mockups/"&gt;&lt;span&gt;published&lt;/span&gt;&lt;/a&gt;&lt;span&gt; in my favorite web design publication, &lt;/span&gt;&lt;a href="http://www.alistapart.com/"&gt;&lt;span&gt;A List Apart&lt;/span&gt;&lt;/a&gt;&lt;span&gt;, as well as my runner-up favorite &lt;/span&gt;&lt;a href="http://www.netmagazine.com/features/dont-go-it-alone-collaborative-web-design"&gt;&lt;span&gt;.net Magazine&lt;/span&gt;&lt;/a&gt;&lt;span&gt;. In the last few months, we’ve started working with some truly great Pittsburgh institutions, including the Pittsburgh Children’s Museum, the Pittsburgh Glass Center, the Andy Warhol Museum, and the Carnegie Museum of Art – not to mention the warm and fuzzy feelings created by our recent collaborations with The Mario Lemieux Foundation. The prospect of working for clients like this is, to be honest, one of the biggest reasons I took the leap to start Bearded in the first place. Feels good, man.&lt;/span&gt;&lt;br/&gt;&lt;span&gt;&lt;/span&gt;&lt;br/&gt;&lt;span&gt;On top of all that we launched by far the largest website we’ve ever built. &lt;/span&gt;&lt;a href="http://www.aiche.org/"&gt;&lt;span&gt;AIChE’s new site&lt;/span&gt;&lt;/a&gt;&lt;span&gt; and it’s four subsites represent tens of thousands of nodes of content – I can’t even begin to recount how many useful lessons we’ve learned from just the first phase of that project. &lt;/span&gt;&lt;br/&gt;&lt;span&gt;&lt;/span&gt;&lt;br/&gt;&lt;span&gt;After all the growth and exhilarating change of 2012, we’re all looking forward to settling into our new configuration, and blazing ahead with renewed vigor and focus. We may be four years in, but it feels like we’re just getting started. &lt;/span&gt;&lt;br/&gt;&lt;span&gt;&lt;/span&gt;&lt;br/&gt;&lt;span&gt;Ready? &lt;/span&gt;&lt;a href="https://www.youtube.com/watch?v=3jd1Ih8EUmw"&gt;&lt;span&gt;Engage&lt;/span&gt;&lt;/a&gt;&lt;span&gt;.&lt;/span&gt;&lt;/p&gt;</description><link>http://blog.bearded.com/post/36900208580</link><guid>http://blog.bearded.com/post/36900208580</guid><pubDate>Fri, 30 Nov 2012 16:28:55 -0500</pubDate></item><item><title>Web Developers, Inquire Within</title><description>&lt;p&gt;&lt;em&gt;Note: This position has been filled. Thanks to all who applied!&lt;/em&gt;&lt;/p&gt;
&lt;p&gt;In a rare alignment of the Internet Planets, Bearded is hiring a web developer! Here’s what interested parties need to know:&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;Us&lt;/strong&gt;&lt;/p&gt;
&lt;p&gt;We are a small, collaborative group of designers and developers who are working to build the device-agnostic web of the future. We ♥ the Internets like crazy, and are constantly looking to better our process and products with today’s bleeding edge ideas. &lt;/p&gt;
&lt;p&gt;We’re committed to the responsive web, and are working with our peers to find the right way forward in these exciting and unstable times. Not to toot our own horn, but Ethan Marcotte (author of Responsive Web Design) said after we launched the new &lt;a href="http://www.google.com/url?q=https%3A%2F%2Fpittsburghkids.org%2F&amp;amp;sa=D&amp;amp;sntz=1&amp;amp;usg=AFQjCNGLq1ldDlBea2XQm2HccgusIcXSHg"&gt;Pittsburgh Children’s Museum website&lt;/a&gt;: “I would like Bearded to stop making the rest of us look so bad.” &lt;/p&gt;
&lt;p&gt;Our ideas can be seen in the finest publications of the web like &lt;a href="http://www.google.com/url?q=http%3A%2F%2Fwww.alistapart.com%2Fauthors%2Fg%2Fmattgriffin&amp;amp;sa=D&amp;amp;sntz=1&amp;amp;usg=AFQjCNHFVXzFH4_qtMYylTGgCyrdheP0TA"&gt;A List Apart&lt;/a&gt; and &lt;a href="http://www.google.com/url?q=http%3A%2F%2Fwww.netmagazine.com%2Ffeatures%2Fdont-go-it-alone-collaborative-web-design&amp;amp;sa=D&amp;amp;sntz=1&amp;amp;usg=AFQjCNESnWBoTnarG3-MqE8-g4DmXrVyZA"&gt;Dot Net Magazine&lt;/a&gt;. And if you’re still hungry for more, just dive on into the blog.&lt;/p&gt;
&lt;p&gt;The work environment is relaxed, flexible, and supportive. If you’re nerdy about the Interblags, it’s also super fun. We’re very generous with vacation and health care.&lt;/p&gt;
&lt;p&gt;You will have a great deal of autonomy. If you like blazing your own trail and getting credit for your work, you will love it here.&lt;/p&gt;
&lt;p&gt;No one will hold you back from the future. You will level up like crazy, and help the rest of us do the same.&lt;/p&gt;
&lt;p&gt;Our clients are awesome, and will leave you with warm fuzzy feelings when you go home at the end of the day. Just check out our &lt;a href="http://www.google.com/url?q=http%3A%2F%2Fbearded.com%2Fservices&amp;amp;sa=D&amp;amp;sntz=1&amp;amp;usg=AFQjCNF2FWCtI-nOL_AKlAxKwE32wicD6w"&gt;client list&lt;/a&gt;, chock full of non-profits, and you’ll get the idea.&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;You&lt;/strong&gt;&lt;/p&gt;
&lt;p&gt;You are neither a ninja, nor a rockstar. You are totally into the web, and love building this stuff. You take pride in the craft of software. You love solving problems and working with an awesome team. You strike a realistic balance between “perfect” and “good enough.” You’re curious and have a tremendous appetite for learning. You put the good of the team and your work ahead of personal ego. You can both accept and give constructive criticism. &lt;a href="http://www.google.com/url?q=http%3A%2F%2Fblog.bearded.com%2Fpost%2F16926429258%2Ftake-a-break&amp;amp;sa=D&amp;amp;sntz=1&amp;amp;usg=AFQjCNEYCOtJ7E8kdTnFF8P0asiNSR3JAw"&gt;Sometimes you dig playing video games&lt;/a&gt;, and you think the memes are hilarious. &lt;/p&gt;
&lt;p&gt;You probably think of yourself professionally as a full stack developer, leaning towards the back end; or a back end developer leaning towards full stack.&lt;/p&gt;
&lt;p&gt;Strong working knowledge of:&lt;/p&gt;
&lt;p&gt;&lt;span class="Apple-tab-span"&gt; &lt;/span&gt;•&lt;span class="Apple-tab-span"&gt; &lt;/span&gt;Ruby &lt;/p&gt;
&lt;p&gt;&lt;span class="Apple-tab-span"&gt; &lt;/span&gt;•&lt;span class="Apple-tab-span"&gt; &lt;/span&gt;Source Control software (preferably Git)&lt;/p&gt;
&lt;p&gt;&lt;span class="Apple-tab-span"&gt; &lt;/span&gt;•&lt;span class="Apple-tab-span"&gt; &lt;/span&gt;Relational Databases (We use postgres, but any will do)&lt;/p&gt;
&lt;p&gt;&lt;span class="Apple-tab-span"&gt; &lt;/span&gt;•&lt;span class="Apple-tab-span"&gt; &lt;/span&gt;MVC Architecture&lt;/p&gt;
&lt;p&gt;&lt;span class="Apple-tab-span"&gt; &lt;/span&gt;•&lt;span class="Apple-tab-span"&gt; &lt;/span&gt;Object-oriented programming&lt;/p&gt;
&lt;p&gt;We will prefer candidates with:&lt;/p&gt;
&lt;p&gt;&lt;span class="Apple-tab-span"&gt; &lt;/span&gt;•&lt;span class="Apple-tab-span"&gt; &lt;/span&gt;A background in Computer Science or a similar field&lt;/p&gt;
&lt;p&gt;&lt;span class="Apple-tab-span"&gt; &lt;/span&gt;•&lt;span class="Apple-tab-span"&gt; &lt;/span&gt;Rails Experience&lt;/p&gt;
&lt;p&gt;&lt;span class="Apple-tab-span"&gt; &lt;/span&gt;•&lt;span class="Apple-tab-span"&gt; &lt;/span&gt;Javascript Experience&lt;/p&gt;
&lt;p&gt;&lt;span class="Apple-tab-span"&gt; &lt;/span&gt;•&lt;span class="Apple-tab-span"&gt; &lt;/span&gt;Experience with TDD / BDD / Automated tests&lt;/p&gt;
&lt;p&gt;Some stuff that is definitely helpful, but not essential to have experience with (in descending order):&lt;/p&gt;
&lt;p&gt;&lt;span class="Apple-tab-span"&gt; &lt;/span&gt;•&lt;span class="Apple-tab-span"&gt; &lt;/span&gt;CSS/SCSS/Compass&lt;/p&gt;
&lt;p&gt;&lt;span class="Apple-tab-span"&gt; &lt;/span&gt;•&lt;span class="Apple-tab-span"&gt; &lt;/span&gt;Systems administration (Linux / MacOS)&lt;/p&gt;
&lt;p&gt;&lt;span class="Apple-tab-span"&gt; &lt;/span&gt;•&lt;span class="Apple-tab-span"&gt; &lt;/span&gt;NoSQL Database systems&lt;/p&gt;
&lt;p&gt;&lt;span class="Apple-tab-span"&gt; &lt;/span&gt;•&lt;span class="Apple-tab-span"&gt; &lt;/span&gt;Native iOS or Android development&lt;/p&gt;
&lt;p&gt;&lt;span class="Apple-tab-span"&gt; &lt;/span&gt;•&lt;span class="Apple-tab-span"&gt; &lt;/span&gt;Node.js&lt;/p&gt;
&lt;p&gt;&lt;span class="Apple-tab-span"&gt; &lt;/span&gt;•&lt;span class="Apple-tab-span"&gt; &lt;/span&gt;Drupal&lt;/p&gt;
&lt;p&gt;&lt;span class="Apple-tab-span"&gt; &lt;/span&gt;•&lt;span class="Apple-tab-span"&gt; &lt;/span&gt;Wordpress&lt;/p&gt;
&lt;p&gt;&lt;span class="Apple-tab-span"&gt; &lt;/span&gt;•&lt;span class="Apple-tab-span"&gt; &lt;/span&gt;PHP&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;Action&lt;/strong&gt;&lt;/p&gt;
&lt;p&gt;Still here? Awesome!&lt;/p&gt;
&lt;p&gt;Go to this &lt;a href="http://www.google.com/url?q=http%3A%2F%2Fbearded.com%2Fcontact&amp;amp;sa=D&amp;amp;sntz=1&amp;amp;usg=AFQjCNFxJooxwZ-wQZeXx5edaLWdT8AKrw"&gt;contact page&lt;/a&gt; and send us:&lt;/p&gt;
&lt;p&gt;&lt;span class="Apple-tab-span"&gt; &lt;/span&gt;•&lt;span class="Apple-tab-span"&gt; &lt;/span&gt;A few words about why you want to work at Bearded&lt;/p&gt;
&lt;p&gt;&lt;span class="Apple-tab-span"&gt; &lt;/span&gt;•&lt;span class="Apple-tab-span"&gt; &lt;/span&gt;A link to your online resume&lt;/p&gt;
&lt;p&gt;&lt;span class="Apple-tab-span"&gt; &lt;/span&gt;•&lt;span class="Apple-tab-span"&gt; &lt;/span&gt;A link to your Github page&lt;/p&gt;
&lt;p&gt;&lt;span class="Apple-tab-span"&gt; &lt;/span&gt;•&lt;span class="Apple-tab-span"&gt; &lt;/span&gt;Your salary requirements (we just want to get this out of the way early on – a range is fine)&lt;/p&gt;
&lt;p&gt;&lt;span class="Apple-tab-span"&gt; &lt;/span&gt;•&lt;span class="Apple-tab-span"&gt; &lt;/span&gt;One thing about yourself that no one else applying to this job will say&lt;/p&gt;
&lt;p&gt;Thanks for reading. See you on the Webosphere!&lt;/p&gt;</description><link>http://blog.bearded.com/post/35578030776</link><guid>http://blog.bearded.com/post/35578030776</guid><pubDate>Mon, 12 Nov 2012 14:27:00 -0500</pubDate></item><item><title>Bearded's Matt Griffin Interviewed On the Non-Breaking Space Show.</title><description>&lt;a href="http://nonbreakingspace.tv/matt-griffin/"&gt;Bearded's Matt Griffin Interviewed On the Non-Breaking Space Show.&lt;/a&gt;</description><link>http://blog.bearded.com/post/34307379111</link><guid>http://blog.bearded.com/post/34307379111</guid><pubDate>Thu, 25 Oct 2012 14:49:36 -0400</pubDate></item><item><title>Responsive Comping on A List Apart</title><description>&lt;p class="byline"&gt;by &lt;a href="http://twitter.com/elefontpress" title="Matt Griffin"&gt;Matt Griffin&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;My new article, &lt;a href="http://www.alistapart.com/articles/responsive-comping-obtaining-signoff-with-mockups/"&gt;Responsive Comping: Obtaining Signoff with Mockups&lt;/a&gt;, is now live on &lt;a href="http://twitter.com/alistapart"&gt;A List Apart&lt;/a&gt;. In it I take a detailed look at Bearded&amp;#8217;s browser/code-based approach to designing responsive websites – something that&amp;#8217;s been very much on our minds for the last 6 months. I hope it&amp;#8217;s helpful to you.&lt;/p&gt;
&lt;p&gt;I am once again grateful to &lt;a href="http://twitter.com/zeldman"&gt;Jeffrey Zeldman&lt;/a&gt; and the entire ALA staff for their support and encouragement. They helped me progressively nudge a reasonable blog post into a fine and useful article. Particular thanks goes to my editors &lt;a href="https://twitter.com/r_weisburd"&gt;Rose Weisburd&lt;/a&gt; and &lt;a href="https://twitter.com/sara_ann_marie"&gt;Sara Wachter-Boettcher&lt;/a&gt;. If you find my words logical and easy to follow, it&amp;#8217;s surely due to their efforts.&lt;/p&gt;
&lt;p&gt;My RWD friends &lt;a href="http://twitter.com/bencallahan"&gt;Ben Callahan&lt;/a&gt; and &lt;a href="http://twitter.com/brad_frost"&gt;Brad Frost&lt;/a&gt; also provided a second and third set of eyes early on in the process, as did my pals here at Bearded.&lt;/p&gt;
&lt;p&gt;Thank you all for your help and insight. Now, back to work for me!&lt;/p&gt;
&lt;p&gt;–MG&lt;/p&gt;</description><link>http://blog.bearded.com/post/33707736273</link><guid>http://blog.bearded.com/post/33707736273</guid><pubDate>Tue, 16 Oct 2012 10:13:00 -0400</pubDate><category>rwd</category><category>responsive web design</category></item><item><title>The Thing About Those Media Types</title><description>&lt;p class="byline"&gt;by &lt;a href="http://twitter.com/elefontpress" title="Matt Griffin"&gt;Matt Griffin&lt;/a&gt; and &lt;a href="https://twitter.com/bencallahan"&gt;Ben Callahan&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;After my last blog post about vertical media queries, I received an intriguing tweet from &lt;a href="http://seesparkbox.com/"&gt;Sparkbox&lt;/a&gt;’s &lt;a href="https://twitter.com/bencallahan"&gt;Ben Callahan&lt;/a&gt;. He asked:&lt;br/&gt;&lt;br/&gt;“Curious, why do you use ‘only screen and…’ by default?”&lt;br/&gt;&lt;br/&gt;When someone like Ben asks you a question like that, you may quickly realize that you do not have a great answer prepared.&lt;br/&gt;&lt;br/&gt;A few weeks later and we were digging into the implications of &lt;a href="http://www.w3.org/TR/CSS2/media.html" title="Media types defined."&gt;media types&lt;/a&gt; on Skype. Here’s the deal:&lt;br/&gt;&lt;br/&gt;At Bearded we’ve been specifying “only screen” in our media queries. At Sparkbox they’ve been specifying no media type, which results in all media types getting their media query-based styles.&lt;br/&gt;&lt;br/&gt;We both agreed that we wanted all screen-ish devices to get our responsive styles. What makes the situation a little less clear is that most media types that we’d want to get our media queries, but are not actually screen (handheld, projection, tv), often identify themselves as screen because … well, because nobody ever uses those other media types.&lt;br/&gt;&lt;br/&gt;But the idea with responsive design is that we don’t know what’s coming down the road, and we want our flexible designs to handle those unknowns as best they can. Which means in general, we want all media types to get our responsive styles.&lt;br/&gt;&lt;br/&gt;That in mind, the Sparkbox approach seems more appropriate. Everybody getting the responsive layout is definitely better than “only screen.” &lt;br/&gt;&lt;br/&gt;There are, however, some media types that we probably don’t want to get all of our extra styles. Print being the most obvious. Taking a whitelist approach of “screen, projection, handheld, tv” is not very future-friendly, as it would disallow future media types. So then we wondered: could we take a blacklist approach? Is there a “not” function?&lt;br/&gt;&lt;br/&gt;&lt;a href="http://www.w3.org/TR/css3-mediaqueries/" title="Not, as defined for media types."&gt;Turns out there is&lt;/a&gt;. At first glance, this seemed pretty exciting. At first glance, this seemed pretty exciting. We both thought something like:&lt;/p&gt;
&lt;p&gt;&lt;code&gt;not print and (min-width: 60em)&lt;/code&gt;&lt;/p&gt;
&lt;p&gt;&amp;#8230; could be pretty useful – if the “not” only applied to “print.” Ben took the time to put together some tests to see how it worked, and unfortunately &lt;a href="http://codepen.io/bencallahan/pen/ulnyt" title="Ben's tests with media types"&gt;the results were a bit discouraging&lt;/a&gt;. It seems like the “not” keyword ends up applying to everything, media type and media query – which is less than helpful.. &lt;br/&gt;&lt;br/&gt;So now we’re back to the beginning. Is the best approach really just to not specify a media type (or specify &amp;#8220;all&amp;#8221;), and let everything get the responsive layout? Does this impact accessibility for types like braille, tty, or speech? We have no idea. And that, internet friends is where you come in. If you have any thoughts, please let us know on Twitter: &lt;a href="https://twitter.com/elefontpress"&gt;@elefontpress&lt;/a&gt; &amp;amp; &lt;a href="https://twitter.com/bencallahan"&gt;@bencallahan&lt;/a&gt;.&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;Update:&lt;/strong&gt; Ben has written &lt;a href="http://seesparkbox.com/foundry/how_should_we_write_media_queries"&gt;a follow-up with some great stuff on the Sparkbox Blog&lt;/a&gt;!&lt;/p&gt;</description><link>http://blog.bearded.com/post/33656467094</link><guid>http://blog.bearded.com/post/33656467094</guid><pubDate>Mon, 15 Oct 2012 15:53:00 -0400</pubDate><category>Media Queries</category><category>Media Types</category><category>RWD</category><category>Responsive Web Design</category></item></channel></rss>
