Blog Archives
-
Syndication
-
May 17, 2012
CSS Media Queries and Flexible Embeddable Widgets
By New Signature and Ben ByrneWhile 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:
1<iframe frameborder="0" height="X" src="http://www.yourwebsite.com/path/embed.html" width="100%"></iframe>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:
1
2
3
4
5
6
7
8
9
10
11document.write('<iframe src="http://www.yourwebsite.com/path/embed.html" width="100%" border="0" frameBorder="0" style="border:0;" id="the-embed-id"><' + '/iframe>');
the_iframe = document.getElementById("the-embed-id");
if (the_iframe.offsetWidth < 300) {
the_iframe.style.height = '600px';
} else if (the_iframe.offsetWidth < 400) {
the_iframe.style.height = '300px';
} else if (the_iframe.offsetWidth < 600) {
the_iframe.style.height = '80px';
} else {
the_iframe.style.height = '60px';
}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:
1<script type="text/javascript" src="http://www.yourwebsite.com/path/embed.js"></script>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.
-
May 10, 2012
New Signature Video Debuts at Annual Meeting Cocktail in Australia
By Tzeitel SorrosaAs 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.
-
May 9, 2012
New Signature Launches Strategic Website Redesign for The Lowy Institute
By Bryan HackettNew 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:
- 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.
- The content is “interconnected” to allow for rapid transitions between topics. This encourages the user to explore the range of Lowy Institute publications.
- 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.
-
May 4, 2012
Drupal module integrates addresses with tokens and webforms
By Andrew MarcusNew 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!
-
May 1, 2012
New Signature Releases Two New Drupal Modules
By New SignatureNew 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.
-
New Signature Wins Nine 2012 Communicator Awards!
By New Signature
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.- Gold Award of Excellence: Homepage Design – Women for Women International’s Fall 2011 Match Campaign
- Silver Award of Distinction: Charitable Organizations / Non-Profit – League of Women Voters
- Silver Award of Distinction: Government – AFL-CIO Working for America Institute’s Trade Adjustment Assistance (funded by the U.S. Department of Labor)
- Silver Award of Distinction: Education – Inside Higher Ed
- Silver Award of Distinction: Marketing – Mobile Commons
- Silver Award of Distinction: Telecommunications – Mobile Commons
- Silver Award of Distinction: Activism – AFL-CIO’s Collective Bargaining Facts
- Silver Award of Distinction: Events – American Association for the Advancement of Science’s Days of Molecular Medicine 2011
- Silver Award of Distinction: Environmental Awareness – ioby
-
April 30, 2012
Responsive Design Works for Email, Too!
By New Signature and Ben ByrneIn the past, accommodating different email systems has largely consisted of simply offering an HTML formatted message, and a “plain text” version of the message for those who can’t (or won’t) receive HTML emails.
But unlike those in the past, today’s mobile phones do actually support HTML-formatted messages. While best practices for email template design have dictated a narrower width than typically used for web pages (usually 600 pixels vs. 980), even this narrower approach is problematic for all but the largest mobile screens, leaving your users either looking at tiny text or having to scroll horizontally to see your text.
This is particularly important when you consider that the share of email read on a mobile device is now around 25% and growing (based on trends from a year ago). Fortunately, the same responsive design techniques used for making websites mobile-friendly can be used in HTML email templates! Though CSS support among email clients varies significantly, popular mobile email clients (like those for the iPhone, iPad and Android) correctly understand an interpret CSS3 media-queries.
Responsive design for email allows designers to develop templates for smaller sizes — we recommend a query to target anything smaller than 620 pixels wide (which works well if your “desktop” design is 600 pixels wide), and within that using percentages and max-widths to keep your layout and images behaving. Bumping up the tezt size for smaller screens is also a good idea.
Thus, your responsive email code might look something like this:
1
2
3
4
5@media only screen and (max-device-width: 620px) {
table[id="outer"] {
max-width: 600px;
width: 100%;
}img[id="header"] {
max-width: 600px;
width: 100%;
height: auto;
}td[class="content"] {
font-size: 18px;
}
}(Note that we’re using the technique pioneered by Campaign Monitor to get around an issue with Yahoo! Mail here)
You may have to spend some time carefully planning out your code and CSS to avoid conflicts between your media query and any inline CSS you might be using (a common practice when it comes to email, regrettably sometimes necessary), but it’s time worth spending! Your readers will be more likely to read your email when they don’t have to side-scroll or zoom in just see your message.
Some email service providers, such as MailChimp, officially and actively support media queries in their template system. Others may not formally support it, but unless their system actively strips out CSS it thinks is invalid, you should be able to take advantage of this advanced CSS approach to make your messages more user-friendly on mobile devices.
-
April 17, 2012
Separate Mobile Site or Responsive Design: How Do You Choose?
By Helen O'MearaSo your client comes to you for a website redesign, and hallelujah, they’ve seen where the market is going, and they want to make sure their new site is mobile friendly. You have several paths available to you, including building a separate mobile site or choosing a responsive design strategy. Each has its advantages and disadvantages. How do you choose?
Take a deep breath and set aside whatever personal preferences you may have developed. It’s time to take a look at the needs of the project and its end users.
Begin by Asking Questions
What are your users’ goals?
When someone visits your site, what are they looking for?
- Do they just want to pass the time?
- Are they doing research?
- Are they checking on the status of something?
- Do they have an urgent task to perform?
- Are they urgently looking up information?
The goals of your user should inform not only the design of your mobile site, but the design of your site overall.
What devices are they using?
- Who is your audience? Where are they located geographically? The distribution of phones in the United States will be different from Europe or Africa, and each of those regions is located on a different point in the smartphone adoption trend. (Europe is ahead of the US, Africa is behind.)
See Tomai T. Ahonen’s Communities Dominate blog for a detailed breakdown by geographical region.
- Check the site’s log files. Google Analytics logs which browsers have hit your site. From there, you can infer screen size and resolution. If you choose responsive design, this will help you establish the points where the layout of your content will change.
Regardless of your strategy, make sure you test your site on the devices your audience will be using!
The above graphic is from metaltoad.com.
- Pay attention to current sales trends and the state of the market. Yes, the mobile market is competitive and rapidly evolving. While there’s no way we can accurately predict the future, it’s still beneficial to keep an eye on what’s coming around the next bend in the road. One resource is Gartner Research.
Do you want to serve the user the exact same content in the mobile environment?
- Pros: don’t set up expectations in one environment that are not deliverable in another. As Jeremy Keith wrote in his Adactio blog,
“More and more people are using mobile devices as their primary means of accessing the web… They are looking for the same breadth and richness of experience that they’ve come to expect from the web on other devices. Hence the frustration with mobile-optimised sites that remove content that’s available on the desktop-optimised version.”
Be wary of making assumptions about your user’s context!
Assumption: You mobile user wants focused content, easily accessible, and has a bad internet connection.
Reality: All of your users want easily-accessible, focused content. All of them want content that downloads quickly. Some of them may have bad internet connections, but be wary of limiting the mobile experience based on your assumptions. Yes, someone browsing a restaurant website may just need the address for driving directions or the phone number to place a reservation. However, they could just as easily be sprawled on the couch at home, watching TV, with a speedy internet connection, looking for a great menu and ambiance for a Friday night date.
- Cons: Sometimes, there’s a lot of content, both to arrange for a small screen and for the user to download. Ask yourself, “Can some of the content can be left out of the mobile version, and if so, why not leave it out altogether?” If there is still a compelling argument for separate content, then you will probably gravitate towards a separate mobile site.
There are some great features available on mobile phones (GPS, taking photos, etc.). Why not take advantage of them?
Make Your Decision
When it comes down to choosing a mobile strategy, start at the beginning of the project, and make decisions based on conversations with the client and the needs of the end users. Choose the strategy that best meets their current situation and needs.
Addendum
Side note: Yes, there are mobile apps. No, they will not replace the need for a mobile-optimized version of your site. For one explanation why, check out Jason Grigsby’s Cloud Four blog. Another great resource is Luke Wroblewski’s Mobile First book, available from A Book Apart.
A final note: Sometimes, your client will not have the budget for a full-fledged responsive or mobile strategy – or sometimes they simply want improve their current site right now. As Aaron Stanush of Four Kitchens has said, the best thing you can do for any website to make it mobile friendly is to make it fast. You mobile users will love you for it, and the rest of your users will also benefit.
-
April 10, 2012
Three New Signature Websites Win Top Honors at the 16th Annual Webby Awards #Webbys
By New Signature
ioby, ThinkProgress, and the National Archives Transcription websites have been selected as Official Honorees of the 16th Annual Webby Awards. We are excited that these innovative websites we helped build for our customers received the Internet’s highest honor. This year the Webby Awards received nearly 10,000 entries from all 50 US states and over 60 countries, the Official Honoree distinction is awarded to only the very top of all work entered. The websites were honored in the following categories: ioby (Activism), ThinkProgress (Blog – Political), National Archives Transcription (Government).New Signature was thrilled to have the opportunity to assist the amazing team at the Center for American Progress and ThinkProgress in building the ThinkProgress website. The Center’s web technology team and online communications team produced an innovative design and we had the opportunity to bring our WordPress expertise to bear on some really interesting and challenging business requirements. A special thanks to the entire team at the Center that we worked with, and specifically to some of the key project leaders, including: Faiz Shakir, VP and Editor of Think Progress; George Estrada, VP for Technology; Harold Neal, Manager of Web Technologies; and Matt Pusateri, Art Director.
For the National Archives Transcription, New Signature teamed with Viderity and the phenomnal team at the U.S. National Archives and Records Administration (NARA) to help build this groundbreaking crowd sourcing platform that allows citizens contributors to help improve the accessibility of historical documentsand. As a special thanks to Rachel Everett, CEO of Viderity, and Sarah Araghi at NARA.
The Webby Awards is the leading international award honoring excellence on the Internet. Established in 1996 during the Web’s infancy, The Webbys is presented by The International Academy of Digital Arts and Sciences, which includes an Executive 1,000-member body of leading Web experts, business figures, luminaries, visionaries and creative celebrities, and Associate Members who are former Webby Award Winners and Nominees and other Internet professionals.
Winners are chosen by the International Academy of Digital Arts & Sciences a global organization whose newest members include CEO of Skype, Tony Bates, shft.com co-founder Adrian Grenier, CEO of Rovio Mikael Hed, and co-founder of Instagram Kevin Systrom, as well as director Darren Aronofsky, Martha Stewart, Huffington Post Media Group President Arianna Huffington, Twitter co-founder Biz Stone, musician David Bowie, Internet co-creator Vint Cerf, Virgin Group Chairman Richard Branson, and R/GA Chairman and CEO Bob Greenberg.
Recognition by the Webby Award puts these websites in the esteemed group of industry leaders and former winners such as Twitter, Google, eBay, Yahoo!, iTunes, Skype, FedEx, BBC News, CNN, The Guardian, The New York Times, Aol, Tumblr, Wikipedia, ESPN, Funny or Die, Comedy Central, PBS, The Huffington Post, the Sundance Channel, and The Onion.
-
Working America and League of Women Voters Websites Win IMA Best in Class Award
By New Signature
The Best in Class award is the highest honor bestowed by the Interactive Media Awards. Websites that win the Best in Class award represent the very best in design, execution and overall professionalism. In order to win this award level, the websites site had to successfully pass through the IMA’s comprehensive judging process, achieving highest marks in each judging criteria–an achievement only a fraction of sites in the IMA competition earn each year. The judging consisted of various criteria, including design, usability, innovation in technical features, standards compliance and content.The League of Women Voters and Working America websites both won an IMA Best in Class for the Advocacy category. The Interactive Media Awards are a highly sought-after prize, and these top awards from IMA are further demonstration of New Signature’s ability to create world-class websites and capitalize on our close working relationships with our clients. These awards further validate that New Signature is a leader in the interactive industry, able to effectively and efficiently develop powerful and appealing websites for our clients.
