Blog

About once month we’re going to pull back the curtain and show you how this site was built. We’ll cover the design ideas, CSS techniques, the CMS and some basic PHP.

Outline of Topics We’ll Cover

• WordPress Portfolio Theme
  • Concept
  • Creating Custom Meta Fields
  • Home Page jQuery Cycle Plugin and Indicating which portfolio items show
  • Portfolio List Page (thumbnails of all portfolio items)
  • Portfolio Detail Page
  • jQuery .after and math rounding for the advance button
  • Resolving “current_item” issues in the sub nav
• Design Concepts
  • Why the big images?
  • Why the #eee background?
  • De-cluttering, less it not easier
  • How target audience guides web design
• Accessibility and SEO
  • How are SEO and accessibility tied to each other?
  • Why Lists?
  • Separation of HTML (structure) and style (CSS)
  • The All In One SEO Plugin
  • The Google Keyword Tool and Copy Writing
  • Permalinks – SEO Friendly URLS in WordPress
  • Headings
  • Miscellany
• Main Menu CSS Sprite Techniques
  • The Photoshop File
  • The jQuery
  • The WordPress Tags
• Main Sub Menu Sliding Doors CSS Technique
  • The Photoshop File
  • The jQuery
  • The WordPress Tags
• Side Menu CSS Sprite Technique
  • The Photoshop File
  • The jQuery
  • The WordPress Tags
• Price Quote Request Hover Animation
• Performance, Optimization and Standards
  • PNGout
  • WP-Super Cache
  • .HTACCESS
  • YSlow
  • Disabling wpautop
• Client Login
• Testimonial jQuery Tabs
• Google Analytic Goal Tracking and the Contact Form 7 WordPress Plugin
• How to get a A/99 Yslow score

The core technologies used on this WordPress Portfolio Site:

• Reliable Shared Hosting
  Media Temple hosts websites. Big and Small. For years Media Temple has taken complex technology and simplified it for the everyday website owner. Their products are designed to be powerful, affordable and relevant.
• WordPress
  WordPress is a state-of-the-art publishing platform with a focus on aesthetics, web standards, and usability. WordPress is both free and priceless at the same time. Big sites like CNN and Ford use WordPress. Small sites like use it too.
• jQuery
  jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is designed to change the way that you write JavaScript.
• SQLyog
  SQLyog MySQL GUI is the most powerful MySQL manager and admin tool, combining the features of MySQL Query Browser, Administrator, phpMyAdmin and various other MySQL Front Ends and MySQL GUI tools in a single intuitive interface. We may or may not dive into SQLyog. I find it much more quick and useful than MyPHPAdmin for daily MySQL tasks and maintenance. In fact, we use SQLyog daily!

WordPress Plugins Used in This WordPress Portfolio Theme:

• All In One SEO Pack
  Essential for control of page titles and meta descriptions.
• Contact Form 7
  Remember PHP Phorm? This plugin puts it to shame. Its just sooo simple to use. We’ll cover how to capture Google analytic goals when in AJAX mode when we get to this in a later post.
• Really Simple CAPTCHA
  This plugin works in tandem with Contact Form 7
• WP-Syntax
  A simple syntax highlighter.
• WP Super Cache
  Frustrated by low Yslow scores and a slow site? We’ll take a look at WP Super Cache and some other .HTACCESS tricks to speed things up.
• WP No Category Base
  This plugin simply removes ‘/category’ from your category permalinks.
• Google XML Sitemaps
  This plugin generates a sitemaps.org compatible sitemap of your WordPress blog which is supported by Ask.com, Google, MSN Search and YAHOO. Nice!

This past weekend Kara and I drove north to Prescott in order to get out of the Scottsdale heat. On the way back we stopped by Arcosanti (about 60 miles north of Phoenix on I17). Arcosanti is an experimental community formed by famed Italian architect Paolo Soleri in the 1970′s. I’ll let you read all about Arcosanti on their web site. The graphic aesthetic of the 1960′s and 1970′s Arcosanti posters are stellar.

Let me say first, don’t use GIF files unless you absolutely need their animation capabilities. Why? Because 8bit PNG files are smaller file size (especially after being run through PNGOUT) and they look much better than GIF.

GIF files are outdated, big and look bad.

That said, there may be times when you’re helping a client that uses GIF files. And sometimes they don’t have the resources to change the code (not just the HTML) to use PNG files. You can still use PNG files but name them with the “.gif” extension. This can come in handy in cases where its needed as a band aid.

The PNG file with a GIF extension will render AOK in IE6, IE7, FF3, Safari and Chrome.

At PDC last week Microsoft announced a little detail; Right clicks will be treated as a first class citizens in Windows 7. How long before you think we’ll see right click used more often on the web (or will it ever happen)? I know some web apps that do use right clicking (and it frustrates the heck out of me, since I loose the browser right click menu!).

Chris Pels posted a great video tutorial of the ASP.net CSS Control Adapters on the asp.net site. If you’ve ever wanted to use the ASP.net 2.0 server controls for page elements like menus, tree views, gridviews, detailviews, etc.. but would like the ASP.net process to render semantic HTML then you’ll love this video and solution.

Here’s a little background. Last year my good friend Russ Helfand at GroovyBits and I worked on a CSS solution for Microsoft that makes ASP.net 2.0 server controls render semantically correct HTML and CSS. That is, I worked on the CSS styling and Russ did ALL the ASP.net code. I wouldn’t have known where to start with the server code.

The stock ASP.net menu server control (that creates 1 tier menus or multi tier drop down menus) uses tables to hold the menu items. But the same server control when used with the CSS Adapters will render clean nested ul and li tags. Enjoy.