PVP Redesign has UX Problems

Posted on by
Reply

So PVP, a webcomic that I’ve followed since about 2002 (back when it was still physically published by Dork Storm Press) just launched a site redesign.

And it looks hideous.

Not in the way that most people would say hideous, mind you.  But rather from a User Experience (UX) perspective.  The header of the interior pages is 215px tall, and the front page is 415px.  When you add that to the typical browser/OS overhead of 100px or so, that means on the homepage, the content is starting about 550px down the screen.

Worse yet, Scott Kurtz (creator of PVP) has done that highly obnoxious thing (that I seem to recall him venting a couple years ago about Penny-Arcade doing) — moving the single piece of content that 95% of your visitors are coming to your site to view off of your front-page, thereby making them click through to the new page, doubling your page views, and doubling your Ad Impressions. (And doubling the aggravation of everyone who wants to just see today’s comic) (with doublemint gum)

Yes, the new site looks more modern and fresh.  However from the perspective of any visitor, with regard to usability, it has gone way down.

So as I hate criticizing things unless I’m ready to step up to the plate and do something to help, here’s a JS `bookmarklet` that you can drag to your browser bar to see how much nicer pvponline could look without that hideous massive header obscuring the screens of most of his audience.

Because let’s face it, Scott — most of your audience isn’t viewing the website on a 27″ iMac like you.

Without further ado (Yes, I do tend to ramble) here’s your bookmarklet:

PVPretty

Here’s the code that it executes:

s=document.createElement('style');
c=document.createTextNode('#header,#headerSub{background:#000000;}'
+'#header .content,#headerSub .content{height:auto; padding:0;}'
+'#header .content > #adLeaderboard,#headerSub .content > #adLeaderboard,'
+'#header .content > h1,#headerSub .content > h1,'
+'#header .content > #featured{display:none;}'
+'#header .content .nav,#headerSub .content .nav{position:relative; top:0;}');
s.appendChild(c);
document.head.appendChild(s);

And the CSS that it puts in the page.

#header,
#headerSub {background:#000000;}
#header .content,
#headerSub .content {height:auto; padding:0;}
#header .content > #adLeaderboard,
#headerSub .content > #adLeaderboard,
#header .content > h1,
#headerSub .content > h1,
#header .content > #featured {display:none;}
#header .content .nav,
#headerSub .content .nav {position:relative; top:0;}

By the way, Scott, if you ever read this, I know you consider yourself a professional. Which makes it all the more aggravating when you are eternally incapable of having your webcomics actually follow a posting schedule. Occasionally, they’ll be up by noon on the day that they’re scheduled for. But those times are rare. Far more common, they may go up around 7pm, if you actually make the date they’re meant to be up for, instead of publishing them late and backdating them.

If you want to consider yourself a professional, then why are you chronically unreliable in having the fruits of your labor up, when every single one of the other webcomics I follow does manage it, day in, and day out?

For the record, the other webcomics I read are as follows:

  • XKCD
  • CandiComics
  • QuestionableContent
  • Sinfest
  • Nodwick/FFN
  • OutThere

 

Multiple Meta-Viewports for iPad/iPhone

Posted on by
Reply

It’s not ideal, as you’re manually targeting the iPad, but …

Default Viewport Code (change as needed for default mobile devices)

JavaScript code (play with as you like for your own purposes)

if( navigator.userAgent.match(/iPad/i) != null ){
	viewport = document.querySelector("meta[name=viewport]");
	viewport.setAttribute('content', 'width=1000px, user-scalable=0');
}

I used this in my submission for the CSS-Off, to ensure that the viewport specified for mobile devices didn’t also restrict the iPad’s version of the site.

Create New Admin Account in WordPress via FTP

Posted on by
2

Another handy little snippet for WordPress …

Have you ever had a client need help on their WordPress site, and have FTP access, but not actually give you a WordPress account to use? Just paste this snippet into their current theme’s functions.php file, or add it to a new file in their ~/wp-content/mu-plugins/ folder, and WordPress will automatically create an admin account for you to use!

Oh — and don’t forget to change the credentials that are included to your own. If there is already an account with the username or email address specified, it will fail and not do diddly squat.


function add_admin_acct(){
	$login = 'myacct1';
	$passw = 'mypass1';
	$email = 'myacct1@mydomain.com';

	if ( !username_exists( $login )  && !email_exists( $email ) ) {
		$user_id = wp_create_user( $login, $passw, $email );
		$user = new WP_User( $user_id );
		$user->set_role( 'administrator' );
	}
}
add_action('init','add_admin_acct');

Remember … with great power comes great responsibility. Don’t abuse it.

Toggle All Checkboxes with jQuery

Posted on by
2

Just a little snippet I worked up that may be useful to someone …

jQuery(document).ready(function($){
$('div#checkall-wrapper input[type=checkbox]').click(function(){
	if( $(this).attr('checked') ){
		$('tdiv#wraparound-targets input[type=checkbox]').attr('checked','checked');
	}else{
		$('div#wraparound-targets input[type=checkbox]').removeAttr('checked');
	}
});
});

Make sense?

Convert User Input to Number

Posted on by
Reply

Handy little snippet I just kicked together:

onblur="this.value=parseFloat(this.value.replace(/[^0-9\.]/g,'')).toFixed(2);"

Just put it on any input element (or textarea if you really wanted to) and when a user is finished entering data, it will strip it down to a number, formatted to two decimal places.

Not that I typically advocate for writing javascript inline like this, but occasionally it’s the quick fix that the client wants!

Give it a demo here: