Blog

While CSS3′s media queries are typically used in service for responsive design, we’ve identified another use for them: embeddable widgets.

It’s not uncommon for an organization to want to offer to its customers/supporters something they can quickly post onto their own websites, such as a poll or artwork announcing an upcoming event or current campaign/sale. In the case of images, the typical approach has been to offer several variants at some standard sizes and let the users choose which to embed. For more dynamic content, such as a poll or Twitter feed, users are typically presented with a fixed size.

Combining CSS3 media queries with iframes, however, gives you the ability to offer embeddable content that adapts its layout to the space given. You can offer one layout for columns only 150 pixels wide, one for 150-300 pixels, and another for when your widget is over 300 pixels wide, for example. Here’s how we’d recommend approaching this:

Design your formats and write your CSS with media queries

The first step, obviously, is to figure out how many different layouts you want to offer and what the “breakpoints” are for switching between them. How many there are and where those breakpoints will lie depends on the content you’re putting in your widget, but a good starting place for considering what sizes to target is the IAB Display Advertising Guidelines, which outline common Web ad sizes (and may give you a good sense of what people’s websites are likely to be able to accommodate).

Once you’ve got your layouts designed, code them out with media queries (here’s a quick introduction to writing media queries), setting your breakpoints appropriately.

Depending on how you’ve approached your designs, the iframe your content appears in may be able to always work at a fixed height, or might need the height to vary depending on the width. Either way is fine, though having to adjust the height makes things a little bit more complicated.

Include code for compatibility with Internet Explorer

CSS3 media queries are only supported by IE9 and above — and even IE9′s support is buggy. This normally isn’t an issue for responsive design, since the goal in that situation is to adjust to mobile devices (which aren’t running old versions of IE). But your iframe will be appearing on desktops, so you need to make sure your CSS is being loaded properly.

Fortunately, there’s respond.js, which you can embed into your page to ensure that old versions of IE will load the proper CSS. Respond.js is a small javascript that helps IE support media queries.

Unfortunately, though IE9 in theory supports responsive designs, it actually has problems with iframes that load external CSS files. So unless you’re including all your CSS inside a <style> tag in your page, you need to also get around this problem. As of this writing, the stock version of respond.js doesn’t affect IE9, so we’ve forked it and added some code specifically to account for this scenario. You can get our modified version of respond.js here.

Write the code for embedding your iframe

How complex this is depends on several factors, such as whether or not the height of your iframe needs to adapt to the width. If it doesn’t, you can simply offer your users something like this:

Where “http://www.yourwebsite.com/path/embed.html” is the location of the HTML file for your embed, and X is set to a fixed height you’ve planned for your layouts.

However, if you need to adjust the height based on the width, instead what you’ll want to do is write some javascript that dynamically adjusts the height of the iframe. It might look something like this:

You’d then put those lines of Javascript (adjusted for your own breakpoints and desired heights, of course) into a file on your webserver, probably in the same directory as your embed.html with a name like embed.js, and offer the following snippet to your users to put on their sites:

And there you have it! Provided your CSS media queries are well-formed, you’ve got the correct version of respond.js linked to from your embedded HTML page, and your embed code is error-free, you should now have a flexible widget that your advocates can put on their sites, and it will eat up as much horizontal real estate as allowed and the layout will adjust accordingly, even in IE.

Christopher Hertz, New Signature’s CEO, has been named the 2012 Small Business Person of the Year by the DC Chamber of Commerce.  The award is presented to the individual who embodies the entrepreneurial spirit, demonstrating characteristics such as civic community leadership, innovation in customer service, entrepreneurial spirit, outstanding contributions to the community, social responsibility or who have made a significant social and/or economic impact in the District of Columbia’s business community.

He received this prestigious honor at the Chamber’s Champions Small Business Awards held on Wednesday, May 16, 2012 at the Renaissance Washington Hotel.  Each year, the DC Chamber of Commerce recognizes the region’s most innovative and successful small businesses–and the people that support them– through the Chamber’s Champions Awards.

New Signature is one of many of the small businesses that make up the backbone of the American economy, employing more than half the country’s private work force, creating three out of every four jobs, generating and driving a majority of American innovations and increasing U.S. competitiveness. New Signature and other small businesses of Washington, DC are no exception. We have led the economic recovery of our city, and are propelling our city’s growth.

Many of our customers who were using Microsoft’s previous online hosting platform, BPOS, have recently transitioned to the new Office 365 platform and are extremely happy with the new set of capabilities.

One of the new features I was really looking forward to using when a client transitioned
from BPOS to Office 365 was the ability for external individuals to be able to access
SharePoint site collections.  This is great for a company in two ways:

1. They don’t have to take time away from their usual tasks to either contact IT
   support to create an account or to do it themselves
2. They don’t have to spend the money on an additional Office 365 license

All a company has to do is ask the external individual if they already have a Live ID –
including an MSN or Hotmail email account – and if not, just follow this link
to sign up for one:

https://accountservices.passport.net/ppnetworkhome.srf?lc=1033&mkt=EN-US

…and they will be able to authenticate with Office 365 site collections.

For customers who have just signed up for Office 365, this process works normally.
Unfortunately, when I tried to share out the site collections for a customer
who transitioned from BPOS things did not end up being that simple.  I
took care to follow the link below so that the site collections were set up
correctly in Office 365:

http://www.office.microsoft.com/en-us/sharepoint-online-enterprise-help/share-a-site-with-external-users-HA102476183.aspx

Upon clicking on Site Actions I was still unable to see the option for sharing the
site collection.  Perplexed, I did a little research and found out that
all existing BPOS SharePoint site collections were not transitioned from
SharePoint 2007 to SharePoint 2010 making the option to share the site
collections with external users impossible.  To remedy this I performed
the steps below to transform a client’s existing BPOS SharePoint site
collections into SharePoint 2010 site collections and invite external users.

Warning: Please make sure to contact the administrators of the site collections you wish
to change and warn them that the look will be different so they know to expect
it.

1. Open the SharePoint 2007 site you’d like to make the
   change on and click on Site Actions followed by Site Settings
2. Click on Visual Upgrade under Site Collection Administration
3. Click on the update all sites button
4. Once that’s done, the site will now look like a 2010 site and you can use the share
   site feature.

Armed with this information, you  can ensure that all transitioned organizations get to experience the full look, feel and features of SharePoint 2010.

As part of the sneak preview to their new website, New Signature produced a video for the Lowy Institute which debuted at their Annual Meeting cocktail event in Sydney. In addition to web design, the Lowy Institute approached New Signature requesting ideas for one of their most important annual events with their stakeholders, which was hosted by Lowy’s Director, Michael  Wesley. New Signature proposed creating a 2-3 minute animated video of their site which would build up excitement to Lowy’s new online presence, establishing themselves with full authority and character, as the brand evolves to a solid global name.

New Signature’s out-of-the-box solutions has helped different organizations strengthen their presence through a variety of channels, not just web design. As video continues be one of the most  influential channels of communication, we have expanded our portfolio to offer these services to our clientele with smart visuals that support their branding and messaging.

We are proud to add this video as part of New Signature’s growing portfolio, that will expand our creative offerings beyond website development,  packaging our abilities from web design to multimedia for purposes of promoting our client’s brand.

New Signature is excited to announce the Lowy Institute website redesign launch.

Ranked as Australia’s top think tank, the Institute provides high-quality research and distinctive perspectives on the trends shaping Australia and the world and fresh policy options on these questions. The Lowy Institute commissioned New Signature to create a website design that reflects their global reach.

Our team spent extensive time analyzing their current website, visitor analytics, and usage patterns. This work led to a series of strategic recommendations for the redesign project. All subsequent design and development effort took place with this larger strategic framework.

Three examples:

1. Like many think tanks, the Lowy Institute had been using a legacy “subject based” taxonomy to organize web content.  We recommended a revised classification structure that divided their publications into Issues, Regions, Experts, and Program.  The site navigation and search are designed for professional users to quickly “drill” to topics of interest.
2. The content is “interconnected” to allow for rapid transitions between topics. This encourages the user to explore the range of Lowy Institute publications.
3. The Lowy Institute covers a large geographical area with extensive research on the Asia Pacific region.  The redesigned site incorporates Google Translare for effortless translation of content into 16 Different languages.

About the Lowy Institute

The Lowy Institute is an independent, nonpartisan international policy think tank located in Sydney, Australia. The Institute hosts debates and discussions within Australia and internationally. The Institute’s vision is an open Australia, engaged with the world. Their work is inspired by the knowledge that Australia’s future depends on our capacity to understand, and respond to, a rapidly changing world. They know that Australian views and ideas can make a real contribution to dealing with global challenges.

The website can be viewed here: LowyInstitute.org

About New Signature

New Signature provides a range of Strategy, Design, and Development services.  Please contact us if you are interested in learning how we can work together.

New Signature is proud to announce another contribution to the Drupal community: addressfield_tokens. This module was designed to enhance the addressfield module by adding useful tokens and field formatters for addresses. It also integrates into webforms to provide address blocks on configurable survey forms.

Challenges with addressfield

The addressfield module provides an extremely useful field for attaching one or more addresses to any content type, and is fully internationalized. However, once an address is entered, it can be difficult to render the address in a sensible format.

When displaying a node, it can be useful to render only part of the address, such as the city and state, but ignore the rest, such as street and house number. When configuring an address field, you can’t tell it which components of the address will be important and which should be ignored. Furthermore, a format that uses commas to separate components should not include commas after components that happen to be empty.

When creating a CSV export file through the views_export module, it can be useful to include an entire address in a single column. However, the default field formatter inserts lots of markup. This markup can be stripped out, but that also removes all the whitespace between components of the address, making it hard to read.

When assembling text based on user input, it would be useful to be able to include the address they entered. For instance, consider the case of auto-responder emails when users register, donate or purchase an item. However, the addressfield module does not include any support for tokens, and since addresses are not entities themselves, the entity module can’t help either.

In addition, suppose you wish to sync user accounts into an external system such as MailChimp. The mailchimp module expects to receive user information in the form of tokens, and the Mailchimp API expects to receive addresses in a particular form, with two spaces between each component. However, it is not possible to do this out of the box without writing some custom connector code.

Because the addressfield module is fully internationalized, some of the components of the address have names that are a bit hard for an average content editor to interpret. For example, same of the components are named “Thoroughfare”, “Locality” and “Administrative Area”. While technically accurate, these names don’t convey much to a site administrator from the U.S., for example, who would prefer to see them listed as “Street 1”, “City” and “State”.

Introducing addressfield_tokens!

Tokens

The addressfield_tokens module was designed to assist in each of these cases. It automatically attaches tokens to every address in the system, as long as the address is attached to an entity that already has tokens. It creates tokens for each of the components of the address, and also provides a number of additional tokens for rendering a full address in a variety of handy formats. In addition, the names of each of the address component tokens can be customized, so site editors have an easier time figuring out what each token does.

Here is an example of all of the tokens provided by the addressfield_tokens module. The names in the first column have been customized for the US.

Field Formatters

The addressfield_tokens module also provides some new address field formatters that correspond to some of the extra tokens:

• City, State: Displays the city and state separated by commas, with the country appended if not the default country.
• One Line: Displays the address on a single line, with each component separated by commas. This field formatter is very convenient in CSV export views.
• Country: Displays the full name of the country, without any other components.
• State: Displays the full name of the state, without any other components. Since the addressfield typically stores a 2-letter state abbreviation in the database rather than the full name, this can be a useful way to get the full name.

Web Forms

In addition, the addressfield_tokens module provides a webform component, that adds a set of form fields for capturing an address to a webform survey. This makes it convenient to create forms that ask users for their address without the need to create each field separately. It also allows the address fields in the webform to be internationalized based on the user’s country, which would not be possible if each field were separate.

Give it a try!

Go to http://drupal.org/project/addressfield_tokens to try it out!

Recently, we ran into an unusual problem with provisioning Lync Online users in Office 365 — we’d enabled Lync for some users but those users were unable to login to Lync. Fortunately, the fix turned out to be rather simple (though not particularly obvious).

First, the problem: User accounts we’d provisioned for Lync couldn’t sign in, and received this “sign-in address not found” error from multiple computers on multiple networks:

In addition, we observed that users logged in via OWA had Lync services showing up but they weren’t available.

Just to make sure we’d done everything right, we double-checked that users were properly licensed to use Lync in the admin portal. Sure enough, everything appeared as it should:

The solution to this conundrum, as outlined to us by Microsoft Online Services, is to open an elevated command prompt on a machine with the latest Lync and Office365 pre-requisites installed and run “>ipconfig /flushdns” and “>ipconfig /registerdns” as shown below:

Next, open the Lync client and in Options > Personal > Advanced… manually input the appropriate connection settings for Lync for Office365:

After doing the above, you should be able to connect to Lync using the client you just configured. Once working, you can go back into the settings and reset it to simply connect automatically — it should continue to work. Shortly after taking these steps (5-10 minutes), Lync services should also be available in Outlook Web Access as well.

Hopefully this documentation will help others who run into similar issues.

New Signature is proud to announce our latest contributions to the Drupal community: Smart Trim and Facebook Boxes. Both are freely-available modules for Drupal 7 that implement very specific functionalities.

Smart Trim implements a new field formatter for textfields that improves upon Drupal’s core “summary or trimmed” format. After installing and enabling Smart Trim, you can choose to trim a text field by either character or word count, optionally append a suffix to indicate trimming occurred (e.g. “…”), and optionally include a “read more” link. Some of these features have been available in the Views module for some time, but never ported back over to Drupal’s core field system.

Facebook Boxes is a simple module that creates two highly-configurable blocks in Drupal, one for Facebook’s “Like Box” (the one that shows faces and feed items from a particular Facebook page) and one for Facebook’s “Recommendations” box. Both of these block support nearly all the options that can be set in for them in Facebook API, such as page URL, width and header.

We have more modules in the works as well, so stay tuned for more.

Judging has been completed for the 18th Annual Communicator Awards, and we are excited that nine websites New Signture produced on behalf of our amazing and visionary customers have won 2012 Communicator Awards. The Communicator Awards is the leading international awards program recognizing big ideas in marketing and communications. Founded nearly two decades ago, the Communicator Awards receives over 6,000 entries from companies and agencies of all sizes, making it one of the largest awards of its kind in the world.  The Communicator Awards honors work that transcends innovation and craft – work that made a lasting impact, providing an equal chance of winning to all entrants regardless of company or agency size and project budget.

1. Gold Award of Excellence: Homepage Design – Women for Women International’s Fall 2011 Match Campaign
2. Silver Award of Distinction: Charitable Organizations / Non-Profit – League of Women Voters
3. Silver Award of Distinction: Government – AFL-CIO Working for America Institute’s Trade Adjustment Assistance (funded by the U.S. Department of Labor)
4. Silver Award of Distinction: Education – Inside Higher Ed
5. Silver Award of Distinction: Marketing – Mobile Commons
6. Silver Award of Distinction: Telecommunications – Mobile Commons
7. Silver Award of Distinction: Activism – AFL-CIO’s Collective Bargaining Facts
8. Silver Award of Distinction: Events – American Association for the Advancement of Science’s Days of Molecular Medicine 2011
9. Silver Award of Distinction: Environmental Awareness – ioby