<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Karl Dotter, Pair Designer & UX Cartoonist</title> <script type="text/javascript" src="http://use.typekit.com/jgr5tbt.js"></script> <script type="text/javascript">try{Typekit.load();}catch(e){}</script> <style type="text/css"> h1 { font-family: "ff-tisa-web-pro",serif; font-style: normal; font-weight: 400; font-size: 32px; line-height: 30px; float:left; } .badge-links { float: right; } body { font-family: "ff-tisa-web-pro",serif; font-size: 14px; line-height: 20px; color:gray; background-color: gray; background-image: url(images/tile.png); font-style: normal; font-weight: 300; } h2 { font-family: "ff-tisa-web-pro", sans-serif; font-size: 18px; line-height: 20px; } a, a:visited { color: #7FB514; text-decoration: none; } a:hover, a:visited:hover { text-decoration: underline; } #container { width: 800px; margin-left: auto; margin-right: auto; background-color: white; border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; } #main-content { text-align: left; } #masthead { margin-bottom: -10px; } #site-content { margin-top: 5px; margin-left: 58px; margin-right: 58px; } .divider { clear: left; background-color:silver; background-repeat: repeat-x; background-position: center; height: 1px; width: 690px; margin: 0px; font-size: 1px; } .col-two { width: 357px; margin-top: 18px; float: left; } .col-two P { margin-top: 0px; } .sub-image { float: left; margin-right: 12px; } .footer { color: gray; } .bio { color: gray; font-family:"ff-tisa-web-pro",serif; font-style: normal; font-weight: 300; font-size: 16px; margin: 0 10px 20px; } #profile { margin: 0 auto; width: 832px; } #profile img { float:left; background: white; border: 1px solid #BFBFBF; padding: 8px; border-radius: 3px; box-shadow: 0 0 7px #AFAFAF; -moz-box-shadow: 0 0 7px #AFAFAF; -webkit-box-shadow: 0 0 7px #AFAFAF; width:160px !important; height:160px; margin: 0 15px; } <!-- .infiniteCarousel { width: 680px; position: relative; } .infiniteCarousel .wrapper { width: 600px; /* .infiniteCarousel width - (.wrapper margin-left + .wrapper margin-right) */ overflow: auto; min-height: 10em; margin: 0 40px; position: absolute; top: 0; } .infiniteCarousel ul a img { border: 5px solid #55555; -moz-border-radius: 5px; -webkit-border-radius: 5px; } .infiniteCarousel .wrapper ul { width: 9999px; list-style-image:none; list-style-position:outside; list-style-type:none; margin:0; padding:0; position: absolute; top: 0; } .infiniteCarousel ul li { display:block; float:left; padding: 10px; height: 85px; width: 85px; } .infiniteCarousel ul li a img { display:block; } .infiniteCarousel .arrow { display: block; height: 36px; width: 37px; background: url(arrow.png) no-repeat 0 0; text-indent: -999px; position: absolute; top: 37px; cursor: pointer; } .infiniteCarousel .forward { background-position: 0 0; right: 0; } .infiniteCarousel .back { background-position: 0 -72px; left: 0; } .infiniteCarousel .forward:hover { background-position: 0 -36px; } .infiniteCarousel .back:hover { background-position: 0 -108px; } --> </style> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <script type="text/javascript"> $.fn.infiniteCarousel = function () { function repeat(str, num) { return new Array( num + 1 ).join( str ); } return this.each(function () { var $wrapper = $('> div', this).css('overflow', 'hidden'), $slider = $wrapper.find('> ul'), $items = $slider.find('> li'), $single = $items.filter(':first'), singleWidth = $single.outerWidth(), visible = Math.ceil($wrapper.innerWidth() / singleWidth), // note: doesn't include padding or border currentPage = 1, pages = Math.ceil($items.length / visible); // 1. Pad so that 'visible' number will always be seen, otherwise create empty items if (($items.length % visible) != 0) { $slider.append(repeat('<li class="empty" />', visible - ($items.length % visible))); $items = $slider.find('> li'); } // 2. Top and tail the list with 'visible' number of items, top has the last section, and tail has the first $items.filter(':first').before($items.slice(- visible).clone().addClass('cloned')); $items.filter(':last').after($items.slice(0, visible).clone().addClass('cloned')); $items = $slider.find('> li'); // reselect // 3. Set the left position to the first 'real' item $wrapper.scrollLeft(singleWidth * visible); // 4. paging function function gotoPage(page) { var dir = page < currentPage ? -1 : 1, n = Math.abs(currentPage - page), left = singleWidth * dir * visible * n; $wrapper.filter(':not(:animated)').animate({ scrollLeft : '+=' + left }, 500, function () { if (page == 0) { $wrapper.scrollLeft(singleWidth * visible * pages); page = pages; } else if (page > pages) { $wrapper.scrollLeft(singleWidth * visible); // reset back to start position page = 1; } currentPage = page; }); return false; } $wrapper.after('<a class="arrow back"></a><a class="arrow forward"></a>'); // 5. Bind to the forward and back buttons $('a.back', this).click(function () { return gotoPage(currentPage - 1); }); $('a.forward', this).click(function () { return gotoPage(currentPage + 1); }); // create a public interface to move to a specific page $(this).bind('goto', function (event, page) { gotoPage(page); }); }); }; $(document).ready(function () { $('.infiniteCarousel').infiniteCarousel(); }); </script> </head> <body> <div id="container"> <div id="main-content"> <div id="masthead"></div> <div id="site-content"> <h1>Karl Dotter, <a href="http://www.pairdesign.co">Pair Designer</a> & <a href="http://www.uxcartoonist.com">UX Cartoonist</a>.</h1> <div class="badge-links"> <br> <br> <a href="http://www.linkedin.com/in/karldotter"><img src="/fav/linkedin.png" border="0" title="LinkedIn"></a> <a href="http://www.facebook.com/karldotter"><img src="/fav/facebook.png"border="0" title="Facebook"></a> <a href="http://www.twitter.com/karldotter"><img src="/fav/twitter.png" border="0" title="Twitter"></a> <a href="http://www.flickr.com/photos/k4rl"><img src="/fav/flickr.png" border="0" title="Flickr"></a></div> <br> <br> <div class="divider"></div> <div id="profile" style="margin-top:30px;"><img src="images/karl_dotter.png"> </div> <div class="bio"> <h2>I want more designers to pair together.</h2> <a href="https://medium.com/user-experience-design-1/7ebf761da701">I believe that designers can learn a lot from each other.</a> In the past I've shared my <a href="http://pairdesign.co">pair design</a> story with talks at <a href="http://hattery.com/">Hattery Labs</a>, <a href="http://pivotallabs.com/">Pivotal Labs</a> and <a href="https://air.mozilla.org/pair-design/">Mozilla Labs</a> and worked on pair design projects with clients like <a href="http://www.luvocracy.com">Luvocracy</a>, <a href="http://wordnik.com">Wordnik</a> and <a href="http://www.storify.com">Storify</a>. I'm currently practicing <a href="https://twitter.com/search?q=%23pairdesign&src=typd">#pairdesign</a> as a UX Designer at Amazon. More specifically I work on the awesome team at <a href="http://www.goodreads.com">Goodreads</a>. <br> <br> If you need help with a project, you can email me at <b>info</b> (at) <b>pairdesign.co</b>, or find me working on pair design <a href="http://www.twitter.com/pairdesignco">@pairdesignco</a>, sharing design stories <a href="http://www.twitter.com/karldotter">@karldotter</a> and making comics <a href="http://www.twitter.com/k4rl">@k4rl</a>.</div> <div class="infiniteCarousel"> <div class="wrapper"> <ul> <li><a href="http://www.flickr.com/photos/k4rl/5597463032/in/set-72157626321588159" title="The Designer Fund"><img src="http://farm6.static.flickr.com/5263/5597463032_faf69cacc8_s_d.jpg" height="75" width="75" alt="DesignerFund" /></a></li> <li><a href="http://www.flickr.com/photos/k4rl/5182967188/in/set-72157625281300135" title="ShopWell"><img src="http://farm2.static.flickr.com/1401/5182967188_a86786de97_s_d.jpg" height="75" width="75" alt="ShopWell" /></a></li> <li><a href="http://www.flickr.com/photos/k4rl/5596879527/in/set-72157626321588159" title="Sketching the Designer Fund"><img src="http://farm6.static.flickr.com/5186/5596879527_ce81be6746_s_d.jpg" height="75" width="75" alt="Sketching the Designer Fund" /></a></li> <li><a href="http://www.flickr.com/photos/k4rl/5548986335/in/set-72157626323864734" title="Sketching UX"><img src="http://farm6.static.flickr.com/5026/5548986335_a5c3356cbe_s_d.jpg" height="75" width="75" alt="Sketching UX" /></a></li> <li><a href="http://www.flickr.com/photos/k4rl/5549568036/in/set-72157626323864734" title="Sketching leanUX"><img src="http://farm6.staticflickr.com/5025/5549568036_f67dac0fe6_s.jpg" height="75" width="75" alt="Sketching leanUX" /></a></li> <li><a href="http://www.flickr.com/photos/k4rl/5548970365/in/set-72157626323864734" title="UX Bootcamp"><img src="http://farm6.static.flickr.com/5146/5548970365_b1f19ca3ac_s_d.jpg" height="75" width="75" alt="UX Bootcamp" /></a></li> </ul> </div> </div> <br> <br> <br> <br> <br> <br/> &copy;1999-2014 karl dotter. All Rights Reserved.<br /> <br/> </body> </html>