Category: Tools

• Launch of New PHP Framework, Recess!

  Dec 29, 2008 by Clay Schossow | Filed in: New Media Campaigns, Recess PHP Framework, Technology Partner, Tools | Comments (0)

  We are very proud to announce that one of New Media's founding partners, Kris Jordan, has completed and launched a new PHP framework named Recess!  Kris has spent the past few months, much of it from the NMC office, developing the framework and preparing it for launch.  As a gift to PHP developers everywhere, Kris released the framework on Christmas.

  Recess succeeds where other PHP frameworks have failed.  Just about all other PHP frameworks have fallen behind, especially in the department of RESTful development -- Kris developed the framework with these shortcomings in mind.  He took inspiration from what Ruby on Rails and Django get right, what PHP5 allows, and what has been left out of other PHP frameworks.

  The team at NMC has high hopes for the framework and is dedicated to helping it succeed.  Our team of developers plans on rewriting our Content Management Software in the Recess framework, and we've already developed a couple of custom applications in the framework while we were beta testing it.

  The development team at NMC is well versed in many different frameworks, and we have confidence that Recess outperforms them all and is well on its way to becoming a mainstay in the realm of PHP frameworks.

  If you're looking for a powerful and modern PHP framework, I encourage you to register to preview Recess.  Congrats again to Kris on all of the work he put in and the success that he is already experiencing.

   

• App with a list of checkboxes? Skip repeated clicks with jQuery QuickCheck.

  Dec 2, 2008 by Joel Sutherland | Filed in: Tools, jQuery | Comments (4)

  Applications have moved to the browser and with that come lists of checkboxes.  It can be frustrating to click a list of checkboxes, so many applications like Gmail provide utilities to select items that meet certain criteria.  Solutions exist as browser plugins (ie. CheckBoxMate, Check All ), but these have not become mainstream.

  As developers, we can mimick the behavior of these browser plugins with jQuery. QuickCheck is a proof-of-concept jQuery plugin that makes it easier to manipulate lists of checkboxes. Try a demo here. QuickCheck adds the following behavior to checkboxes:

  1. When you mouse-down on a checkbox, keep the mouse pressed and drag the cursor over other checkboxes.
  2. The other checkboxes with either become checked or unchecked depending on the state of the first checkbox.

  QuickCheck makes it much easier to manipulate lists of html checkboxes. All you need to know to configure the plugin (besides how jQuery plugins work) is the following:

  $('.multi').quickcheck(); // Applies QuickCheck to checkboxes with class 'multi'
  $(':checkbox').quickcheck(); // Applies QuickCheck to all checkboxes
  

  The plugin also has a couple of settings that let you change its behavior:

  mode
  default: If the initial checkbox is unchecked, it will check that box and check all boxes that the mouse is dragged over. If the initial checkbox is checked, it will uncheck all boxes.
  "check": Regardless of the initial checkbox, the mouse will only check boxes it is dragged over.
  "uncheck": The mouse will only uncheck boxes it is dragged over.
  "toggle": The mouse will toggle all checkboxes it is dragged over.

  mouseup
  Once the mouse is released, the plugin needs to know that it should stop selecting checkboxes when the mouse is over them. Set this to the selector you want this mouseup event to be attached to. The default is "html" which likely never needs to change.

  To use the settings do the following when applying the plugin:

  $('.multi').quickcheck({mode: "check", mouseup: "html"});
  

  Drawbacks and Potential Improvements

  This technique has some obvious benefits but it also has some drawbacks. Here are some quick thoughts on them. Please add your own throughts in the comments.

  Drawbacks

  • The functionality is not immediately obvious to those used to typical checkbox behavior.
  • Unlike the browser plugin, there is not a visual box to show what region you have selected.
  • The mouse must move directly over the box for it to be activated. This makes it tough to select boxes that are not aligned.

  Potential Improvements

  • Keyboard Shortcuts: Hold a key while dragging to switch between modes to quickly select/deselect.
  • "Undo": If you drag over a checkbox a second time in the same run, return it to its original state.

  Thanks for looking over the plugin. Download a zip of the demo and plugin here. Be sure to leave a comment with your thoughts.

• Introducing FileEngine: An Easy to Use File Sharing Application

  Dec 1, 2008 by Josh Lockhart | Filed in: FileEngine, Technology Partner, Tools | Comments (0)

  We have previously posted on the importance of a web design team having access to programmers, as programmers can help the team design for the web and navigate obstacles when they arise.  We recently had a relevant situation popup, as our team of developers needed to create a custom solution for one of our web design clients.
  
  One of our largest and favorite clients, the National College Advising Corps, needed a way to streamline the process of sharing resources among different advisers across the nation.  Knowing that the core of our team consists of technologists and that we work as a web development partner for advertising agencies, NCAC came to us to bring their goal to fruition.
  
  The Advising Corps needed to enable its college advisers to find and share resources with other Advising Corps members from a national network of college institutions - this system would streamline the process of resource sharing and help advisers get relevant documents that their peers had already created.
  
  After gathering the system requirements presented by the Advising Corps, I worked with the NMC team to devise the best plan of action. We wanted to provide an effective file sharing system with a powerful built-in search engine. However, it was imperative that this power be contained within a simple, user-friendly interface - after all, we were trying to make the advisers' jobs easier, not more cumbersome. The result: a powerful yet easy to use file sharing application that we like to call FileEngine.
  
  FileEngine allows users to share, search for, and download resources. The FileEngine interface is clean and simple. Resources are easily identified by common file icons for images, audio, video, Microsoft Office documents, and more.
  
  While at its heart, FileEngine is a file sharing application, it has many advanced features that make it intuitive and fun to use.  FileEngine also incorporates a powerful search engine built upon an enterprise-level and open-source Apache Lucene library. This means users can search for resources with many of the same advanced queries accepted by Google. Users can also search for resources using a tag-based taxonomy.
  
  Users are also given their own member profile pages. Profile pages show information about each user and list the files each user has shared. User profiles are a great way for the Advising Corps advisers to learn more about and contact their fellow advisers from other institutions.
  
  FileEngine also exposes many helpful controls to the administrator of Advising Corps' FileEngine account. Administrators can determine the maximum allowable size of uploaded files, and they can choose to receive email notifications of new user registrations and new file uploads.
  
  We are excited about our latest accomplishment, and we will soon expand FileEngine into a full-fledged file sharing platform.  For now, you can sign up for a free beta account of FileEngine and we will give your organization an account to try out and provide us feedback on.  Keep an eye on our blog for more information about this upcoming venture.

• Troubleshooting large vendors

  Nov 24, 2008 by Josh Lockhart | Filed in: Clients, New Media Campaigns, Tools | Comments (0)

  We recently launched http://trailwear.saranac.com and http://schultzanddooleyonline.com for Saranac Beer. Both websites are custom Shopify ecommerce stores. After two weeks of successful store operation, however, shoppers reported that both Shopify-driven stores were suddenly inaccessible in Internet Explorer 6 and Internet Explorer7. Until this point, both stores operated and displayed perfectly in all major browsers including Internet Explorer 6, Internet Explorer 7, Firefox, and Safari.

  We first triple-checked our own code, and we concluded that nothing was wrong with our Shopify template's HTML or CSS. Next, we browsed the official Shopify forums. According to recent forum posts, Shopify performed maintenance on their web and statistics servers the previous day to optimze their servers before the expected holiday rush. These changes unexpectedly interrupted many customers' Shopify stores the following day. We emailed the Shopify technical support team alerting them of our own situation, and they confirmed our issue was likely due to the maintenance issues and that they would correct the issue within two or three hours.

  Several hours passed, and our client's two Shopify stores were still inaccessible in IE6 and IE7. We emailed Shopify technical support once more alerting them that our issue persisted, even after they had fixed the previous day's server issues. Their response: our templates may be requesting a resource that did not exist. But wouldn't this return an HTTP 404 Not Found error code? We again checked our template's HTML and CSS calls for non-existant resources, and we were confident this was not the issue. Our HTML and CSS were fine. After all, the two stores were working perfectly for two weeks before this issue arose.

  We knew it was not an HTML or CSS issue. We knew the error was an HTTP 406 Unacceptable error (when a web browser receives the content but does not recognize the content). This led us to believe the content returned by Shopify did not have the correct mime-type. We searched through our HTML and CSS once more until we found the resource in question.

  We referenced a file called "csshover.htc" in our IE6-only CSS stylesheet to enable the :hover psuedo-selector for all DOM elements in IE6; by default, IE6 only recognizes the :hover psuedo-selector on <a> elements. Many web developers use the "csshover.htc" technique to enable semantically correct dropdown CSS menus in IE6. Shopify's nginx web server served the "csshover.htc" file with the "www/unknown" mime-type causing IE6 and IE7 to diplay the 406 error. Instead, Shopify's web servers should serve ".htc" files with the "text/x-component" mime-type.

  A quick Google search found http://support.microsoft.com/kb/306231. This URI provided the solution for this issue. We emailed this solution to Shopify and are awaiting their official response.

  This brief case study demonstrates the depth of our technical expertise and our desire to provide detail-oriented services to our clients. We also try our best to find answers to and provide proactive solutions for the problems we face, even if the problems are caused by large and reputable vendors like Shopify that we have come to use and trust for our day-to-day needs.

  Please note that this case study is not a negative criticism of Shopify. Instead, this case study is a critical analysis of a large vendor's technical issue that we experienced and the proactive process we took to solve the problem. Shopify's customer support is top-notch. All of our support emails were answered within 15 minutes, and Shopify's designers and engineers have been alerted of this issue. We stand by Shopify's steller service and support, and we will continue to use them for our future ecommerce needs.

• Gmail's New Default Theme is a Step Backwards for Usability

  Nov 20, 2008 by Joel Sutherland | Filed in: Design, Tools | Comments (22)

  This week, Google has been rolling out a new theming feature into Gmail.  This is likely a welcome and overdue addition for many people who didn't like the default look of Gmail. Unfortuately for everyone else, along with the new feature, users are automatically updated to a new 'Default' theme for Gmail. This has happened in the past, but for the first time, this default appearance change is a step back for usability.

  Fortunately, the new theme selector allows us to select the 'Classic' theme which returns Gmail to its previous appearance.  With this ability to switch between the new 'Default' and the previous 'Classic' we can look at some specific ways that 'Default' is less usable than 'Classic.'

  Contrast is Reduced on the Important, Increased on the Unimportant

  Menu Text and Content Borders

  In the 'Classic' theme, text is darker and stands out more against the white background.  Additionally the border that runs around the body of the page is lighter.  It does its job, separating the dynamic content of the view from the static menus and gets out of the way.  Since this border isn't directly useful, it should be subtle, deferring attention the content.

  

   

  Email Listing Text

  Here the text has been changed from black to gray and the background has changed to a gray as well.  If we use a contrast calculator, we can objectively compare this change.  From the 'Classic' to 'Default' themes, the foreground to background brightness difference and the foreground to background color difference is reduced by 28%!
  

  

   

  By default, Google is pushing people to a new theme with much worse usability.  The contrast of interface elements has increased while the contrast of text has been reduced by over 1/4. It is good that gmail allows users to return to the classic theme, but it should not be necessary.  The new 'Default' theme should be opt-in instead of opt-out because of its reduced usability.

  Update: (11/25/08)

  Kevin Albrecht has created a Greasemonkey script to force the listing text to black.  To see screenshots of the change and download the script, head over to his blog.

• Great Email Customer Support from Campaign Monitor

  Oct 23, 2008 by Clay Schossow | Filed in: Tools | Comments (1)

  As a thank you to companies that go above and beyond the call of duty in customer support, we like to give them a shout out on our blog.  Previously, we highlighted Wufoo's personalized thank you cards.  Now, another company has joined their ranks as customer service rock-stars. Campaign Monitor majorly helped us out the other day when we were blasting out an email for one of our clients.

  We've always been a big fan of Campaign Monitor and their email marketing product; we previously included them in our list of tools we use to build successful websites.  The other day, I was having trouble importing a list of contacts for the client, even though I was pretty sure that I had formatted it correctly.  I emailed the support team at Campaign Monitor, expecting to get some generalist advice on how to format and try again.  Instead, I got an extremely friendly email and a completely reformatted list.  That's right, their friendly customer service rep, Diana Potter, actually went into my CSV file, did some reformating and sent it back to me along with this note:

  "After switching that the file was still having problems, I think that's due to the handful of names with first and last comma separated and such. I went ahead and cleaned up your files, removing the names with associated email addresses, and converted it to a .csv file. It should import fine now but let me know if you're still having any problems."
  

  How awesome! She saved me the time of having to figure out the error and reformat the list, and it allowed our client's e-mail blast to get out on time.  There was no extra charge at all, they just wanted to make sure they got it fixed; maybe I was so happy because this philosophy reminds me of our no hourly fee approach to customer service.  No matter what the reason, it made my day and I just had to thank them in a public way.  Anyone else have stories of companies going above and beyond the call of duty to keep you happy and your business rolling along?

• Single-Line vs. Multi-Line CSS: A Tool to End the Debate

  Oct 10, 2008 by Joel Sutherland | Filed in: Tools | Comments (2)

  Quicklink: Open up the css style converter here.

  An interesting divide exists among web designers, one that is rarely commented on. When coding CSS, do you put your properties on a single line or across multiple lines? If you don't know what the difference is, here is a quick example:

  Multi-Line

  #wrapper {
  width:800px; 
  margin:0 auto;
  }
  
  #header {
  height:100px; 
  position:relative;
  }
  
  #feature .post {
  width:490px;
  float:left;
  }
  
  #feature .link {
  width:195px; 
  display:inline; 
  margin:0 10px 0 0;
  float:right;
  }

  Single Line

  #wrapper            {width:800px; margin:0 auto;}
  #header             {height:100px; position:relative;}
  #feature .post      {width:490px; float:left;}
  #feature .link      {width:195px; display:inline; float:right;}

  The benefits to selecting one over the other may not be immediately obvious. Generally when writing code of any kind, it is best to optimize your code for readability as opposed to writing speed. This makes your code more understandable to others (and yourself) when reviewed. CSS is no different.

  Which method is more readable?

  The answer is that it depends. When using the more popular multi-line format, it is much easier to find individual properties. This is especially true when you stick to a declaration ordering convention. Using the single-line format, it is much easier to find selectors as your file is much more vertically compact. I prefer the single-line format as I can return to a stylesheet in the future and quickly figure out where to make changes. You can look at the selectors quickly to understand the structure of your document.

  Obviously there are a number of varying opinions on the subject. Here is a list of links to people arguing for one format or another:

  Ordered List: Single Line CSS adii: Horizontal or Vertical Time Wasting? Stack Overflow: CSS editor that expands declarations Sugarenia: Single-line or multi-line CSS? Matt Wilcox: Organising CSS, revisited

  Superfluous Banter: Regex Patters for Single Line CSS CSS Vault: Selection Made Simple Jens Meiert: CSS Rules for Organization Designer Mojo: Single Line CSS Monday By Noon: CSS Organization Methods

  If you and your collaborators can't decide on a common style, I've got a tool to make your life a lot easier. It parses and converts css files between the two formats. It isn't a CSS Compressor, instead it is designed to make your life easier if you write css. Try it out and let me know if you think it needs any tweaks in the comments.

  Open up the css style converter.

• McDonald's Embraces Twitter by Agressively Following Others

  Oct 9, 2008 by Joel Sutherland | Filed in: Social Media, Tools, Web Marketing | Comments (0)

  

  This morning I stopped by McDonald's for a cup of coffee and realized they had started their Monopoly game again.  I've always had a gripe with the game so this morning I posted the following to twitter:

  JoelSutherland McDonald's Monopoly needs to incorporate houses and hotels before I get interested.

  Not long after, I gained a new follower on twitter, MONOPOLYatMcD. If you compare the search results for McDonald's Monopoly, to those the game is following, you can see what is happening.

  Agressively following those that talk about your company or product is a great strategy for using twitter. It puts you in direct contact with those that care about what you do.  Additionally, those on twitter are early adopters.  They'll tell you if you're headed in the right direction.

  Following those that talk about you seems too important to leave to chance.  Is there a service that uses the twitter API that keeps track of those that comment using a particular phrase?  If so, leave it in the comments.

• Tough Times Squeezing Your Marketing Budget? Invest Online

  Sep 30, 2008 by Clay Schossow | Filed in: Blogging, Online Advertising, Tools, Web Marketing | Comments (4)

  It's no secret that the economy is currently going through a tough time.  As your clients pockets grow shallower, your marketing budget tends to shrink. Tough times present the ultimate business conundrum: you need to build new leads but you have less money to spend on marketing.  This is not the time to cut back on marketing.  According to John A. Quelch in a recent HBS Newsletter:

  "It is well documented that brands that increase advertising during a recession, when competitors are cutting back, can improve market share and return on investment at lower cost than during good economic times."

  Why marketing online is the solution.

  The key to surviving tough times is improving your marketing efficiency. While it is not a black box you can throw money into and expect great results, the web is a proven marketing medium that can generate phenomenal returns.  Successful online marketing campaigns take time, effort, and creativity; however, these efforts can certainly provide a substantial ROI when compared to pricey traditional campaigns.

  Social media is completely assimilated into the mainstream market, making this is the best time ever to market online.  Through services like Twitter (follow me!), Facebook, LinkedIn, and others, marketers have the opportunity to engage consumers in a dynamic conversation and keep them up to date on the company's latest news.  Furthermore, all of these social media techniques are completely free to use and leverage.  By combining these free methods with pay services such as website design, Pay Per Click advertising, banner ads, and more, you can form a formidable campaign that is far less expensive than many traditional campaigns.

  Longevity and accurate tracking makes online marketing efficient.

  One of the best features of putting your marketing dollars online is the amount of time you extend their life.  Rather than spending money on a print campaign that dies after a month, your online presence can hold strong for multiple years and be the face of your organization.  Furthermore by using a Content Management System, you can constantly refresh your campaign with new content to engage and inform your audience.  Also, that new content will be informed by actual data gathered from the site rather than just "gut feelings" on how the campaign is going.  Online campaigns make it easier to track results,scale a campaign over time, and engage your entire team by keeping them informed with their successes and failures.

  The world is moving online (just ask the newspaper industry), there's no reason that your business should fall behind, especially when moving online is the more economical decision for your marketing dollars. In any marketing adventure, but especially one during a recession, there are pitfalls to avoid when spending marketing dollars online:

  • Closely monitor your Google Adwords campaigns.  Those monthly bills can rack up quickly and can have a low conversion rate, if not closely watched.
  • Install a powerful statistics tool, such as Google Analytics.  We install Google Analytics on every one of our sites, so our clients can track their site's success and make tweaks as necessary through the Content Management Software. This is the best way to ensure a strong marketing ROI.
  • Do strong due diligence when searching for a web design firm.  Too often we see organizations spend 2-3x what they would have spent with us, because they didn't really shop around and they just went with the first firm they came across.  There are good deals for site development and online campaigns out there, be sure to get a good feel for each firm's value and values.
  • Don't approach your site with an "if we build it, they will come" philosophy.  You have to support it by placing your domain on all of your marketing collaterals, engaging in social networks, placing some ads, and more.  The reverse of this is also true; if you're spending time and money to drive people to your site it's essential to remember the importance of a well designed website, so your money doesn't go to waste.

  If there's one thing I could recommend to any company, big or small, during the economic downturn, it's to use this situation as an opportunity to efficiently spend your marketing dollars. Get in touch with some web firms and get a proposal for what they recommend you doing at a specific budget - I think you'll be blown away by how  impactful an online marketing campaign can be, while still costing significantly less than other forms of advertising.

• NY Times Interactive Debate Viewer

  Sep 28, 2008 by Clay Schossow | Filed in: Politics, Tools | Comments (0)

  This is just a quick post to point out one of our team's favorite online tools, the NY Times Interactive debate viewer.  As a company that has a specialty as campaign website designers, you better believe that we're real dorks when there's a cool nexus of politics and technology.  The tool is very cool and useful - the video of the debate neatly plays in a Flash video player, while the margin of the screen is filled with the transcript.  The transcript automatically scrolls down as the candidates speak.  Also, you can search the transcript for certain phrases and words, so you can instantly hop to a section on the Economy or Afghanistan...pretty cool!

  
  
  The New York Times is one of those companies that always manages to stay ahead of the curve in terms of technology, as is demonstrated by the intuitive layout, attractive design, and variety of features on their website.
  
  
  We love to give credit where credit is due and just wanted to share this with everyone out and to encourage you to check it out.  Flash video has become a mainstay in site designs, especially political website designs, but this feature is still leaps and bounds ahead of where anyone else is.  

• Pages:
• 1
• 2
• Next >