eBay DevCon and eBay Live

Another trip to Vegas? I know everyone thinks it's a great place, and it is... if you visit once every couple of years. I have to admit, I do enjoy it for a couple days each time I go. But, it does get a little crazy after a while. Fortunately, this trip included eBay Live and the completely different type of craziness that comes with that conference. You want to see a group of people who really love what they're doing... go to an eBay Live conference!

This was my third eBay conference, and it seems to be getting better every year. I usually attend the preceding Developer Conference, and then stay for the eBay Live (Buyer & Seller) Conference. This results in a full week of 'eBay'. Our primary goal in attending has been to build our relationship with PayPal (owned by eBay), but has expanded to focus on building templates for ProStores (an eBay Company), and will be further expanding to include eBay Auction and eBay Stores templates. We're seeing the strong convergence between eBay's three brands helping sellers effectively sell their products in a multi-channel environment.

This article would be too long if I wrote about the entire conference, so I'll simply touch on some of the highlights and provide some recommendations on specific products and solutions that may interest you. Over the coming months we'll further dissect the conference and provide more insight on how you might benefit from this giant, eBay.

ProStores - One of the key highlights for me was the chance to spend face-time with our newest eBay partner. We have been working closely with ProStores since March, but this was the first chance we had to meet the other key players. We received excellent feedback and suggestions from the ProStores staff about our release of ProStores-ready Templates, and had a few chances to speak to ProStores customers at their booth.

Most encouraging was the number of people who attended the ProStores sessions. There were a number of positive comments made by new ProStores users, which further solidified our confidence in the ProStores solution. It's clearly obvious that ProStores is the right solution for customers new and old to ecommerce. If you have been thinking about starting or moving your ecommerce site, we highly recommend learning more about this ecommerce solution. Visit our ProStores landing page for more about our ProStores templates.

PayPal - Like ProStores, it was nice to have a chance to spend some more one-on-one time with the PayPal staff. It's been a year since the launch of their Website Payments Pro solution and it's becoming a huge addition to their already successful Standard payment products. Their also making serious strides in the internationalization of their solution. They expect to be operating in over 20 different currencies by the end of the year.

Now... we know there have been concerns about PayPal in the past, and there were a handful of 'open-mic' attendees who did not hold back in voicing their complaints. BUT, they finished by saying they really like the PayPal solution and voice their complaints in order to help promote change. As with any system, nothing is perfect, and there will be issues with any company/solution that goes through the rapid growth that PayPal has. I encourage you to reconsider the PayPal solution if you're in the market for a transaction solution.

Over the coming months we'll be doing more around the PayPal solution from adding more support materials on using their solution, to online training sessions, to soliciting a group of PayPal experts to help implement a PayPal solution for you. Watch our coming newsletters and blog for more.

Skype - As expected, Skype (a new eBay Company), who adds 2-3 new subscribers per second, played a large roll at the conference. This was especially true during the developer portion, so be on the watch for some exciting Skype add-on products this year. Points of interest:

SkypeOut, the feature that allows you to call landlines (or cell phones) from Skype, is free in the US and Canada through the end of the year. I would suspect (only speculation) that this will continue after the end of the year also.
Skype Accessories - Check out the latest in Skype compatible equipment. You'll be surprised what you find.
Skypecasts - This is an interesting feature that allows you to host a Skype call for groups of up to 100 participants. I'll give this a try and then report back in our next newsletter.

eBay Express - This is a new store from eBay that works more like a standard retail store. Approved eBay merchants can list their products on eBay Express in a Buy it Now format with one integrated shopping cart. Rather than trying to coordinate payment with individuals, this site allows you to pay for multiple products with one credit card in one checkout. I will be interested to see how this plays out, but it's worth a look.
There is an endless amount of information that came out of the eBay Conference. I have only touched on a very small percentage of them here, but we will be integrating much of this knowledge in upcoming products, articles, support materials, blogs, and more.

Product Catalog - House Cleaning

Over the last two weeks, you may have seen a drop in the number of products in the PixelMill catalog. This update was due to two issues that prompted product removal and update.

1) Two Year Shelf-life - We have implemented a two year shelf-life on all products submitted to the PixelMill catalog. Standards and browser compatibility change often, and these changes can be significant over a two - four year period. To ensure that we continue to offer top-quality products at an excellent value, we felt it was important to remove (or update) products added to the catalog over two years ago.

2) SWFObject Code - An April update to Internet Explorer caused many Flash movies to stop working as expected. The ActiveX update requires users to click an ActiveX object once before it will work. This required us to find a solution that made the templates work correctly out-of-the-box. Therefore, we started the tedious process of updating nearly 2,000 products that used Flash movies. We temporarily provided a warning in the catalog to show which templates were affected, but we felt it was time to remove those products. Now, all products with Flash use the new SWFObject code, which provides an effective work-around to this problem. Please see our SWFObject support article for more about the problem and the solution we're using.

We apologize if this update has caused any inconviences, but we would prefer to sell a product we're confident will meet your expectations than sell an average product that needs additional work to function properly.

Doctype made easy

When you create a new page in Dreamweaver, the first line of code usually looks something like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Ever wondered what that means? Understanding the docctype statement, as that line is called, requires a very, very brief history lesson. Don't worry, I'll make it brief.

HTML started with a very basic list of tags (and rules on how to use them) back in 1989. Over the years, more tags were added (and some removed), so HTML came out with version 2, version 3, version 3.2, version 4, and finally 4.1. XHTML was then developed. (To make it even more confusing, we have different versions of HTML 4.1 and XHTML -- a "strict" version that has very strict rules, a "transitional" version that is a little more loose, and a "frames" version for sites that use frames.)

(Wasn't that brief?)

These different versions of HTML and XHTML have slightly different rules for how -- and which -- HTML tags can be used in a document and how to format them. Just to give you a quick example, XHTML has stricter rules than HTML -- the tags have to be lowercase and certain tags (<u> for underlining) can't be used at all. In HTML, tags like <br> and <link> now require a "closing slash" in XHTML, so they must be written like <br /> and <link />.

So for optimized viewing of the site, the browser should be able to tell what version of HTML/XHTML you're using. That's when the doctype statement comes in. Compare these different doctype statements below:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

The doctype tag contains the information about which DTD, or document type definition, is being used, and contains a web address that links to the full explanation of that language.

Now, what's great about Dreamweaver (which was the point of this blog) is that you don't have to worry about keeping track of which tags you can or can't use and how your code should be formatted. As soon as you set the doctype of your web site, Dreamweaver handles the code for you automatically. Even if you are used to hand-coding an <img> or a <br> tag in the old-school HTML way, if your doctype is set to XHTML, Dreamweaver automatically adds the closing slash for you.

You can change the docctype by typing Ctrl-J (Command-J for Macs) to access the page properties, then going to TItle/Encoding and changing the Document Type. (You can also right-click on the page itself and choose Page Properties.) Once you do that, Dreamweaver formats your code accordingly!

Keeping XHTML-validated templates validated

The scenario: You purchase a template from PixelMill that is marked as XHTML 1.0 validated. You add your content. You publish your site. You run your template through the W3C validator. You get a big red bar saying that your site isn't valid XHTML. What happened?

Unfortunately, FrontPage 2003 isn't very good at keeping your code XHTML-validated. (Expressing Web Designer and SharePoint Designer 2007, in contrast, are very good at keeping your code XHTML-friendly.) So here are a few common things that you'll need to do in your pages for valid XHTML. (There may be others not listed here - if you have a specific question, post a comment!)

1. First step - right-click in the Code View pane and choose Apply XML Formatting Rules. What this essentially does is to add closing slashes to empty tags -- for example, your <br> tags will be automatically transformed to <br />. This will probably fix 80% of the errors generated by the HTML validator that are along the lines of &qout;end tag for ... omitted, but OMITTAG NO was specified" It will also take any uppercase HTML code and make it lowercase.
2. Now, go through and click on each of your images (that are actually embedded on the page -- you will see the <img ... /> tag in code view). Look at the HTML code. If you see anything that looks like border="0", you will have to delete it. For example -- <img border="0" src="image.gif" alt="My Image Here" /> will need to be changed to <img src="image.gif" alt="My Image Here" />. This should fix all of the "there is no attribute 'border'" errors.
3. Sometimes FrontPage will drop the closing paragraph tag (</p>). If you see errors that say: "end tag for 'p' omitted, but OMITTAG NO was specified," then look at the line and column number of the start tag (the validator conveniently lists it as the next item) to track down the opening of the paragraph. Then, in the HTML code, look for the end of the paragraph and manually type in the closing tag. For example, if you find code that looks like this: <p>This paragraph is causing errors!</div>, you will want to add the closing paragraph tag at the end of the paragraph, which would be before the closing div tag in this example... <p>This paragraph is causing errors!</p></div>.
4. Did you add any FrontPage Link Bars to your template? If you did, they will not validate. You should remove the link bars and put in hard-coded links instead. (You might want to put those links into an Include Page for easier editing later.)
5. Did you add any Flash or Swish movies? If you pasted in the typical HTML code (it's a big block of code, with <object> and <param> tags all over the place), then it won't validate properly. Instead, use a solution like Deconcept.com's SWFObject embed solution. We have a tutorial on PixelMill that takes you through the basic steps of how to use it: http://www.pixelmill.com/support/al0/kb101619.htm .

By following the above steps, you should be able to get most of your site fully validated. There may be some other issues if you have used various scripts or components which will need to be dealt with on a case-by-case issue.

CSS Tableless Templates

Our selection of CSS tableless templates is growing, so I thought that now would be a good time to talk about the difference between tables-based templates and tableless templates.

Tables-based layout describes the use of HTML table tags to create columns and rows for a grid layout that then allows you to have a column layout and more complex interface graphics (like rounded corners or drop shadow info boxes) than you would be able to without a tables-based layout. You can tell if you have a tables-based layout by looking at the HTML code -- if you see a lot of <table>, <tr>, and <td> tags in the code, then you have a tables-based layout. Web developers began using tables to "force" layout because of the limitations in HTML for having cool designs. (HTML is primarily a "markup language," which means that it brings meaning by labeling things as paragraphs, headers, quotes, etc., but within just HTML there is no way to describe how something should then "look.")

With the advent of cascading stylesheets (CSS) a few years ago, however, and with all the major browsers finally implementing CSS, HTML could go back to doing what it was first intended to do -- provide meaning to the content of a site. CSS handles the layout, the colors, the fonts, the interface graphics. So now, we have what we call CSS-based layout, or table-less layout -- layouts that are designed and formatted completely with a stylesheet instead of with tables. CSS-based layouts are more flexible, more powerful -- one could easily make a layout change across your entire site by editing the stylesheet, whereas with a tables-based template one would have to go through each page and edit the code (or copy and paste the content from each page into the new layout). CSS-based templates provide cleaner code without all of the <table> and <tr> and <td> tags, which helps with better search engine ranking and accessibility.

At PixelMill, we are encouraging all of our developers to begin developing more and more CSS-based layouts instead of using tables, although we know it will be a slow transition. One of the biggest factors for developers continuing to use tables-based layouts is, frankly, the terrible CSS rendering that FrontPage 2003 Design View has, especially when it comes to relative font sizes (where the fonts can resize when the user changes the text size in their browser). Customers who are used to using tables-based layouts usually have a bit of a shock when they open their first CSS template, where columns sometimes appear below other columns instead of lining up neatly in a row. It takes a bit of a shift to get used to working to a CSS template, although the benefits (cleaner code, better accessiblity and validation, see above...) far outweigh the initial frustration. (Dreamweaver MX and MX2004 users may experience some frustration as well with shifting content areas, but Dreamweaver 8 is quite solid in its rendering of CSS layouts.)

With the coming release of Expression Web Designer and SharePoint Designer 2007, CSS templates should overtake tables-based templates. EWD and SD2007 were created with powerful CSS layout in mind, and come with many tools to help refine and edit the stylesheet. The templates display perfectly in Design View. Templates made for FrontPage 2002 or 2003 work just fine in EWD and SD2007 so upgrading shouldn't be a concern.

If you are looking for cleaner code, better search engine ranking, accessibility and validation, CSS templates are worth the look.