insight

So long Internet Explorer 6, R.I.P.

by Christina Silva March 31, 2010

The “death” of IE 6, presented by Aten Design Group at a mock funeral earlier this month in Denver, Colorado, was indeed symbolic and a long time coming. After all, funerals are supposed to be a time of sorrow for the deceased; however in the case of IE 6, we could not be happier to see the proposed ending of this aged browser.

Ask any developer, designer or quality assurance professional about the animosity they have towards IE 6, and you will get an earful about the limitations and frustration they have had working firsthand with the browser. For instance, websites that are built using current web standards practically have to be customized to work in IE 6. Designers wanting to push the limits are, well, limited, as their concepts likely won’t transfer to IE 6 very well. Quality Assurance professionals required to test IE 6 know to add plenty of extra time to the QA process. Testing a website in IE 6 is almost equal to testing two sites instead of one, as a site in IE 6 will render completely differently than it will in FireFox, IE 8 or Safari. In IE 6, content is most often misaligned or pushed down to the bottom of the page, and then there’s the ubiquitous transparent .png issue, where images appear to be surrounded by a light blue halo.

So with all the problems experienced by web professionals, plus the availability and quality of more modern browsers (not to mention IE 6 is prone to hacks), why are users still navigating the web with a 9- year-old browser?  

A few things:

  • Older computers came with IE 6 pre-installed.
  • Users are comfortable using IE 6 and aren’t willing to change.
  • Employees have to use IE 6 at work and are prevented from upgrading or downloading another browser.
  • Clients require sites to render IE 6 due to the number of users.

As of February 2010, Net Marketshare shows IE 6 with a nearly 20% penetration rate, which is on the heels of the # 1 browser Internet Explorer 8. IE 6, however, is on a steady decline.  

For a browser that is loathed by many, reduced usage could not come at a better time. YouTube is dropping support for IE 6 on March 13; UK citizens are petitioning their government to cease using IE 6; and France and Germany are warning against using any version of Microsoft Internet Explorer, citing security vulnerabilities.

Goodbye IE 6, 9 years is a long time. Users owe it to themselves to upgrade.

Visual Arts Center: Brand Identity Development

by Springbox March 29, 2010
 Springbox recently had the opportunity to collaborate with the University of Texas at Austin’s Visual Arts Center. In the final stages of unveiling new facilities, the Visual Arts Center (VAC) was looking for a new brand identity system. Four Springbox teams presented logos and directions to the VAC. Here’s a rundown of the teams’ efforts. 
 

We were excited by the new space. The inspiration behind our logo was the concept of Open Source Art. By tearing down old walls, the Visual Arts Center has built a new forum for art expression, experimentation and collaboration — a place where students, faculty and visiting artists can pursue their passion for art. Our logo features simple letterforms, taking cues from the idea that anyone can participate in the artistic process. Doing so also enables the logo to frame different pieces of art, becoming a window through which the public can discover and appreciate art. A window that’s always changing, evolving — just like the VAC.
 
 
The client was passionate about drawing together a uniquely diverse arts community. Students, alumnae, faculty, guest artists and creative voices from around the world will converge at the Visual Arts Center, each bringing a unique perspective. We were inspired by the gallery — with its airy hall, collegial gathering area and inspiring exhibits — as the new mental and emotional center of a dynamic community. Suggesting experimentation and the intersection of ideas, we developed a mark that captures the energy of the space, and seems to call the viewer to action: Become part of this community. Fill this space with your ideas. See what happens.

 
In his SXSWi 2010 keynote address, Twitter CEO Evan Williams spoke of openness as “a survival technique” that extends beyond technology. We couldn’t agree more. Our concept for the UT VAC brand identity taps into the belief that openness fosters innovation, enabling ideas to evolve and thrive across disciplines and media. The team collaborated to create assets that brought this concept to life, from a tagline that functions as both statement and directive to logos that embody the notion of institution as incubator. Our efforts resulted in a collection of branded assets that convey to students, faculty and artists of every persuasion the fact that the UT VAC is not only open to ideas, but will help individuals open their ideas to limitless possibilities.

  
After taking the tour of the new VAC facility, we decided to focus on the one aspect of the architecture that stuck with us most, the barrel roll ceiling in the main gallery. By focusing on the visual structure of the Visual Arts Center, we were able to incorporate a goal of the VAC — to be a haven of inspiration — into both their brand and the building itself.  Turning the outline of the ceiling into linked VAC lettering, allowed us to define the space as somewhere students, faculty, artists and the community can come together and connect.

 

Pick Your News: Traditional or Bionic

by Christi Evans March 22, 2010

Traditional News: News from professional journalists without a personal or political slant (in theory). They gather the facts, think things through thoroughly, pass through editing and get multiple stamps of approval before delivering the message to the masses. Oh, and they make a living doing it.

Bionic News: It’s content crowdsourcing or sometimes disparagingly called content farming — news from both pros and non-professionals (er, “freelancers”) and sometimes with a slant. They are regular folks who are in the throes of what they are reporting, by choice: Often, they don’t get paid or get paid a menial sum and have to pay their own way into the very events they are covering. Why? Well, it’s exciting and you get your name out there while chalking up a little bit of experience.  Plus there’s the cred that comes with walking around at cool events looking like you are part of it. Okay, to be fair, some folks are simply passionate about reporting, whether it’s for a salary or for fun. But, with this so-called “bionic” news you get the grit of the story and LOTS of it quickly from all sorts of angles. 

Take AOL’s Seed for example, introduced to the masses at 2010 SXSW. They recruited writers who “can follow directions … and that was the criteria.” The goal is to supply mountains of relevant content fast and cheap. Now, submissions do get passed through AOL’s managing editor before making the final cut. So, it’s not to be discounted as gibberish by any stretch. It’s the real deal, just different — kind of like blogging but with an assignment and probably a few rules. Plus, it has been known to lead to higher profile, paid assignments —so maybe a foot in the door at a major corporation.

Another major player is Demand Media, which produces on average about 5K pieces of content a day via its Demand Studios. Demand is a little different in that they also foster crowdsourcing for third-party organizations. Even so, basically Seed and Demand are to content what Amazon’s Mechanical Turk is to IT developers. 

On the complete opposite end of the spectrum is a recent Reuters’ policy that prohibits their journalists from breaking news on Twitter, in an effort to avoid personal or political slants in the name of news. It must first be broken on the wire, and even then they should seek higher-up approval before tweeting — which btw, has to be on a professional account, separate from their personal account. While they recognize the inherent value of social media and immediate news, they also have a “hard-earned reputation” to maintain and understandably so.

Traditional and crowdsourced content are like night and day, really. I say there’s an absolute place for them both. For content providers, it's partly dependant on your objective, subject matter, audience and medium. And for the reader, well, do you want the bay full of oysters or just a pearl?  

 

Our Top Six SXSW Takeaways

by Springbox March 18, 2010

We had a great time at SXSW, and we turned six, too. Here are our top six takeaways from the conference. We were, in a word, inspired.

  1. Job one? Figure out what the “a-ha moment” is going to be for your users. Design for it. Remove barriers that might keep them from having it.
  2. Think game theory. Incorporate behavioral concepts like feedback, recognition, goals and community to up participation and make site experiences more engaging.
  3. Failure is temporary. There are infinite ways to fail, but inaction is the surest way. Tweak towards a better user experience if you have to. And if it doesn’t serve users, find out what does.
  4. Check into it. The real-time web and location based services (LBS) like Foursquare and Gowalla are creating more connections between life online and offline. Just don’t “check in” at home for the foreseeable future — privacy issues are something to watch.
  5. Inspired is the key word. We could see people’s minds ticking and ideas popping out all over the conference. A renewed focus on ways technology can make real life more effortless, meaningful and fun is driving the web forward at the speed of ideas. Let’s collaborate.
  6. Repeat traffic is good. We had so much fun turning six, we’re already looking forward to seven. Look for the Springbox SXSW party next year!

 

 

 

Utilizing a Single Smart Object Throughout Multiple PSDs

by Jonathan Bowden March 17, 2010

Working on web-based projects over the years, there have been many times that I wanted the capability of using a single linked file throughout multiple PSD documents, much in the same way Adobe's InDesign has this function for large multiple page documents. This would have saved untold hours of mundane and repetitive work, as a simple copy change such as "Main" to "Home" in a large site's navigation would require only one file to be changed, instead of every single page. Unfortunately though, this was merely a dream until a discovery I had a few weeks back.

Recently, a large non-profit came to Springbox to redesign their site, a digital treasure chest of information and opportunities on a specific topic affecting millions. As you might imagine, the breadth of the content on the site was huge, with a rough estimate of more than 300+ pages.

Having worked on a large redesign recently, I had a strong desire to find a new system to allow quick updates to commonly used elements throughout the site, such as the header, the footer, a general tout layout and the styling of a call-to-action arrow. As these elements are used virtually on every page — particularly with the arrow being used 10+ times on multiple pages, changing these individual items can literally take up hours of time — even on only a handful of pages.

At this point, I must admit my great love for a half-solve to this issue — the introduction of smart objects in Photoshop. If you have not worked with smart objects, or just want a great refresher on the subject, go check out Viget Lab's great article.

Moving along, I say that smart objects are half-solve because these embedded linked files are only applicable to one page. For example, make a custom arrow, turn it into a smart object, then make copies of this smart object and distribute them to the rest of the page. A few days later the client wants to change it, just go in, change the smart object once and it will automatically change this for all instances of the smart object on the rest of the page. Magic! I love smart objects. I really do. So now we just needed to expand this functionality to reach 300 or 5,100 pages.

At this point, I did the obvious: I fired up Google to see what the internets had to offer on the subject. I found others were searching for a solution as well. All of this searching led me to the work of Mike Hale and Jeff Transberry who wrote a script to do just what I was looking for.

So here's the new workflow for a sample project, Goodness Inc., after downloading the script and installing it via the Adobe Extension Manager:

Example Site Layout and Content



Step 1  

Design the homepage with folder groupings for Header, Hero Area, Footer, etc.




Step 2

Select the Header folder in the Photoshop layers palette and choose "Convert to Smart Object."




Step 3

Double click the icon for the Smart Object in the Layer Palette, thus opening up the Smart Object as a separate document.




Dialog Box for editing a Smart Object as a separate document:





Content of Header Smart Object:





Folder Panel content of Header Smart Object:



 

Step 4

Save the Smart Object in a new folder within the project file, which I label "Universal Elements" or whatever is easiest for you to distinguish.





Step 5

When I am ready to bring in the header for a new page on the site, I go to File --> Place --> then browse to the "Universal Elements" folder and select the file.

 

Step 6

I now open up the Window pallete options, and pull up the "Links" window. I see that this Smart Object is actually a linked object. From this "Links" window, I have a few options: I can refresh the panel to get the latest link info, re-link the object, or I can edit the original.

 



The Window > Links panel, as relative to the selected layer, in this case being the "Header" smart object.

 



I then repeat the process of placing the element in all pages that need it.

Follow-Up Steps

If a week later, the nav copy needs to change from "HOME" to "MAIN," I can now edit the single source file "Header.psd" located in the "Universal Elements" folder, edit the file and save it. Then I will need to open each unique page's PSD, open the links panel, and refresh the links to see that the new element is present. Lastly, I can now save all the updated jpegs.

Not a one-step magic fix, but a timesaver nonetheless.

I do hope that in CS5, Adobe steps up their game and makes an integrated solution for this, as well as a "Character / Paragraph Style  //  CSS for multiple PSD documents" solution, but that's a different conversation.

In the meantime, a huge thanks to the great work by Mike Hale and Jeff Transberry!! This has saved me hours and hours of frustrating, repetitive and mundane copy changes. Thanks guys!

And as always, if you find an even better way to use / tweak the insights I have shared here, I'd love to hear them!

Lastly, there are rumblings of Illustrator being able to do a lot of similar things (symbols, multiple art board documents, xml-driven text fields), some of which you might soon find in a follow-up article here on the Insight blog.

DISCLAIMER: I can only verify that this works on Macs, running CS4.


The way we see it, people who share insight with each other innovate, grow and succeed together.

Subscribe

Log in

The opinions contained in these pages do not necessarily reflect those of Springbox or its parent company, DG FastChannel.