Digital Signage: Spotlight On

You may have noticed walking throughout campus recently and noticed the digital signs have a new content on it, a highlighted faculty member. We started rolling out what we are calling “Spotlight On” slowly throughout the signs on campus.

What is Spotlight on?

Every day our faculty are discovering new things, helping the community and making an impact on the world. We know this because we spread it through press releases and news items. To us this used to be great but it wasn’t good enough, only a small amount of our campus community read the releases or visit these random websites. Our solution is to bring these faculty members to the masses.

Since the signs are already in high traffic areas it is almost the perfect spot to make campus aware of their accomplishments. Above is an actual sign and what the spotlight looks like. It features a photo, impacting statement, name, title and a call to action to get more information. The goal was to make the signs impact the person walking by it enough to take a second and read or at least recognize the faculty member they may see walking around campus every day.

How to get spotlighted?

Are you doing something great or know someone that is on campus? Just send us an email, web@wayne.edu and we can get the ball rolling. We have found most spotlighted faculty have been nominated by others on campus. This is probably the best way to get someone highlighted.

We aren’t limiting the spotlight to faculty members only, we are open to highlighting anyone in the campus community who is making an impact on the world. Students and alumni are the next group to be featured.

What is that silly looking image?

That square image is a QR code.

QR code (short for Quick Response) is a specific matrix barcode (or two-dimensional code), readable by dedicated QR barcode readers and camera phones. The code consists of black modules arranged in a square pattern on a white background. The information encoded can be text, URL or other data.

The barcode can be scanned with a number of mobile barcode scanners, the most popular is Google Goggles. Once scanned the codes we are producing are combine with a “go.wayne.edu” URL (more on that later) which take the user to the faculty member’s profile. The plan down the road is to direct the user to a video or audio interview with the faculty member to give them even more of a reason to scan or type in the URL. It is our way of yet again extending the content beyond its original intent.

Wayne State University digital signage – Phase 2

We have made a lot of progress since our “First Look” at the implementation of the digital signage all over Wayne State’s campus. Wayne State now has more than 25 digital signs mounted on walls in at least 16 buildings on campus.  So far the feedback has been all positive and we are implementing different templates to fit the different need of each individual sign.

From our feedback, we recognized that weather, date and time should be on every sign somewhere within the display’s real estate.  We have fed in Wayne State’s main news and events to the main WSU template via RSS.  The last feature on the template we now have up and running is a place to promote Wayne State campus wide events and campaigns.

Check out the new design below:

WSU Main 1UP Digital Design Template

The latest template we’ve completed is for the School of Business on a 2 x 2 digital television array.  It also successfully feeds an HD steam of CNN and displays main campus and School of Business news and events.  This set of 4 displays is broken up into 4 sections, containing the elements to keep a consistent look across the screens.

Here is the result:

WSU School of Business 2 x 2 display

The next steps after implementing the remaining main signage templates is to explore how to make our signs much more dynamic.  We hope the newest designs are aesthetically pleasing to the eye and bring pertinent information to the campus wide community!

Realign: One Minute Scholar

Due to circumstances beyond our control the previous site named One Minute Professor website is now called One Minute Scholar.  We gave the site a visual overhaul, changing the background and elements on the site to a more classroom/lab look to better fit the content.

The premise is the same, our own Wayne State University scientific gurus explaining some of the world’s greatest mysteries, with a one minute video.  Some of the topics covered are “Brain Freeze”,  static electricity and how a taser gun works.  Our professors are hard at work solving more mysteries, one minute at a time with more to come.

The videos are supposed to be quirky and interesting to junior high and high school students. They are all hosted on YouTube but pulled into the site as a continuous series. Most of the videos are inspired by user generated topic suggestions so we wanted to ensure the suggest button has enough prominence.

Don’t forget to Suggest A Topic and check out the new look at http://wayne.edu/oneminutescholar/.

Wayne State University digital signage – First look

Digital Signage WireframeRecently, marketing was put in charge of designing and programming the templates of what will be displayed on the TV monitors all over campus. We “whiteboard wireframed” some initial ideas and then started implementing some initial basic templates for the signs.   We have met with the campus community, who will be hosting the signs and took notes on what they thought was important to display on the various digital signs on campus.

Here is the most requested things to display, from the campus community so far:  events, news, promote featured events with imagery, live TV, photo galleries, weather and date/time.  We have made some quick templates to play with spacing and size of all the elements. As we progress further with the design and structure, we will keep you updated as we roll out the new templates.

Digital Signage News/EventsDigital Signage Events only

Let us know if you have any other ideas of what you would like to see on the digital signage by commenting in the reply box.

CSS3: Why wait?

So I got the opportunity to go to An Event Apart in Boston, which they coin as “Not your father’s web design conference”. This is true, it was a top-notch experience in “The Walking City” and proved to be very educational. The two-day event took place in one room, on one track and had some of the most brilliant designers, writers and developers on the web.

Every presenter was incredible to listen to and there was a general theme going on with all the presenters that spoke. CSS3, HTML5, web standards and user experience resounded loudly in almost every presentation, proving the web is evolving and changing rapidly. One mind-blowing stat by Luke Wroblewski was that there was a 4,932% increase, in AT&T mobile data traffic in the last 3 years, showing the compelling evidence that the web is moving towards mobile at an incredible pace.

Andy Clarke the “ambassador for CSS” gave a compelling presentation on CSS3 and how we can use it today with what he calls “progressive enrichment”, which is treating design elements as visual rewards for people whose browsers that can support them. He feels that web designs having to look the same in every browser is old school and we should design to the browsers capabilities based on when they are released and who made them.

I agree and think there is no need to make your websites pixel perfect in Internet Explorer anymore. Check out http://dowebsitesneedtolookexactlythesameineverybrowser.com in different browsers to see an example of “progressive enrichment” in action with the use of CSS3.

CSS3 Chart 1 CSS3 Chart 2 CSS3 Chart 3

Fortunately in the future, Microsoft has made promises to make their Explorer 9 browser more standard. Take a IE9 Test Drive – http://ie.microsoft.com/testdrive/.

Things we left on the moonFinally, my favorite speaker was Dan Cederholm, founder of SimpleBits a web designer and author based in Salem, Massachusetts. I liked his “The CSS3 Experience” presentation which was a themed by a Things Left on the Moon CSS3 showcase website, showing examples of real life uses of the CSS3 standard.  He emphasizes the use of CSS3 can be used to enhance websites in modern browsers that take advantage of it. From his showcase he went over many in depth examples of how to use CSS3 properties, transforms and animations.

A very simple example of using CSS3 today is using the RGBA property. It allows you to specify the color and the opacity but, you must have a back-up color specified when using RGBA, for non-standard browsers. As long as you put a preceding color element before the RGBA version for now, it will work in non-standard browsers and just show a solid color.  In the code below, you will notice the last value of .7, which represents the alpha level of the menu element.
Menu RGBA example

#nav li a {
   color: #ccc;
   color: rgba(255,255,255,.7);
}

Please check out the Things Left on the Moon showcase website, there are many great examples of CSS3 properties like border-radius, text-shadow, box-shadow, opacity, RGBA, and multiple backgrounds.

The key is to make use of CSS3 to enrich the users experience, in a subtle and functional manner.  CSS transforms, transitions, and animations will be supported in the next version of Firefox and hopefully Explorer 9 will come aboard, with full support.
Don’t wait, start using CSS3 now!

Accessible building entrance icons added to the flash campus map

To increase awareness of all our accessible entrances on campus, we have implemented some new functionality to our campus map. We have added a toggle switch on the bottom-right side of the map to switch to an accessible entrances view, showing where the entrances are on each building.  There are two new icons in the map key to show Accessible Entrances with and without automatic doors.

Campus Map Togglecampus-map-ada

We have also provided a printable PDF version of the map that you can get from our printable maps page. Or try it out live at campusmap.wayne.edu.

Testing HTML emails efficiently as possible

Recently, I talked about the pros and cons of sending HTML vs Text emails to your clients in this article “Filling your inboxes with visual appealing HTML emails”. Since HTML Emails are becoming increasingly more popular to send here at Wayne State, we are trying to come up with a system that makes this painstakingly clumsy process as streamlined as possible.

Third party testing

If you have one main template and don’t have to create new ones often, a pay email testing service might be for you. For a small fee you can use one of these services to send your HTML code to and then it will produce screenshots of how the email looks in the most popular email clients. In addition, some of these services will also test how your email will react with spam filters.

Pay for testing resources

screenshot inbox inspectorlitmus email screenshotscampaign monitor email screenshots

Testing in house

If you don’t have the resources or funding to go with one of the automated services, you can go the “old fashioned way” and set up a series of test email accounts on all the popular email clients. To begin with, set up accounts on Hotmail, Yahoo, Google, AOL and of course, Outlook 2000, 2003, 2007 and Outlook Express. Don’t forget to test Apple Mail 2 and 3 and to test on the iPhone as well. This will get you tested in over 80% of all the popular email clients, according to Campaign Monitor as of June 2009, in their article Email client popularity.

Email-client-popularity

Don’t forget to test email in popular mobile environments as well, iPhone for example is now more popular than gmail in viewing email. Once you establish some main HTML email templates the testing will get easier. When designing email templates, keep it simple. Trying too much, is one of the biggest mistakes designers do when creating HTML emails.

Here are some more good resources for getting a professional and cross-platform HTML email below. Remember to test, test, test!

Free HTML testing resources

Other resources and HTML email information

Filling your inboxes with visual appealing HTML emails

email-htmlemail-txt

Within the last year we have seen a dramatic increase for the demand of HTML emails.  To keep up with the demand we have created some default templates for schools and colleges, as well as a very basic template to keep the Wayne State University brand uniform across campus.

There are two basic methods on sending email to your clients: HTML version and text only version.  There are various advantages to each and it seems the HTML version is more popular based on demand.

HTML Email

Advantages:
Allows you to brand you emails, with the use of colors, logos and stucture
Visually appealing and you can get your point across with images
You can track your your email campaigns and see their effectiveness
Better readability and people can skim over the content to get to the point fast

Disadvantages:
Each email client renders HTML coding differently, making it more challenging to design uniform looking campaigns, across all email software and applications
Can be more complicated to design and write for to avoid anti-spam filters
Increased chance someone won’t open the HTML email, because they are scared of getting a virus

Text Email

Advantages:
Concise and simple to produce
Looks more personal and will render correctly across all email clients increasing readability
Less problems with spam-filters and delivery

Disadvantages:
No Creativity present creating a flat “brandless” email
People more apt to delete or not read the whole message if in text format
Unable to track the campaign and analyze the open rates

There is alot of parameters to examine when choosing what format to create your email messages in. Wayne State University’s email client, Wayne Connect sends out an alternative text version of the HTML email as well, increasing the probability the client will get the message in their preferred format.

We intend on tracking some of these HTML email messages in the future to see how effective these campaigns have been. In the meantime, we will deliver what seems to be in high demand these days, which is  creating the emails in HTML format to appease our visual nature.

Flash is your friend – An introductory level guide for getting acquainted with Flash

I know a lot of people are dying to learn Flash, but feel intimidated by the program, so I decided to do an introductory level workshop going over Flash in general and a couple very basic tutorials. Our marketing department has been doing these “crossover” type workshops now for over a month and I find them very useful. I think it improves team-building and gives you a view into the minds of the other designers and developers on how they approach their work.

Some of the team have never touched flash so I wanted to start at the beginning on how Flash was born. Jonathan Gay, the brain child behind Flash developed the idea in college, which eventually evolved into the vector-based program called FutureSplash Animator. Macromedia acquired the software and renamed the program Flash, which was taken from the names “Future” and “Splash”. It is now Adobe Flash and has gained popularity due to interactivity to web pages, creating animations, advertisements , integrating video into web pages, and more recently, to develop rich internet applications.

According to Adobe, Flash has over a 98 percent market penetration for desktop users. The flash technology is utilized to display and stream video on popular video portals like YouTube and Google Video. After going over some advantages and disadvantages that Flash has on the Web, I outlined the tools and the “dreaded” timeline. Hopefully, it made the team a little more eager to learn Flash and give it a try.

If you’re interested in the past and future of Flash you can view the Flash Tenth Anniversary showcase or check out this blog here by Kevin Lynch – Chief Software Architect at Adobe.

Hopefully, this quick workshop made our team feel more at ease with Flash and bring some understanding on what Flash is and where to get started. Take the challenge and start learning Flash today!

Here are some links to basic concepts and tutorials to get acquainted with Flash:
About Flash Symbols
Motion Tweening
Creating a Simple Animation

Check out the slideshow below.

Download the Flash is your friend slides (PDF 772k)