Archive for the Web Design Category

I recently had the privilage of helping a great client of mine put together a blog centered around the San Francisco 49ers football team. The idea was to create a community style blog where people could come and be a part of the blog and site. It was a fun project to work on, and I wanted to give you a little insight into what Wordpress Plugins were used to make all the magic happen!

Here are the basics that I used of course:

  • Askimet
  • All in one SEO Pack
  • cForms
  • Sitemap Generator
  • Google Analyticator
  • Recent Comments
  • Google XML Sitemaps
  • Popular Posts
  • Recent Posts
  • Search Unleashed
  • Sociable
  • WPADS
  • WPpolls

And here are the more unique ones I used:

Tubepress
Used this to create a video page with multiple 49ers videos pulling from a YouTube playlist! Ended up adding some seriously cool multipmedia interactivity!

WBexam
This was used for a 49ers quiz that the webmaster wanted to put together on the site. This plugin made it easy for him to create and manage quizes and create a scoring algorithm for them.

Sticky Menu
He wanted a little more a custom navigation. So I used this plugin to to create multiple menus on the site that were all manageable form the backend.

Feedlist
This was used on the homepage to pull a list of most recent blog articles from around the web about the 49ers. I used Feedlist because it allowed me to control with some simple PHP code what info to pull from each RSS feed and what not too. Pretty cool stuff.

I hope this gives you some helpful ideas and inspiration for a blog that you are putting together. Take care and have fun with your wordpress building!

Bestplayerontheplanet.com is my other blog that I actively write in having to do with another passion of mine, and that is NBA basketball. The blog is built using the Wordpress content management system, and it features quite a few cool features and types of content. Because of that I wanted to give you a peek at all the plugins that I have used on the site, which I hope will give you some ideas and inspiration for your own blog project with Wordpress.

NextGen Gallery

http://alexrabe.boelinger.com/wordpress-plugins/nextgen-gallery/
I’m using this for a photo gallery just simply located on one of the static pages.

Admin Drop Down Menu

http://planetozh.com/blog/my-projects/wordpress-admin-menu-drop-down-css/
Using this plugin to improve the effectiveness of the admin backend. I found this plugin to help me write and manage posts/comments/pages as well as plugins in a much quicker and more effective manner.

Podpress

http://www.mightyseek.com/podpress/
I am using podpress as the tool for flash audio when I have a short audio clip that I want to post on the blog.

Popshops

http://www.popshops.com/plugins/wordpress
This plugin is a new favorite of mine. I’m using to display product feeds from my Linkshare account for NBA.com. Basically it’s an affiliate store that I can easily manage which products from NBA.com are displayed. Very cool plugin!

Askimet

http://akismet.com/
Using this plugin for spam control of course. Very common plugin.

WP Wall

http://www.prelovac.com/vladimir/wordpress-plugins/wp-wall
This gives a “facebook wall” type functionality to my wordpress blog. People can leave posts on the wall when they come and visit the site.

All in One SEO Pack

http://semperfiwebdesign.com/portfolio/wordpress/wordpress-plugins/all-in-one-seo-pack/
Another very common Wordpress plugin. Using this to help improve the SEO on the blog.

WP Post Views

http://lesterchan.net/wordpress/readme/wp-postviews.html
I’m using this plugin to show the visitor the ammount of views each post has. Kind of like a traffic counter but on a per blog post basis.

WP Post Ratings

http://lesterchan.net/wordpress/readme/wp-postratings.html
Installed this plugin so that readers of a blog post could rate that blog post with a 1-5 star ranking.

Sitemap Generator

http://www.dagondesign.com/articles/sitemap-generator-plugin-for-wordpress/
I use this plugin to display a visual sitemap that’s located on the sitemap page.

FlickrRSS

http://eightface.com/wordpress/flickrrss/
I’m using this plugin to display random 14 pictures on the homepage on my favorites list with Flickr. The pictures show up in thumbnails and when clicked on go to flickr.

Get Recent Comments

http://blog.jodies.de/2004/11/recent-comments/
I’m using this as a widget on my sidebar on only the single blog posts so that people can see the conversations that are going on.

Google XML Sitemap Generator

http://www.arnebrachhold.de/projects/wordpress-plugins/google-xml-sitemaps-generator/
Another very commonly used Wordpress plugin. Just using this to automatically generate a Google compliant sitemap for my entire blog.

WP-Polls

http://lesterchan.net/wordpress/readme/wp-polls.html
Using this plugin for a simple poll that I run on the sidebar on the homepage. I’m finding that polls are very popular with my sports blog.

WP-PageNavi

http://lesterchan.net/wordpress/readme/wp-pagenavi.html
This plugin I installed for a better navigation of older blog posts on the homepage and category pages.

WP-o-Matic

http://devthought.com/wp-o-matic-the-wordpress-rss-agreggator/
This plugin is being used for importing rss feeds from other reliable NBA resources into the site. The feeds are imported automatically and pushed into “Draft” status until I approve them.

Wpads

http://thesandbox.wordpress.com/wpads/
Wpads is being used for random dynamic ad serving throughout the entire site. A very valuable plugin for monetizing this site.

Vipers Video Quicktags

http://www.viper007bond.com/wordpress-plugins/vipers-video-quicktags/
Using this plugin for easy posting of Youtube videos and other videos such as Vimeo among others.

Tubepress

http://tubepress.org/

This plugin is one of the most valuable to this particular blog. I’m using it to on the page called “Kobe TV” to show various Kobe Bryant highlights and video mix’s.

TDO Mini Forms

http://thedeadone.net/download/tdo-mini-forms-wordpress-plugin/
Using this plugin on the “Community Post” page giving community members an opportunity to post their own blog posts if they want to.

Subscribe to Comments

http://txfx.net/code/wordpress/subscribe-to-comments/
Using this plugin to give the users the ability to subscribe to a comment thread on the site. Keeping users in the conversation.

Subscribe2

http://subscribe2.wordpress.com/
Used for an “opt in” to gather new email addresses and for email notifications of new blog posts

Sociable

http://yoast.com/wordpress/sociable/
A very common plugin used for displaying social media buttons on each blog post.

Simple Sticky Posts

http://bitworker.blogspot.com/2008/04/wordpress-plugin-my-sticky-posts.html
Using this to show my post of choice always on top on the homepage. That way I can continue to write up to the minute news on the blog, but keep my main editorials on the top!

Search Unleashed

http://urbangiraffe.com/plugins/search-unleashed/
Improving the searchability of the site overall.

SEO Smart Links

http://www.prelovac.com/vladimir/wordpress-plugins/seo-smart-links
This plugin is definitely my favorite wordpress plugin right now! I use it for text link ads. Basically I am able to choose which keywords or keyphrases thrughout the site that I want linked to specific affiliate links!

I hope that was helpful and gives you an idea of what a specific combiniation of plugins can accomplish. If you find this helpful at all, then let me know by giving me a thanks in the comments so that I will know to continue to write these type of posts for the Wordpress blogs that I build.

Oh yeah this news gets three exclamation points! Brian Gardner, the creator of the infamous premium themes for Wordpress “Revolution Themes”, is releasing a new set of themes this Saturday November the 1st, and is releasing those themes under the GPL open source license! This is terrific news!

You can read more from Brian’s blog post about why he is choosing to do this. All the old premium themes customers will still have access to all the support they are currently getting. And the current themes will not be released as Open Source, but will be taken down from the market (if I read correctly). It’s just the new themes that he is releasing on Saturday that will be open source.

So keep an eye on his site http://www.revolutiontheme.com/ to see when these new themes are released. I must say that what Brian Gardner is doing is genius! Many people might typically look at this move as dumb and a loss of money! But I think what Brian is going to do is set the standard for Wordpress themes and create a larger opportunity for himself in other Wordpress ventures. Stay tuned!

In the past, I have had many Wordpress users complain to me about how there images are displaying within their blog posts. What has typically happened is that the user has downloaded some free or sometimes premium theme, and even though they use the Image Wizard in their admin interface correctly to align images or give padding to images, the images still don’t seem to dispaly how they ask them to from the backend.  This is typically a problem with your main CSS file for your theme. There is some basic CSS that your images need to have in your style.css file so that you can control the rest of the display from the backend.

First Things First!

From your WordPress Theme folder, open the style.css file in a text-editor. Important! Save a back up copy somewhere before you do any edits! Now, do a search for img. Hopefully, all your image selectors will be grouped together. If not, find them all and cut and paste them into one group to make this process easier.

Borders

You’ll need to decide if you want a border around your images and, if you do, what size, color, and type it should be. For no border, you would use the following:
img {border:0}

Padding and Image Width

Let’s clean up one more thing to make the image in your content work better with the rest of the styles we will use. We want to clear all the padding around the images within your content and make sure that the whole width of the image shows up rather than just a part of it. If it isn’t in your style sheet, add the following:
p img { padding: 0; max-width: 100%; }

Image Left, Right, and Center

When an image sits on the sides of your text, it helps to have space between the text and the image so the words aren’t right up against the edge. As some browsers treat the margins and padding differently, the following styles will accommodate most browser’s “space requirements” so the image doesn’t overlap the text or any lists that appear inline with the image.
img.right { padding: 4px; margin: 0 0 2px 7px; display: inline; }
img.left { padding: 4px; margin: 0 7px 2px 0; display: inline; }

The declaration of display:inline keeps the image inline with the text that you placed it with.

Now, it is time to add the float declaration to the images. BUT WAIT. Why should we waste our left and right floats on just images? Why not use them on anything that we want to sit on the right or left of the page and have the text float around it? You can do that, you know. But that’s for another tutorial. We’re not going to waste this, so if it isn’t there in your style sheet already, add the following:
.right { float: right; }
.left { float: left; }

Note: The Default/Kubrick Theme uses this technique but names the classes alignleft and alignright. Using left and right seems easier to remember and use, but either name sets may be used to make this work.

If you follow these instructions your Wordpress Theme will will function correctly when it comes to inputing images inside your blog posts and pages. If your images are not behaving correctly, chances are there are some flaws in your style.css file and these instructions will fix your problems.

I’m adding some new “lingo” to my web design and development contracts/proposals and thought I would share it with you in case you are need of some similar items. I downloaded a few agreements from Docstoc.com and just picked apart the best of each one I could find. These topics that i’m adding to each of my agreements are strategic of course, and you might have your own strategies that you need covered. But here are some additions, let me know if you recommend any others to me.

The Client hereby employs the Company to perform the following services in accordance with the terms and conditions set forth in this agreement as described below.

This part can go right above all the text that describes what it is we are doing for them.

The Company’s normal time and materials rate for work outside of the scope of the project is $_______/hour billed in ½ hour increments.

This is mentioned at the end to let the client know what will be charged to them for all work outside the scope of the project.

Design Changes

Design changes are controlled via a change request process. The Client acknowledges that changes may impact delivery dates and/or quoted cost. The Company shall have up to two (2) business days to respond to a change request. This response shall include any timeline and/or cost changes to be incurred as a result of the requested change. The Client shall have up to two (2) business days to accept or reject the Company’s assessed change response. The Company warrants that change request quotes will either include an increase to the total amount payable under this agreement based solely on the Company’s normal time and materials rates and any bona fide extra effort required to carry out the relevant Change Request; a decrease to the total amount payable under this agreement based on the Company’s normal time and materials rates and any reduction in work resulting from acceptance of the Change Request; or a proposed extension of existing deadlines and the setting any new deadlines, based solely on any bona fide effort required to carry out the Change Request.

This allows us to allow them to make design changes, but saves us from the original deadline despite how many design changes they give us. This is important because even simple design changes can drastically change the deadline.

Cancellation

The Client may cancel this web design agreement on thirty (30) days written notice to Company in writing, by certified mail or personal delivery. The Client is not entitled to any refund of monies paid and all intellectual property developed up to the time of cancellation shall be delivered to the Client within thirty (30) days of cancellation.

This saves us from any refund requests on work that we have already done. It also allows us to know 30 days in advance when exactly they are going to cancel so that we can plan accordingly

Intellectual Property

The Client retains all ownership of materials developed by Company for use in the web site described herein. The Client warrants that it owns or shall obtain the rights at its own cost of any intellectual property provided to Company for use in the web site design. Furthermore, the Client indemnifies and holds harmless the Company from using any Client-provided materials in the web site design. The Company warrants that any commercially purchased intellectual property used in the web site design shall be royalty-free and all rights shall be assigned to the Client.

Creation of Web Site As A Work For Hire

The Developer hereby agrees that all materials that are part of the Web Site and that are created by the Developer, including but not limited to content, text, graphics, logos, pictures, code, scripts, algorithms, applets, audio, video and other materials (“Web Site Content”) shall be considered “works for hire.” As such, Customer shall be considered the exclusive owner of all proprietary rights, including but not limited to Federal Copyrights, in and to all such materials. For purposes hereof, the term “work for hire” shall have the meaning defined in the United States Copyright Act, Section 101 of Title 17 of the United States Code. Developer acknowledges and agrees that the Customer shall have all exclusive rights in and to the Web Site Content that are available to the author or owner of a United States copyright.

This protects the web design agency from possible copyright problems. This is important because we have no control over what the client demands us to create. The last sentence basically states that we will only create and purchase property that is royalty-free with which the rights can be assigned to the client.

Confidential Information

The Company agrees that any information received by the Company during any furtherance of the Company’s obligations in accordance with this contract, which concerns the personal, financial or other affairs of the Client will be treated by the Company in full confidence and will not be revealed to any other persons, firms or organizations.

This keeps all information such as server info, usernames, passwords etc. safe with us from the customer.

This Agreement contains the entire understanding of the parties and may not be amended without the specific written consent of both parties.

Place this right before the signatures at the end of the proposal.

_______ is refereed to as “Client” and __________ is referred to as “Company”

place somewhere at the beginning of the proposal.

Independent Contractor Status

The parties agree that Developer shall be an independent contractor and not an agent, employee or representative of Customer. Customer shall have no right to direct or control the details of the Developer’s work. Developer shall not receive any fringe benefits or other perquisites that the Customer may provide to its employees and Developer agrees to be responsible for its own business overhead and costs of doing business and to furnish (or reimburse Customer for) all tools and materials necessary to accomplish the services required of the Developer pursuant to this Agreement, and shall incur all expenses associated with performance, except as expressly provided in Exhibits or amendments to this Agreement. Developer shall be responsible for paying all taxes on payments received pursuant to this Agreement and that Customer shall have no obligation to withhold taxes from service fees payable to the Developer hereunder. Developer hereby indemnifies and holds the customer harmless any obligation that may be imposed on Customer (i) to pay in withholding taxes or similar items or (ii) resulting from Developer’s being determined not to be an independent contractor.

This portion is important for tax purposes as well as for making sure that the client does not treat you like an Employee!

Stages of Completion

Developer shall use its reasonable efforts to meet the completion schedule attached hereto in Exhibit “F.” it is contemplated by the parties that the final completion and delivery date shall be as indicated on Exhibit “F.” However, Customer acknowledges and agrees that any changes or deviations in the specifications, site plan, mockups, graphics, or any other element of the Web Site, and Customer delays in fulfilling Customer’s responsibilities, include delivering Site Content and promptly reviewing and commenting on completed work will lead to delays in the completion schedule.

This helps cover any design and development changes and how they effect the deadline originally created.

Pass Through Expenses

The parties acknowledge and agree that all expenses associated with the development process, including but not limited to payment of any licensing fees, software procurement, costs of purchasing graphics, photographs and other web content, materials, supplies, and all other elements of the web site development shall be absorbed by the Developer and that the Development Fee set forth above shall be the entire expense to be paid by the Customer hereunder. Notwithstanding the above, Customer is responsible for all costs and expenses not related to the design and development services, such as hosting, domain name registration, marketing, search engine placements, and any other service that is not described or covered by this Agreement.

This clarifies to the customer that the price for the project includes all of the little extras that need to be purchased to make the project happen.

I stumbled across this image the other day and thought I might post it. This is something that all of us designers and developers can definitely relate to.  Do you get people always trying to hit you up for free work? If so, tell that person next time to walk and go get their own skills for peet sakes. And if they want your skills tell them they need to pull out their checkbook!