The Blog
- Touching the Snake: Overcoming Fears of Inadequacy in Creativity
May 18, 2012 - Parkinson’s Law
May 9, 2012 - Great Free Screen Casting Site
May 3, 2012 - A Great CSS3 Generators
April 20, 2012 - Some Very Good Reasons to Opt Out of TSA Body Scanners
April 15, 2012
- Touching the Snake: Overcoming Fears of Inadequacy in Creativity
Tag Archives: Web Design
Create Page Specific Widget in WordPress
Easiest way to do this is: “Display Widgets” Plugin, “Simply hide widgets on specified pages. Adds checkboxes to each widget to either show or hide it on every site page.”
Alternatively, you can create a custom page template for each page where you want a special widget (e.g. “category-blog.php” or “page-blog.php”) – assign the page or posts to this template, then create a call for that widget in the template:
<?php get_sidebar('blog'); ?>
And duplicate the “sidebar.php” file and call it something custom like, “sidebar-blog.php”, ditch the “aside” code, change dynamic sidebar to say:
<?php if ( ! dynamic_sidebar( 'blog' ) ) : ?>
and then register it in the functions file:
register_sidebar( array( 'name' => __( 'Home Sidebar', 'homecarex' ), 'id' => 'home', 'description' => 'Widgets in this area will be shown in the home sidebar.', 'before_widget' => '<aside id="%1$s">', 'after_widget' => "</aside>", 'before_title' => '<h3>', 'after_title' => '</h3>', ) );
This would create a widget holder like this, “blog”: 
Multi-Step Forms in WordPress
I normally use http://contactform7.com – but it doesn’t seem to have the option for multi-step forms. So I’ve found two other solutions (haven’t tried either yet, but I’ll post an update when I do):
Free – http://www.deliciousdays.com/cforms-plugin/
$25 – http://codecanyon.net/item/dynamic-step-process-panels-for-wordpress/125748
A “Squeeze Page” in Facebook
Here’s a great step-by-step tutorial for how to make pages like this:
http://www.facebook.com/victoriassecret
http://www.facebook.com/bestbuy
in Facebook:
And here’s a showcase of more:
http://www.jeffbullas.com/2011/08/26/10-top-small-business-facebook-page-designs-to-inspire-you/
Tools to Test Your Website’s Loading Speed
http://tools.pingdom.com/ – this one also helps you identify graphics and scripts that are slowing it down.
http://proxify.com/ – load your page through another connection
Call-to-Action Buttons and Techniques
A great article from Boagworld:
http://boagworld.com/design/10-techniques-for-an-effective-call-to-action/
Smashing Magazine also has a great round-up from 2009:
http://www.smashingmagazine.com/2009/10/13/call-to-action-buttons-examples-and-best-practices/
Dynamic 301 Redirect
This is a solution to a very niche, but annoying problem. For SEO purposes, I was creating new URLs on an old-school dynamically generated site. So I needed a way to redirect from one dynamic url to another. The traditional .htaccess 301 redirect method doesn’t work in this situation. I found the solution here: http://www.webhostingtalk.com/showthread.php?t=659415
Here it is, for your htaccess file, after, of course, “RewriteEngine On”:
Instead of saying:
redirect 301 /old-directory/filename.php?item=old-page-name http://mysite.org/new-directory/filename.php?item=new-page-name – that doesn’t work
Say:
Option 1 (php file and directory stay the same):
RewriteCond %{QUERY_STRING} item=old-page-name
RewriteRule ^directory/filename.php$ /directory/filename.php?item=new-page-name [R=301,L]
Option 2 (directory and php file change, but page file name stays the same):
RewriteCond %{QUERY_STRING} item=page-name
RewriteRule ^directory/filename.php$ /new-directory/new-filename.php?item=page-name [R=301,L]
The Great Nivo Slideshow
The Dev7Studios has become the one of easiest to use, most popular free slideshows around right now. http://nivo.dev7studios.com
And here’s a couple quick tips I’ve discovered when installing it:
Tip 1: For people still concerned about IE7 – make sure to remove that last comma.
<link rel=”stylesheet” href=”./css/nivo-slider.css” type=”text/css” media=”screen” />
<script type=”text/javascript” src=”./js/jquery.nivo.slider.pack.js”></script>
<script type=”text/javascript”>
$(window).load(function() {
$(‘#slider’).nivoSlider({
effect:’fade’,
animSpeed:200,
pauseTime:3500,
startSlide:0,
directionNav:false,
directionNavHide:true,
controlNav:false,
controlNavThumbs:false,
keyboardNav:true,
pauseOnHover:true /* No comma here! Or else it might not work in IE7 */
});
});
</script>
<div id=”slider” >
<a href=”#”><img src=”MY-SLIDE.jpg” border=”0″ alt=”My Slide Title” name=”My Slide Nme” /></a>
</div>
Tip 2: Also for IE7, but may cause problems in other browsers too. Make sure to enter the slide sizes when adding the animated loading gif.
.nivoSlider {
position:relative;
width:618px; /* Change this to your images width */
height:246px; /* Change this to your images height */
background:url(images/loading.gif) no-repeat 50% 50%;
}
.nivoSlider img {
position:absolute;
top:0px;
left:0px;
display:none;
}
.nivoSlider a {
border:0;
display:block;
}
Update: to make your last slide stay put (pause / stop), make the end of your code look like this:
pauseOnHover:true,
lastSlide: function(){
$(‘#slider’).data(‘nivoslider’).stop();
}
Another update: A quick and easy way to pause one slide longer than the others is to simply double it up — using the fade effect, it appears to pause for longer.
Custom Animated Gif Loader Graphic
A quick little tool that I want to share. This couple sites that help build a custom slideshow or gallery “loading” graphic (like the one on the left) to match your site — if you have a shaded background, get rid of that white pixel edge!
And — on the topic of animated gifs, I’ve been thinking about them as design elements since I’ve recently seen two sites that used them beautifully.
The first is a great little animation at the bottom of my FreshBooks account. In the footer — a cute little fish appears when you rollover “Pricing & Upgrades.” It’s a fun way to highlight the link. (see the pics below)
And secondly, I recently saw a portfolio site for a designer that had great monsters with blinking animted gif eyes, but it seems that she’s redesigned her site, so here’s one of hers that shows the effect too http://www.sillypoems.info/ (built by http://www.indubitablee.com). Here’s another one that does it – http://www.brandwood.com/
Here it is! I f
Here is a list of tutorials on creating animated gifs: http://www.smashingmagazine.com/2009/07/27/tutorials-and-resources-for-adobe-fireworks/
And here’s one of those sites where you can upload a short video and have it made into an animated gif: http://gifninja.com/animated-gifs/create