ColorHexa

The site will also generate complementary, analogous and monochromatic colour schemes, as well as several of different shades of the colour, and some examples of it in use using simple CSS.

ColorHexa also has a host of tools to generate gradients between two colours (and output the appropriate CSS3 and hacks), create blends of two (or more) different colours, and even has a table of all the CSS colours by name.

Overall, it’s a fun and handy tool for brainstorming colour schemes, converting colours to different colour models, and not having to fire up Photoshop to get a simple bit of colour information. If you’re a web designer or developer — or just like colours — I recommend checking it out!

Use shortcodes for special formatting

Shortcodes can be an easy way to insert specific HTML around a snippet of content; this can be handy for bits of content like pullquotes or tips that require special formatting to style in a specific way, but that can be tricky for most authors to add without knowing basic HTML.

To create a simple pullquote shortcode, like the example to the right, first you need to know what HTML you would like to output, and what your users will need to edit in the quote themselves. In the example below, I’ve just wrapped the shortcode in a <div> and allowed the user to add the pullquote’s content, and, optionally, the source of the quote and what side of the content the pullquote will be aligned to.

For the above example, the following code is added to the theme’s functions.php file — before making any edits to your theme, first back up your files:

function pullquote_shortcode($atts) { 
	extract(shortcode_atts(array( 
		'content'   => '',
		'author' => '',
		'align' => 'right',
		), $atts));
	
	if(!empty($author)) $author = '<div class="quote-author"> -'.$author.'</div>';	
	return '<div class="pullquote align'.$align.'">'.$content.$author.'</div>';
}
add_shortcode('pullquote','pullquote_shortcode');

If the ‘author’ attribute is present, the value is then wrapped in a div with the class ‘quote-author’, allowing even more specific styling to the name.

Then, in the editor, you can add a pullquote, specifying the quote’s content, author and alignment if desired. The below shortcode will output the pullquote code that you see at the top of this section:

"Shortcodes
- "Laurel

Last but not least, add a bit of style to your CSS for the .pullquote class to change the font, colours, size, background, etc., and you’re good to go!

Using shortcodes to prevent HTML from being stripped

There is some code that WordPress will strip out of the editor when you toggle from HTML to Visual mode; this includes HTML tags like iframe. You can use shortcodes to create a work-around, and also make adding iframes less daunting to less-techy authors.

To create an iframe shortcode, the following php would be added to your theme’s functions.php file. In it, there are a number of attributes an author may want to control in the iframe; most have a default value already set, so all they absolutely need to define is the url to be displayed:

function iframe_shortcode($atts, $content=null) {
extract(shortcode_atts(array( 
		'url'   => '',
		'scrolling'     => 'no',
		'width'     => '100%',
		'height'    => '500',
		'frameborder'   => '0',
		'marginheight'  => '0',
		), $atts));
	 
	return '<iframe src="'.$url.'" title="" scrolling="'.$scrolling.'" width="'.$width.'" height="'.$height.'" frameborder="'.$frameborder.'" marginheight="'.$marginheight.'">'.$content.'</iframe>';
}
add_shortcode('iframe','iframe_shortcode');

To use the iframe shortcode in the editor, you would just need to add the following to your post:

The output for the above tag would look like this:

These are just two of many helpful uses for shortcodes — can you think any others you would add to your WordPress website? Share them in the comments below!

The interesting thing is that you can use put testimonials on your website in hReview format, and Google may use these in rich snippets for Places listings. This may be a way for businesses whose customers don’t typically leave reviews on sites like Yelp, Citysearch, Insiderpages, etc., to round out their Google Places listings with legitimate reviews.

A useful concept for local search and one we’re looking forward to experimenting with! See more at Google Places Optimization Blog, Google Webmaster Tools, and Microformats.org.

 
Here at Stem, we’ve been delving deeper into crafting the right message for clients (and ourselves!), and finding the right channels to deliver that message. Definitely an interesting watch if you’ve been struggling with that question yourself!

Via Jeffery Zeldman.

In short (heh), a shortcode in WordPress is a macro that can be used in the WYSIWYG editor. You add a shortcode to your post, and when WordPress renders the page, it swaps the shortcode for whatever code it’s a placeholder for, passing along any settings that have been included. WordPress has built-in shortcodes, like for the gallery, and shortcodes are also used in many plugins.

In the case of the WordPress gallery, if you wanted to insert one into a post, you would add the following shortcode to the editor:

[gallery]

Shortcodes, like HTML tags, can also be passed attributes — the gallery, like many shortcodes, has a number of settings you can tweak to customize it:

[gallery size="medium" columns="5" order="ASC"]

If you wanted to insert the gallery right into the WordPress theme rather than a post or page, you would just need to wrap the shortcode in the do_shortcode() function:

<?php do_shortcode('[gallery size="medium"]'); ?>

I didn’t know about this function until quite recently; my work-around was to add the shortcode to a WordPress page, and then query that page in the theme to display the content. Not very efficient!

Have you made any recent discoveries about WordPress that you wish you had known sooner? Please share them in the comments!

From their site:

Rather than design a dumbed down “special phone” we decided to look at the problem in a different way. Maybe existing phones don’t need to be changed, maybe we should change the way we learn how to use them instead.

Ideas like this really challenge my perception of how helpful good design can actually be.

(via @danielmall)

Nathaniel Mott at Appstorm thinks SEO is breaking the web:

“People have gotten so good at SEO that they can make a result appear for something that doesn’t even exist.

This has taken search from naturally powerful and thorough to a complete crapshoot. Now you’re going to have to click through several results that seem perfect before you can find an item that actually has what you’re looking for. When this happens once it’s a pain – when it happens a dozen times, it’s a flaw with the system.”

With tongue firmly in cheek, Sonia Simone at Copyblogger says there’s a “new” SEO secret weapon: stop catering to search engines, and start focusing on site quality – revolutionary, eh? ; ) We are advised, “Don’t take shortcuts, they take too long.”

And what is the true cost of “perfect law firm SEO“? Jeremy Hessing-Lewis at Skunkworks says that in highly competitive legal niches, “unfortunately, the trend is to sacrifice everything for the sake of SEO.” He drafts some “perfect seo” website content for a fictional firm, which would be hilarious in its effect if I hadn’t seen a hundred actual sites just like it.

It’s nice to see these sentiments put so frankly. Maybe it’s time to stop using the term “search engine optimization”, if this is what the term has come to mean. Maybe we should call it “content visibility optimization” or “quality and utility optimization” or some other mouthful. I’m only half-serious here, but whether we use the term SEO or not, collectively, we need to repair its tarnished reputation.

Properly and ethically done, SEO is about making content and websites as easily found and as useful to the reader as possible. To sum up, Sonia puts it nicely:

“…if you aren’t building a site that’s worth reading (and that’s therefore worth sharing in social media, and worth linking to), the most brilliant shortcut in the world will take you away from where you want to go.”

I’m curious – what do you think? Can SEO be reclaimed? Ideas for a better term to replace “search engine optimization”?  Feel free to share your thoughts in the comments.

The examples in the gallery range from (literally!) invisible usability tweaks, like the iPad’s ‘phantom keys’ when you use the split keyboard, to ones that show the dev team’s sense of humour, like IMDB’s rating for ‘This Is Spinal Tap‘ going up to 11. There are even examples of ‘little details’ in website’s code, like Tumblr’s ascii logo hidden in their source HTML.

If you have any interest at all in web or software design, you’ll get a kick out Little Big Details!

By default, when you add an image to a WordPress post or page using the ‘Insert Media’ tool in the editor, WordPress will wrap the image in a link that simply leads to the image itself. It is possible to remove the link when adding the image, if you actually remember to do it: I use WordPress all the time and still forget, like with the logo in last week’s jQuery post.

This comment by Matt Weibe on Andrew Norcross’s blog offered up a handy bit of PHP code. As with all template tweaks, make sure to back up your files before making any changes, then paste this code into your theme’s functions.php file:

add_action('pre_option_image_default_link_type', 'always_link_images_to_none');
function always_link_images_to_none() {
return 'none';
}

You will still be able to add links to images when using the WordPress ‘Insert Media’ tool; it just won’t be done automatically.

Another option for changing default behavior is available on Aizat Faiz’s blog, and requires you to use WordPress’s hidden options screen. Editing this page is like tampering with the options table in your WordPress database; in other words, we highly recommend not changing any other values while you’re in there.

After logging in to your WordPress site, go to [your-website-url]/wp-admin/options.php and you will see a long list of WP interface options, listed alphabetically. The option you are looking for is ‘image_default_link_type‘:

The default setting is ‘file’, which inserts a link directly to your image file in the uploads folder. Removing the value so the field is blank will remove the default linking functionality. (The third setting for the field is ‘post’, which will insert a link around the image to an attachment page with the image as the only content; not much better than the default ‘file’ linking.)

After the ‘image_default_link_type‘ has been updated, scroll to the bottom of the page and click ‘Save Changes’.

Do you have any WordPress pet peeves? Share them in the comments below!

Burney mentions Good Reader as essential for viewing PDFs online, and Documents to Go as his top choice for editing Word docs on the iPad.

The interview was filmed at LegalTech New York 2012 after Burney’s presentation with David Neeson, “iLove for the iPad”. See detailed notes of the presentation at iLibrarian.