What happens when you get pulled into a meeting where you already know it will end in someone important saying, “And we’ll need this up by Friday.”?

This just happened to us – twice in the same week – and it’s made me realize that almost anything is possible with an amazing team, a few good resources, and event just a brief background on the subject at hand. It’s just like a regular website redesign project process, but in fast-forward. Here’s how we did it:

1. Meet with the stakeholders, or at least someone who can speak for them, and find out what they want/expect out of the final product. We met with the VP for Academic Affairs, the VP of External Relations, and the Asst. Dean of Undergraduate Education.
2. Find/Request any existing documents, images, videos, etc. that you can use. We used 1) a research report on the success of the program and its students, 2) information from the one-pager on the Undergraduate Admissions website, and 3) a document containing potential website content.
3. Communicate with an informed contact that can give you the background on the topic. We met with one of the people who handled the actual program and interacted with the students, and she handed over a nicely done mockup of a couple ideas to present the information via the web.
4. Ask the right questions.  I put myself in the mindset of an interested student who knew little to nothing about the program, asked questions from that POV, and organized the content accordingly.
5. Get your hands dirty. I asked the team to put together a single-column blank site template, and we dug into the blocks, formats, and CSS/HTML to mold it around the content.
6. Gather feedback. We put the site up on our dev server and sent the link out to all the stakeholders. Once the feedback was in, we tweaked the content as needed.
7. Launch and spread the word. The site went up without a flaw and we linked to it from several resources. Analytics are being gathered and everyone’s happy.
8. Bask in the glory. We did it in less than a week. Our VP noticed. WebComm rules.

The results for both projects were equally great, and we received great feedback and thanks for getting everything up so quickly. Bonus: these efforts secured two larger projects for us that will grow out of the fast-tracked ones – we have sign off on designing/developing the new Undergraduate Admissions website (YES!!) and our team will be creating the new Chinese-language website for our students overseas.

Today we met up on Skype with the university advancement web team at University of Saskatchewan.  They wanted to know a little bit more about what we do and how we function as a web team under the Division of External Relations.  We started off with only one thing in common – our Cascade Server CMS – and ended up finding a lot of common ground. We shared stories and gave them a bit of insight on how we’ve grown from a one-man army to a small team of web designers, developers, social media managers and web content wranglers.  They had a ton of great questions for us, and made us feel like we could offer some pretty good advice and a sneak peak into how we made it this far.

Some things were new to us, some were new to them, and some things elicited responses from both sides of laughter and things like, “that’s just how it is with web.” At the end of our Skype session, they asked that we keep in touch every 3- 6 months to see what everyone’s working on. Awesome idea. We agreed, and were actually really excited to now have some web team “pen pals.”

While you’re reaching for the starts and not quite sure if you’ll ever reach, never forget that your past hardships and achievements can offer some great insight for other teams who are about to go through the same.

We recently launched an Internships Portal for students here at FIU.

During our pre-design research, I didn’t find many well-executed internship sites in higher ed.  I’m wondering if anyone else out there in higher ed currently has a site that assists students in learning about internships, finding internships, and succeeding in their internships.  Though we did some user testing before we designed it, we plan to revisit the site’s content and navigational structure once we’ve gauged what students are looking at on the actual site through analytics and feedback.  Any feedback or insight on how to best get internship resources to students is appreciated!

One of the issues web designers face is acquiring useful information from users.

A simple and straightforward way is to provide users with a text box to fill. This method does not limit what a user can enter and can provide valuable information. However, the very nature of a text box to be open ended makes it difficult to categorize the information.

For example, lets say that we have a text box that prompts the user to input their name. This seemingly straightforward task is riddled with pitfalls. A user may type in “John Smith”, “John B. Smith”, “Smith, John”, and so on, making it difficult, if not impossible, to look up John Smith by his last or first name. One solution is of coarse simply to make an open ended query to your database looking for a keyword. However that is expensive computation and also useless in providing a sorted list.

A work around this problem is to provide multiple text boxes to capture information. In our example a box labelled “First Name”, one labelled “Middle Name”, and one labelled “Last Name”. This helps spectacularly but by no means solves all of our problems. A user may misspell their name or become confused as not all names can be so neatly organized into first, middle, and last.

Providing a predefined list to the users can help alleviate some of these issues, but also hampers a user’s ability to provide open-ended information.

I believe that the best solution is a hybrid. Allow the user to use a text box, but if there is a preexisting list, provide them with an AJAX generated list beneath it as they type and allow them to click it to populate their response.

This is more complicated for the developer, but it should help tremendously in capturing useful information from your users.

One of the things we end up doing here in the office is something I like to call the 15% rule. Essentially it states that we take some work time, about 15% of it, and focus on pet projects. There’s no pressure or guarantee of success expected from these projects as they are a means for us to expand our horizons. As I’m sure you’ll agree, any professional will tell you that there is always something new to learn in your field.

A few weeks back I decided to learn a little bit more about Javascript so I sat down and began tinkering with something I saw at the 2011 jQuery Conference. One of the speakers showed us how one could make an animation of Megaman run across the screen. You may recall I posted about this a few weeks ago.

While it seemed like a nice little idea at the time, I didn’t really see any practicality to it, but it interested me, so I sat down and pursued to recreate this project. Since I didn’t recall how our speaker wrote his code I needed to fill in the blanks with my own ideas or from reading what others had done.

Throughout the process I learned, or at least reminded myself, of multiple skills I had not brushed up on. I had to correctly position the sprites with an image editing program, learn new CSS commands regarding images and I needed to worry about multiple variable in the Javascript that had not occurred to me that I needed to manage: how many frames per second, flipping the animation from a singular source, changing the dimensions of the animation, detecting when Megaman had run out of the screen.

In the end of this project I felt more comfortable doing things in Javascript, CSS, and image editing than before and my expanded knowledge has already been implemented in the projects since just a few weeks ago.

So in conclusion, the 15% rule may not yield amazing new pieces of creative content, but it may very well lead to the sharpening of your mental blade and increase your productivity at work.

Yesterday marked the beginning of the first week of classes here at Florida International University.  To help out those students who might otherwise wander the campus lost, hungry and unaware of all the resources we offer, the Web Communications team created the first ever FIU Survival Guide.

It’s a web-based guide to all the things students need to know during the first week on campus, including:

• Important Dates & Deadlines
• Pinpointed locations for each building on our campus maps
• Where to find parking when peak traffic starts
• Where to grab a meal or snack between classes

We have had great feedback so far and students seem to really appreciate having something like this.  We plan to keep it updated before the start of each semester so students can count on having this resource for a long time to come.

Any other High Ed web teams doing something like this?  What information do you or would you include?

Whew! It’s been a busy year here at FIU Web Communications with more than 10 website redesigns, including the responsive relaunching of fiu.edu, the addition of a couple new team members, and a big move into our very own office.

Check out some of this year’s projects that we didn’t have time to cover in detail:

Live The Arts	FIU Magazine
OneStop Enrollment Services	Department of Architecture
Department of Interior Architecture	Department of Landscape Architecture
Department of Art + Art History	School of Music
Department of Theatre	School of Architecture
Broward Pines Center	Biscayne Bay Campus
Department of Communication Arts	FIU Research

So a few months ago we moved one floor down from our previous location and we are absolutely loving the new pad.  After weeks of flinging slingshot monkeys across the room and pelting each other with foam darts and such, we’re finally settling in. It’s a much-needed upgrade from the crowded space upstairs and the borrowed furniture from surplus (note: we were thankful to even have furniture, so it wasn’t that bad). We all have sleek, new furniture from AllSteel and desk space to call our own.

Check out a some of the personalization our team has done so far:

We even held a “SysAdmin Appreciation Day” breakfast in our new conference area:

And, of course, we added our own touch to Matt’s “fishtank” of an office:

The best part of it – it will expand to fit our needs as we continue to grow. Check out the video below for all the possibilities.

More than anything, I would love to be able to choose the person whom I work with on website redesigns for our colleges, schools, and departments.  A lot of the time the contact ends up being someone who doesn’t not have ample time to work on the project and isn’t familiar with the marketing goals or the website’s audience.  This can cause a big problem for the design and content – the project won’t get the attention it needs and the redesigned website won’t align with the needs of the users or the branding of the college, school, or department.

For the best outcome on a website redesign, you don’t have to work with a web-savvy tech nerd. You do need a contact who:

• is familiar with the current website and can identity where it is failing
• works directly on the marketing/branding
• knows the audience(s) the website needs to reach
• is easily accessible and available for meetings
• has ample time to dedicate to the project
• has the authority to sign off on the design, or at least works closely with someone who has that authority
• is willing to take your expert advice
• is willing to give their expert advice in return

If you’re handed the name of a dean, chair or any other senior administrator as your contact, the best thing to do is to kindly ask if they wouldn’t mind if you worked with a trusted marketing person instead.  Always acknowledge that their expertise and input is indeed very important, but suggest to them that the time and cooperation you’ll need from them may be a bit much with their already busy schedule. The higher up they are, the less likely they are to have the time to review important things like content inventories, information architecture documents, design wireframes and high fidelity mockups – not to mention the countless emails that will be exchanged during the redesign process.

If you have any advice on the ideal person to work with on redesign projects, please do share. Similarly, if you have experiences of successfully working with the higher ups, I’d love to hear how you made it work.

A quick guide to responsive design

So our office has been doing a lot of work with responsive web design, and while I’m by no means an expert on the subject, I thought I’d give a brief tutorial on what I’ve picked up.

What is it?

So the first thing we need to cover is what exactly is Responsive Web Design. Well, it’s a technique that we can use to have one website be rendered no matter what device is viewing it. So whether its a smart phone, a tablet, a desktop, or a futuristic toaster, the page will be displayed correctly.

Why use it?

Now, at this point you may be thinking, “But I already have my main site and my mobile site, why should I bother with this?” Well, for one, you don’t have to update content in two places. For another, there are more devices with web capabilities other than just desktops and phones. Video game consoles for example. We as web professionals need a method of providing our content across all devices.

First things first, size matters.

Your site needs to be as light as possible. A mobile device with horrible connection should still be able to download it within 30 seconds.

Here are some hints:

• Try to keep the entire page be between 500 KB and 1 MB
• Limit your images to about half of your total size.
• When possible, use CSS styling over images. You’d be surprised what you can do.
• Create a CSS sprite sheet to limit HTML calls.
• Have your server optimized with GZIP compression.
• Compress your images to be web optimized.
• Minify your CSS and JS files into one file when possible. (YUI Compressor, Minify)

Fluid Grids

Fixed sizes are your enemy. If you have an element that is 500 pixels across, and you try to see it on a device with a max width of 300 pixels, it will bleed off to the side. So you need to figure out what the equivalent percentage should be.

Example

• Your original layout had maximum of 1000 pixels across and you had an element that was 400 pixels wide.
• Instead of having the maximum layout be 1000 pixels, make it 100%
• Have the 400 pixel element become (400/1000) * 100 = 40%
• Badaboom, no matter the width of the browser, the element will be to scale.

Media Queries

CSS3 has a great little new feature called Media Queries. The style sheet basically receives information about the browser and it allows it to change the layout of the page accordingly.

For example:

@media screen and (min-width: 480px ) {

.someClass { display:none;}

}

You can do multiple media queries to completely change the layout of the page depending on the variables of the browser. Here’s some reading for Media Queries.

Adaptive Images

A nice large image may look nice on a nice wide monitor but it is wasted on a smaller screen, so why download the huge image if you don’t need to?

My recommendation, use a little library I wrote here in the office that, depending on the device, return a smaller image that is more appropriate for that device.

Adaptive Scripts

You may be used to using Javascript or CSS libraries to help you code some pretty nifty websites. However on lower end devices, such as mobile phones, those scripts are eating up the precious little processing power they have, slowing down your site!

So I’d recommend that little script I mentioned earlier to only load those libraries on appropriate devices. They won’t slow you down if they’re never loaded, saving both on processing power and download time.

Build up

My last bit of advice for you, my responsive newbies, is begin your design from the lowest end up. Start by imagining what your website will look like on a phone. When that design is done, change the layout in steps.

And that’s it, hopefully this will help you make an elegant responsive design.