iPad Pro Review

Published on by Clay Yount.

I've been using the iPad Pro for a couple months now, and I’m going to give my impressions strictly from an illustrator/comic artist perspective. If you want a review of the device as a laptop replacement or next-gen tablet, others have done a better job than I could, so please check them out.

 

 

How does the drawing experience stack up against the competition?

The question most artists want answered is how well does the drawing experience stack up vs a Cintiq or a Surface Pro (3/4). The short answer is extremely well. I have a Cintiq 21UX and a Surface Pro 3, and have tested the updated versions of those products in stores, and the Apple Pencil blows them away. I will get into specifics of why in a sec, but the gist of it is the Apple Pencil just feels more like a real pencil. Drawing with it feels like drawing on a real sketchpad, and the first time I tried it I was literally taken aback. The small lag I’d come to expect from using a digital stylus was gone. The accuracy was amazing. The pressure curve felt natural. I knew within 30 seconds that I was going to buy one.

For me, the overall drawing feel of a stylus can be broken out into three metrics: polling rate, parallax and pressure sensitivity.

Polling rate

The biggest determining factor in how responsive a stylus feels is the polling rate, or how many times in a second stylus position data can be registered. Wacom’s Cintiqs have a polling rate of 133 htz, while the Apple Pencil has a polling rate of 250 htz. The difference between these two numbers is a large part of what makes using the Apple Pencil feel so natural. The line you are drawing has significantly less lag behind your pen tip and it feels like you are interacting directly with the pixels rather than drawing a path for your brush to follow. I haven’t seen any specs listing the polling rate of the SP3 or SP4, but I can tell you anecdotally that the SP3 lags worse than a Cintiq, and the SP4 doesn’t feel much better.

Parallax

Parallax is the disconnect between where your stylus touches the screen and actual screen pixels. There is about a ½ centimeter separation between the pen tip and the screen on Cintiqs and the SP3, which gives you a disconnect. The iPad Pro and the SP4 both use a technology where the glass is affixed directly to the screen with no gap, so the parallax is greatly reduced. This gives you more precision when you are drawing, and makes it feel like you are drawing directly on the surface.

Pressure sensitivity

Apple has not released the specs for the number for pressure levels the Apple Pencil supports, but it feels comparable to a Cintiq, so my guess would be at least 1024. The SP3 has 256, which actually isn’t terrible, but it’s noticeable when you are trying to make subtle line width transitions. Apple doesn’t allow you to adjust the pressure curve on a system level, which usually would be a knock against it, but they did such a good job setting a default natural pressure curve that I don’t have a problem with it. Also, some apps like Procreate 3 will let you adjust the pressure curve inside the app.

Honorable mention: Tilt

Another feature that the Apple Pencil has that affects the experience is tilt sensitivity. This lets you do some very natural looking pencil shading. Wacom supports this too, but I wanted to give it a special shout-out because it’s awesome and gives you results you can’t get on a Surface Pro.

As great as the drawing experience is, there are a couple things Apple could improve. For instance, the pencil tip glides a little too smoothly over the glass of the iPad Pro’s screen for my taste. The new SP4 pens have a tip with a little more tooth to it so it feels more like drawing on a paper texture. Also, there’s no eraser or place to store the pencil, and the casing is too smooth and prone to rolling off surfaces.

 

 

Can it do everything a professional artist needs?

The short answer is “it depends on what you need”. The iPad Pro is Apple’s first iOS device with the “Pro” moniker, so pro level apps are still in their infancy. There isn’t anything that has feature parity with powerhouses like Photoshop or Illustrator, but there are apps that can create a pro-level illustration or comic from start to finish with no problem. The biggest hurdle is figuring out how to use these new programs to accomplish the same things you did on a desktop OS. I’ll focus on the main apps that I use in my workflow to give you a sense of what is possible. These all support copy/paste to clipboard, so working among the apps is pretty painless.

Procreate 3

Out of all the drawing apps I’ve tried on iOS, Procreate 3 is by far the best. On the surface, it feels like a pretty basic drawing app, with only a few sliders, tools, and brushes visible in the UI. But in actuality, it pretty close to Manga Studio in its feature set, and it's absolutely criminally priced at only $5.99. I'd easily pay ten times that.

Procreate has done an excellent job of building an app from the ground up with a touch interface in mind. They have a minimalist interface, but incorporate touch gestures that work like keyboard shortcuts to really speed up your process. For example, two fingers tapping the screen is undo and three fingers tapping is redo. This works as quickly and efficiently as mapping an undo button to the stylus on a Wacom pen. On a Cintiq or SP3, I have to work on a table top to keep one hand on the keyboard for shortcuts, which makes truly portable drawing pretty much impossible. With the touch gestures/controls, I can hold the iPad Pro like I would a sketchbook and still have quick access to all the commands I need. It takes a little getting used to, but it’s super useful. I highly recommend checking out their free iBook Artist Handbook to see what all the features are. You’ll be surprised.

Bonus: It also will automatically make an awesome replay video of your drawing process that you can easily edit in iMovie and upload to Youtube. Here's one of mine:

Graphic

This used to be called iDraw, and it’s a vector illustration app from Autodesk. It isn’t quite as well thought out for the iPad as Procreate. It’s a ported desktop app, and it shows, but it is also very powerful and replicates most of the core functionality of Illustrator. You can use it in conjunction with an app called AnyFont to import and use your own custom fonts (which you can then cut and paste into Procreate), which is essential for comic artists.

Pixelmator

This is as close as you’ll get to Photoshop on iOS. Another desktop port, but it’s great for resizing/cropping/exporting images for web, applying filters, and tweaking colors.

Honorable Mention: Astropad

Astropad lets you connect your iPad Pro to your Mac or PC and use it as a second screen. It also supports the pressure sensitivity with the Apple Pencil, so it effectively turns your iPad Pro into a Cintiq. There are a couple of caveats, though. The connection to your computer reintroduces some lag, (about the same as a Cintiq) so you lose the 250 htz responsiveness the Pencil natively has. Also, the screen momentarily pixelates as you draw which can be a bit distracting. I much prefer drawing on the iPad itself, so I wouldn’t recommend using it unless you have to use a desktop app.

 

 

Summary

The iPad Pro isn’t for everyone… yet. I think Procreate gives you enough functionality that if you are an illustrator or comic artist, it could be your sole machine so long as you are open to adapting your work flow. It’s the most convenient portable digital studio solution, and drawing on it is pure joy. I haven’t really touched my SP3 or Cintiq since I got it, and I'll be looking to sell my SP3 soon. If you do graphic design, video editing, animation, web development etc, it’s not quite there yet, so if you are looking for one machine to do it all, you are probably better off with a SP4. But the iPad Pro has only been out for a couple months and app developers have only begun to take advantage it. I can’t wait to see how things look in a year or two.

4.5 out of 5


#BringBackMST3K

Published on by Clay Yount.

I can finally promote the fact the my brother Hampton is going to be the new voice of Crow T. Robot in the upcoming MST3K reboot!  To say that this is a big deal for him is a massive  understatement.

When we were growing up, we were both huge fans of the show (Though Hampton always loved it more). We pooled our resources to buy a bunch of tapes, and got to the point where we were quoting them a lot. We would even force our friends to sit through multi-hour endurance marathons. In short, we wore those tapes OUT. At one point I remember having a conversation with him about how, although it could never happen, working on that show would be The Coolest Job Ever™. To see Hampton achieve a childhood dream means so much to me and I couldn't be more proud! All fraternal bias aside, I honestly can't think of a better person for the job.

Here's the thing though, they need to meet their stretch goal of 5.5 million to get a full 12 episode season. Also, if they meet that goal, there's a much better chance that a network or streaming service will pick them up as a continuing series. If you were a fan of Rob and ElliotHampton's comedy, or just knowing a little boy achieved his dreams, please consider pledging to #BringBackMST3K, or as I call it #KeepHamptonEmployed!

Trying Something New

Published on by Clay Yount.

I know, I know. It's been pretty dead around here. I could attribute it to a lot of things and make excuses, but in the end, I've been allowing other things in life to take over my productivity. I tend to do this thing where I miss a deadline, then avoid the task completely because I feel bad about it. Couple that with the fact that I'm passionate about, but lose interest in things quickly, and it pretty much explains my entire update history. If I'm faced with sitting down for five hours to make a Hamlet's Danish comic, and I'm not feeling it, chances are that I'm watching TV instead. And if I do want to do something else that's creative, I feel like I have to draw the comic before I can get to it.

But then, I thought, "Wait. This is my HOBBY. Why am I stressing out?"

So I'm trying something new. Instead of holding myself to a weekly comic deadline that I know I'm not going to stick to, I'm going to harness my short attention span and make a goal of just trying to do something creative every week. It might be a Hamlet's Danish, it might be an art piece, it might be a series of sketches, it might be working on a short standalone like my Birds comic, or a longer comic issue. This way I can work on what I'm feeling passionate about, and hopefully that will make me more creative in general, and keep me from making comics I only think are kind of funny. I'm experimenting here, so let's hope it works.

Thanks to the power of the modern internet, you can still keep up with Hamlet's Danish as it updates via RSS, and if you follow me on Twitter, Facebook or Tumblr, you'll get a feed of the comics plus whatever other things I work on. If you are old-school, you can also just bookmark this site where I'll be posting everything.

The Best Style is No-Template Style

Published on by Clay Yount.

IMPORTANT UPDATE: 

Due to an undocumented limit on Squarespace's Archive List block, the current solution will not work with >1000 comics in the archive. If your comic archives are more than 1000, or you will reach it soon, please wait a bit and I'll have an update for you. I already have a working solution, but I need time to bug test the code and make a new video tutorial. I'm sorry to have launched with this limitation, but I didn't have an archive with 1000 entries to test on, so I wasn't aware of it. Thanks!

At the beginning of the year, I released a Squarespace template for webcomic artists. The response has been pretty good, and hopefully some of you have put it to good use. I've gotten some feedback, and the two biggest complaints are that the (recently increased) $18 per month developer account is too expensive, and the template is too hard to customize for someone without a lot of coding skills.

Since I released the template, Squarespace has made some important updates to their platform that have allowed me to create a new easier solution that doesn't require a custom template and just uses some copy and paste code. This means it'll work with ANY Squarespace plan including the $8/month basic plan. I've put together some video tutorials to help you get the basics of a site up and running in about 30 minutes. I'll be adding some more videos as I complete them, and am willing to take suggestions for tutorial topics. If you are a web developer and want 100% control, you can still use my original template as a launching off point, but this new solution is incredibly versatile and I think it is the best option for 99% of people.

Just an FYI, I am nowhere near as practiced as my brother as speaking into a microphone, so please excuse my nervousness. I didn't have time to do multiple takes, so I just kind of winged it.

Watch the following videos in order to get your site set up:

Here are the code snippets you'll need:

Header Code:

<script>
	/*

		HEADER INJECTION CODE
		----------------------
		This code is meant to be placed in the header code injection area of your Squarespace console.
		From the home menu, navigate to: 
		Settings > Advanced > Code Injection
		and paste this code in the "Header" section.

	*/

	/* 
		USER DEFINED VARIABLES
		-----------------------
		These variables are can be defined by you.

		comicNavButtons: An array of your comic nav buttons in order. Options are:
			'first' : takes you to the first comic in a collection
			'prev' : takes you to the previous comic in a collection
			'random' : takes you to a random comic in a collection
			'next' : takes you to the next comic in a collection
			'today' : takes you to the most recent comic in a collection
			'chapter' : takes you to the start of the current chapter

		homepageBottomSlug: the url slug for the page content for the bottom of the homepage.
		
	*/
	
	var comicNavButtons=['first','prev','random','next','today'];
	var homepageBottomSlug="homepage-bottom";
	
	/*------OTHER VARIABLES------*/
	var allComics=[],firstLink,todayLink,prevLink,nextLink,randomLink,comicNav,itemCount,pageSize,categories,chapterCategory,comicUrlSlug,currentComic;

	/*------CHECKS IF THE PAGE IS A SEARCH RESULT------*/
	var isSearchURL=false;
 	var search=window.location.search;
 	if(search.indexOf("tag=")!=-1 || search.indexOf("category=")!=-1 || search.indexOf("author=")!=-1 || search.indexOf("offset=")!=-1 || search.indexOf("page=")!=-1 || search.indexOf("month=")!=-1 || search.indexOf("year=")!=-1){
 		isSearchURL=true;
 	}

	/*------WAITS FOR THE PAGE LOGO TO LOAD------*/
	Y.on("contentready",function(){
	
		/*------ADDS THE LOGO TO THE MOBILE NAV BAR------*/
		var mobileNavTitle=Y.one('.has-logo-image #mobile-navigation-title');
		var bannerImg=Y.one('.has-logo-image #canvas #banner-wrapper');
		if(mobileNavTitle && bannerImg){
			mobileNavTitle.insert(bannerImg.getHTML(),'after');
		}
	},'#banner-wrapper');

		/*------WAITS FOR THE ARCHIVE LIST BLOCK IN THE PAGE HEADER TO LOAD------*/
	Y.on("contentready",function(){
	
	/*------CREATES COMIC DATA ARRAY FROM THE ARCHIVE LIST IN THE PAGE HEADER------*/
		
		Y.all('.collection-type-blog #page-body-header .sqs-block-archive ul .archive-item-link').each(function(){
			allComics.push({
							title:this.get('text'),
							link:this.getAttribute('href')
						});

		});

		/*------ADDS SOME CLASSES TO THE BODY TELLING IF THERE IS A COMIC DATA ARRAY------*/
        if(allComics.length>0 && !isSearchURL){
        	Y.one("body").addClass("has-comic");
        	/*------USE THE COMIC DATA ARRAY TO GET FIRST, TODAY, RANDOM, PREVIOUS AND NEXT LINKS------*/
			firstLink=allComics[allComics.length-1].link;
			todayLink=allComics[0].link;
			randomLink=allComics[Math.floor(Math.random()*allComics.length)].link;
			for(var i=0;i<allComics.length;i++){
				if(allComics[i].link==currentComic){
					if(allComics[i+1]){
						prevLink=allComics[i+1].link
					}
					if(allComics[i-1]){
						nextLink=allComics[i-1].link
					}
				}
			}
			/*------BUILD THE COMIC NAV AND ADD IT TO THE PAGE------*/
			buildComicNav();
    	}else{
        	Y.one("body").addClass("no-comic");
        }
        /*------GET THE CATEGORIES FROM THE FIRST ARTICLE------*/
		if(comicNavButtons.indexOf("chapter")!=-1){
			if(prevLink){
				var prevPageChapterJsonURL=prevLink+'?format=json&cachebust='+String(Math.ceil(Math.random()*1e11));
				Y.io(prevPageChapterJsonURL, {
			        on:{success: prevPageChapterJsonLoaded}
			    });
			}
		}
    },'#page-body-header .sqs-block-archive')
	/*------WAITS FOR THE DOM TO LOAD------*/
	Y.on("domready",function(){
		var pagination=Y.one("body.view-item .pagination,body.view-list .pagination");	
		
		/*-----RESIZE THE RESPONSIVE ADS ON PAGE LOAD------*/
		resizeAds();
		
		/*------MAKES THE SUMMARY TITLES INTO HEADINGS------*/
		fixSummaryTitles();

		archiveList=Y.one('.collection-type-blog .sqs-block-archive');
		if(!archiveList && pagination){
			pagination.setStyle("display","block");
		}		
		
		/*------GET THE COMIC CURRENT COMIC LINK, AND URL SLUG FROM THE FIRST OBJECT------*/
		var titleObj=Y.one('article header>.entry-title>a')
		if(titleObj){
			currentComic=titleObj.getAttribute("href");
		}
        /*------IF THERE IS A COMIC DATA ARRAY, AND THE PAGE IS NOT A SEARCH RESULT...------*/      
		if(!isSearchURL && archiveList){
			Y.one("body").addClass("has-comic-nav");
			/*------HIDE THE DEFAULT PAGINATION------*/
			if(pagination){
				pagination.setStyle("display","none");
			}
			if(currentComic){
				comicUrlSlug=currentComic.split("/")[1];
			}
			Y.all(".main-content article.hentry:not(:first-of-type)").remove();
			if(Y.one("body.view-list")){
				Y.io('/'+homepageBottomSlug+'?format=main-content&cacheBust='+String(Math.ceil(Math.random()*1e11)), {
			        on:{success: homepageBottomHTMLLoaded}
			    });
			}
		}else{
			Y.all(".main-content article.hentry:not(:first-of-type)").setStyle("display","block");
			if(pagination){
				pagination.setStyle("display","block");
			}
		}

		/*-----LOAD ALL IMAGES AT THE OPTIMAL SIZES------*/
    	setImageLoader();

    	/*------IF THERE ARE GOOGLE ADS, TRY AND LOAD THEM ON THE PAGE------*/
    	var isGoogAd=Y.one('.adsbygoogle');
    	if(isGoogAd){
			loadGoogleCode();
			Y.all('.adsbygoogle').each(function(){
				try{
					(adsbygoogle = window.adsbygoogle || []).push({});
				}catch(e){}
			});
		}
		
		/*------IF THERE ARE PROJECT WONDERFUL ADS, TRY AND LOAD THEM ON THE PAGE------*/
		var isPwAd=Y.one('div[id*="pw_adbox"]');
		if(isPwAd){
			try{
				loadPWCode();
			}catch(e){}
		}
    });
	/*------FUNCTION THAT BUILDS AND ATTACHES THE COMIC NAVIGATION BASED ON THE comicNavButtons VARIABLE------*/
	function buildComicNav(){
		comicNav='<div class="comic-nav" id="comic-nav">';
		for(var i=0;i<comicNavButtons.length;i++){
			comicNav+='<span class="sqs-block-button button-block sqs-block"><span class="sqs-block-button-content"><span class="sqs-block-button-container--center"><a class="sqs-editable-button sqs-block-button-element--small sqs-block-button-element comic-nav-btn'
			switch(comicNavButtons[i]){
				case "first":
    				comicNav+=' first-btn';
    				if(prevLink){
    					comicNav+='" href="'+firstLink+'" title="First Comic">';
    				}else{
    					comicNav+=' disabled" title="First Comic">';
    				}
    				comicNav+='<i class="icon-fast-backward"></i> <span class="button-text">First</span>';
				break;
				case "prev":
					comicNav+=' prev-btn';
    				if(prevLink){
    					comicNav+='" href="'+prevLink+'" title="Previous Comic">';
    				}else{
    					comicNav+=' disabled" title="Previous Comic">';
    				}
    				comicNav+='<i class="icon-chevron-left"></i> <span class="button-text">Prev</span>';
				break;
				case "chapter":
					comicNav+=' chapter-btn';
					comicNav+=' disabled" title="Chapter Start">';
    				comicNav+='<i class="icon-step-backward"></i> <span class="button-text">Chapter</span>';
				break;
				case "random":
					comicNav+=' random-btn';
					comicNav+='" href="'+randomLink+'" title="Random Comic">';
    				comicNav+='<i class="icon-random"></i> <span class="button-text">Random</span>';
				break;
				case "next":
					comicNav+=' next-btn';
					if(nextLink){
    					comicNav+='" href="'+nextLink+'" title="Next Comic">';
    				}else{
    					comicNav+=' disabled" title="Next Comic">';
    				}
    				comicNav+='<span class="button-text">Next</span> <i class="icon-chevron-right"></i>';
				break;
				case "today":
					comicNav+=' today-btn';
					if(nextLink){
    					comicNav+='" href="'+todayLink+'" title="Today\'s Comic">';
    				}else{
    					comicNav+=' disabled" title="Today\'s Comic">';
    				}
					comicNav+='<span class="button-text">Today</span> <i class="icon-fast-forward"></i>';
				break;
			}
			comicNav+='</a></span></span></span>'; 
		}
	    comicNav+='</div>';
	    /*------ADD THE COMIC NAV ABOVE AND BELOW THE COMIC------*/
	    Y.one('article .entry-content .image-block-wrapper').insert('<div class="top-comic-nav-wrapper">'+comicNav+'</div>',"before");
	    Y.one('article .entry-content .image-block-wrapper').insert('<div class="bottom-comic-nav-wrapper">'+comicNav+'</div>',"after");
	    

	    /*------SET THE WIDTH OF THE BUTTONS ON MOBILE BASED ON BUTTON NUMBER------*/
	    Y.one('head').append(Y.Node.create('<style>@media screen and (max-width:760px){.comic-nav .sqs-block-button{width:'+(100/(comicNavButtons.length))+'%;}}</style>'));
	    setImageLoader();
	}
	//Function to load the homepage-bottom page contents in the homepage below the comic.
	/*------FUNCTION TO LOAD THE homepage-bottom PAGE CONTENTS BELOW THE MAIN CONTENT OF THE HOMEPAGE------*/
	function homepageBottomHTMLLoaded(err,data){
		Y.one('.main-content').insert('<div class="homepage-bottom">'+data.response+'</div>',"after");
		/*------RE-INITIALIZE ALL SQUARESPACE CONTENT IN homepage-bottom AFTER THE CONTENT LOADS------*/
		Squarespace.globalInit(Y);
		fixSummaryTitles();
		resizeAds();
		/*------IF THERE ARE GOOGLE ADS, TRY AND LOAD THEM IN THE LOADED homepage-bottom------*/
		var isGoogAd=Y.one('.homepage-bottom  .adsbygoogle');
    	if(isGoogAd){
			loadGoogleCode();
			Y.all('.homepage-bottom  .adsbygoogle').each(function(){
				try{
					(adsbygoogle = window.adsbygoogle || []).push({});
				}catch(e){}
			});
		}

		/*------IF THERE ARE PROJECT WONDERFUL ADS, TRY AND LOAD THEM IN THE LOADED homepage-bottom------*/
		var isPwAd=Y.one('.homepage-bottom  div[id*="pw_adbox"]');
		if(isPwAd){
			try{
				loadPWCode();
			}catch(e){}
		}
	}
	/*------RESET ALL IMAGES ON THE PAGE TO ALLOW DYNAMIC RESIZING------*/
	function setImageLoader(){
		Y.all('img[data-src]').setAttribute("data-load","true").each(function(img) {
		    ImageLoader.load(img);
		});
	}
	/*------USE AJAX TO GET THE CHAPTER START LINK------*/
	function getChapterStartLink(){
		if(chapterCategory && prevLink){
			var chapterStartJsonURL='/'+comicUrlSlug+'/?format=json&tag=chapter+start&category='+chapterCategory+'&cachebust='+String(Math.ceil(Math.random()*100000000000));
			Y.io(chapterStartJsonURL, {
		        on:{success: chapterStartJsonLoaded}
		    });
		}
	}
	/*------GET CATEGORIES FOR THE PREVIOUS PAGE------*/
	function prevPageChapterJsonLoaded(err,data){		
		var jsonResponse = Y.JSON.parse(data.responseText);		
		if(jsonResponse){
			categories=jsonResponse.item.categories;
			if(!categories){
				categories=[];
			}			
			/*------SEE IF THERE IS A CATEGORY WITH "CHAPTER" IN IT------*/
			for(var i=0;i<categories.length;i++){
				/*------IF THERE IS, GET THE CHAPTER START LINK------*/
				if(categories[i].toLowerCase().indexOf("chapter")!=-1){
					chapterCategory=categories[0].split(" ").join("+");
				}
			}
			getChapterStartLink();
		}	    	
	}
	/*------INITIALIZE THE CHAPTER START BUTTON------*/
	function chapterStartJsonLoaded(err,data){
		var jsonResponse = Y.JSON.parse(data.responseText);
		if(jsonResponse){
			var chapterStartItem=jsonResponse.items[0]
			var chapterStartLink=chapterStartItem.fullUrl;
			Y.all("a.chapter-btn").removeClass('disabled').setAttribute('href',chapterStartLink);
		}
	}
	/*------REFORMAT SUMMARY TITLES TO BE H1, H2, H3, DEPENDING ON THE DISPLAY SIZE------*/
	function fixSummaryTitles(){
		if(Y.one(".summary-title")){
			Y.all(".summary-block-setting-text-size-extralarge .summary-title").each(function(){
				this.setHTML('<h1 class="extra-large">'+this.getHTML()+'</h1>')
			});
			Y.all(".summary-block-setting-text-size-large .summary-title").each(function(){
				this.setHTML('<h1>'+this.getHTML()+'</h1>')
			});
			Y.all(".summary-block-setting-text-size-medium .summary-title").each(function(){
				this.setHTML('<h2>'+this.getHTML()+'</h2>')
			});
			Y.all(".summary-block-setting-text-size-small .summary-title").each(function(){
				this.setHTML('<h3>'+this.getHTML()+'</h3>')
			});
		}
	}
	/*------FUNCTION TO USE CSS TO RESIZE RESPONSIVE ADS TO FIT WHATEVER CONTAINER THEY ARE IN. NECESSARY FOR ADS ON MOBILE.------*/
	function resizeAds(){
			Y.all(".section-ad-wrapper").each(function(){
				var responsiveAd=this.one('.responsive-ad')
				if(responsiveAd){
					strAdWidth=responsiveAd.getAttribute('data-width')
					strAdHeight=responsiveAd.getAttribute('data-height')
					if(strAdWidth.length>0){
						var adWidth=parseInt(strAdWidth, 10);
					}else{
						var adWidth=728;
					}
					if(strAdHeight.length>0){
						var adHeight=parseInt(strAdHeight, 10);
					}else{
						var adHeight=90;
					}
					responsiveAd.setStyles({
					    'height':(adHeight)+'px',
					    'width':(adWidth)+'px'
					});
					var containerWidth=parseInt(this.getComputedStyle("width"), 10)
					var scaleRatio=1;
					this.setStyles({
					    'visibility':'visible'
					});
					if(containerWidth<adWidth){
						scaleRatio=(containerWidth/adWidth);
						this.setStyles({
						    'height':(adHeight*scaleRatio)+'px'
						});
						responsiveAd.setStyles({
							'transform': 'translateX(50%) translateY(50%) scale('+scaleRatio+','+scaleRatio+')',
						    'bottom': '50%',
						    'right': '50%',
						    'position':'absolute'
						});
					}else{
						this.setStyles({
						    'height':(adHeight)+'px'
						});
						responsiveAd.setStyles({
							'transform': 'none',
						    'bottom': '0',
						    'right': '0',
						    'position':'relative'
						});
					}
				}
			})
	}
	
	function loadExtScript(str){
			var scriptElem=document.createElement('script');
			var firstScriptTag=document.getElementsByTagName('script')[0];
			scriptElem.type='text/javascript';
			scriptElem.async=true;
			scriptElem.src=str;
			firstScriptTag.parentNode.insertBefore(scriptElem,firstScriptTag);
	}
	function loadPWCode(){
		loadExtScript('//www.projectwonderful.com/pwa.js')
	}
	function loadGoogleCode(){
		if(!window.adsbygoogle){
			loadExtScript('//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js')
		}
	}

	/*------RESIZE ADS ON WINDOW RESIZE------*/
	window.onresize = function(event) {
		resizeAds();
	};
</script>

 

Custom CSS:

/*

  CUSTOM CSS CODE
  ----------------------
  This code is meant to be placed in the Custom CSS section of your Squarespace console.
  From the home menu, navigate to: 
  Design > Custom CSS
  and paste it input field.

  You can also add your own custom CSS code in the designated areas below.

*/

/*------YOUR CUSTOM CSS STYLES------*/




/*------END CUSTOM CSS STYLES------*/


/*------USE THESE CLASSES TO HIDE THE TOP OR BOTTOM COMIC NAVIGATION------*/

/*

.top-comic-nav-wrapper .comic-nav{
  display:none; 
}

.bottom-comic-nav-wrapper .comic-nav{
  display:none;
}

*/
/*------I'M HIDING THE NAVIGATION ABOVE THE COMIC BY DEFAULT------*/
.top-comic-nav-wrapper .comic-nav{
  display:none; 
}

h1,h2,h3{
  overflow: hidden;
}

/*------HELPER CLASSES------*/
.hidden{
  display:none !important;
}
.visible{
  display:block !important;
}
.responsive-image{
  max-width:100%;
}
/*------END HELPER CLASSES------*/

/*------HIDE ALL BUT THE LATEST COMIC ON THE HOMEPAGE------*/
.homepage .main-content article.hentry:not(:first-of-type){
  display:none;
}
/*------HIDE THE ARCHIVE LIST IN THE PAGE HEADER------*/
.collection-type-blog #page-body-header .sqs-block-archive{
  display:none;
}
.collection-type-blog.sqs-edit-mode #page-body-header .sqs-block-archive{
  display:block;
  background:#eee;
  border:2px dashed #dddddd;
  padding:17px;
  margin:17px;
  &:before{
    content:"comic navigation archive block"
  }
  .sqs-block-content{
        display:none;
  }
}

/*------HIDE THE PAGEINATION ON PAGE LOAD------*/
.pagination{
  display:none;
}

/*------COMIC NAVIGATION STYLES------*/
.comic-nav-btn, .comic-nav-btn:link, .comic-nav-btn:visited{
  display:inline-block;
  padding:10px 10px !important;
  box-sizing: border-box;
}
.comic-nav-btn.disabled{
  opacity:.5;
  pointer-events:none;
}

.comic-nav{
  text-align:center;
  background-color: transparent;
  padding:10px 20px;
  margin:0px -20px 0px;
}
.comic-nav .sqs-block-button{
  padding:0px 3px;
  display:inline-block;
  box-sizing:border-box;
}

/*------SPACE BETWEEN THE HOMEPAGE BOTTOM AND THE HOMEPAGE MAIN CONTENT------*/
.homepage-bottom{
  padding-top:20px;
}

/*------MAKE SUMMARY EXCERPT TEXT MATCH THE BODY STYLES------*/
.summary-excerpt p{
  line-height:inherit !important;
  font-size:inherit !important;
}

/*------DESKTOP SIZE RESPONSIVE AD STYLES------*/
.section-ad-wrapper{
  position:relative;
  visibility:hidden;
  overflow:hidden;
}
.responsive-ad{
  width:attr(data-width);
  height:attr(data-height);
  box-sizing:border-box;
  text-align:center;
  margin:0 auto;
  overflow:hidden;
}
.responsive-ad.align-right{
  margin:0 0 0 auto;
}
.responsive-ad.align-left{
  margin:auto 0 0 0;
}

/*------DEFAULT HIDE THE MOBILE LOGO------*/
#mobile-navigation{
   #banner{
          display:none;
    }
}

/*------MEDIA QUERIES------*/

/*------SMALLER THAN IPAD------*/
@media screen and (max-width:767px){
  /*------HELPER CLASSES------*/
  .hidden-sm{
    display:none !important;
  }
  .visible-sm{
    display:block !important;
  }
  /*------END HELPER CLASSES------*/

  /*------YOUR CUSTOM MOBILE CSS STYLES------*/



  /*------END CUSTOM MOBILE CSS STYLES------*/

  /*------UNCOMMENT THIS CODE TO SHOW THE LOGO ON MOBILE SIZE------*/
  /*
  
  .has-logo-image{
    #mobile-navigation{
      padding:0px;
      min-height:60px;
      box-sizing:border-box;
      #mobile-navigation-title{
          display:none;
      }
      #banner{
        display:inline-block;
        max-height:60px;
      }
    }
  }

  */
.has-logo-image{
    #mobile-navigation{
      padding:0px;
      min-height:60px;
      box-sizing:border-box;
      #mobile-navigation-title{
          display:none;
      }
      #banner{
        display:inline-block;
        max-height:60px;
      }
    }
  }
  /*------DARKEN THE MOBILE EXPANDED MENU A BIT------*/
  #mobile-navigation ul{
    margin: 0;
    background-color: rgba(0,0,0,.1);
  }
  /*------FIX POSITION AND RESIZE THE COMIC NAVIGATION AT THE BOTTOM OF THE SCREEN------*/
  .comic-nav{
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 10002;
    width: 100%;
    margin:0px;
    box-sizing: border-box;
    background-color:#ffffff;
    padding:10px 20px;
    -webkit-box-shadow: 0px -1px 5px 0px rgba(0,0,0,0.25);
    -moz-box-shadow: 0px -1px 5px 0px rgba(0,0,0,0.25);
    box-shadow: 0px -1px 5px 0px rgba(0,0,0,0.25);
  
  }
  .comic-nav-btn, .comic-nav-btn:link, .comic-nav-btn:visited{
    width:100% !important;
  }
  .comic-nav .button-block i{
    line-height:24px;
    font-size:24px;
    padding-top:3px;
  }
  body.hide-icons .comic-nav .button-block i{
    display:inline-block;
  }
  .comic-nav-btn .button-text{
    display:none;
  }
  /*------ADD AN OFFSET TO THE FOOTER SO THE COMIC NAVIGATION DOESN'T COVER UP CONTENT------*/
  .has-comic-nav #canvas{
    padding-bottom: 66px !important;
  }

  /*------CENTER ADS IF THEY ARE RIGHT OR LEFT ALIGNED FOR MOBILE------*/
  .responsive-ad.align-right{
    margin:0 auto;
  }
  .responsive-ad.align-left{
    margin:0 auto;
  }
  body.canvas-setting-site-width #canvas {
      padding-left: 17px;
      padding-right: 17px;
  }
}
  /*------SMALLER THAN IPAD IN LANDSCAPE ORIENTATION------*/
@media screen and (orientation:landscape) and (max-width: 767px)  {

  /*------YOUR CUSTOM MOBILE LANDSCAPE CSS STYLES------*/





  /*------END CUSTOM MOBILE LANDSCAPE CSS STYLES------*/

  /*------FIX POSITION AND RESIZE THE COMIC NAVIGATION ON THE LEFT SIDE OF THE SCREEN------*/
  .comic-nav{
    top:0;
    right:auto;
    left:0;
    width:66px;
    padding:5px 10px;
  }

  .comic-nav-btn, .comic-nav-btn:link, .comic-nav-btn:visited{
    padding:5px 10px !important;
  }
  .comic-nav .sqs-block-button{
    width:100% !important;
    margin:3px 0px;
  }
  /*------ADD AN OFFSET TO THE PAGE BODY SO THE COMIC NAVIGATION DOESN'T COVER UP CONTENT------*/
  .has-comic-nav{
    padding-bottom: 0px !important;
    padding-left:66px !important;
  }
 }

 

Responsive Ad Code:

(replace text in red)

<div class="section-ad-wrapper">
	<div class="responsive-ad" data-width="YOUR_AD_WIDTH" data-height="YOUR_AD_HEIGHT">
		YOUR_AD_CODE_GOES_HERE
	</div>
</div>

 

UPDATE:

As I find new things to fix, I will be updating this post and posting a change log in the comments.

 
Awesome Con

Awesome Con

Published on by Clay Yount.

Hey guys, I'll have an artist's table at Awesome Con DC this weekend and I'll be selling a new book collecting the first year of Hamlet's Danish comics. It'll look something like this.

I'll also have cat map posters and comic prints. I hope to see you there, so please stop by and say hello!

 

On a side note, I know I've been on a comic hiatus for the past month. I've had a couple medical issues that kept me from drawing. Things are good again, so I'll have the new comic up shortly, and I'll be updating regularly again. Looking forward to year 2, and thanks to you guys for reading!