Mitt Romney's Compressed Images

Mitt, don’t skimp on image optimization

I just visited Mitt Romney’s website for the first time and noticed right away that his site looked cheap because his button images had been so compressed for load time.

 

For comparison, here are some similar boxes on BarackObama.com

 

Look for yourself

I don’t think the affect of the bad quality comes across in these pictures. I encourage you to compare and contrast.

Squidfingers.com Patterns – Download All the Patterns in One ZIP

Download all the great patterns in one place.

Squidfingers.com has the best source of free patterns out there, and has been used by thousands of web designers. Unfortunately, however, you have to download patterns one at a time. With 158 patterns, this can take a while.

I have compiled all the Squidfingers.com patterns into one ZIP file. Please remember

Feel free to use any of these patterns on your own site. If you do decide use one, a credit link back to my site [http://www.squidfingers.com/patterns/] is always greatly appreciated.

Please continue to respect the terms of use for these patterns, and link to their site. It’s a great, free resource.

[download id=”9″]

New White House Website Launched!

The new White House website is beautiful.

Until a more in-depth analysis of the website is available, here are some screenshots and images.  Read my White House website’s design predictions, and subscribe to my RSS feed to keep updated!

New White House Website Continue reading “New White House Website Launched!”

Obama White House Website Design — the President's Web Site

Update: the new White House Website is launched!

Presidential White House Web Design...Change sure IS a'comin!

The new White House website design: what to expect?

We know who President-Elect Barack Obama’s web designers were: SimpleScott, and later Walker Hamilton too.  My sources tell me (don’t you have sources? 🙂 ) that Scott Thomas and Walker Hamilton are no longer working with the Obama or Change.gov website. Scott Thomas is busy working on an art collective project (VERY cool stuff).

Change.gov web design

The Change.gov site is basically BarackObama.com restyled a bit. The Change.gov site uses many resources from the barackobama.com website, including most of the main CSS file. The Change.gov website was designed by Matt Ipcar. The Change.gov website’s back-end (just like the Obama website) is being handled by Blue State Digital.

What can we learn about the WhiteHouse.gov web design?

If the Change.gov web site is any indication, we can extrapolate the following: Continue reading “Obama White House Website Design — the President's Web Site”

Creating a Real Estate Website in WordPress — Part 2

Real estate website screenshot

If you find this article helpful, please share it, or Digg it!

In Part 1 of Building a real estate website in WordPress, you learned about a plugin called FreshPost that we used to set up the basic structure of your real estate website.  Using this article, you will be able to display a single listing page that has all the content your real estate website will need. Continue reading “Creating a Real Estate Website in WordPress — Part 2”

Westside Business Builders chooses Katz Web Design

Westside Business Builders logo

Westside Business Builders is a networking group based in Golden, Colorado. Their website provides general information about the group, and it serves as a member directory. Katz Web Design is a member of the group.

The membership committee asked Katz Web Design to prepare a proposal for the WSBB website, and this Wednesday, the group voted to have KWD redesign the website to improve appearance and functionality.

Continue reading “Westside Business Builders chooses Katz Web Design”

Building a Real Estate Website in WordPress – Part 1

Introducing IDX+, the best WordPress real estate plugin

I am designing and creating a real estate website with WordPress, and I’m going to be writing a few articles that detail how it’s done.  This article will get you started — please leave feedback with any questions or topic requests for the next installment. Real estate using WordPress Part 2 is now available!

A little background — why use WordPress?

I’m working with a Denver company on a real estate website. Their goal is to showcase their listings in an easy-to-update CMS.

I’ve worked with Open-Realty, and — to say it bluntly — it’s a huge pain in the ass.  When you scratch the surface of OR, you begin to realize how cobbled together it is. Customizing the code to work as it should requires a steep learning curve.  The templates are relatively simple to work with, but the administration section is horrible.  The Open Realty user experience is just awful.

WordPress is my CMS of choice currently, and it’s so easy to develop for that I recommend it to many of my clients. Continue reading “Building a Real Estate Website in WordPress – Part 1”

Found: Hillary Clinton's web designer

Mayfield Strategy Group
We know who Barack Obama’s web designer is.  Let’s find out who Hillary’s web designer is!

I’ve looked through the CSS and there’s no trace of the designer. Anyone know?

Hillary Clinton’s web designer has been found!

Thanks to krs who left a comment below, Hillary’s web designer has been found.

A company of few words

The only content on Mayfield’s website is this:

The Mayfield Strategy Group is a leading provider of strategic internet services for political campaigns, non-profit organizations, and corporations. Our unique experience and methodology allow us to provide the highest quality and most professional services in the industry.

And I guess that’s all they needed to say about that!

Found: Barack Obama's Web Designer

Update: The New WhiteHouse.gov Website

Update: Who will be the White House web designer?

A lot of people have wanted to know who designed Barack Obama’s website. With good reason: Obama’s website is beautiful. It even conveys Obama’s message of hope in it’s wistful design. Well, here it is:

Barack Obama’s web designer is:

SimpleScott. SimpleScott designed Barack Obama’s website, so here’s to SimpleScott for a gorgeous design.

From Scott Thomas, of SimpleScott:

I am the creative director of New Media for Obama for America. The team consisted of many people in house as well as many volunteers. Project leads were myself and John Slabyk. We are maintaining site and brand in-house. Sol Sender designed the logo before I joined the campaign.

How did I find out SimpleScott was involved? Just check out Obama’s main style sheet. SimpleScott uses CSSEdit, a great program for Mac CSS web design.

The CSS code gives it away:

CSS Version 2: – View the stylesheet


/* CSS
Author: Scott Thomas
Client: Obama for America
Created: 12-15-07
Modified: 12-22-07
*/

CSS Version 3: – View the stylesheet


/* CSS
Author: Scott Thomas
Created: 12-15-07
Author: Walker Hamilton
Modified: 08-10-07
*/

Did you notice there are two authors for Version 3? If you’re like me, you want to know who this Walker Hamilton fella is that is referenced in Version 3 of the CSS.

This is from Walker’s resume at walkerhamilton.com:

I architected and implemented the deployment mechanisms and technologies for the campaign’s various web properties. I implemented various applications to improve some processes, automate others, and facilitate instate/headquarters communications for departments within the campaign. Other duties included general maintenance, day to day content administration, and feature planning and development for the social network tied into the site.

Update: I’ve learned a couple of more people who were involved in the BarackObama.com website:

The Barack Obama logo design is by Sender, LLC

Sender, LLC developed the Obama ’08 logo.

From Brian Drum, of Sender LLC

Sender designed the original mark, but the site is developed and maintained in-house by the campaign’s web team.

Sender was involved *only* with the development of the “sunrise” mark, and had no role whatsoever in the design, development, or maintenance of barackobama.com.

Leave your reactions here

Do you like the design, or not? What aspects work best for you? Drop a line below.

Which design do you like?  I prefer the lighter, more optimistic “Primary Obama” website, not the Obama/Biden serious, solumn “General Election Obama” site. What do you think?

How does a 30% conversion rate sound?

I like to brag every now and then.

Landing page conversionWhen we set out to design a landing page for my Denver client, we had our eyes set on a minimum 2% conversion rate for their pay-per-click campaign. Currently, we’re achieving a 15.94% overall conversion rate. I made some tweaks to the form design last week, and for the past 6 days, the landing page is getting a 30% conversion rate (that’s pretty good :-))

Focusing on the front door.

The reason we’ve been able to get such good results is because we’re focusing on one thing: having people sign up for a form. No longer is the internet about websites. The internet is now about front doors. Showing people exactly what they want to see — and sometimes only what they want to see — is how to improve your conversion rate.

Don’t lock users in and throw away the key.

Amazon’s Cage

Amazon cages me in. If you go to Amazon, place something in your cart, then begin the checkout process, they make it impossible (without clicking the Back button a lot) to return to their store. They throw away any chance of revising your order, adding a product, or just browsing around — they sacrifice user experience for the sake of conversion rates.

Guide users through a funnel, don’t force them

Amazon.com no longer shows you how much shipping will be until you’re at the final checkout page. They used to show you right up front, but now you have to get to the final checkout page to find out shipping costs. Very annoying. Always give users the information they want, even if it means some will choose an option you don’t want them to. Give users a way out.

Warning: Create your website at your own risk!

Diving too deep can result in a waste of energy, time, and resources.

We know better now.

My wife and I have just bought our first house. It has been updated, it looks great, and we’re slowly making it our own. When we bought it, we planned on installing our own laminate flooring. We bought a circular saw, read a few how-to articles, and felt generally pretty confident. It can’t be that hard!

Each day after work, my wife and I would come to our new house to work on the floors. We started in the small room to get a handle on the process. To make a long (and painful) story short, 8 hours in, we had only completed about 30 square feet. It was a disaster.

By doing flooring ourselves, we managed to:

  • Turn our new house into a source of frustration
  • Spend valuable energy
  • Waste three nights of our lives
  • Burn ourselves out

In the end, we hired a professional. Now the project is done, and it looks great.

Continue reading “Warning: Create your website at your own risk!”

How to Define Your Website Audience – includes a PDF sample!

Lucia Hernandez - A fictional website audience profile

This two-page PDF file is an example of how to define your website audience. When you create a website, it’s important to have in mind for whom you’re designing.

When designing landing pages, it is especially important to focus on an audience and craft every piece of content to fit that profile.

Feel free to use the audience profile PDF as an outline for your projects.

[download id=”1″]

Content is king…when can I get it?

King content and his pawns

As a web designer / developer, my job is pretty straight forward: I design a website, code it, and add the content. But that’s not all. I’ve also got to be a pest, hounding clients for content.

At the beginning of each project, it’s always a good idea to get a firm grasp on exactly what content is going to be on the website. Defining a site map is vital to developing a website. A simple list helps you figure out what is needed. Below is a sample:

  • About us
    • Employees
      • Bio paragraphs
      • Head shots
      • Contact information
    • History
      • Photo of founders, current owners
      • Chronology
      • Intro paragraph
        • Bridge history with present, link to various project

Once you’ve got a good understanding of what is needed, you must start asking for content immediately. Companies like to wait until the last minute, then wait days longer to deliver content. If you plan for late content and pester your clients from the get-go, you might be able to have everything you need when the website is complete.

There is a great book (Web ReDesign 2.0: Workflow that Works) that says you should create a timeline for content delivery. They have a pretty table with deliverables and a flow chart and all sorts of great stuff. In a perfect world where the website project is the client’s top priority, a content delivery timeline might work. Heck, you could even bill clients for overdue content! However, in the real world, there’s no such thing as a content delivery timeline. A web developer must take content into their own hands, or else you won’t get paid.

Designer, protect thyself!

If you have clients with overdue content that is holding up the launch of a website, it’s not a big deal, except that designers often get paid when the site goes live. No content, no pay check.

A contract is a great place to define what happens if the site is ready except for the content. Rather than being paid at launch, it is a good great idea to be paid when the site is ready – content or not. That way, if you’ve done your part of the project, and your client has not yet prepared their portion, you can still send off that invoice.

When modifying your contract, keep in mind that you’ll still need to agree to add the content once you receive it! If that’s too big a hassle (working for free after getting paid), then don’t bother changing your current contract.

How do you deal?

Do you have nightmare clients? Late content delivery? Are you the client? How do you handle being part of a web design project? I’d love to hear your stories.

Exploring and learning: Are you taking alternate routes?

Denver Map

When you first move to a new city, you aren’t familiar with the roads. You buy a map to help guide you, you ask Google how to get you from here to there most efficiently, and you stop and ask people directions.

After you’ve lived in the city for a while, you become familiar and confident. You start to understand the road naming conventions, the north/south corridors that are the fastest, the quickest way downtown from your location.

The more experience you have with the city, the better you understand how to arrive exactly where you want to without running into any snags. But yet, there’s always more to learn.

Like a city, every profession has its own learning curve. Are you exploring past your comfort zone?

Continue reading “Exploring and learning: Are you taking alternate routes?”

Multiple Matte Colors for CSS Sprites

Here’s the problem: I want to use CSS Sprites for transparent images, and they require different matte colors.

The promise of CSS Sprites is great: you can combine many small images into one bigger image, and use CSS to reveal only the revelant parts. But what if you have a background image, and the background changes color on :hover? When trying to save the smilies, you can only choose one matte color. I need multiple matte colors!

The issue really is a pain when you have already given your object a stroke. Using the Appearance panel, we’ll make everything happy in the world again!

I want the three smileys to be combined as one

Continue reading “Multiple Matte Colors for CSS Sprites”