<!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, Product Designer & 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: 500;
font-size: 32px;
line-height: 30px;
float:left;
  
}
.badge-links {
	float: right;
}

body {
    font-family: "ff-tisa-web-pro",serif;
    font-size: 16px;
    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">
				
<br>
<h1>Karl Dotter, <a href="http://www.linkedin.com/in/karldotter">Product Designer</a> & <a href="http://www.uxcartoonist.com">Cartoonist</a>.</h1>
<div class="badge-links">
<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.friendfeed.com/k4rl"><img src="/fav/ff.png" border="0" title="FriendFeed"></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 like pairing with other designers and developers to help build awesome products.</h2>

I've recently 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 teaching storytelling skills to interaction design students at <a href="http://www.cca.edu">CCA</a>.

<br>
<br>
If you need help with a project, you can email me at <b>dotter</b> (at) <b>gmail.com</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-2013 karl dotter. All Rights Reserved.<br />
<br/>
</body>
</html>