OptimWise

Review: HTML5: Up and Running by Mark Pilgrim

Chad Warner — Wed, 16 May 2012 15:00:53 +0000

This short book is packed with HTML5 examples, aimed at those already familiar with HTML. Because I build websites, not web apps, I was more interested in the new semantic elements, forms, audio, and video than in canvas, geolocation, local storage, and offline web apps.

This book explains more of HTML’s history than other HTML5 books I’ve read, which I actually enjoyed. I didn’t know much about microdata, so it was enlightening to see how search engines can extract information from microdata to provide better search results, such as in Google Rich Snippets.

I liked Introducing HTML5 better (my review).

Notes

Use Modernizr to detect HTML5 support.
It’s OK to use more than one h1 per page, as long as each one is within a different sectioning element.

View all my reviews

Review: Bulletproof Web Design by Dan Cederholm

Chad Warner — Wed, 09 May 2012 15:00:43 +0000

Bulletproof Web Design: Improving Flexibility and Protecting Against Worst-Case Scenarios with XHTML and CSS by Dan Cederholm

My rating: 3 of 5 stars

The concepts behind “bulletproof” web design remain relevant, but the specific examples haven’t aged well. Using code snippets and screenshots, Cedarholm shows how to replace bloated code with lean, semantic, accessible markup. The goal is bulletproof design: thinking ahead and designing for multiple scenarios, and protecting content. The book covers flexible text, fluid layouts, and making content readable without images or CSS.

Cedarholm’s techniques were fine when the book was published in 2006, but some of them are outdated. For example, gradients and graphical rounded corners can now be done with CSS3.

I read this book because I liked the sequel, Handcrafted CSS (my review).

Notes

For flexible text, set font-size on the element to a keyword like small. Set all other font sizes as percentages relative to the body size.
Use ems for margins and padding on text elements so they resize proportionately to the text.

View all my reviews

SignNow.com: free electronic document signing

Chad Warner — Wed, 02 May 2012 15:00:44 +0000

I’ve been using SignNow.com to have clients electronically sign documents. I frequently need signatures for agreements and acceptance forms, and SignNow.com gives me a free, simple, legal way to get them. These are the general steps:

Upload your document to SignNow.
Enter the other party’s email address to invite them to sign.
The other party signs in their browser.
Both parties download a PDF of the signed document.

Adding a signature in SignNow.com

Document list in SignNow.com

Either party can also add text notes. I ask clients to enter dates this way. For signatures, you can use plain text, have SignNow generate a stylized signature (this is legal), or upload your own signature (I did this).

Learn more at SignNow.com. What do you use for electronic document signing?

KeepVid: download streaming video from YouTube, etc.

Chad Warner — Wed, 25 Apr 2012 15:00:52 +0000

When I need to download a streaming video from a site like YouTube or Vimeo, or convert the video to an audio MP3 to listen to, I use KeepVid.com. Here’s how to use it.

Copy the URL (web address) of the streaming video you want to download.
Browse to KeepVid.com.
Paste the address into the bar at the top and click Download.
KeepVid will generate links to download the video in several formats and resolutions. The formats may include FLV, MP4, WebM, and 3GP. For some videos, you’ll also get a link for audio MP3.
Click the link to download the file you want. Don’t click the large, graphical download buttons! Those are ads. If you click MP3, you’ll be taken to SnipMP3.com, a site that converts video to MP3, which can take quite a while.
Enjoy your downloaded file offline!

Review: WordPress Web Design for Dummies by Lisa Sabin-Wilson

Chad Warner — Wed, 18 Apr 2012 15:00:47 +0000

WordPress Web Design for Dummies by Lisa Sabin-Wilson

My rating: 4 of 5 stars

This book is one of the best on WordPress I’ve read, because it covers the work I do with WordPress: administration, tweaking themes, and finding and using plugins. It shows how to create several types of sites with WordPress, and explains the HTML, CSS, and PHP needed to tweak themes or build them from scratch. It features colorful code snippets and screenshots. I really liked the many excellent plugin recommendations. The book is best for the intermediate to advanced WordPress designer, developer, or administrator.

I liked Chapter 11: Dissecting Themes and Templates, and Chapter 12: Displaying Content with Widgets and Template Tags. So far I’ve only tweaked themes, but these chapters made me eager to dive deeper into theme development. This book convinced me that I’ve only scratched the surface of what’s possible with WordPress.

Because of what I do with WordPress, this book was more relevant than the other WordPress For Dummies books: WordPress for Dummies (read my review) and WordPress All-in-One For Dummies (read my review).

Notes

Optimize images with the Dynamic Drive Image Optimizer or Web Resizer.
Create a portfolio page by creating a category called Portfolio, filling it with posts with featured images, then calling them with query_posts().

Hosts that support WordPress

Free font resources

Premium font resources

Premium WordPress themes

Plugin recommendations

E-commerce plugins

Cart66 (premium) doesn’t require much theme tweaking
WP e-Commerce (free) requires theme tweaking
MarketPress (free) doesn’t require much theme tweaking, and is good for WordPress Network (Multisite) and BuddyPress
Shopp (premium) requires theme tweaking

Gallery plugins

NextGEN Gallery creates sortable photo galleries
Organizer allows you to organize, rename, resize, and manage uploaded images
Random Image Widget displays a random image from the image-upload folder
Mini-Slides lets you create inline slideshows

Social network plugins

Twitter Tools for Twitter integration
WordBooker for Facebook integration

Miscellaneous plugins

Advanced Text Widget allows you to execute raw PHP code and specify on which pages it should be displayed
Custom Post Type UI provides an easy to use interface to create and administer custom post types and taxonomies
WP Featured Content Slider makes a slideshow of recent posts with images
Collision Testimonials Shortcode puts client testimonials on the front page, and creates a full testimonials page
All in One SEO Pack for SEO
PluginBuddy Mobile (premium) creates a mobile-ready version of your website.
Subscribe to Comments to let visitors subscribe to individual posts
ShareThis for adding social sharing icons
WP Super Cache for caching
WP Security Scan for improving security
BackupBuddy (premium) for creating backups and migrating sites
WPMU Premium (premium) is a collection of plugins including membership, classified ads, chat, domain mapping, and anti-spam
WP Nivo Slider creates a slideshow that prominently displays content (good for front pages)
Simple:Press creates a support forum

View all my reviews

WordPress Network (Multisite) installation & plugins

Chad Warner — Wed, 11 Apr 2012 15:00:29 +0000

I took these notes about WordPress Network (Multisite) at our WordPress Grand Rapids (WPGR) meetup on March 15, 2012. Learn more about WordPress Grand Rapids on Meetup and WPGR.org.

Presenters

Brian Richards, http://wpstartbox.com/
Topher DeRosia, http://codeventure.net/

What’s a Network?

A WordPress Network is a collection of sites that all share the same WordPress installation and database. They can also share plugins and themes. The individual sites don’t have their own directories on the server, but they do have separate directories for media uploads and separate tables in the database.

Why use Network?

easily update multiple sites; updates to WordPress, plugins, and themes apply to all sites
quickly create new sites

A network is ideal for creating a WordPress development environment, because you can quickly create and destroy sites.

Caveats

each new site creates its own tables, which can lead to scaling issues
updates or changes to WordPress, plugins, and themes apply to all sites; any problems affect all sites

A network isn’t ideal for hosting client sites, because it’s not easy to move standalone sites in or out; you have to use WordPress’ import or export tools. However, plugins like Backup Buddy can make importing easier.

Creating a new network

Follow Create A Network in the Codex. Brian uses these steps:

Create subdomain (you must have wildcard subdomains enabled; if you have cPanel, you probably do). You can also install to a subdirectory. Choose subdomain or subdirectory before creating network.
Create blank database and upload WordPress files (or use your host’s 1-click WordPress installer).
Browse to subdomain.
Create wp-config.php and follow install.
Open wp-config and add define(‘WP_ALLOW_MULTISITE’, true);
Log into WordPress. Click Tools > Network Setup.
Choose subdomains or subdirectories (Brian recommends subdomain).
Click Install. Paste generated lines into wp-config.php. Paste generated lines into .htacess.
Log back into WordPress.
Sites > Add New to create a new site in the network.

Domain mapping

Use a plugin to redirect a domain to a site in the network. Brian likes the commercial plugin Professional Domain Mapping from WP eBooks. Another option is the free WordPress MU Domain Mapping.

In your hosting account, point the domain being mapped at the network’s root domain. The plugin modifies .htaccess to redirect.

Themes

Super Admin must install themes, then network enable them for sites to use.

Themes > Installed Themes
Network Enable theme

Plugins

Super Admin must install plugins, then network enable them for sites to use. They can be activated per-site. They can also be network activated, which activates them for all sites. Individual sites can’t disable these.

Users

Admin becomes the Super Admin of the network. They can create other Super Admins, Admins, or other roles.
Admins can only enable themes that Super Admin has already network enabled.
You can allow users to register their own accounts. You can also limit registration to email addresses within a set domain. Site Settings > Limited Email Registrations.
Sites > All Sites. On Users tab, grant permissions.

Backup & restore

Backup Buddy backs up and restores entire network or individual sites. Import Buddy migrates standalone sites into the network.

Uploads

All uploads go to wp-content/uploads/blogs.dir/
Settings > Upload Settings. Site upload space limited to 10 MB by default
To change existing sites, Sites > Edit > Settings > Site Upload Space Quota. Per-site settings override network limits.

Additional WordPress Network plugins

Networks+ plugin: create a network of networks
WP Blog Replicator: clone existing sites, optionally including content

Examples of WordPress Networks

WordPress.com
Varsity News Network
WPStartbox.com is a Network install. demo.wpstartbox.com is a Network within this (using the Network+ plugin). Each demo site is created using WP Blog Replicator.

My first day as a freelance web designer!

Chad Warner — Wed, 04 Apr 2012 15:00:16 +0000

Today is my first full day of freelancing as a web designer! Until now, I’ve been moonlighting; working in the mornings before my day job, on my lunch breaks, during evenings, and on Saturdays. Starting today, I’ll be freelancing 1 full day each week, and I’ll be adding days over the next few months, transitioning out of my day job. According to the current plan, I’ll be freelancing full-time by January 2013.

Why freelance web design?

Why freelancing? It comes down to freedom. Freelancing allows me to have more control over my schedule, the people I work with, the projects I take on, and the income I can earn. I love entrepreneurship and business. I’m enjoying learning what it takes to run a business (marketing, sales, accounting, finance, customer service, etc.).

Why web design? I love empowering small businesses by creating websites that help them succeed online.

Isn’t being self-employed riskier than holding a day job?

I’d argue that it’s the opposite. Your employer can reduce your pay or lay you off at any time, affecting your main source of income. When you work for multiple clients, you’re not reliant on any single one to provide your income.

Where will you find work?

So far, all my work has come via word of mouth. My clients have all been people I’ve met at local networking events, or people who’ve been referred to me by friends, family, colleagues, and church members. I prefer these “warm leads” to cold-calling, because there’s a base level of trust already established. So, if you know a small business or nonprofit that needs web design help, let’s talk!

I’ve also networked (and become friends with) several local web designers and developers that have directed their overflow work to me. These web pros have also been incredibly generous in giving advice on web design and freelancing.

Let’s talk!

I’d love to talk more about my transition to freelance web design, so please share your comments and questions!

Create a sticky footer for WordPress

Chad Warner — Wed, 28 Mar 2012 15:00:51 +0000

A sticky footer is a footer that sticks to the bottom of the browser window regardless of the length of the page’s content. If the footer isn’t sticky, it will appear too high on short pages, which doesn’t look good. The best instructions I’ve found for creating a sticky footer for WordPress are found in the WordImpressed.com post Put a CSS Sticky Footer in Your WordPress Theme.

graphic from wordimpressed.com

The author explains,

If you’re here, you probably have a footer that likes to ride up to the bottom of your content container. The solution we will implement places the footer wrapper outside of a main wrap that holds all your general content. From there, we will use the power of cascading style sheets to force the footer to stay put at the bottom of the page using some creative and effective styles.

The post shows how to edit your header.php, footer.php, and CSS stylesheet. The post contains helpful code snippets and screenshots. The instructions work for the Twenty Ten and Twenty Eleven themes, and probably many more as well.

Comfort Frog website design

Chad Warner — Thu, 22 Mar 2012 15:00:30 +0000

Comfort Frog: comfortfrog.com

Comfort Frog is a stuffed frog that wraps around a child during a physical exam to provide a sense of security and comfort. Laura Canaan handcrafts the frogs and sells them to hospitals, clinics, and other medical organizations.

Laura needed a website for marketing and selling her products: two types of Comfort Frogs and protective gowns for the frogs. The site provides information about the products and how to use them, as well as a simple store page for purchasing them. There are several photos demonstrating the details and use of the products.

Laura wanted the site to be upbeat and happy, because the Comfort Frog is designed to be comforting to children. I designed the site around the Comfort Frog; the background and colors are inspired by the frog, and Laura selected a font that matched the stitching on the frog.

My friend Todd Karsemeyer of DESiGNTEK did an excellent job shooting and editing the photos, designing the logo, and giving design advice.

Visit the live site at comfortfrog.com.

Customize Google search results with options and tools

Chad Warner — Thu, 15 Mar 2012 15:00:36 +0000

Google’s search results are generally quite good by default, but customizing the results can make them even better. Google provides several options for doing this, which appear along the left side of the search results page. These work best if you’re signed into a Google account.

Type of content

The top group of options filters by the type of content. These are Images, Maps, Videos, News, and Shopping. News is useful for finding news about current events. Shopping is great for price comparisons. Click More for more options such as Books, Places, and Recipes.

Publish date

Click More search tools at the bottom of the list to show these options. You can filter results by when they were published. This is useful when you’re looking for recent information, because you can filter out old pages.

Personalization

Click Personal to show content from your friends, or Nearby to show content from your geographical area.

Click Verbatim to search for the exact words you searched for, without any personalization, spelling corrections, synonyms, etc. If you’re signed in to your Google Account and have Web History enabled, click Visited pages to restrict your results to pages you’ve previously visited.

Finally, if you don’t see what you’re looking for, try clicking Related searches to see results for searches similar to what you typed.

Learn more

Find more about these and other Google Search results options at Google: Search results options and tools.