Why Websites and Software Take so Long to Build

…can you think of any job where people are making really complex things by hand, and which requires a ton of experience and training to be good at, yet everyone and their uncle has an opinion on how long a project should take to get done? Why is it that no matter how long a project takes, the customer always thinks it should be faster or cheaper?

via Scott Porad’s post “Why do web sites and software take so long to build? And why is it so hard?”

WordCamp Milwaukee: Zazzy WordPress Menus

I am excited to be part of a pretty steller speaker lineup for WordCamp Milwaukee on June 2 & 3rd, 2012.

Tickets for WordCamp Milwaukee are still available for only $20.00 a person. Purchase a ticket now.

My topic will be customizing WordPress menus (in a slightly modified version of my talk at WordCamp Atlanta), or as I have titled it…

Zazzy WordPress Menus with CSS Tricks and jQuery Magic

Zazzles the Cat

Navigation is among the most important elements of a website’s design. Effective navigation allows visitors to quickly and easily find desired content, keeping them on your site.

The session will begin with a review of the custom menu structuring from within WordPress, including how to extend the flexibility of the Menus screen with available screen options. Then we will move onto how you can style your navigation menu with modifications to your theme’s CSS stylesheet. We will cover:

  • using and styling submenus
  • adding icons to navigation items
  • changing the formatting of hovered or active items
  • adding support for menu item descriptions

Finally, I will demonstrate a few more advanced techniques using jQuery and CSS that can improve your visitor’s experience and improve conversions.

  • Split long drop-down menus into columns

More

Did you notice 6 of the 14 speakers are female :)

Update: June 2, 2012

Looking for the slides or theme files used in this presentation?

View Presentation Slides

Where to Find Professional WordPress Developers

I am not the right fit for every WordPress development project. When I have to turn down a prospective client project, I recommend another developer when possible.

Often I cannot think (or do not know) of a specific developer that meets the needs of the project. I want to be helpful, so I do the next best thing. I suggest three resources that list quality WordPress developers:

WP Candy Pros

WPCandy Pros

WP Candy, the WordPress news and information blog, hosts the most complete directory of WordPress professionals. The directory can be filtered by region, specialty and price range.

WP Engine’s Consultants

WP Engine WordPress Consultant Listing

The specialized WordPress hosting service, WP Engine recently started their own consultants/developers list that includes specialties, bios, price-ranges and contact information. The consultants/developers WP Engine lists are hand-picked as resources to recommend to their own hosting clients.

Code Poet Directory

Code Poet Directory

Automattic, the company behind WordPress, maintains the Code Poet Directory. The companies and individuals in the directory can be filtered by region, specialty, platform and price-ranges. Those listed are considered to be enterprise-level WordPress professionals, web designers and developers.

Async Social Sharing Plugin Options Page

Async Social Sharing WordPress Plugin

Async Social Sharing Screenshot

I have never found a WordPress social sharing plugin that I loved. I just wanted a simple social plugin that would load any external scripts asynchronously, allowed me to share my posts on Twitter, Google+, Linkedin and Hacker News and never included the words “Sharing is sexy!“.

A few weeks ago I started working on developing my own social sharing plugin, and today it is available to the public via Github.

Download from Github

I hope to have the plugin approved and available via the WordPress plugin repository within the next week.

Update: May 1, 2012

The plugin is now listed and available for download from the WordPress plugin repository.

Version 1.0.1 added lazy loading to async-share.js and fixed bug with plugin settings link.

Download from WordPress.org

Features

The Async Social Sharing plugin loads the third-party social scripts asynchronously to improve site performance.

The plugin allows you to display the following sharing widgets:

  • Twitter
  • Facebook
  • Google+
  • Linkedin
  • Hacker News

An options panel is provided to allow unwanted social widgets to be disabled:

Async Social Sharing Plugin Options Page

Why is Asynchronous script loading better?

Asynchronous loading allows multiple files to load parallel to each other. Instead of having to wait for Twitter to respond with their script, the browser moves on and starts fetching the next request.

Async Social Sharing Firebug Performance

Credits

JavaScript code was inspired by Stoyan Stefanov’s Social Button BFFs blog post.
HackerNews button code by Ilya Grigorik


 

Update: May 1, 2012

The plugin is now listed and available for download from the WordPress plugin repository.

Version 1.0.1 added lazy loading to async-share.js and fixed bug with plugin settings link.

Download from WordPress.org

Sunburst Code Prettify WordPress Plugin

I have been using Github Gists and the Codebox application to save and share my code snippets, but I wanted to start posting them here on my website to make them easier to find and update.  I wasn’t quite happy with any of the existing code syntax highlighting plugins for WordPress, so I built my own, Sunburst Code Prettify.

Sunburst Code Prettify uses Google Code Prettify, a JavaScript module and CSS file that allows syntax highlighting of source code snippets. This plugin contains the CSS file for the Sunburst theme syntax highlighting formatting. You can find the other available syntax highlighting themes available in the Code Prettify Theme Gallery

Download from WordPress.org

HTML Example

[prettify class="html"]

Reset via Normalize

As of Bootstrap 2, the traditional CSS reset has evolved to make use of elements from Normalize.css, a project by Nicolas Gallagher that also powers the HTML5 Boilerplate.

The new reset can still be found in reset.less, but with many elements removed for brevity and accuracy.

[/prettify]

CSS Example

body {
text-align: left;
color: #222;
font-size:1.6em; /* 16 px equiv */
line-height: 1.5em; /* 24px equiv */
position: relative;
background-color: #22252E;
background-image: url(../halfbaked/images/linen.png);
background-repeat: repeat;
padding-top: 4.5em;
}

PHP Examples

[prettify class="php"]if (have_posts()) : while (have_posts()) : the_post(); [/prettify]

 $ideas_posts = $wpdb->get_results(
"SELECT * FROM $wpdb->posts
WHERE post_status = 'draft'
AND post_type = 'post' ORDER BY post_date DESC");
foreach ($ideas_posts as $memberpost):

JavaScript Example

require(["jquery", "jquery.alpha", "jquery.beta"], function($) {
    //the jquery.alpha.js and jquery.beta.js plugins have been loaded.
    $(function() {
        $('body').alpha().beta();
    });
});

Ruby Example

    # Formats date either as ordinal or by given date format
    # Adds %o as ordinal representation of the day
def format_date(date, format)
    date = datetime(date)
    if format.nil? || format.empty? || format == "ordinal"
        date_formatted = ordinalize(date)
    else
        date_formatted = date.strftime(format)
        date_formatted.gsub!(/%o/, ordinal(date.strftime('%e').to_i))
    end
    date_formatted
end

BootstrapWP: WordPress Theme Development Continues

Screenshot of BootstrapWP Version 1.0 in progress

On January 31st, Twitter released version 2.0 of their popular Bootstrap framework complete with a responsive stylesheet and new components. I have been working to keep BootstrapWP, the WordPress theme for Bootstrap as up to date as possible.

If you have been using any previous versions of the BootstrapWP for theme development, I encourage you to switch to the development branch on Github. The development branch contains many bug fixes along with overall style and device response improvements.

Usage: Customize and override any of the styles using style.css file. All .css and .js files are loaded in functions.php. Don’t forget to disable any of the .js files you do not need

All development updates are displayed on the Demo site: http://www.rachelbaker.me/bootstrapwp/

BootstrapWP Development Change Log

 

Header.php

  • Added body data attributes: data-spy=“scroll” data-target=“.subnav” data-offset=“50” data-rendering=“true”

  • Changed navbar class to Bootstrap default of “navbar-fixed-top”

  • Updated wp_nav_menu function array, added “‘container’ => ‘div’, ‘container_class’ => ‘nav-collapse’,” to provide div wrapper with proper class

Functions.php

  • Added bootstrap-responsive.css to bootstrapwp_css_loader function

  • Added application.js to bootstrapwp_js_loader function and removed tablesorter.js

  • Revised pagination section to use ul class=“pager” instead of div id=“pagination”

Page-JSGuide.php

  • Updated Javascript Guide Template to match content from Bootstrap javascript.html file

Footer.php

  • Removed jQuery onload functions that are now all called in application.js

  • Added jQuery append function to automatically apply b class=“caret” to dropdown menu items in navbar

Style.css

  • Updated icon image location to match theme setup

  • Added .icon-white class with corrected image location

  • Removed over-ride of body padding to allow correct spacing with fixed navbar

  • Added styles for comment form

  • Added color primary button colors for comment and search submit buttons

Index.php

  • Edited content on index.php template to directly correlate with index.html Bootstrap file

Other/Misc.

  • Updated CSS and JS files to Bootstrap 2 Final Release files

  • Removed “lib” folder and replaced with Bootstrap “less” folder

  • Removed tablesorter.js file – as it is no longer used in Bootstrap 2.0

  • Removed wordpress.css file – as it is no longer used in Bootstrap 2.0

WordCamp Atlanta 2012

I am really looking forward to speaking and attending WordCamp Atlanta this week. WordCamps are always fun events, where two days are spent talking and learning about WordPress. I am particularly excited to be traveling to Atlanta, the home to the World of (Diet) Coke and the world’s best chicken and waffles.

I will be speaking on Friday afternoon with a presentation titled “Website Navigation Menu Styling Tips and Best Practices“.

Hope to see you there!

Bootstrapwp Theme: Twitter Bootstrap for WordPress

BootstrapWP Theme

I released Bootstrapwp, a powerful base WordPress theme powered by Bootstrap. Bootstrap is a responsive frontend toolkit from Twitter designed to kickstart web development, complete with core HTML, CSS, and JS for grids, type, forms, navigation, and many more components. Now you can use it with WordPress as a solid base to build custom themes quickly and easily.

Latest version release: .7 (01/22/2012)

You can view a demo of the Bootstrapwp theme running on WordPress at: http://rachelbaker.me/bootstrapwp/
View the style guide: http://rachelbaker.me/bootstrapwp/style-guide/
View the Javascript guide: http://rachelbaker.me/bootstrapwp/javascript-for-bootstrap/
Continue reading

How Can I Make My Website Rank for a Specific Keyword?

What most people don’t realize is that they’re asking the wrong question. You see, sites don’t rank: pages rank. If you want to rank for a keyword, you’ll need to determine which page is going to be the page ranking for that keyword.

Adding that keyword to the title of every page is not going to help. Nor is writing 200 articles about it without one central article to link all those articles to. You need one single page that is the center of the content about that topic. One "hub" page, if you will.

That page will need to be 100% awesome in all ways. Brian Clark of Copyblogger calls this type of content "cornerstone content"

via Using Cornerstone Content to make your Site Rank • Yoast.

Full-Stack Web Developer