Workbox is extremely proud to announce the launch of Jazz Pharmaceuticals’ new website. The design was created by the talented and insightful Dennig Marketing Group, and Workbox built the site with highly customized WordPress for the content management system. This is the fourth iteration of its corporate website Workbox has built for Jazz over our seven-year relationship (we started with Jazz before they were a public corporation!).

In addition to simplifying the overall look and feel, we standardized the site’s subnavigation (and utilized right nav). We believe visitors will find it fast and easy to use.

Jazz’s bigger news is that they combined forces with Ireland-based Azur Pharmaceuticals to create a new entity: Jazz Pharmaceuticals plc.

Workbox looks forward to continuing work with the amazing team at Jazz and is currently “migrating” all of Jazz’s product websites from static HTML to the WordPress CMS.

Workbox is excited to announce the launch of Liquor License Connection at http://ca.liquorlicenseconnection.com. This new business is changing the way liquor licenses are bought and sold in California by giving license owners and buyers a more transparent, efficient and inexpensive way to engage in the sale of liquor licenses.

Currently, most buyers and sellers need to work through a broker to help them navigate the paper-work intensive and confusing process required by the California Department of Alcoholic Beverage Control.

Liquor License Connection, however, gives liquor license sellers and buyers a simple way to negotiate a price and complete a sale. Liquor License Connection also streamlines the documentation process for buyers and charges much less than typical brokers.

Additionally, Liquor License Connection shows comparable sale prices for similar, recent transactions (known as “comps”) to registered users so there is less mystery involved in the transaction negotiation.

Finally, if a particular sale requires a little extra assistance, or other services are needed, Liquor License Connection has highly experienced partners who can help with liquor license expediting, escrow, 500 foot surveys, legal services and recording services.

Again, we are very excited to be part of a business that could radically change and improve an inefficient and confusing industry.

What Workbox is doing: all technical development, UI and online marketing consulting.

Overview: An outline of recommendations for managing development, editing, approval and publishing of pharmaceutical product marketing websites.

For: Website developers, in-house IT teams, in-house marketing teams, in-house compliance teams.

Like all product websites, pharmaceutical product websites have to meet the sales, marketing and IT needs of their parent companies. But they also come with a bunch of other requirements that are unique to regulated industries (particularly if the products are non-OTC).

Legal, compliance and regulatory teams and agencies may need to review, approve, “roll back” or completely eliminate specific content, pages or entire websites – and it often needs to be done immediately. This can be a surprisingly difficult (and potentially costly) process if you aren’t prepared.

So, after putting out a few fires and assisting frantic IT teams, here are our recommendations for managing pharmaceutical product websites.

1. Full backup upon every major site edit, and backup archive.

First, regulators may ask to review your full site as it existed on a specific date. Second, your legal department may require the same thing. Finally, you may be required to “roll back” the website content and functionality to a previous version on a site-wide level. So make sure you have a full backup that you can present online if necessary.

2. Four functional copies of the website for different purposes and stages in the development, approval and publishing process.

First, the live/production site that is visible to the public.

Second, a password-protected “validation” site that will be used by compliance, regulatory and legal teams to review and approve the site before it is published and replaces the existing live site. Once this is approved, this site is moved to production.

Third, a password-protected “test” site for marketing and IT teams to review content edits made by the marketing team and technical edits made by the development team. Once these teams approve this website, it is moved to validation.

Fourth and finally, a development site dedicated to your development team to work on and test technical edits.

3. Rapid shut down process and assets.

This is the worst-case scenario: your compliance team or a regulatory agency requires massive or site-wide content edits and the existing site simply cannot be visible to the public until a new website and content is approved. Some people call this a “kill switch” or a “shut down site.” No matter, you need to be prepared for the worst. We will have a blog post dedicated to this particular requirement in a few weeks.

4. A content management system (CMS) so you can quickly edit content and “roll back” content on specific pages.

A good CMS makes it easy to edit content and, if required, “roll it back” to a previous state if issues arise. A CMS will also keep track of when edits were made and who made those edits. Finally, it can make it easier to manage “moving” the site through the various sites in the approval process.

5. SVN system for the development team.

This is a little geeky, but it helps the development team track technical changes and when those changes were made across all your websites. An SVN is an invaluable tool to keep things coordinated and manageable.

Some folks may think that this set up is excessive or too time-consuming, but non-compliance or regulatory errors can be extremely painful for a company. Also, Eric Weidner recently spoke with a corporate insurance attorney who mentioned that insurers are starting to look more seriously at how pharmaceutical companies maintain website assets and the processes they have in place for potential emergencies. This is definitely a case where “an ounce of prevention is worth a pound of cure.”

If you have additional ideas, think your business has a great way of handling website management, or think we missed something, please let us know. We’d love to hear from you!

Yours, Gleb Aksyutchenko and Eric Weidner

The Life Sciences Foundation’s website (www.lifesciencesfoundation.org – recently built and launched by Workbox) showcases important events, people, discoveries and organizations in the life sciences from the 18th century to the present. One of LSF’s goals was to create a dynamic, scrolling timeline feature that would give users an idea of the site’s subject matter, emphasize the presentation of “years and events” and help users quickly click into content.

We were all originally inspired by Google’s corporate timeline and all the great, free stuff they provide, but we needed to add a bit more functionality and design grooviness – and every bit of content, from the images to dropdown menus, had to be managed through our PHP-based content management system.

Ultimately, we decided to build the basic functionality using the jQuery Draggable plugin and jQuery UI animation plugin. Workbox’s technical architect, Kirill Egorov, decided not to use Sencha Touch and jQuery Mobile solutions as they he felt that were too complicated and cumbersome for our purposes. So, a simpler solution was found. We’re going to show the code that specifically handles dragging/listing.

Identifying the device (function IsTouch):

We also used the jQuery Touch plugin, but it had to be modified because the start position of the “timeline” layer didn’t work correctly for our “move” event. Originally in the plugin, the start position of the layer to drag was defined as follows:

In the “touch” method we rewrote the piece that has to do with calculating the shift for “left” position:
Replacing this line:

with these

_startPos[0] — position of the pointer at “touchstart” event
_startData[0] —shift of the left position for the dragged layer at “touchstart”

Finally, this is how we initialize the component:

As a result, the timeline scrollbar works on IOS and Android mobile browsers!
Please feel free to use this stuff, give us feedback and send us links to stuff you’re built using it!

Cheers, Kirill Egorov, Gleb Aksyutchenko

Note: this is not a comment on Flash’s quality, usability or usefulness. And this post is not about app development or sites purposely built entirely in Flash.

This is a comment on current perceptions about Flash and how it relates to online marketing websites.

B2B folks specifically don’t want Flash for their homepage animations anymore. And here are the top four reasons I’m hearing in my conversations with business owners and online marketers:

Reason #1 – iPad. Browser compatibility on the iPad and smartphones is top of mind of B2B marketers.

Reason #2 – “Flashiness.” Clients have seen too many “flashy” or excessively long, elaborate and slow animations.

Reason #3 – SEO. Google doesn’t index content inside Flash files.

Reason #4 – HTML 5, AJAX/Jquery are “cool,” Flash is “old” and “uncool.” When middle-aged executives of mention HTML 5 and say “no Flash,” you know there’s change in the wind.

Homepage Animations

Animations on marketing website homepages are the real issue here. For years, designers have been building, and clients have been asking for, some sort of animation on homepages. These animations, and the content in them, are designed to quickly show a viewer what the company or product is all about, since they grab viewers’ attention.

And since the functionality within these animations is very limited (usually just movement, linking and maybe CMS integration), Flash is no longer required to make them work.

The 4 Reasons and What They Mean

#1 – Flash doesn’t play on the iPad.

The iPad is incredibly popular among folks in the high-tech business-to-business marketplace, so the people I talk to might be more concerned about the iPad than people in other industries. And really, they’re only concerned about the main animation on homepages. Video and other Flash-based page elements are not as big a concern – yet (maybe because there are so many site-specific apps … which defeats the whole purpose of browsers … don’t get me started).

#2 – “Flashiness.”

This reason has nothing to do with Flash itself, but is rather the result of design and content issues. Some companies love having long, elaborate animations on their homepages. Some people hate them. In any event, the messenger (Flash in this case) is blamed.

#3 – SEO.

It’s true that Google does index the content in Flash files that appear embedded in homepages. But, it doesn’t do a great job at it and you can’t get the same value as you would with HTML text, for various reasons. However, pages with Flash embedded really aren’t penalized unless the Flash slows down the page load time (which is a good reason to keep any homepage animation short and sweet – see #2 above). On the other hand, unless non-Flash homepage animations use the alt-tag (which many don’t for design reasons – some people don’t like how it looks when the text appears on mouseover) or include real HTML text, they aren’t gaining any benefit by not using Flash.

#4 – Flash “uncool;” AJAX/HTML 5/Jquery “cool.”

When you have Google, Firefox and Apple all behind HTML 5, it’s hard for Adobe to fight back (although Google still supports Flash rather impressively on YouTube, and most pro designers use Adobe products on their Mac PCs – go figure).

Also, I think there are deeper and more profound reasons behind how quickly people started reacting negatively to Flash. First, I believe that most people don’t like the idea of plugins, and don’t want to have to rely on one to make their marketing site work properly. And I believe there is a basic understanding by online marketers that the content in homepage animations is not worth the trouble of downloading a plugin. (A video of a dog playing a piano, however, is a different story! People will do anything to see that.)

Second, online marketers and developers don’t like proprietary software and players, and the idea of an “open source” video codec and support is very appealing, especially if it promises to play across all browsers and operating systems.

Well, we’ll see if that ever comes to pass.

Whatever the real reason, professional online marketers and consultants are dissing Flash and praising Jquery – probably without understanding the underlying issues around video codecs and < video > support at all.

Final Thoughts About Flash & iPad

Is Apple trying to kill Flash? Is Flash as awful as Apple says? I’m staying out of that argument. But, for better or worse, Flash has an image problem that might never go away.

Note: Yes, yes, I know – the Workbox site still has Flash on its homepage … cobbler’s shoes.

Yours, Eric Weidner

WordPress has become a standard content management system for many corporate websites, and for good reason – it’s powerful, easy to use and it’s free! However, since it was built to be a blogging system, rather than a “real” CMS, WordPress lacks some features that many organizations require to be able to manage their content properly.

Specifically, WordPress out-of-the-box lacks:
• A revision system – Functionality that allows editors to view previous versions of pages, and roll back to one of them instantly.
• Preview/draft features for “pages” – Most people use the “pages” functionality in WP-ADMIN to create the content pages that establish the main site structure (About Us, Products, Services, etc.). Unfortunately, you can’t make a change to a page that’s already live without publishing this change, or making the page “dead” when you have it in preview mode (ugh!).

We’re sure we’re not alone in tackling these issues, but we thought our readers would like to see our solution.

Revisions & Version Control

Here’s a screenshot of the version control section of the page editor UI:

So, this system allows editors to do the following things:
• Store all previous versions of page/record.
• Compare any 2 versions, which is facilitated by color-coding the differences.
• Restore any version.

Preview Feature

For the pages preview feature, here’s our solution architecture:
• In wp-config.php disable the autosave (set autosave time to 10,000 seconds) and WordPress’ versioning default
  define(’WP_POST_REVISIONS’, 0);
  define( ‘AUTOSAVE_INTERVAL’, 10000 );
• Replace the standard WP block that contains the save/publish buttons with our own block.
• Create a table where we will store versions of pages. Only title and content fields are versioned.
• At the bottom of the page users will see a large form & table supporting roll-backs, version comparison, etc. (see screenshot above).
• When users hit the Save Draft button, the page does not get updated. Instead this new revision gets stored in our table with a special flag. The next time a user goes to edit the page, the system checks if this page has a draft. If it does, the system serves the draft and allows the user to edit/preview/publish it.
• With our solution, when you hit Preview, the record does not get saved into the database (as was the case with Wordpress’ default implementation). Instead the title and content gets submitted into a form, and passed to a new window (with the address of the page on the frontend). A special function then replaces the actual values of title and content with the values from the form (i.e. the draft values).

We hope you find this useful! Also, we would love to get any feedback or other ideas you may have for this particular WordPress content management issue.

Yours, Gleb Aksyutchenko

Web design and development is a dynamic and unpredictable industry. To stay up-to-date, meet interesting business folks, and get inspired, I go to a bunch of tech and marketing events and conferences every year.

Recently, I ran across some cool startups and web services, so I thought I’d share some that you might find interesting. These companies caught my eye for some technical, design-related, user interface or (honestly) arbitrary reason – this isn’t a “you should use ‘em” list so much as a “huh, that’s pretty cool” list – they’re services that can provoke you to think about your business in new ways, or come up with something completely new of your own (I think of them as “brain food”). I met the founders of all and, naturally, they were all passionate about their ideas – which is infectious and inspirational, too.

My Next Customer – http://www.mynextcustomer.com

My Next Customer’s service lets you track data from all your marketing channels in one place: SEO, Social, Offline, Paid Search (including calls, etc.). They’re just out of the gate, their founders are great guys (George Revutsky, Dustin Kittelson) and they won 2^nd place at Failcon2010’s “Most Likely to Succeed” contest. If you’ve ever run reporting for large campaigns and multiple channels, you will instantly see the value. And if it works well, marketers will love it and it could disrupt this growing industry. Oh, and it’s priced to move.

LunchTree – http://www.lunchtree.com

Here’s what Jesse Spaulding, the founder, says: “LunchTree is a fun way to automatically schedule lunches with colleagues or people who share your interests. You simply indicate when you’re free for lunch and the site will find you a match in the same area.”

I scheduled a lunch with Jesse recently (through LunchTree, of course). The system sent notifications via SMS. Worked like a charm. Like many social mashup/startups, it will be fascinating to see how this service morphs, how users will perceive it and how, ultimately, it might make money. It’s very, very early days for this service, and only available in San Francisco for now.

ParetoCentral – http://www.paretocentral.com

Clients ask for advice and consultants give advice on this website. Here’s how it works: Clients post questions/issues. Consultants post answers/advice. If the client likes a consultant’s online advice, they can set up a one-hour consultation. If the client is satisfied, they pay $50. Consultants must pay $50 per posted answer/advice after their first one. Ultimately, this could be a lead-gen service for consultants. Joju Michael Mangalam is very smart and a great guy. I’m very interested to see if this idea can work, how they refine it and how they generate users – showing its value and differentiating itself from a service like Quora.

SurfMark – www.surfmark.com

O.K., you can already bookmark and categorize websites, so what’s the big deal? SurfMark lets you track your online research path, add notes to the sites you save, share searches and categories and other groovy stuff. This is a great tool for people who do serious online research. Vivek Agarwal is another one of those smart, passionate folks you meet when you work with new ventures. He’s launched a pretty nifty service.

Near2there – http://www.near2there.com

Personally, I love this service. Here’s the situation: my wife emails me a link to a restaurant review. I read the review, we talk about it and say “hey, let’s check the restaurant out.” A week later, we are walking in our neighborhood, looking for a place to eat and I say, “Wasn’t there some restaurant we wanted to check out?” We’re baffled. But with Near2there, when you get within a certain distance of the restaurant, you get a message on your phone that tells you you’re “near to there!”

You can set the near to there distance, notification distance can change based on your speed, it can be event-driven, work with any type of business … well, it’s pretty cool. Only available on Android so far. Co-founder Peter Olfe assures me they’re working on the other platforms. Coming to Yelp soon?

Check ‘em out and let me know what you think!

Cheers, Eric

The trouble with tracking PDF downloads (or any other file, such as PPT, MP3, ZIP, etc) with Google Analytics is not necessarily getting Google Analytics to track them. Google tells you exactly how to do it. The problem is automating the tracking so you have the flexibility to upload any type of file through your CMS (like WordPress) or via FTP without requiring website admins to do anything special or using a dedicated upload field within your CMS interface.

Here’s what Google says to do:

1. Set up Event Tracking in your Analytics Tracking code (very easy –just add a line of code).
2. Add a JavaScript method in the head of your document to delay the outbound click by a fraction of a second.
3. Update your outbound links to call the new function without first following the link.

This seems simple, but #3 means that you have to modify each link to each document on your website to make sure they are tracked. This is where developers usually turn to a specific upload field in the CMS interface, but that doesn’t address FTP uploads or text area uploads. And, since some solutions cover all outbound links (like to other websites, for example), you might end up tracking links to other websites in addition to the files you are hosting, which may not be your goal. So, here is Workbox’s solution for WordPress:

Rather than editing the links themselves, we use jQuery to intercept every click on every link. Then our code checks to see whether the link is outbound or points to a document (like a PDF, MP3 or any type you specify). If it is the type of document specified, the Google tracker is launched, so this info is sent to Google Analytics before the browser redirects to the link. Here’s the code we are using for your reference:

Red – inclusion of the tracker script;
Blue – launching the tracker;
Black – detecting the links we need;

We think this is a fast and efficient way of handling this because:

1) It allows you to use an existing and trustworthy statistics service (Google Analytics).
2) You don’t have to add code to every link.
3) It is highly customizable since you can easily change what kind of links you want to track.
4) Installation is easy and the code is free!

We implemented the solution in the form of a WordPress Plugin so we can configure the settings such as the domain name, the file extensions, etc. in the admin panel.

Have thoughts or other ways of tackling this issue? Let us know!

Thanks, Eric Weidner & Gleb Aksyutchenko

Your website design may include images with rounded corners – products, product thumbnails, team photos, customer logos … well, you get the idea. Because the corners are rounded, you had to crop, scale and round the corners using Photoshop, then upload them into your website. Now, with Jcrop, you can not only crop and scale inside your CMS (like WordPress, for example), but apply templated rounded corners so you don’t have to even think about it anymore – the corners are rounded automatically – it’s super easy and your images are all consistent.

See the quick demo here:

See the full demo here:

From a technical standpoint, the solution is really simple and is integrated with the Jcrop plugin that we discussed previously. The good thing about our solution is that you can see the resulting image with rounded edges before you publish it.

So, here’s the technical solution and some script to play with:

We pass the rounded corners parameters to the script: the radius and the background color of the corners.

The script works as follows:

1. Creates a transparent image 3 times larger than the cropped image (which is ready by this time).
2. Draws 4 90°arches in each of the 4 corners of the image. Those arches serve to produce rounded corners.
3. Fills the rounded corners with the background color passed to the script as a parameter.
4. Reduces the image size 3 times – this helps achieve the anti-aliasing effect.
5. Places the cropped image onto the image the script created.

Another important aspect of the feature is the preview of the image with rounded corners which is available before the page is saved. Here’s how it was done:

1. On the admin panel page where you upload and crop the image we add a div. As the background for this div we use the dynamically generated image with rounded corners and transparent center (we use the image that we receive as a result of points 1-3 – see above).

2. Over this div we place the resulting cropped image. So, in reality we see 2 images at the same time: the cropped image with right angles and the transparent image with rounded corners over it. In other words, we save resources and time by using the mask. Here’s how the mask is created:

$im_temp = imagecreatetruecolor($thumb_width*3,$thumb_height*3);

$black = imagecolorallocate($im_temp, 0, 0, 0);

imagecolortransparent($im_temp, $black);

$bg = imagecolorallocate($im_temp, hexdec(substr($backcolor,0,2)),
hexdec(substr($backcolor,2,2)),hexdec(substr($backcolor,4,2)));

$arcsize = $corner_radius*6;

imagearc($im_temp, $corner_radius*3,
 $corner_radius*3, $arcsize, $arcsize, 180,270,$bg);

imagefilltoborder($im_temp,0,0,$bg,$bg);

imagearc($im_temp, ($thumb_width-$corner_radius)*3,
 $corner_radius*3, $arcsize, $arcsize, 270,360,$bg);

imagefilltoborder($im_temp,$thumb_width*3,0,$bg,$bg);

imagearc($im_temp, ($thumb_width-$corner_radius)*3,
 ($thumb_height-$corner_radius)*3, $arcsize, $arcsize, 0,90,$bg);

imagefilltoborder($im_temp,$thumb_width*3,$thumb_height*3,$bg,$bg);

imagearc($im_temp, $corner_radius*3, ($thumb_height-$corner_radius)*3,
 $arcsize, $arcsize, 90,180,$bg);

imagefilltoborder($im_temp,0,$thumb_height*3,$bg,$bg);

$im_temp1 = imagecreatetruecolor($thumb_width,$thumb_height);

$black1 = imagecolorallocate($im_temp1, 0, 0, 0);

imagecolortransparent($im_temp1, $black1);

imagecopyresampled($im_temp1, $im_temp, 0, 0, 0, 0,
 $thumb_width,$thumb_height,$thumb_width*3, $thumb_height*3);

header("Content-type: image/png");

imagepng($im_temp1);

imagedestroy($im_temp1);

imagedestroy($im_temp);

This is just one way of handling this particular issue (rounded images), and there are lots of other ways of formatting and templating how images appear by using Jcrop.

Do you have a clever script for handling images inside your CMS? We’d love to know about it!

A friend (to remain unnamed) recently relaunched his website. It looks cool, but they instantly lost years of deep search engine links and ranking, killed in-bound links from other websites, and generally blew away a lot of tasty, wholesome search engine goodness.

How did they do that?

They neglected one of the key elements of a redesign project – something called “redirects.”

The good news for you is that it is very easy to prevent this ranking loss, but it needs to be managed BEFORE you relaunch, then implemented simultaneously with the relaunch. You just need to talk with your web designer/developer about “301 redirects” before you start your redesign project. The designer should know what to do after that.

So, what is a “redirect” and why is it important for website relaunches?

A redirect simply tells a browser to go from an old page URL to a new page URL. This is important for website relaunches because your old website’s URLs (like http://www.workbox.com/clients.html) might either not exist or change (to something like http://www.workbox.com/clients) with new the website design or content management system. The difference between “/clients.html” and “/clients” might not look like much to you or me, but to a search engine or a web browser, it is as different as night and day.

Redirects are important because:

1. The search engines could take weeks or months to re-index your new pages so they appear in the search results. And, if you have important keywords in the old page’s content, it could be a long, long time before your organic ranking returns for those keywords.

2. If another website linked to your old URL, any visitor who clicks on the link will get an error code on your website rather than a page with your content. So, you made someone who was kind enough to link to your website, or yourself, look incompetent (visitors will assume either the website with the link or your website has a problem).

3. If you are a high-tech company, could be a big bummer for your street-cred, dude.

Technical aspects

Technically, a redirect is often called a “server-side 301 redirect.” We don’t need to go into the specifics because this is pretty basic stuff for good web developers (simple .htaccess edits) – you just need to be sure your web designer/developer understands and commits to implementing redirects for you.

Also, as usual, Google has all kinds of info on this:

http://www.google.com/support/webmasters/bin/answer.py?answer=93633

Practical aspects

The first thing you have to do is create a list of all your existing pages/URLs. Then, decide what new pages/URLs they should redirect to. Some people will use Google Webmaster Tools to see which pages are indexed and/or have inbound links and only redirect for those pages/URLs, particularly if they have a lot of pages. Then, rather than show a 404 error code when someone visits any other obsolete URL, show your sitemap or another page on your new website. Also, your developer might have a simple technique for managing redirects.

In any event, it is critical that you discuss redirects with your web designer (1) before you hire them (so you’re sure they understand it), and (2) during the redesign process so you’re sure your existing URLs are all cataloged and the redirects can be properly implemented.

Conclusion

If you are relaunching your website, it is critical to your SEO and online friends that you utilize redirects:

- They’re easy to do.

- Good web developers and designers can handle the whole process for you.

Best wishes,

Eric Weidner