Web Communications

Learn how to create and deliver useful, usable web content for your online audiences, when and where they need it most.

This month we will be featuring a presentation on Web Content Strategy.

Topics covered include:
- What is Content Strategy?
- Why do you need it?
- Communication through Content
- How to do a Content Inventory
- Creating your Information Architecture

Time: September 28, 2012 from 3:30pm to 4:30pm
Location: GL 220 (changed from GL 835 due to scheduling conflicts)

To RSVP visit: http://fiuuweb.ning.com/events/content-strategy-101

If you would like to learn a bit more read our post What is content strategy?

Hello.

Ryan, here.

I realize this is my first post on the WebComm blog– funny, though, because I’ve been on the team for more than a year and have been putting it off.

Content Strategy

Either way, what I do here at WC (that’s the official abbreviation, or at least I’m making it that)  is organize and strategize the placement of content on a website. Simply put, a content strategist. And believe me, it really is that simple.

But I think most web design teams get caught up with the task of developing and designing a website, that content becomes secondary and is left for the end.

Cooking Metaphor

Look at this way: you just sauteed some onions and mushrooms on a skillet, but forgot to put oil or butter on the pan. Your mushrooms and onions are harder to cook this way, and simply putting oil at the end can destroy the texture of the mushrooms and onions.

Point is, content is the first thing you should focus on before diving into the technology of your site– the design and back-end of your site should be built around your content, not the other way around.

In a way, content strategy has aspects of marketing, journalism, web-writing, communication and design.  I mean the list can go on really; the job requires skills from so many departments. But simply put, content strategy is communication strategy.

Usability tests

When you start off with either redesigning a site, or even starting from scratch, you need to identify your audience and what they want from you. Many clients think the question revolves around what they want for their audience–the answer gets lost in the fray.

That’s why we have usability tests. To quantify the user experience for your website, you conduct tests on users with a list tasks for your website. Stuff like “Find an Economics professor by starting from the homepage” or “What’s the first day of class”. Depending on how easy or hard that question is for users will determine/gauge what needs changing.

So much depends on what exactly they need/want from you, it’d be ridiculous to make it harder for them to find.

Client Surveys

Usually, though, with our team we create client surveys. Basically, a list-long questionnaire of what clients want for their site.

Stuff like “what’s the issue with your site right now?” or “what kind of experience would you like to give your audience?”

Content Inventory

With those concerns/goals out in the open, doing a content inventory of the site will be easier. Now a content inventory is a website’s each-and-every-page laid out on a spreadsheet (or document– I use Excel).

Map it out almost like bullet style, so all the main tabs on the site’s navigations are at the top, and each page inside those main tabs are sub-pages under them. If you visualize it, it would sorta look like a sideways pyramid.

You also need to pay close attention to details (i.e. grammar, broken links; these are content mess-ups that needs to be addressed)

Information Architecture

With all of this in mind (client survey, content inventory) we can start with the information architecture (or IA, for short). The IA is similar to the content inventory, layout-wise, except instead of organizing the existing site, you’ll be organizing the new site. This will determine page count and how exactly things will look like on the site.

This may sound easier than you think, because you’ll most likely be meeting with your clients a couple of times during this process. In this phase, you have to keep in mind two things: client needs and audience needs.

Things like mission statements, newsletters, etc. These pages typically don’t get viewed by audiences (unless they personally wrote it), so if pages need to be shaved off the IA, present good reason for it.

The client/content strategist seasaw can be a shakey one, so you have to meet somewhere in the middle. Don’t get discouraged by this– this is a communications industry, and you don’t want to be too wordy with how you communicate things (your website).

It’s the content strategist’s job to confirm what goes in, and what goes out.

IA Review/Design hand-off

Couple meetings later, you have an IA to present to your client. Give them some time to look it over. Once it’s approved, you send it off to your designer. Some sit-down meetings (and coffee) may be involved, to really get a grasp of how the site should look. After this, though, you move on to the next client.

Boo-yah

It’s that easy. But you’d be surprised how much work is involved. People have a hard time communicating ideas, and since we’re dealing with web (and its hyper-changing climate) communication changes all the time.  A lot about content strategy involves keeping up with all the new ways people receive information (but that’ll be for another post).

So yeah that’s what content strategy is, in a nutshell and 815 words. If you’d like to chat more about it, e-mail me at ryan.morejon@fiusm.com.

After a long period of information architecture restructuring and a content refresher, four of the eight CNHS program sites have now been launched using the college-level website design and template.  This method of redesigning the college-level site and program sites using the same template not only cuts down on development time and client costs, but it allows for the entire collection to have the same branding and familiar structure. The nifty network bar at the top

While all of the sites have the same basic parts (news feed, events feed, buttons for alumni and advancement information, etc.), they all have the ability to change their feature area to whatever best fits the program.

You can take a closer look at the individual program sites via these links:

• Undergraduate Nursing
• Graduate & Doctorate Nursing
• Nurse Anesthetist
• Athletic Training

Stay tuned for the third phase of the redesign, which includes the last four CNHS program sites: Communication Sciences & Disorders, Health Services Administration, Occupational Therapy, and Physical Therapy.

One of our largest redesigns was launched a short while back – the college-level and program sites for the College of Architecture + The Arts.  This was one of the most design-heavy projects, using lots of texture, color and large-dimension images and features.  The six sites (college-level and programs) used a similar template and all have their own news and events features feeding in from the FIU News website and the FIU Events Calendar.

The template design went through several revisions as we received input and feedback from the Dean, the student services staff and the 7 program chairs.  Inspirations for the design came from several discipline, but the most visible one is the School of Architecture.  A simple, clean, branded look  – along with a showcase of the students’ work – bring the sites to life.

You can take a closer look via the following links:

• College of Architecture + The Arts
• School of Music
• School of Architecture
  • Department of Architecture
  • Department of Landscape Architecture
  • Department of Interior Architecture
• Department of Communication Arts
• Department of Theatre
• Department of Art + Art History

Here is a presentation about how to make sites that work on mobile, tablets and desktops.

My team is quite fond of teasing me about my “vacations.” It may be because I take them sporadically to random locations, or more likely because I never actually stop working when I’m on one. I blame this solely on my previous job, as I was never able to completely disconnect because I was the only one in the office – it’s kind of hard to leave things to “someone else” when there is no someone else!

I’ve had to learn to delegate and just trust that things will go smoothly when I’m away for a few days.  I’m one of those people who has to have a handle on everything going on and I have hard time letting go, so this is always a challenge.

I’ve recently found a good balance between work and play that lets me take vacations pretty much whenever I have any to take. I like to call it a “Working Vacation” and it works like this:

• Schedule the hours you won’t be “playing” while your on vacation (like 8AM through Noon) and stick to that schedule as best as you can.  Mornings are more productive for me, so I like those hours.
• Give your boss an emergency way to reach you in case of, well, an emergency.
• Let your team know that you’ll be available during specific times for calls, only if needed, and stick to those hours. This only works if you have a working phone on you, so plan for this if you say you’ll be available by phone. Google phone numbers work well for this, as well as Vonage – both will email you the voice mail message and a text version.
• If team meetings are necessary, schedule them when it’s convenient  – not in the middle of mealtimes or happy hour – and use Google Hangout or Skype.
• Stop answering emails after your designated work hours.  This is the hardest one for me, as I always feel the impulse to have my inbox at zero.
• If you feel it’s necessary, check your email before heading to bed to be prepared for the next morning’s workload, if you have one.  If you’re not scheduled to work the next day, let the emails go.
• Don’t think about work when you’re at play – that’s what those designated hours are for.

This only works if you make it work and, of course, you have the luxury of taking “Working Vacations.” And having an awesome boss helps too.

JavaScript is a wonderful tool, but I think most developers overlook it’s raw power.

Yes, it is nice to customize your form with some client side validation, maybe even flash some red text if someone goes wrong, but unfortunately, most developers stop at that when they could do so much more.

To prove my point, I’m going to write a little tutorial for you. Today I’ll teach you how animate Megaman on your screen.

I can already hear some of you saying, “But Andre, why would I animate something with JavaScript when a nice little gif will do the trick.”

A valid question and the answer is simple: control. If you animate with JavaScript you will be able to control the frame rate, movement, direction, orientation, even collision detection.

We probably don’t want to turn our browser into a video game (or do we?) but what will be covered here may inspire you to some new design element in your site that you hadn’t thought about before.

So lets get started.

The first thing we need for our Megaman animation, is Megaman himself.

Here you go:

So what are we looking at? Well this is a singular image of a running loop animation for Megaman. Each frame is spaced 50 pixels apart. If you want to make your own custom loop image, be sure to use a reference point in each frame to make sure the animation looks smooth.

Now let’s put this bad boy in our page:

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>Test Scripts</title>
<style type=”text/css”>
.animate {
display: block;
width: 50px;
height: 50px;
background: url(mega_run.gif) repeat 0 0;
position:absolute;
left:0px;
}
</head>
<body>
<span id=’megaman’ class=’animate’></span>
</body>
</html>

Notice that we’re using a span with a background image instead of a img tag. The reason for this is because we want to be able to rapidly shift the image position relative to the element. The CSS command background-position is what we want.

We’ll call a function that will advance our image 50 pixels to the right, wait a predetermined amount of time and call itself again. Make sure you are using jQuery, our framework of choice.

var frameRate = 100;
var frameWidth = 50;
var frame = 1;

function animate() {
setTimeout(function() {
var framePosition = (frame++) * frameWidth;
$(‘#megaman’).css(“background-position”, “-”+framePosition+”px 0″ );
if (true) {
animate();
}
}, frameRate);
}

Now if you open your page and activate this function, you’ll see Megaman running in place! Notice the parameter frameRate. Yep, we can control how fast our blue bomber is animated.

Awesome right?

But Megaman should be actually moving am I right? Lets expand our code to make him run.

var posX = 0;
var speed = 10;

var frameRate = 100;
var frameWidth = 50;
var frame = 1;

function animate() {
setTimeout(function() {

posX+=speed;
var framePosition = frame * frameWidth;

$(‘#megaman’)
.css(“background-position”, “-”+framePosition+”px 0″ )
.css(“left”, posX+”px”);
if (true) {
animate();
}
}, frameRate);
}

Look at him go! Umm wait… Megaman where are you going?

…

Well there he goes.

If you ran that script your probably noticed Megaman started running and never stopped!

We should make him turn around when he reaches the end of the screen.
var screenWidth = $(window).width() – $(‘#megaman’).width();

var posX = 0;
var speed = 10;

var frameRate = 100;
var frameWidth = 50;
var frame = 1;

var direction = “left”;

function animate() {
setTimeout(function() {
if (posX >= screenWidth ) {
direction = “right”;
flip($(‘#megaman’));
} else if (posX <= 0) {
direction = “left”;
flip($(‘#megaman’));
}
if (direction == “left” ) { posX+=speed; }
else { posX-=speed; }
var framePosition = frame * frameWidth;

$(‘#megaman’)
.css(“background-position”, “-”+framePosition+”px 0″ )
.css(“left”, posX+”px”);
if (true) {
animate();
}
}, frameRate);
}

function flip(element) {
if (direction != “left” ) {
element
.css(“-moz-transform”, “scaleX(-1)”)
.css(“-o-transform”, “scaleX(-1)”)
.css(“-webkit-transform”, “scaleX(-1)”)
.css(“transform”, “scaleX(-1)”)
.css(“filter”, “FlipH”)
.css(“-ms-filter”, “FlipH” );
} else  {
element
.css(“-moz-transform”, “scaleX(1)”)
.css(“-o-transform”, “scaleX(1)”)
.css(“-webkit-transform”, “scaleX(1)”)
.css(“transform”, “scaleX(1)”)
.css(“filter”, “FlipH”)
.css(“-ms-filter”, “FlipH” );
}

}

I think this is a good starting point for now. Next time I’ll expand on this to make Megaman bounce up and down as well as having him bounce against other html elements!

Uweb updates
—————————
As you may have noticed there is not a scheduled Uweb meeting this month. We are taking this month off and will resume next month. We have two upcoming sessions already booked

• August – Responsive web design (how to build an all in one mobile, tablet and desktop compatible site using frameworks)
• September – Building a website content strategy (plans for the creation, publication, and governance of useful, usable content)

FIU Tech jobs
—————————

• Application Developer I- Division of Information Technology
  https://pslinks.fiu.edu/psp/jobs/CUSTOMER/HRMS/c/HRS_HRAM.HRS_CE.GBL?Page=HRS_CE_JOB_DTL&Action=A&JobOpeningId=504534&SiteId=1000&PostingSeq=1

• Temporary – Web/Technology Assistant (College of Business)
  https://pslinks.fiu.edu/psp/jobs/CUSTOMER/HRMS/c/HRS_HRAM.HRS_CE.GBL?Page=HRS_CE_JOB_DTL&Action=A&JobOpeningId=504594&SiteId=1000&PostingSeq=1

• Temporary – IT Student Associate Coordinator (South Beach Wine & Food Festival)
  https://pslinks.fiu.edu/psp/jobs/CUSTOMER/HRMS/c/HRS_HRAM.HRS_CE.GBL?Page=HRS_CE_JOB_DTL&Action=A&JobOpeningId=504622&SiteId=1000&PostingSeq=1

Links from around the web
—————————

• How to Get Google to Index Your New Website & Blog Quickly
  http://blog.kissmetrics.com/get-google-to-index/
• 11 Lessons Learned From Content Management System Implementations
  http://www.attentionmessageaction.com/the-real-cost-of-your-cms/
• Webinar: How to Start Using Analytics Without Feeling Overwhelmed
  http://blog.kissmetrics.com/webinar3/
• Thoughts from a content manager on adpative content
  http://webdesign.vassar.edu/2012/06/thoughts-from-a-content-manager-on-adpative-content

Thanks and see you next month

-Uweb

We recently launched the Department of Emergency Management’s (DEM) website.  The Department of Emergency Management works to avoid, plan and prepare for emergencies; educate the FIU community about preparedness; coordinate an emergency response and recovery efforts and collect and disseminate critical information.

Site Features

Since the department is crucial to emergency planning and preparedness, it was important for us to showcase the FIU Emergency Alerts system, which the department manages. FIU Alerts is a notification system that will notify users of emergencies occurring near or on the FIU campuses via text messages.

The site prominently features the alert system and helps visitors register their phones.

Another important feature of the site is the Local Weather Alerts. Since South Florida faces a yearly hurricane season as well as other less predictable weather events, the Department of Emergency Management asked us to pull extreme weather alert data from the National Oceanic and Atmospheric Administration (NOAA), and show them in an accessible manner to visitors.  We did this by parsing and formatting NOAA’s weather feeds in presentable and easy to read module on the DEM webpage.

The DEM site also features resources for learning about various types of emergencies and emergency management information.

Developing the Site

The DEM site was constructed in Hannon Hill’s Cascade Server, which allows the department to easily update the site without having to deal with coding.

When developing the site, I created a new feature that allow DEM staff to update their top navigation bar with even greater ease—a Top Menu Creator.  Traditionally, users would have to select which pages would appear on the top menu by clicking a check box on each page.  This can become tedious when there are many pages. The Top Menu Creator is essentially a control panel from which one can choose the pages to show up in the top menu from one location.

Developing the local weather alerts also demonstrates the flexibility of Cascade Server as a CMS. It allowed us to pull XML feeds from NOAA, parse them, and then present them beautifully.

Conclusion

Developing the Department of Emergency Management’s site was an important additional to the large portfolio of sites built by FIU’s Web Communications team because it allowed for critically important emergency management information, alerts and updates to be publicly displayed in a easily digestible and accessible manner, which directly aligns with the department’s mission.

When making a request for changes mid-project, a client who’s a non-designer/non-developer sees a very fine line (if any) between a “minor change” and serious scope creep.  As project manager, I have collected a few tips and tricks to minimize scope creep with our clients:

• Provide a clear and concise write-up of what the site will include as well as what it will not include. Think about design AND functionality when you do this.
• Have the client and your team sign the write-up, treating it as a contract and guide to the project’s scope and limitations.
• When providing the client with wireframes or a mockup, describe the functionality and options available for each piece of the website (i.e. rss feeds, banner movement, etc.)
• On the project timeline, clearly note a deadline for your clients to sign off on the project design and details.

There are time when scope creep gets out of hand where you have to take a step back and analyze what your options are. Rather than revise the entire scope when changes are made, break the project into phases, each with their own timeline and cost estimate.

Finally, if there isn’t a hard launch deadline in place (i.e. opening of a college or upcoming accreditation), suggest a stall on the redesign until all necessary changes are gathered and discussed.  If you are able to reschedule the site launch and adjust the project timeline, do it.  Clients usually feel better about presenting a polished product than they do about a rushed and unfinished one.

Rarely will a website design or redesign happen without some changes being made to the original plan.  The good news is that you can avoid major hiccups if you learn to plan well and make the details of the project explicit.