Author: Barrett

Sliders

“We have tested rotating offers many times and have found it to be a poor way of presenting home page content.”
http://www.widerfunnel.com/conversion-rate-optimization/rotating-offers-the-scourge-of-home-page-design

“Large carousel areas annoy users and also cause them to skip over that featured area. I’m pretty sure that’s the exact opposite of the intended effect.”
http://bradfrostweb.com/blog/post/carousels/

“Accordions and carousels should show a new panel only when users ask for it . Otherwise, it should stand still and let users read the information in peace, without having the rug yanked from under them… It’s just plain annoying for users to lose control of the user interface when things move around of their own accord.”
http://www.nngroup.com/articles/auto-forwarding/

“This promotion looks so much like an ad that users are bound to ignore it: banner blindness.”
http://www.nngroup.com/articles/banner-blindness-old-and-new-findings/

“By forcing the visitor to involuntarily sit through a series of commercials, you are forcing them to have a linear and out-of-control experience. This is the wrong metaphor for the web… The primary purpose of your home page should be to create a high-level map of the world for your visitors so they can understand the range of available products that you carry. The giant banner will take up all of the prime real estate on the home page and push this navigation off the visible top of the page – sabotaging the page’s primary purpose.”
http://www.clickz.com/clickz/column/2164452/rotating-banners

“Sliders, in my opinion, are only valuable for display purposes; they are not good for action taking. Think how you use the web. Do you load a web page, and watch a slider scroll all the way through every item, and wait to click on the thing you like best? I hope not. Most of us want to be able to quickly and easily get to where we want to go.”
http://krogsgard.com/2013/sliders-suck/

“Amazon, which tests its website to the ends of computing capabilities, has a homepage carousel. Which starts static. At the bottom. Only related to things I’ve already seen. And that’s probably where it belongs on a homepage… We all know, people have learned to scroll. They did a long time ago, but still the ‘everything needs to be above the fold’ concept lingers on… The digital fold concept evolved into ‘squash as much content as you can above a certain number of pixels’.”
http://www.uofadmissionsmarketing.com/2013/02/using-carousels-in-higher-education.html

“The study shows clear indications that a static conversion optimized top area is more interesting to the users and leads to more engagement!”
http://angner.se/blog/will-front-page-carousells-improve-your-conversion-rate/

“Content which is genuinely relevant for both your goals and that of your visitors gets pushed down the page – in many cases, especially laptops, this means it gets pushed off the screen.”
http://beantin.se/post/30991868949/sliding-banner-content-slider-carousel-rotator

“so…
should i use a carousel?
NO!!!
seriously, you really shouldn’t.”
http://shouldiuseacarousel.com/

“Our themes don’t have sliders… Because sliders suck”
https://yoast.com/opinion-on-sliders/

more:

http://conversionxl.com/dont-use-automatic-image-sliders-or-carousels-ignore-the-fad/
http://weedygarden.net/2013/01/carousel-stats/
http://iampaddy.com/lifebelow600/
http://thomasharrigan.com/2013/sliders-the-good-the-bad-and-the-technical/

2013-02-28

Circles CSS

http://davidwalsh.name/demo/css-circles.php

.circle {
border-radius: 50%;
display: inline-block;
margin-right: 20px;
}

#circle1 {
width: 200px;
height: 200px;
background: green;
}

#circle2 {
width: 125px;
height: 125px;
background: red;
}

#circle3 {
width: 100px;
height: 100px;
background: blue;
position: relative;
}

#circle4 {
width: 50px;
height: 50px;
background: orange;
position: absolute;
top: 24%;
left: 24%;
display: block;
border: 3px solid #fff;
}

@-webkit-keyframes spin {
from { -webkit-transform: rotate(0deg); }
to { -webkit-transform: rotate(360deg); }
}

@-moz-keyframes spin {
from { -moz-transform: rotate(0deg); }
to { -moz-transform: rotate(360deg); }
}

@-ms-keyframes spin {
from { -ms-transform: rotate(0deg); }
to { -ms-transform: rotate(360deg); }
}

#advanced {
width: 200px;
height: 200px;

background-image: -moz-radial-gradient(45px 45px 45deg, circle cover, yellow 0%, orange 100%, red 95%);
background-image: -webkit-radial-gradient(45px 45px, circle cover, yellow, orange);
background-image: radial-gradient(45px 45px 45deg, circle cover, yellow 0%, orange 100%, red 95%);


/* webkit chrome, safari, mobile */
  -webkit-animation-name: spin; 
  -webkit-animation-duration: 3s; /* 3 seconds */
  -webkit-animation-iteration-count: infinite; 
  -webkit-animation-timing-function: linear;

  /* mozilla ff */
  -moz-animation-name: spin; 
  -moz-animation-duration: 3s; /* 3 seconds */
  -moz-animation-iteration-count: infinite; 
  -moz-animation-timing-function: linear;

  /* microsoft ie */
  -ms-animation-name: spin; 
  -ms-animation-duration: 3s; /* 3 seconds */
  -ms-animation-iteration-count: infinite; 
  -ms-animation-timing-function: linear;
}

<h2>Basic Circles</h2>
<div id="circle1" class="circle"></div>
<div id="circle2" class="circle"></div>
<div id="circle3" class="circle"><div id="circle4" class="circle"></div></div>

<h2>Spinning Gradient Circle</h2>
<div id="advanced" class="circle"></div>

http://blog.avtex.com/2012/03/23/friday-fun-create-a-pulsing-circle-with-css-and-jquery/

$(document).ready(function() {
    //inflate the circle on page load
    circle_inflate();
});
//inflates circle 10px, adjusts positioning to match, then calls deflate function
function circle_inflate() {
    $("#circle").animate( {
        height: 420,
        width:420,
        left:90,
        top:90
    },700,function(){circle_deflate();});
}
//deflates circle and positioning back to original, then calls inflate function
function circle_deflate() {
    $("#circle").animate( {
        height: 400,
        width:400,
        left:100,
        top:100
    },700,function(){circle_inflate();});
}

2013-02-22

Meetup

http://make.wordpress.org/events/tag/meetups/

Notes from podcast:
http://wpcandy.com/broadcasts/roundtable/003-wordpress-meetup-discussion/#.URovy6XNw0t

demo/test new WP vers

10sec intro- 1-2things, why they came.
Summary
Day/Time
Raise Hands
On point.
Show & Tell: what you’ve done/doing
Happiness bar
http://make.wordpress.org/events/2013/02/05/meetup-best-practices-happiness-bar/

NASA, WaPo

Lightning talks

Bar afterward

Suggest topic at Meetup.

User, Dev AND Design

Meetup Message Board
FB Group- mod/private, get topcis
Google Group
Google Hangout

Dev> how to talk human

http://www.meetup.com/MontanaWordpress/

2013-02-12
email

http://litmus.com/blog/why-email-designs-break-rendering-guide-infographic/litmus-road-to-rendering-infographic

http://css-tricks.com/using-css-in-html-emails-the-real-story/

http://en.wikipedia.org/wiki/Email_service_provider

http://mailchimp.com/resources/guides/email-marketing-field-guide/

wayback
http://www.xavierfrenette.com/articles/css-support-in-webmail/

http://www.sitepoint.com/text-html-let-users-decide/

http://kb.mailchimp.com/article/why-bother-with-plain-text-emails

A Simple HTML Email Boilerplate for Your Email Marketing

http://coding.smashingmagazine.com/2012/07/13/coding-qa-with-chris-coyier-code-smell-type-grid/

2013-01-23
MT WordPress Meetup Feb 13 2013
The first of many Bozeman MT WordPress meet ups is:
Feb 13 2013, 7pm
Comma-Q Architecture
109 N Rouse Ave, #1, Bozeman MT

We’ll have a wide-ranging roundtable discussion of All Things WordPress: security, storytelling, multimedia and marketing. We’re tailoring this initial gathering for regular WP users (first-time WP folk: you’ll have their day at a future meet). This meetup’s for you is WP powers:
- Your own site.
- Your org/company’s site.
- Your clients’ sites.
Bring your questions, experienced WP developers will be in da house.

http://imgs.xkcd.com/comics/tags.png
http://xkcd.com/1144/

406-586-1408

http://commaq.com/cq/wp-content/uploads/2011/02/Comma-Q_Logo_color_on_black.jpg
144×144
2013-01-21

Shortcodes

/* Add code, like iframe, to post via custom field shortcode
[field name=custom-field-name]
put code in custom field w/ above name
http://www.vividvisions.com/2009/02/11/wordpress-add-iframes-to-your-post/
*/
function field_func($atts) {
   global $post;
   $name = $atts['name'];
   if (empty($name)) return;

   return get_post_meta($post->ID, $name, true);
}

add_shortcode('field', 'field_func');

2013-01-16

Users

/*******************************
=USER Custom Fields
********************************/
function tr_add_user_fields( $contactmethods ) {
	// Add fields to User Profile admin:
	$contactmethods['user_google'] = 'Google+ URL';
	$contactmethods['user_facebook'] = 'Facebook URL';
	$contactmethods['user_twitter'] = 'Twitter URL';
	return $contactmethods;
}
add_filter( 'user_contactmethods', 'tr_add_user_fields', 10, 1);

2013-01-16

Login Page

/*******************************
=LOGIN PAGE
********************************/
// On login page, use Transom h1 link background (replacing WordPress logo):
function tr_login_logo() { ?>
	<style type="text/css">
        body.login div#login h1 a {
        	background-image: url(<?php echo get_bloginfo( 'template_directory' ) ?>/images/img-logo-transparent-320.png);
        	padding-bottom: 20px;
        }
    </style>
<?php }
add_action( 'login_enqueue_scripts', 'tr_login_logo' );

// Transom URL for h1 link href:
function tr_login_logo_url() {
	return 'http://transom.org/';
}
add_filter( 'login_headerurl', 'tr_login_logo_url' );


// Value for h1 link title:
function tr_login_logo_title() {
	return 'Transom: Home';
}
add_filter( 'login_headertitle', 'tr_login_logo_title' );

2013-01-16

Character Count

http://wpsnipp.com/index.php/excerpt/add-a-character-counter-to-excerpt-metabox/
TR

/* Add character count to Excerpt box */
function tr_excerpt_char_count()
{ ?>
    <script type="text/javascript">
    jQuery(document).ready(function(){
		jQuery('#postexcerpt p').append(' <em id="excerpt-char-cnt"></em>');
	    jQuery('#excerpt').focus(function(){
	        jQuery('#excerpt-char-cnt').html('Char count: <span>' + jQuery('#excerpt').val().length + '</span>');
	    });
	    jQuery('#excerpt').keyup(function(){
	        jQuery('#excerpt-char-cnt span').html(jQuery('#excerpt').val().length);
	    });
    });
    </script>
<?php }
add_action('admin_footer-post.php', 'tr_excerpt_char_count');
add_action('admin_footer-post-new.php', 'tr_excerpt_char_count');

http://wpsnipp.com/index.php/excerpt/add-a-character-counter-to-excerpt-metabox/

function excerpt_count_js(){
      echo '<script>jQuery(document).ready(function(){
jQuery("#postexcerpt .handlediv").after("<div style=\"position:absolute;top:0px;right:5px;color:#666;\"><small>Excerpt length: </small><input type=\"text\" value=\"0\" maxlength=\"3\" size=\"3\" id=\"excerpt_counter\" readonly=\"\" style=\"background:#fff;\"> <small>character(s).</small></div>");
     jQuery("#excerpt_counter").val(jQuery("#excerpt").val().length);
     jQuery("#excerpt").keyup( function() {
     jQuery("#excerpt_counter").val(jQuery("#excerpt").val().length);
   });
});</script>';
}
add_action( 'admin_head-post.php', 'excerpt_count_js');
add_action( 'admin_head-post-new.php', 'excerpt_count_js');

2013-01-16

Footnotes

http://en.wikipedia.org/wiki/User_talk:Yair_rand/ReferenceTooltips

http://en.wikipedia.org/wiki/User:Blue-Haired_Lawyer/footnote_popups.js

2012-11-08