Web Communications

One of the things I have been trying to do is understand how my cohorts, the designers, do what it is they do. So here’s a quick mental exercise I did to see what I would do if I had to design a professional looking site trying to sell products online.

 

The first question I asked myself was, “Whom is this site for?” The answer, naturally, is for my clients. Now, I know to ask what do my clients want? They want to see a list of my products, be able to purchase those products, view my contact information and address, possibly testimonials from other clients, and lastly, though perhaps not as important, read some information regarding my company.

 

Straightforward so far, as a developer I know exactly what to do to make an inventory and purchasing system. So lets skip this step and say that I have a full system with the functions ready to go.

 

I’m assuming that since I only have a few pages, the menu will simply be a list sorted by importance to my target audience: products, checkout, contact us, testimonials, and about us.

 

Now, I would gather my content to fill those pages with, in this case the full catalog information for my company. Pictures for all the products and maybe a few of my employees and building. For contact information I would be sure to include a map and driving directions.

 

I know to make my page semantically correct so that page crawlers and people whom rely and accessibility software can understand what my site is about so we can skip this bit.

 

At this point I have very dull black and white pages filled mostly with lists, text, and tables. I ask myself, “I need to present this page so that it is more aesthetically pleasing and also relevant.” Since I have no color-sense, I’ll focus on relevancy for now.

 

Let’s say this page is to sell dog cleaning products. The first thing I would do is google “dog cleaning products” and see what other people have done.

 

After visiting a few pages I notice that all of them have a few things in common. Their page logo is always on the top left corner, search boxes are on the right, and the menu is laid out beneath both. Also their checkout button is locate outside of the main menu as button on the right side.

 

I mentally add to my todo list “Make logo and put it on the top left corner of every page.” Makes sense, since the top left corner is demonstrably the most important location on a webpage. At least for places where the audience reads left to right. I also make a mental note that I need to ask clients details about their logo. What feeling they want to illustrate when they look at it?

 

What else do I notice about these pages? Filters are on the left and sorting options are on the top. The main list of products are dead center. Seems like it’s the standard layout for shopping sites, so I probably shouldn’t break the mold and confuse my audience.

 

At this point my site no longer looks like a long list, but something more structured, if still dull. I also realize that I’ve only been working on the product catalog and not the front page. Which should help direct my audience to where they want to go.

 

Back to google I go and I find a very interesting article: http://designshack.net/articles/layouts/10-rock-solid-website-layout-examples. Since I have no previous experience with front page layout I rely on my mantra of “keep it simple” and choose to follow the three box layout for my front page. The main square would naturally be article for sale, probably the week’s featured products. The bottom two would probably be a link to the testimonials and about the company. The footer would contain crucial contact information as it standard for most pages.

 

Now for the aesthetics. Since my knowledge of creating a theme is currently at “I only know if it looks nice or it doesn’t” I am forced to borrow from someone more creative than I. Again I return to my old friend google and search for some pre-made color and font themes and choose one that I like. I borrow heavily from it.

 

At the end of the day it may not have the wow factor that my full-time designer co-workers seem to be able to dish out. But this thought exercise definitely helped me understand what goes into designing a page, and hopefully it helped you too.

We recently launched the Herbert Wertheim College of Medicine (HWCOM) website, along with its sister sites, FIU Health and Medical Library  The three-part project was a “design by committee,” which can be a nightmare if it isn’t streamlined properly.  Thankfully, both our team and HWCOM had project managers who could funnel all the requests and feedback.  The launch deadline for the project was particularly important because the College of Medicine needed to meet accreditation requirements or their sites.

Behind the curtain

This project was unique because we designed an developed a database for all three sites simultaneously.  JavaScript is used to feed database information into profile pages and a searchable directory for all three sites, as well as specialty pages listing the areas of expertise for the physicians of FIU Health.  During the development, the team learned about what goes into an multipurpose database and the best way to implement each of the client’s requirements.  This project was taught us a few lessons on how to handle different languages (PHP, JavaScript) within our CMS and forced us to rethink how we couple them.

 Pixel Perfect

The designs for all three sites were aligned with the FIU homepage design. This project was a challenge as far as design because we had several versions of wireframes for each of the three sites.  These three sites were the tailored to meet the client’s design and functionality requests to a tee, so each person on our team was able to get their hands dirty in the process of multiple design and functionality updates.  We are continuing to make updates to the design so it better suits the client branding and content needs.

Content Strategy

Our team was invited to the final committee meeting before launch so we could answer any final questions and address the final concerns of each person involved.  While this may sound like a hellish experience, it was actually an opportunity to educate the stakeholders on why we did certain things the way we did and make suggestions for them to improve the website in the future. One example is the way we chose to address their concern about losing and confusing visitors who clicked the link to view the news stories featured in their banners.  They wanted to force users into a new window/tab to view the story (hosted on the university news site) so they wouldn’t leave the site. We explained that wasn’t a good practice and offered the alternative of hosting the news stories in an internal newsroom.  They didn’t have a response to the suggestions at the meeting, but less than a week later they emailed us asking if we could make that exact suggested change. *big grin* It was kind of like Inception, but without the crazy sound effect.

This week the university is holding commencement (a.k.a. graduation) this week, so our team created a very cool feature area on the homepage especially for useful links that people may need during this time. Check out the screen shot below for the homepage feature goodness. Also, check out the awesome Interactive Commencement site, which is also mobile friendly.

This is true of most things in life, but even more so for website design. Most requests for changes come after the site has launched and all the stakeholders have had a chance to look the site over.

One simple way to avoid this headache is to set up a development site for your client to review during your final stages of quality assurance.  This way, changes can be requested and made within the project timeline.  This will make the client more comfortable knowing they can see what the final product will be, and it saves your design team the hassle of having to revise their work after the project launch.

While this solution works most of the time, there is always a chance that not all the stakeholders are able to review the site, or someone new comes on board late in the project and hasn’t had any input on the site’s design and/or functionality. In these two cases, post-launch changes are almost inevitable.  Thankfully, there are a few ways to educate your clients and make the process a little easier:

• Create a second “phase” to the project, with a quote and timeline that notes any necessary content due from the client.
• Inform the client that the changes will take time.  This is especially important if you have other projects queued to start immediately after their site launches.
• Explain the costs associated with changes that require additional development and/or design time.
• Make clear the difference between design changes and simple content changes, and the time and costs associated with each.
• Review the approved information architecture and wireframes that the client signed off on.  Note how the changes deviate from one or both, and discuss whether the change is actually necessary.

DIY

Many times the changes aren’t complicated enough that your team has to make them. Ask the client if they are comfortable making the content changes themselves via the CMS (after training, of course) or if they have someone (i.e. a graphic designer or webmaster) who is comfortable making design changes in-house. This solution is usually less costly and time-consuming for both your team and the client.

Don’t say “no.”

If the changes the client is requesting aren’t doable, give them an alternative. If the change is something that the design lead or developer doesn’t agree with, have them explain why the change is undesirable and have the head of your team explain the reasoning to the client.

Feel free to offer insight on dealing with client change requests that happen when it’s all been said and done.

Since I know people are always looking for calendars I thought I would mention that we just open sourced ours today

Here is a live example
http://calendar.fiu.edu/

Here is the github repo
https://github.com/fiuwebteam/Calendar

We would love to be able to collaborate with other institutions to make this a stronger tool. For those of you here on campus feel free to contribute to the core of the project.

Features

• Multiple calendars
• RSS/ iCAL / hcal / pdf
• Multi tiered calendars
• Embedding via RSS, play and play snippets
• Memcached
• Approval queue
• Multiple users and user roles/ permissions
• Featured events

Why did we not use UNL calendar:

Yes we did look at UNL cal and I think it is a great cal. I have recommended it quite a few times to others.

Some of the main reasons we choose to build our own

• Framework we decided to go with CakePHP which was in our wheelhouse, UNL was built with PEAR
• We wanted more controls for sovern multi tiered calendars IE There could be a dept which feeds to a college which feeds to main.
• Internal per event moderation
• Pull in external iCal events from other calendar systems

Otherwise, we have most all the same functionality of the UNL cal but these were the main things we see that are different.

Let me know your thoughts or if you have any questions.

We are looking to add another person to our team who will be a DEV in our CMS. We have a great person who was previously a FIU student, graduation and now works for us full time. He is getting swamped so we need to add another person. More or less the job is

• XML/ xslt
• HTML/css
• javascript/ jquery

We aren’t really looking for a grunt that does crap work. We are looking for someone that has intermediate knowledge and is looking to grow and contribute to the team. I would say we offer very close to an agency experience with our processes that we use http://webcomm.fiu.edu/process/

So If you have a good student that you know of we would be glad to talk to them.

*NOTE* We don’t expect you to meet all these needs, we are looking for a person who can fullfil some of these and is a good fit and willing to learn.

To submit resume please email Matt Herzberger mherzber {AT} fiu {DOT} edu

We have made great strides in the web community here on campus. I decided to write a proposal to speak at the HighEdWeb conference on the topic so I have been reflecting on how the community has grown and how we can continue to grow the FIU web community.

Proposal

Here is the proposal I wrote and I now look at it as a manifesto of sorts of how to create a great web culture on campus:

Do you have lots of web people on your campus? Feel like there are no cohesive bonds? Even in our siloed higher ed culture, it just takes a small dedicated group to rally the troops.

We will explore how to build community on a campus through various different approaches including creating a university web group to provide leadership, idea exchange and learning opportunities for web professionals and others around campus. Work to create collaborative web policies that will enable people to do things following best practices. Create a culture of open data so people will embrace the use of central tools. Blog about the state of web on campus and keep an open and continued dialogue. Provide campus thought leadership and advise executives on major decisions. Create collaborative spaces where people from different teams can work to solve common problems on campus. Build campus wide tools that leverage and produce open source software and have open planning sessions with community members. Have coffee talks with community members to provide advice, be an advocate or simply lend a friendly ear. Do work pro-bono to help people with their goals that will also advance campus goals. Look outside of campus to leverage local tech and entrepreneurship. And last but not least look to the national communities UwebD, BlogHighEd, HigherEDLive, eduStyle etc. and our friendly peer institutions to provide solutions and best practices for campus.

We must recognize that no one person is able to accomplish a better web on campus or community, therefore we must be open to a plan that encourages networking, cooperative relationships with others outside the campus, and implementation of practices that may reach our goal of a simple “better web on campus.”

Uweb

To add here is the mission statement I created in my first week here on campus when I was looking to start the University Web Group (Uweb)

University Web Group (Uweb) is an organization open to all web designers, developers, etc who use the web as part of their role with Florida International University. We encourage you to join regardless of your web knowledge or the amount of your job that is committed to working with the web.

Uweb seeks to create a collaborative web community for FIU, to exchange ideas, resources and best practices. We also seek to provide development in the form of online assistance and seminars.

Call to action

My call to action is two fold

1. What would you add to this action list
2. Who’s coming with me

I would love to hear the thoughts of people outside the FIU community as well.

Maps:

 

The FIU Campus maps was written on a JSON/AJAX platform. JSON is standard method of retrieving information for JavaScript and is supported by many programming languages, PHP included.

 

There are two ways of fetching information from the campus maps. Search buildings by leveraging a keyword or by querying a building by its id.

 

To search, you must leverage the url http://campusmaps.fiu.edu/search.php with a GET request.

 

The following are the parameters the url will accept:

q – to query all locations with a specific keyword

a – to retrieve a list of all locations that begin with a certain character

callback – the reserved parameter required for a JSONP format

 

So, if for example, you wish to retrieve all locations that have the keyword “panther” in a JSONP format, the full url would be:

 

http://campusmaps.fiu.edu/search.php?callback=yourCallBackHere&q=panther

 

To see what this would bring back, go ahead and click on the link.

 

To retrieve the information of a location by its id is similar. The url you need to access is http://campusmaps.fiu.edu/content.php

 

The following are the parameters the url will accept:

i – The id of the building

callback – the reserved parameter required for a JSONP format

 

So, if for example, you wish to retrieve the information of the Panther Parking Garage, id pgp, in a JSONP format, the full url would be:

 

http://campusmaps.fiu.edu/content.php?callback=yourCallBackHere&i=pgp

 

To see what this would bring back, go ahead and click on the link.

 

It should be a simple task now that you have acquired the information to display it in a format to your liking.

 

Calendar

 

The FIU calendar support multiple ways to pull information.

 

The most direct way is to simply link to the urls that the calendar provides. They can be found on the right hand side of the site, beneath the search bar.

 

There, you should see icons that represent the different ways that a feed can be pulled. PDF, RSS, iCAL, and CSV (a spreadsheet format) respectively.

 

The PDF and CSV feeds update with the date ranges and categories as you interact with the page while the RSS and iCAL feeds display only the upcoming events by default.

 

All feeds are attached to a particular calendar. If you click on the url while viewing the Academic calendar for example, all the feeds will relate to the Academic calendar.

 

However, all feeds can be modified manually by changing the following parameters.

 

The parameters that all feeds accept are the following:

cat – filter all events by a category

1. academics
2. alumni_and_community
3. arts_and_entertainment
4. athletics_events
5. lectures_and_conferences
6. student_life
7. faculty_and_staff_life

id – fetch only the specified event by its id

start/end – fetch only the events that fall in between the dates specified (format: yyyy-mm-dd)

search – fetch only events whose title contains the keyword

tag – fetch only the events tagged with the following keywords

 

So, if for example, you wish to retrieve the events tagged with the keyword “sports” in the main calendar in a csv file, for the month of April 2012 you would visit the following site:

 

http://calendar.fiu.edu/events/spreadsheet/calendar:main?start=2012-04-01&end=2012-05-01&tag=sports

So today I’m going to teach how to do an AJAX application from scratch. Since this is a tutorial we’ll keep things nice and easy.

 

We’ll simply say that we have some information on a database and that we want our site to display the five latest items whenever we click a button without having to refresh the page.

 

We’ll be using php to handle the server side script and using jQuery for the front end.

 

First, let’s take a look at our example database: Persons.

 

id	first_name	last_name
1	Andre	Oliveira
2	Henry	Hershey
3	Max	Payne
4	Ash	Ketchum
5	Fab	Ulous

 

Pretty straight forward. Just a few names with individual ids.

 

So lets write a php script to access the database:

 

<?php

// connect to our database

$con = mysql_connect(“localhost”,”peter”,”abc123″);
if (!$con) { die(‘Could not connect: ‘ . mysql_error()); }

 

// choose our database

mysql_select_db(“my_db”, $con);

// query the latest 5 entries in the database
$result = mysql_query(“SELECT * FROM Persons ORDER BY id DESC LIMIT 0,5″);

// place the results in a single array.

$output = array();
while($row = mysql_fetch_array($result)) {

$output[] = $row;
}

 

//display the contents of the array

print_r($output);

 

// close connection
mysql_close($con);

?>

 

So at this point, this is a pretty straightforward application. We simply query our database table, stick it in an array and display the contents.

 

However, if we want our information to be read by JavaScript, we have to either write a way for the JavaScript to parse the print_r command, or change the output to something JavaScript can already read.

 

The ideal format here is to display the information in JSON format. Lucky for us, php has a built-in function to transform data to JSON: json_encode.

 

echo json_encode($output);

 

This is good, but we’re still lacking something. If you recall in a previous post, I mentioned that if you want information to travel across different sites, we have to format it as a JSONP.

 

Lucky for us again, its a very small step to go from JSON to JSONP. We just have to wrap the data around a callback function which we pass though a GET.

echo $_GET[“callback”] . “(“ . json_encode($output) . “)”;

Almost done. The last thing we have to worry about is making sure that this page is read as a JSON, so we modify the header.

Here’s the final code:

<?php

// connect to our database

$con = mysql_connect(“localhost”,”peter”,”abc123″);
if (!$con) { die(‘Could not connect: ‘ . mysql_error()); }

 

// choose our database

mysql_select_db(“my_db”, $con);

// query the latest 5 entries in the database
$result = mysql_query(“SELECT * FROM Persons ORDER BY id DESC LIMIT 0,5″);

// place the results in a single array.

$output = array();
while($row = mysql_fetch_array($result)) {

$output[] = $row;
}

 

//display the contents of the array as json

header(‘content-type: application/json; charset=utf-8′);

echo $_GET[“callback”] . “(“ . json_encode($output) . “)”;

 

// close connection
mysql_close($con);

?>

 

That’s all for the server side of things, now for the client side.

 

Let’s make a very simply html page that we want to populate with our data.

 

<!DOCTYPE html>

<html>

<head>

<title>Test AJAX</title>

</head>

<body>

<div id=’informationDiv’></div>

<input type=’button’ value=”Get me that Info!” id=”infoButton”/>

</body>

</html>

 

Ok, now lets get jQuery in there, and bind an event for when the user clicks on the button.

 

<script src=”http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js” type=”text/javascript”></script>

<script type=”text/javascript”>

$(document).ready(function() {

$(“#infoButton”).click(function() {

alert(“You clicked me”);

});

});

</script>

 

Now that we’ve bound our click event, it’s time to pull the information from our page from before.

 

$(“#infoButton”).click(function() {

// Make sure to use your url here, not mine

$.ajax({url: ‘http://localhost/script/server.php’, dataType:’jsonp’}).done(function(data) { });

});

 

And the last component, display it so that we can see it. Here’s the final code.

 

<!DOCTYPE html>

<html>

<head>

<title>Test AJAX</title>

<script src=”http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js” type=”text/javascript”></script>

<script type=”text/javascript”>

$(document).ready(function() {

$(“#infoButton”).click(function() {

$.ajax({url: ‘http://localhost/script/server.php’, dataType:’jsonp’}).done(function(data) {

$.each(data, function() {

$(“#informationDiv”).append(this.first_name);

$(“#informationDiv”).append(” “);

$(“#informationDiv”).append(this.last_name);

$(“#informationDiv”).append(“<br/>”);

});

});

});

});

</script>

</head>

<body>

<div id=’informationDiv’></div>

<input type=’button’ value=”Get me that Info!” id=”infoButton”/>

</body>

</html>

 

And that’s it. Hopefully this will help you get started with some wonderful AJAX programming.

Your site launch has come and past and our course you used our site launch checklist. But now you need to be sure to keep on top of your site so it doesn’t become dated and unfunctional. So that that ends we created a post site launch checklist. Our list includes but is not limited to:

We also provided a nice PDF post-launch-checklist in case you want to print it out and check them off on your own.

Please let us know if you have any questions about how to implement any of these steps. If we forgot anything that you have learned from your site launch let us know and we will be glad to add it.

*NOTE* This list maybe not include everything you need to check for your site launch. Be sure to think of additional items particular to your setup. We cannot be held responsible for any errors on omissions on this list. Please let us know if you have any questions about how to implement any of these steps.