firebug Firefox Plugin is great for web site design debugging

Chrome isn’t ready yet for the big leagues because it doesn’t integrate with Auto Form Fillers like Google’s own SEO friendly toolbar, or Roboform so we still use Firefox and IE when doing web site design projects in our Los Angeles based LaDezign.com. That’s why today I’m writing about a new plugin for Firefox called Firebug which puts a wealth of web development tools at your fingertips while you browse a web site.

  1. You can edit, debug, and monitor CSS, HTML, and JavaScript live in any web page.
  2. Firebug is always just a keystroke away, but it never gets in your way. You can open Firebug in a separate window, or as a bar at the bottom of your browser. Firebug also gives you fine-grained control over which websites you want to enable it for.
  3. Firebug makes it simple to find HTML elements buried deep in the page. Once you’ve found what you’re looking for, Firebug gives you a wealth of information, and lets you edit the HTML live.
  4. Firebug’s CSS tabs tell you everything you need to know about the styles in your web pages, and if you don’t like what it’s telling you, you can make changes and see them take effect instantly.
  5. When your CSS boxes aren’t lining up correctly it can be difficult to understand why. Let Firebug be your eyes and it will measure and illustrate all the offsets, margins, borders, padding, and sizes for you.
  6. Your pages are taking a long time to load, but why? Did you go crazy and write too much JavaScript? Did you forget to compress your images? Are your ad partner’s servers taking a siesta? Firebug breaks it all down for you file-by-file.
  7. Firebug includes a powerful JavaScript debugger that lets you pause execution at any time and have look at the state of the world. If your code is a little sluggish, use the JavaScript profiler to measure performance and find bottlenecks fast. The command line is one of the oldest tools in the programming toolbox. Firebug gives you a good ol’ fashioned command line for JavaScript complete with very modern amenities to execute javascript on the fly.

Optimizing PPC budgets driving through a windshield

When reviewing your web site design performance, part of the challenge with evaluating your search marketing performance is analyzing where traffic is coming from to see the results it is producing. With the economy forcing budgets into downward spirals, you need to minimize your PPC spend and maximize revenues from the clicks that come in. When optimizing your PPC ads for maximum performance, sometimes you have to pretend you are driving a car and looking through the windshield of the car in front of you. What this means is that instead of focusing purely on high click through rates so that you have a strong CTR with Google, you may need to focus on your actual conversion rates (this means the people that click through who also fill out a form to take an action on your site). If your conversions are HIGH, then you can be confident your click throughs will be fine too. Remember, without conversions you won’t have any money to pay for more clicks. So focus on the scoreboard, not your rushing yardage.

An optimal way to make a meaningful impact conversion rates is to use the ad copy – though it is just a few words basically – to let the customer know before they click, what they should expect to see on the other side. Tease them, reveal a few things, but don’t pull off a surprise effect which leaves them stumbling and looking for that exit sign. Bottom line is to deliver the message even before they reach your site.

What choices are in your arsenal of delivering pre-expectation ad copy? Price, Urgency and Value.

With regards to price – ie. discounts – you will likely have more clicks (thus increasing your CTR) but your conversions are at risk if the clickers are not yet in purchase mode. It sucks to pay search engines for research oriented clicks. So what you can do is to focus instead of terminology that is more closely related to a prospect who is in PURCHASING mode.

The simplest method is to create urgency by using time or number of openings available.
– One example is a sale date. For example, “Sale Ends Nov. 1st, Order now. use code #1234x”
– Another example is to use competition in the form of “10 left at this price. sale ends today. Free Shipping!”

Free software for photo and image editing

Because I am involved so much with web site design projects out of my Los Angeles office, I constantly have to deal with playing around with photos and images for my clients’ websites. Most ecommerce software and content management solutions don’t include sophisticated editing tools. And I am constantly on the lookout for free software to do simple tasks like making color corrections, printing, managing photo albums, or any of 100 other routine image-editing tasks. If you have a budget to spend on your digital photography passions then a commercial program like Adobe Photoshop is a great solution. But if you are low on a budget (hint think of the economy now) and you just need the basics like the ability to resize and crop images then you can find some good free software alternatives I’ve found below on a recent review from download.com.

When working on a recent web design project, I found a quick and easy download for doing some basic editing in a program called IrfanView, The tiny download weighs in at 1.24MB and literally can be installed in seconds. Once you’ve got it running, open the image that you want to edit and select Image > Resize/Resample to edit the size of your photo. To crop, click your cursor in the top left corner of the area you want to crop, then drag the cursor to create a rectangle. Select Edit > Crop Selection, and voila!

Another free application is Resizr, created by Matt Miller back in 2006. Resizr is a free online tool that lets you upload an image from your hard drive or via a URL. You can then rotate, crop, and resize your image, as well as make edits to brightness and contrast. You can even adjust levels and convert PNG files to JPEGs.

DigitalCoast.org CMS Membership Portal Web Redesign

Living in Los Angeles has its perks and one of them is that L.A. has become a hub of technology companies. One of the most noteworthy associations in the technology space on the West Coast is the Digital Coast Roundtable. Their roster of members has some real industry stalwarts like the Panasonic company. So when I had a chance to work on redesigning their web site and integrating their old content into our Web Site Architect CMS Platform you could say I got off my rump and jumped at the chance.

In the case study area of my site, you will soon find a step by step analysis of the DCR site upgrade. I want to thank Conchetta Fabares at DCR for her thoroughness and follow-through at getting this project underway and completed.

Stay tuned as we develop this case study.