Magnetic Webworks » Blog http://www.magneticwebworks.com Pixel-Perfect WordPress and UI Development Wed, 21 Sep 2011 19:54:39 +0000 en hourly 1 http://wordpress.org/?v=3.1 Launch Your Website and Learn WordPress Along the Way http://www.magneticwebworks.com/launch-your-website-and-learn-wordpress-along-the-way/ http://www.magneticwebworks.com/launch-your-website-and-learn-wordpress-along-the-way/#comments Tue, 07 Dec 2010 01:33:31 +0000 Doron http://www.magneticwebworks.com/?p=2130

Over the past year, I’ve had some great experiences working with friends who were messing around with WordPress, but just needed me to help them get everything configured and customized. These weren’t folks who needed a highly customized website solution, but folks who needed their sites to fool people into thinking that they cost a fortune to build.

The How

Since these were people who were open to getting their hands dirty with a little simple technology, we had a great time working together either via Skype or in person updating the site together, changing a color here, adding an image there, adding a page here, changing the text there, etc. Since WordPress makes it so easy to get a website live, we could just play around and have fun with it until we ended up with what my friends wanted to see, all the while cracking silly jokes about all sorts of sundry (but family-friendly, of course) topics.

The End

At the end of our little WordPress jam session, my friends ended up with a website that would have cost potentially thousands of dollars if they had paid for a custom design built from the ground-up. Of course, sometimes fully-custom is absolutely the way to go. But many other times, it’s just a waste of money, since you can always expand onto your website as your business/hobby grows.

Since these types of collaborations are such a blast and have such awesome results, I figured that I’d build into my business as a service for those looking for a website along with the ability to update and customize it without having to hire an expensive designer every time they need to change a phone number or modify the sidebar.

I’ve added on to the package access to a library of WordPress how-to videos so you don’t have to remember everything we’ve gone over, and slapped on a price tag of $325.

Anyhow, this is probably one of my favorite things that I do in my business, so if what I’m describing sounds good to you, you can learn more at the official page for this package known as “Launch and Learn.”

Until next time…

]]> http://www.magneticwebworks.com/launch-your-website-and-learn-wordpress-along-the-way/feed/ 0 Yet Another Solution to the IE6 “Peekaboo” Bug http://www.magneticwebworks.com/yet-another-solution-to-the-ie6-peekaboo-bug/ http://www.magneticwebworks.com/yet-another-solution-to-the-ie6-peekaboo-bug/#comments Wed, 13 Oct 2010 17:51:38 +0000 Doron http://www.magneticwebworks.com/?p=2051 IE6, much like the cockroach, is an ugly pest won’t seem to die off, no matter how hard one may try.  Chances are, if you have spent a decent part of your UI development career being responsible for this nasty browser, then you have probably come across this stubborn issue which has come to be known as the “Peekaboo” bug.

The Peekaboo Bug

You may notice that while viewing certain pages on IE6, the page background may disappear as you either point your mouse over that section of the page, or when a JavaScript effect such as a Suckerfish drop-down menu is triggered.


I recently had to deal with this issue and none of the resources I found via Google held a solution for me.

How I fixed my most recent case of the Peekaboo Bug

In this case, the bug was only affecting the part of my page covered by a background image. I noticed that by swapping out the CSS background image with just a normal image tag, then the bug ceased to occur.

However, I still needed a background image to place HTML text over, so it was not a simple matter of just replacing a background image with a normal image tag.

What I ened up doing was:

  1. Taking the image that was formerly used as a CSS background and positioning it absolutely as a normal image tag
  2. Assigning that image tag a z-index of -1
  3. Taking my h1 tag and also absolutely positioning it over the image in the exact place I wanted it to go
  4. Giving my h1 tag a z-index of 2 to make the h1 tag sit *above* the image tag, which is now serving as a background image

Sample Code

You’ll notice that I’m using IE6 conditional tags so that I can code the page normally using a CSS background for all other browsers.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

<html>
<head>
<title>Peekaboo</title>
 
<!--[if IE 6]>
<style>
#header_background_image {position:absolute; z-index:-1;}
h1 {z-index:2; position:absolute; top:20px; left:20px;}
</style>
<![endif]-->
</head>
 
<body>
 
<!--[if IE 6]>
<img src="images/background.png" id="header_background_image" />
<![endif]-->
 
<h1>This is My Header</h1>
</body>
</html>

Peekaboo no more! ]]> http://www.magneticwebworks.com/yet-another-solution-to-the-ie6-peekaboo-bug/feed/ 1 jQuery Rotating Page Background http://www.magneticwebworks.com/jquery-rotating-page-background/ http://www.magneticwebworks.com/jquery-rotating-page-background/#comments Tue, 28 Sep 2010 15:00:31 +0000 Doron http://www.magneticwebworks.com/?p=2001

I’ve seen several tutorials on how to create a rotating page background using jQuery, but to my surprise pretty much all of them had some major flaws. Here is a technique that I was able to implement very easily with 100% W3 validation.

Getting jQuery on your Page

Since we’ll be using jQuery to handle the background image animation, then we need to get jQuery into our page by adding the following code:

1

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>

Using the Google-hosted jQuery library will make for a faster load time for your page since there’s almost no chance that you’ll be able to serve this code up faster than Google’s servers.

Adding the Cycle plugin

Next, you’ll need to grab the code for the jQuery Cycle plugin which will be handling the actual animation functionality. Download the plugin here:

1

<script src="jquery.cycle.lite.min.js" type="text/javascript"></script>

The CSS & HTML Behind this Trickery

Basically, the concept here is, rather than using a regular page background and then continuously swapping out the background image attribute, Here’s what we do:

  1. Set up the area that will encompassed by the background image by creating divs that span as much of the page as we like. In this example we’re working with a fairly small page background area, but you can make the page background as big or as small is necessary.
  2. We have the Cycle plugin rotate those divs.
  3. Place the code for the actual page content beneath the code for the background divs.
  4. Use absolute positioning to pull the main content up so that it overlaps the rotating background divs.
  5. Use z-index to put the page content on top of the rotating background divs.

The Complete Code

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>jQuery Rotating Background Image</title>
 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script src="jquery.cycle.lite.min.js" type="text/javascript"></script>
<script type="text/javascript">
 
$(document).ready(function(){
 
    $('#bg_containers').cycle({
		fx: 'fade' // choose your transition type, ex: fade, scrollUp, shuffle, etc...
	});
 
});
</script>
 
<style type="text/css">
 
body {padding:0; margin:0;}
#content {position:relative;width:800px; height:600px; margin:0; z-index:999; padding:270px 0 0;}
#text_box {background:#000; color:#ffffff; padding:10px; margin:0 auto; width:600px;}
 
/* classes to work with cycle plugin for BG images */
#bg_containers {width:800px; margin:0;}
#bg_containers div {width:800px; height:600px; margin:0 auto;}
#bg_containers .bg1 {background:url(1.jpg) no-repeat;}
#bg_containers .bg2 {background:url(2.jpg) no-repeat;}
#bg_containers .bg3 {background:url(3.jpg) no-repeat;}
</style>
 
</head> 
 
<body>
 
<div id="bg_containers">
	<div class="bg1"></div>
	<div class="bg2"></div>
	<div class="bg3"></div>
</div>
 
<div id="content"> 
 
	<div id="text_box">
    	        The background image behind this can be any size, so although it may not cover your entire screen in this case, you can make it cover as much or as little of the screen as you like. Just adjust the size of the #bg_containers, and of course, you can also have the background tile if you like as well.
        </div>
 
</div>
 
</body>
</html>

VIEW THE DEMO PAGE

Happy background image rotating!

]]> http://www.magneticwebworks.com/jquery-rotating-page-background/feed/ 14 Beginner’s Guide: Creating a WordPress Plugin http://www.magneticwebworks.com/beginners-guide-to-creating-a-wordpress-plugin/ http://www.magneticwebworks.com/beginners-guide-to-creating-a-wordpress-plugin/#comments Tue, 21 Sep 2010 14:00:29 +0000 Doron http://www.magneticwebworks.com/?p=1932 The ability to create WordPress plugins is a highly coveted skill which only a relatively small proportion of developers out there are actually capable of. Here’s a quick guide geared towards the absolute beginner to get you started on adding this highly valued asset to your skillset.

Create a Home for your Plugin

  1. Go to your wp-content/plugins folder, and create a new directory with the name of your plugin. For our purposes, let’s call the plugin as well as the directory it lives in “Hello Hello.”
  2. Inside this new directory, create a single PHP file which will contain the code for your plugin. For our purposes, we’ll call it “Hello-Hello.php.”

Set Up your Plugin’s Basic Information

Here’s a broken-down version of the PHP code that goes at the top of your new file, Hello-Hello.php

1
2
3
4
5
6
7
8
9
10
11
12
13
14

/*
// obviously, the name of your plugin
Plugin Name: Hello Hello
// a link to the specific page where your plugin is located
Plugin URI: http://magneticwebworks.com/hello-hello-plugin
// obvious...
Description: Hello Hello plugin, created for tutorial purposes
// obvious...
Author: Doron Orenstein
// Update this with each version of your plugin.
Version: 1.0
// the link to your website
Author URI: http://magneticwebworks.com
*/

See your Plugin in the Plugins Screen

“Look Ma, I’m a pro now!” The code at the top of your plugin file is now showing up on the plugins screen.

Create the Function that Calls your Plugin’s Functionality

Here we’re setting up the code to display the words “Hello Hello.”

1
2

function hellohello_display_text() {
	$output .= "Hello Hello";

Create the Short Code to Make Your Plugin Easy to Implement

This makes it easy for any non-technical person to call up the words “Hello Hello” by simply adding [hellohello] into any page or blog post. Otherwise we’d have to put a PHP function in the page or post template file, which is not very user-friendly or useful for the average user.

1
2

// Add shortcode
add_shortcode('hellohello', 'hellohello_display_text');

The Complete Code

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

<?php
/*
Plugin Name: Hello Hello
Plugin URI: http://wordpress.org
Description: Hello Hello created for tutorial purposes.
Author: Doron Orenstein
Version: 1.0
Author URI: http://magneticwebworks.com
*/
 
function hellohello_display_text() {
	$output .= "Hello Hello";
	}
 
// Add shortcode	
add_shortcode('hellohello', 'hellohello_display_text'); 
 
 
?>

Implementing the Plugin on your Web Site

As mentioned above, thanks to the shortcode we created, this is exceedingly simple. To do this, all we need to do is add [hellohello] in your blog posts and pages as shown below.

The Spectacular Final Result

width=

Obviously, this is merely scratching the surface of what’s possible with WordPress plugins, but the point here is to provide an launching point that’s not too overwhelming while also encouraging any WordPress development newbie to take their own plugin development skills to the next level.

Kudos go out to Benjamin Robert Mueller and Brandon Dove, my WordPress compadres who I got to geek out with at the WordCamp LA Developer’s Day a couple of weeks ago. Thanks to these two fellows, I learned a great deal more about plugin development than I knew coming in, so big ups to those two fellas.

Happy plugin-ing…. (?)

]]> http://www.magneticwebworks.com/beginners-guide-to-creating-a-wordpress-plugin/feed/ 1 Quick Tips & Tidbits from WordCamp LA 2010 http://www.magneticwebworks.com/quick-tips-tidbits-from-wordcamp-la-2010/ http://www.magneticwebworks.com/quick-tips-tidbits-from-wordcamp-la-2010/#comments Mon, 13 Sep 2010 15:45:31 +0000 Doron http://www.magneticwebworks.com/?p=1890

To quote from the WordCamp LA web site:

WordCamp is a conference type of event that focuses squarely on everything WordPress. Everyone from casual end users all the way up to core developers show up to these events. These events are usually highlighted by speeches or keynotes by various people.

For those of you in the WordPress community who’ve never been, I highly recommend you check one of these out, as they are jam-packed with great people and super-informative presentations.

And a super-special kudos to Austin Passy and all of the amazing volunteers who made sure that the event ran as awesomely as it did.

Although there was a ton of actionable information given, here are just a few great tidbits from the event that I think would be worth sharing.

Practical exploits of jQuery with WordPress

Presenter: Bill Heaton

Optimizing the performance WordPress

Presenter: Josh Highland

  • Only load server modules that you need.
  • Things to cache include:
    • database queries
    • PHP code
    • page requests
    • assets (images, javascript, css)
  • W3 Total Cache is becoming known as the best WordPress performance optimization plugin.
  • Not all WordPress themes are created equal when it comes to site performance. Things to be aware of when choosing a theme:
    • Number of CSS/JS/Images being loaded
    • Is the CSS/JS minified out of the box?
    • Are the images optimized?
    • Is the code optimized (too many database calls)?
  • Images:
    • How many are you loading?
    • look into LazyLoad juery plugin
    • Use CSS sprites (create theme automatically at http://spriteme.org)
    • Are the images optimized?
    • Dont resize the image in using the image size percentage in WordPress’ image upload/gallery tool
  • Watch out for the “Yet Another Related Posts Plugin.” It queries every single blog post every time the user lands on any blog post.

Advanced Use of Custom Fields

Presenter: Thom Meredith

  • Magic Fields is a much more user/client friendly alternative to Custom Post types. It allows you to set up post types that are not necessarily standard WordPress pages or posts, but special entries made specifically for your site. For example, if you have a site that lists movies, you don’t necessary want to create a blog post or a static page for each movie. Perhaps all you need for each movie listing is the name of the movie and the URL. Magic Fields allows you to create the equivalent of a custom post type that adds a simple form to the bottom of the post or page edit screen with text fields where a non-technical client can easily enter the name and the URL for the movie.
  • The Pods CMS plugin does the same thing as Magic Fields, but is a bit more flexible, but also a bit more complex to set up.

Introduction to posting on the go

Presenter: Austin Passy

  • The Postie plugin is a great option for those who want to update their blog via email. It allows simple uploading of photos and blog content, and is also great for clients who don’t want to mess with the WordPress admin.

Photographic Highlight


WordPress Tattoo

Now THAT'S dedication! Notice the killer WordPress tattoo on John Hawkins of 9seeds and vegasgeek.com!

]]> http://www.magneticwebworks.com/quick-tips-tidbits-from-wordcamp-la-2010/feed/ 0 Solutions to W3 Total Cache + FaceBook Share Conflict http://www.magneticwebworks.com/solution-to-w3-total-cache-facebook-share-conflict/ http://www.magneticwebworks.com/solution-to-w3-total-cache-facebook-share-conflict/#comments Sun, 05 Sep 2010 20:43:04 +0000 Doron http://www.magneticwebworks.com/?p=1871

The setting that needs to be changed in order for both plugins to live in harmony

The setting that needs to be changed in order for both plugins to live in harmony

While working on a client site which used both the W3 Total Cache plugin as well as the Facebook Share plugin, I came across a bug where the Facebook Share icon that was to be placed at the top and bottom of each blog post was disappearing, only to be replaced by a “Share” link that linked to nowhere.

After playing around with the Facebook Share settings for quite some time, I started deactivating plugins one by one to see if there was a conflict causing this. I noticed that the culprit was the W3 Total Cache plugin, which was crucial to the stability of this highly trafficked web site and could not be deactivated nor replaced, as it really is the best plugin for WordPress caching.

Solution #1:

I was able to fix the issue by changing a single W3 Total Cache setting. By going in my admin to Performance > Minify, I scrolled down to the JavaScript settings, unchecked the “Enable” checkbox and clicked “Save changes.” I was also able to leave the global Minify setting for the plugin (found by navigation to Performance > General Settings) enabled for CSS minification.

Voila! My Facebook Share icon was now appearing on the site again and functioning properly.

It is my feeling that the Facebook Share plugin is not the only plugin out there being impacted by W3 Total Cache’s minify settings. I would venture to guess that there a good number of other JavaScript-based plugins that could be broken by JS  magnification, so keep this in mind for future plugin bugs and conflicts.

Solution #2:

On my own site, I am running W3 Total Cache with Minify enabled globally (to reduce the memory imprint of both CSS and JS code) while also running a Facebook Like button plugin with no problems.

The W3 Total Cache-compatible Facebook plugin that I’m running is simply titled “Like” and can be found at http://wordpress.org/extend/plugins/like.

]]> http://www.magneticwebworks.com/solution-to-w3-total-cache-facebook-share-conflict/feed/ 3 Easy Page-Specific WordPress Sidebars http://www.magneticwebworks.com/page-specific-sidebars-in-wordpress/ http://www.magneticwebworks.com/page-specific-sidebars-in-wordpress/#comments Mon, 30 Aug 2010 00:48:31 +0000 Doron http://www.magneticwebworks.com/?p=1843 In yet another step to make WordPress function more like a CMS than a simple blog, there is a recently updated plugin that I think is worth noting.

By default, the WordPress sidebar remains identical on every single page of your web site. However, sometimes we need to be able to have a specific sidebars for different pages. For example, maybe you have a “Products” page that needs testimonials along the sidebar while your “About Us” page sidebar needs to display a listing of awards.

Solutions:

The Advanced Way:
Create a separate page template with it’s own sidebar widget function. Alternately, you could include a conditional statement in your sidebar.php to display different sidebars depending on the page that’s being displayed.

If none of what I’m saying makes any sense to you, then you’ll probably want…

The “Regular Folks” Way:
Simply download the Per Page Sidebars plugin at
http://wordpress.org/extend/plugins/per-page-sidebars.

Once it’s installed, you’ll notice that at the bottom of each of your pages is a box titled “Custom Sidebar” (see image below). To set up a unique custom sidebar for the page that you’re creating, simply check the “Activate Custom Sidebar” box, and select which of the sidebar widget areas you’d like to replace. In the screenshot below, we’re replacing the “Primary Widget Area” – which is the sidebar that goes at the upper right-hand side of every page.

Now go into the “Widgets” page of your admin, and you’ll see a new widget area labled “PPS-” followed by the name of the page with the page-specific sidebar.

A couple of things to consider:

  • At this time the plugin only allows you to set up custom sidebars for pages, and not for posts or custom post types.
  • Removing a custom sidebar widget was a little bit unintuitive. To do so, simply go to the page with the custom sidebar, and uncheck not only the “Activate Custom Sidebar?” checkbox, but also the radio button next to the name of the sidebar that your custom sidebar was replacing.
]]> http://www.magneticwebworks.com/page-specific-sidebars-in-wordpress/feed/ 5 Review of Easy E-Commerce Solution, Wazala http://www.magneticwebworks.com/review-of-easy-e-commerce-solution-wazala/ http://www.magneticwebworks.com/review-of-easy-e-commerce-solution-wazala/#comments Mon, 23 Aug 2010 00:52:14 +0000 Doron http://www.magneticwebworks.com/?p=1793 Wazala is a great new e-commerce solution that can work with any web site and is designed to make setting up an online store a simple copy, paste, point, and click operation.

In experimenting with Wazala in conjunction with a WordPress website, sadly, at the time of this blog posting, the WordPress plugin simply did not work for me, and I had to refer to the inaccurate instructions on Wazala’s web site to get the thing working (long story short, you need to paste a bit of code directly before the </head> tage of your site.)

However, once you get the code into your header, then it’s smooth sailing without another lick of code necessary to get your store up and running.

How it Works

To quote from Wazala’s web site:
Add a “store” button to your blog or website, and your store will simply pop-up over your content — no more sending your customers elsewhere to make a purchase. Wazala functions as a part of your existing site.

Wazala Store Button

Wazala Store Button on the upper-right hand side. Upon mouseover, it slides down just a little bit to display checkout information.

Once you click on the store button, you get a clean and attractive overlay window with containing your entire store. By default, the window is styled in a neutral manner so that out of the box it integrates pretty seamlessly into the look and feel of your site.

Here's what the store overlay looks like.

The store in the screencap above allows for multiple categories, which is not possible with the free plan, but comes with the least expensive of the paid plans. The free plan restricts you to 5 products and limited functionality, while the paid plans run anywhere from $9.95 to $29.95 per month, with significant discounts if you pay for the entire year up front. Click here to see full pricing details.

Adding Products

Adding products is done on Wazala’s web site using a set of super-easy and intuitive forms that allow for a good amount of flexibility in terms of product, payment, and shipping options. I actually found this much easier than that the ubiquitous E-junkie shopping cart where the interface for adding products is much more cluttered and involves jumping through some relatively unintuitive hoops for adding product variations.

(Click to enlarge image) This is where add, edit, and delete individual store products

(Click to enlarge image) This is where you control store-wide options.

0

Other Integration Options

Some other cool things that you can do to make your store integrate more seamlessly and effectively with the rest of your site:

  • Replace the default “Store” button on the top of your screen with your own button or text link to be placed anywhere you want on your web site
  • Link directly to individual products
  • Add an “Add to cart” button or link anywhere on your site
  • Add an “Add to Favorites” or “Wish List” button or link anywhere on your site
  • Add a “View Shopping Cart” button or link anywhere on your site
  • Replace the black semi-transparent overlay which surrounds the store window with a custom background image
  • Add a custom page to your store which is accessed by clicking on a link at the bottom of the store overlay

Compatible Payment Processing Options

  • Paypal Premier
  • Paypal Business
  • Google Checkout
  • Paypal Website Payments Pro
  • Authorize.net

SEO Considerations

While the overlay makes for very easy integration, keep in mind that your products will not be indexed by the search engines, so if SEO of your individual products is a deal-breaker, then this is may not be the solution for you.

One possible workaround would be to create individual product pages within your web site. On each product page you could include a button that spawns the store’s overlay opening to that exact product’s page.

Conclusion

After playing around with the store quite a bit, I found it to be rock-solid and super-easy to use. Unless your intention is to build a site that is completely centered around e-commerce (a la Walmart.com or BestBuy.com), then I highly recommend Wazala.

For more details, see Wazala’s web site.

]]> http://www.magneticwebworks.com/review-of-easy-e-commerce-solution-wazala/feed/ 3 Solution to NextGen Gallery Slideshow CDN Conflict http://www.magneticwebworks.com/solution-to-nextgen-gallery-slideshow-cdn-conflict/ http://www.magneticwebworks.com/solution-to-nextgen-gallery-slideshow-cdn-conflict/#comments Sat, 31 Jul 2010 01:08:55 +0000 Doron http://www.magneticwebworks.com/?p=1732 Solution to NextGen Gallery Slideshow CDN Conflict

Here’s a special quick post this week to solve a problem I’ve been seeing around the web, but with no solution.

I was recently working on a high-traffic site that that uses using the W3 Total Cache plugin in conjunction with an Akamai CDN. This is a great way to optimize site performance and stability, but I did run into the unfortunate side effect of the NextGen Gallery plugin’s slideshow ceasing to work as soon as the CDN was integrated.

Thanks to my favorite WordPress hosting guru Willie Jackson, there is now a solution.

Following Willie’s lead, and as seen in the screencap above, here’s how you fix this issue:

  1. In the settings box for the W3 Total Cache plugin, labeled ’Performance,’  go into the CDN screen.
  2. At the bottom of the page, there is a box for rejected files.
  3. In that box, add the path to the image rotator .swf file (will be “wp-content/uploads/imagerotator.swf” in most cases)

And voila, your slideshow and CDN live together happily ever after!

]]> http://www.magneticwebworks.com/solution-to-nextgen-gallery-slideshow-cdn-conflict/feed/ 14 Do You Talk Too Much? http://www.magneticwebworks.com/do-you-talk-too-much/ http://www.magneticwebworks.com/do-you-talk-too-much/#comments Sun, 18 Jul 2010 23:29:53 +0000 Doron http://www.magneticwebworks.com/?p=1563 Don't be like this thing.

Talking…AND Listening – The 2 Parts of Conversation

We’ve all experienced this person at one time or another. You know, that guy or gal who drones on and on with zero awareness of the interest level of the person that they’re talking to. Lord knows, I’m sure that I’ve been this person at one time or another, and I would venture to guess that almost all of us have been too.

The “Monologue Disease”

I call this the “Monologue Disease,” and find it extremely widespread but not often talked about. Trouble is, when it comes to the world of business, I have yet to meet someone who is fantastically successful while also manifesting this disease in his or her conversations with their fellow business-folk. Although victims of this disease are almost always well-meaning, the act of droning on and on without self-awareness tends to tire, stress-out, and repel others. In short, this is a truly devastating handicap for one’s efforts in the realm of in-person networking.

Of course, there are occasions where we must carry on a one-sided conversation for extended periods of time. Obviously, when delivering a speech, teaching or explaining something to a willing audience, or telling a story to people who are genuinely interested, we often do have to speak solo for a long while, so I’m not taling about those instances.

5 Tips for Overcoming “The Disease”

  1. Employ the 30-Second rule. I believe that we all must develop an internal alarm system that goes off when we’ve been the only ones speaking for 30 seconds or more. Of course, I don’t suggest automatically shutting up after 30 seconds, but simply check in with yourself to make sure that this is one of those cases where speaking without a break is necessary.
  2. Pick up on body language cues. Is the person you’re speaking to suffering from a case of shifty eyes or extra fidgeting? If so, you may want to take pause.
  3. When it is necessary to speak for extended periods of time, make sure to leave a few pauses in your speech to allow for someone to get that proverbial “word in edgewise” if needed.
  4. Slow down. Doing anything very quickly is usually a sure sign that we’re in an unconscious mode of autopilot and not attuned to what’s happening around us.
  5. Stay conscious of your topic. There are times when veering off-topic into new and distant tangents is a part of a fun and lively conversation. But it can also be warm invitation for the dreaded Monologue Disease, so stay conscious when skipping about in this way.

Do I apply these 5 tips perfectly myself? HELL to the NO – so this is a good reminder for me as much as it might be for anyone else reading this.

I plan on expanding on the “Monologue Disease” as it applies to our online presence in a future post, as this is something I’ve certainly struggled with on my own web site.

QUESTION: Have you noticed the “Monologue Disease” in your own communications, or the communications of others, either personally or in business?

]]> http://www.magneticwebworks.com/do-you-talk-too-much/feed/ 2