The Portfolio of Justin Ruess

Introduction to FBML – UPDATE

jruess — Tue, 26 Apr 2011 20:26:22 +0000

So, wouldn’t you know, not long after my last post about Facebook FBML, Facebook comes out and depreciates it and starts wanting everyone to start using their own hosted HTML and iframes.

While this is very beneficial to people who want to do more in their pages, it does put a little bit of a crimp on past pages you may have already developed. First, lets talk about how to convert over to the new Facebook iframe way.

Converting existing fbml into HTML

The good news about this update is now you can use plain ole HTML now. So, if you had saved your past FBML as a text file or can copy it out of the application, lets make the first couple of changes:

Declare a Doctype!

First and foremost, you MUST declare a doctype now. Since it is not being rendered on Facebook’s page anymore, declare it in your new HTML file. A proper doctype will look something like this:




 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Now, I chose XHTML Transitional here, but you can choose whatever you like. While we are at it here, go ahead and add the and tags to the beginning and end of the document as well.

The Stylesheet

If you depended on any of Facebook’s default styles for fonts, line-heights, padding, or margins, then the bad news is you will have to go through and declare them in your CSS file.

One good thing about this transition is that you no longer have to put a version number on your CSS file when you update it. No more senseless updates to a version number whenever you make a troubleshooting CSS change.

iframe Scrolling

So you design this awesome 520px wide creation, make the transition to iframes, and now you have scrollbars taking up 16px of your design and not showing all of the bottom until the user scrolls? Yeah, I had that too. Fortunately, it is an easy fix. First thing, lets get rid of the scrollbars by adding this:



body {overflow:hidden}

But wait, now the user can’t even scroll to see the bottom of your page! Again, easy. For this, you need Facebook to resize the iframe to the height of your page. Just a little addition to your HTML should fix all of that:

Stepping through that code for a second, first, you are adding a div for Facebook to do it’s magic in (fb-root). Next, we are adding Facebook’s script to our page. The first of the script tags is basically referencing your APPID (we will get to that in a minute) and the second one is telling Facebook to perform a resize on the iframe to fit your page. Now I am not a JS maven by any means, so if anyone reading this can condense it and get it to work, feel free to let me know in the comments.

Other changes

You no longer have to use the FBML code for analytics, flash, or javascript calls, which is a welcome addition. However, they have left out some of the documentation (or made it very, very hard to find) regarding how to migrate most of the calls from FBML, like the Share Button.

Setup

So, you now have your HTML set up and on a server waiting for your fans on Facebook to see it. This is where the process gets a little more complicated than before.

Create an app

Go to the App Developers page and setup your new app
Your APP ID which you will need to put in the HTML for js calls is located on the App Developers page. You must complete this before it will properly show on your page
Back on the App developers page, in the Edit Screen, click on “Facebook Integration”
At the bottom where it says “Facebook Tabs,” choose iframe and put the URL of the uploaded html file in the “Tab URL” field
Click Save

Add to your page

Back on the App Developers page, click on “Application Profile Page”
Once there, click on the “Add to My Page” on the left column. Note: It is ok if you do not see the HTML before you click this
If you have more than one Page that you have created, it will prompt you to select which page you want to add it to
Go to your page to verify it is there

And you have now added a new tab to your Facebook page using the new iframe system.

Conclusion

This may not cover everything with the new iframe tabs, but it should help you convert some of your old code to it and create new ones as well. While Facebook took away their FBML calls, this new system has a ton of potential for new designs.

Do you have any tips or tricks that you have found while coding for Facebook? Let us know in the comments.

About Me

jruess — Tue, 14 Dec 2010 14:42:57 +0000

A designer at heart, I always strive to find the unique qualities in every project and showcase them for the world to see. I have worked on everything from interactive design to customized print campaigns for clients across the globe.

Experience

You want it, I have it. Freelancing for over 5 years, I also have 3 years of agency experience, 1 year of large corporation experience and created all media and marketing materials for a non-profit that went from five people to over 350 in a matter of 3 years.

I have worked for clients such as La-Z-Boy, DePuy (a Johnson & Johnson company), Huntington Bank, US Bank, Root Learning and many others.

Want to know more about me? You can download my resume for a more detailed look, or contact me below for anything you need.

Introduction to FBML

jruess — Thu, 30 Sep 2010 19:01:02 +0000

The world of Facebook is upon us, and something that companies have to account for and engage with on a daily basis. With over 500,000,000 users, the platform is just way to large to ignore. Luckily, Facebook allows you to do this quite easily through their Fan Pages.

Now, there are several things you can do with this, from sending updates to all of the people that “Like” your company, creating promotions and give-a-ways for your customers, and creating personalized tabs that adhere to your company’s branding. Today, we will focus on the last of these, through FBML.

Introduction to FBML

FBML, or Facebook Markup Language, is very close to what we already know with basic HTML. It uses most of the same tags that we already know, so you can keep using your divs, spans and anchors, leaving the learning curve very minimal. You can also link external images and stylesheets, so your fan page can look exactly like you want it.

However, since you are on a third party site, there will alway be some restrictions that you must adhere to. First and foremost is the width. When styling, you must stay within 520px wide. You may make the page as tall as you need, but your width is key, as your site will have side bars on both sides.

The largest difference between HTML and FBML is a new tag to get yourself familiar with: fb.

The “fb” tag

Now there are many different uses for this, probably too many to list in a simple “Introduction” post. Because of that, I will go ahead and go through some of the more common and useful tags for normal use.

The Facebook Share Button

The fb:share-button is probably one of the more useful tags for viral marketing. While you don’t get control over the style of the button, you get quite a bit of control over what actually happens after a user clicks on it.

The purpose of this button is to share a specific page or website with the user’s friends on their wall. Now let’s look at what you can actually inject into this code. To edit these, you need to edit the meta information:

meta name=”title” content=”Test Fan Page”
This is the title that is shown when an item is shared. You can name it anything relative to the link you are sharing.

meta name=”description” content=”description of fan page”
This is a brief description of the link. It is best to keep this short and sweet, but still have enough juice in it to draw a person to click on it.

link rel=”image_src” href=”"
This is a thumbnail that you can share with it. If you are selling a product, you might want to put that here. You can also put a logo, screenshot of your page, or whatever you really want to here, just remember, people are going to see it pretty small.

link rel=”target_url” href=”http://facebook.com/TestLink”
This is the most important part of the share button. It inserts the link you want people to go to when they click on the wall post.

The Reference Tag

The fb:ref fetches a page or content from an external source and renders it on your FBML tab. This can be useful for as itt lets you pull in feeds from external sources. Say you want a jobs tab highlighting the jobs you have open at your company. If you already have them posted on a job board, you would be able to pull in the feed from that job board into Facebook with having to post it on both locations.

Google Analytics

Yes, that Google Analytics. The behemoth of tracking tools is available on your facebook page so that you can track the info about your user. And all you need to do is put your account code in the tag above.

Facebook Member only Content



Wow! We like you too!!!

There are times where you might want to promote items to Members Only. This might be for a contest that requires that people “Like” you or for polls, images, etc… Luckily, this is really easy to accomplish by putting the Members only content into the fb:visible-to-connection tag.

Style it Up

Since Facebook lets you import CSS files, styling is identical to what you are already used to. Here are a few tips so that you do not get tripped up:

CSS Versioning

When linking to an external stylesheet, Facebook requires that you version it. It really is quite simple to do:

As you can see, linking to the stylesheet is identical, all you need to do it put the ?v=1.0 after the url. Each time you update the CSS file, you MUST update the version for the change to appear.

Reset? Don’t need it

You do not need to reset default styles as you normally would when coding a site. Facebook already has it in place so you don’t even have to bother with it.

Wrap up

Now there are many more tags and ways to get your users to engage with your brand. We will explore more of the tags in a later post, but this should get you pointed in the right direction.

Do you have any tips or tricks that you have found while coding for Facebook? Let us know in the comments.

CSS3 RSS Icon

jruess — Tue, 20 Jul 2010 20:16:44 +0000

Well, here we are for week 2 of the CSS3 Icon experiment. This time we will tackle the RSS icon, and as always, not use any images. For this implementation, we are going to keep the mono-chrome look that we did with the Search Icon.

Let’s jump right in:

Again, I am targeting CSS3 here, so it will not work in all browsers. In addition, I am not going to delve too deep into the reasoning here, but I am only showing code that works great in Webkit-based browsers.

The CSS3 RSS Icon

To start, let’s create the HTML:

In this, I have 4 divs. The outer div, rssBox, is like a wrapper and contains all the pieces. The other 3 divs are the 3 separate pieces of the icon, the top line, bottom line, and circle.

Now, let’s try looking at the CSS. We will start with the main wrapper, rssBox.



.rssBox {

position:relative;

height:26px;

width:26px;

}

This is very basic. I am declaring the positioning, so I can make the other items inside positioned relative to this, and declaring the width and height. Declaring the width and height will be important for a future lesson, but really doesn’t do much for us now besides let us know how large our icon is.

Next, let’s take a look at the lines:



.topRSSLine {

height:36px;

width:36px;

border-right:5px solid #000;  

border-radius:18px;

-webkit-transform: rotate(-45deg);

position:absolute;

top:5px;

left:-17px;



}

  

.bottomRSSLine {

height:20px;

width:20px;

border-right:5px solid #000;  

border-radius:10px;

-webkit-transform: rotate(-45deg);

position:absolute;

top:13px;

left:-9px;

}

The code for the 2 of these is almost identical, with just the sizing and positioning changing slightly. Starting at the top, we declare the height and width of the div. Next, we declare the border for the right side ONLY. This is very important, as the RSS Icon is essentially a quarter circle. We can then declare the border radius for the div, making it half of the height and width for the circular look.

At this point, the quarter circle is pointing to the right. Using the “transform” selector in CSS3, we can rotate it back 45 degrees to it’s proper place. Since this is not supported fully, you have to use your favorite browser‘s extension for this (ie. -webkit-).

The last 3 lines in each are positioning the element in the correct placement.

Now, the circle:



.RSScircle {

height:0;

width:0;

border:2px solid #000;

border-radius:3px;

position:absolute;

top:19px;

left:3px;

}

This code is a lot like the ones above, except it is using the border on all sides to complete the circle. It then positioning it where it needs to be to complete the icon.

Now, that’s it. you have a simple, mono-chrome RSS icon built completely using CSS3.

Who Needs Images? The CSS3 Search Icon

jruess — Fri, 16 Jul 2010 10:54:35 +0000

Well, it has been very quiet around these parts lately. No, I have not given up on the blog already, I have just had to focus on a slew of other items, you know PAYING gigs… Gotta pay the bills after all.

Anyways, I will start a new weekly segment that outlines a small piece of code that I am working on that should come in handy for the future. This week will focus on icons without images. Since this can go quite a ways, it may take a few times to get this done in it’s entirety.

For this example, I will be using CSS3, as I am targeting this at a WebKit browser (the iPad).

The CSS3 Search Icon

The purpose of this is to create an icon that looks like a simple magnifying glass using CSS3. To start, I will create the HTML:

I have formatted the code into 3 divs, one that acts as a holder, one for the circle and the other for the handle. Now for the CSS Magic:



.iconHldr {

position:relative;

}

First, I declared the position on the iconHldr so that we can when we declare it on the inner divs without any problems. Next, the circle:



.searchCircle {

border:2px solid #000;

height:12px;

width:12px;

display:block;

-webkit-border-radius: 6px;

}

This is pretty basic code, a 12px high and wide div with a 2px solid black border. The trick to make it round comes from the “-webkit-border-radius: 6px;”. I am using 6px because it is 1/2 the width of the div (a radius is half the width of a circle). Like I mentioned earlier, I am specifically aiming at the iPad for this, so all I need is WebKit, and this transforms my square div into something with rounded corners. Since I am using the same border-radius as I am the height and width, it makes a circle. Now the handle:



.searchHandle {

display:block;

background:#000;

height:3px;

width:7px;

-webkit-transform:rotate(53deg);

position:absolute;

top:15px;

left:12px;

}

Again, a lot of this is pretty basic until you get to “-webkit-transform:rotate(53deg);” This makes the div that we created rotate to 53 degrees. We then move it down to the lower right hand side of the circle with the top and left positioning to get the final result, shown in the image at the top of the page.

I can’t wait for more browsers to fully support these new features (or the old browsers to get outdated enough that we don’t need to worry about them anymore). This is just the tip of the iceberg on what we can do with CSS3.

Cha-cha-changin’

jruess — Wed, 30 Jun 2010 00:56:17 +0000

Life is funny sometimes.

After nearly 3 years of working as an Interactive Designer at a well established marketing firm in Toledo, I will be moving on to the next step in my career.

Initially coming to Monroe, MI to help start a church, I found work about 45 minutes away doing what I love: web design. Hart Associates took me in and allowed me to grow and flourish while keeping me well grounded in the basics of design and UX. I am extremely grateful for the opportunity that they provided for me and will miss the team there greatly.

I was also able to greatly help out the church, as you can see from quite a few of the works in my portfolio. Launching Elevate Church will be an experience I will never forget. From 5 people meeting in a small townhouse to a Launch service of 364 people, and continued growth throughout the first year, it was truly remarkable. I was lucky enough to lead the initial media team and see the countless stories of life changed in Monroe. Elevate will forever be in my heart.

But life changes, and we are changing with it. Tomorrow will be my last day at Hart, as I am packing up and moving my family this weekend to Orlando. I have accepted a great job offer at FIS, a branch of Fidelity, and will be working as their User Experience Engineer. I am very excited about the possibilities that this offers and know that it is the right step to take in our journey.

We appreciate all your prayers as we move down there. If any of you ever are visiting Orlando, feel free to get ahold of us and we can meet up for dinner or golf, or both.

The only thing I know for sure is this: I will be a lot more tan next time you see me!

10 design sites to fuel your creative fire.

jruess — Fri, 05 Mar 2010 15:13:28 +0000

As designers, we always have to stay on the cutting edge of what the next design trend is, and even try to beat that trend when possible. But we all know that there are days, sometimes weeks, that we run on empty. It just seems like everything we come up with could have been done by a first grader in Microsoft Paint.

Okay, maybe it’s not that bad, but designer’s cramp definitely hits us all. When I start to see the first glimpse of it coming, I try to head it off by going to some of the creative sources I know. Here are 15 that have saved me from cramping up for prolonged periods of time:

Abduzeedo

Abduzeedo is one of the premiere blogs for creatives known to man. From typography inspiration and freebies to Photoshop and GIMP tutorials, the group of writers/designers put everything in your hands to break your slump and get back on track.

Unmatched Style

As a web designer, I have not found a better CSS gallery to get inspired from. They focus on not only beauty, but usability on this prestigious site. It is very funny to even look back and see what we thought was good in 2004… Scary that some of those sites have not changed since then though.

Deviant Art

Deviant Art is a little different from the other, as you can go for hours and find nothing but junk in it. However, the community on that site uploads some good designs if you know how to search right for them.

Web Designer Depot

Web Designer Depot also gives away some freebies, but I think the best part about this site are the inspiration posts.

Noupe

Noupe was recently purchased by Smashing Magazine, and for a good reason. You can’t go more than 2 posts before breaking your slump.

PSDtuts

PSDtuts is another favorite, always posting cool designs, then shows you how to create each one. Even if you don’t work in Photoshop, their network has something for just about everyone.

CreativeMYK

Known more in the church community, CreativeMYK allows churched to share their series designs with each other.

TheDieline.com

Going away from the digital realm, TheDieline.com focuses solely on packaging.

LogoPond

LogoPond is one of the best sites for identity branding out there, from modern and hip to classic and charming, all the new logos from around the world get uploaded there first.

Speckyboy

Another member of the Smashing network, Speckyboy puts a lot of inspiration out in Photoshop and webdesign.

Bonus: Go Outside

The best thing when trying to get the creative bug back is to go and get inspired by the creation around you: Nature. Take your moleskin (we all know you have one) and a pencil and draw for a few hours. Go to a place where you won’t be interrupted by your phone or have you mind on your email. Make it a weekend if you have to, but take time to relax for a little bit, get in touch with Mother Nature and you will see creative life flowing like it never has before.

The Final Word:

Do you have any sites that you go to for inspiration? Share them below. We all know our sites can get a little boring after a while too.

Daily Tools for Web Designers

jruess — Sat, 20 Feb 2010 05:45:59 +0000

Now we have all seen our fare share of posts on “What tools a designer should use.” This is not one of them. In fact, this is more about what I use on daily basis to help with my productivity. Hopefully it will open up some new options that you may have never known about before.

Lets start with the obvious:

Firefox

Now let me actually put out this disclaimer: I do NOT browse the internet with Firefox. It is a very good browser, and I do recommend it to people, but for my every day browsing, I use Chrome. It works much faster for that purpose.

However, I design and develop everything in Firefox. The plugin repository and community is HUGE and makes life easier and more efficient. Speaking of plugins:

Firefox Plugins:

Firebug (duh)
From editing CSS and HTML to Javascript debugging, if this tool is not a part of your daily use, you need it to be.

YSlow
YSlow is actually a plugin for Firebug. It extends the capabilities, adding tabs so you can see why a certain page is loading slow. It also brings in my favorite image compression: Smush.it™. That allows you to make sure you have the most compressed images you possible can for your site, without losing quality.

MeasureIt
MeasureIt is an accurate ruler that lets you measure anything on your webpage. It embeds itself on the bottom toolbar for easy access at any given time. I would not suggest using this for all your measurements, but it can give you a good idea at how much space you have to work with.

FireFTP
FireFTP is an in-browser FTP Client. It supports drag and drop functionality, saves all FTP info so you can revisit it later. Did I mention you don’t have to open another application because it is in-browser. Yeah.

CaptureFox
Ok, I don’t use this one every day, but it comes in very handy when you need to do a quick screen recording for a demo or tutorial.

Web Developer Toolbar
This one is useful, but not often on the front of my mind. It has various functions I use daily, like disabling cookies and cashe, javascript, etc…

User Agent Switcher
This one is especially useful when switching between mobile design and desktop design. A must have if you do both.

Photoshop/Fireworks/Illustrator

I actually use all 3 of these from time to time, with most of my time being spent in Photoshop. If I need a vector graphic when designing a site in Photoshop, I will use Illustrator. If I am designing the site in Fireworks, I just use that program alone. I am extremely more comfortable in Photoshop, so that is where I focus the most of my energy right now.

Kuler

Since we are on the designing topic here, I would be remiss to leave out Kuler. You can find and create color schemes with this handy tool. The trick is to sticking with the palette once you do the design.

Dreamweaver CS4

The steps from CS3 to CS4 in Dreamweaver have been the most drastic that I have seen in a while. CS4 brings in the live preview and actually opens all linked files at once, which cuts down on time spent searching, opening and editing. CS4 has really cut down on the bottom line.

TextEdit

Yes – the one that comes standard on a Mac. Why? It is simple to use, no bloat and quick. When I have a quick HTML, CSS or JS edit that I need to make and no program is already open, why wait for it when TextEdit can do just as good of a job in less time.

Boot Camp

Yes, I know Parallels is out and can do the same thing except without the reboot, but I just can not justify myself spending more money on stuff for Microsoft. Since Boot Camp comes with Mac, it is easy enough for me to use only that to make sure my sites look fine in that great, never-dying Internet Explorer.

The Final Word

So there you have it; tools I use everyday. Is there something you know that could make my life easier? Did I make any of yours a little better? Let me know in the comments below.

College Websites – Big 12

jruess — Sat, 20 Feb 2010 01:00:07 +0000

This post continues a series where we will look at the websites of colleges throughout the nation, broken down by football conferences.

In this post, we look at the Big 12 (South) and pick a champion:

Baylor University

Baylor makes it easy to navigate through and get to what I want in a hurry. Unfortunately, when clicking through the navigation, the first few links take me to sites that look totally disconnected from the original site I was on. Consistency comes when you get lower in the navigation, but when the focus on the top of the navigation, users probably would not even know they are staying within Baylor’s site.

The design is pretty standard. Nothing to brag about on Baylor’s side here. It uses simple gradients, but lacks true depth in any design element.

Verdict: While easy to navigate, I would at least suggest a minor face-lift, unifying the look on all pages while adding a bit of depth through the use of some textures and shading.

University of Oklahoma

Oklahoma does a great job taming the red. It is there showing the school spirit, but glaring and taking your attention away from the content of the site.

However, it have a few of the same faults that Baylor did above. Consistency throughout the site is non-existent, going from a fixed width, centered site, to a full width site, to a left aligned site at times, the inconsistency can really confuse users and give an overall broken view of the site.

Verdict: I like where they are headed with the design elements on the homepage, and it actually carries through to some of the sub pages. If they unified that look, this would be a top-notch college site.

Oklahoma State University

Oklahoma State has quite a few things right from the beginning. The drop down menus are mini site maps, allowing the user to get to virtually any page whenever they want. The large image slider on the homepage provides a nice look into the life at OSU.

Design wise, they provide a nice depth through the use of textures, consistency through all of it’s pages, and nice, large images to lead into the content.

Verdict: This site looks like it was recently updated. It is well done and consistent.

Texas A&M

Simplicity is key with the Texas A&M site, and it works very well for them. They create nice depth from the background by using different shades of the color below the main content area.

The lack of drop down menus creates an extra click for the user to get exactly where they want, but the landing pages create a nice portal to all the pages underneath.

Verdict: The site is designed well graphically, and is very consistent throughout. I would jazz up the menus a bit to provide easier access to the subpages.

Texas Tech University

The Texas Tech site is easy to navigate around, and the side navigation always lets the user know what is going to happen. The use of icons for pages that will open in new windows helps the user understand why the design is not the same from page to page.

That being said, the red draws attention away from the content on just about every page. A secondary color may be the best thing to go with for big colored areas, and leave the red to accent colors.

Verdict: Even though the site is well designed, the color scheme needs to be adjusted to keep the main focus on the area that need it the most.

University of Texas

I almost don’t know where to start on this one. I don’t know how a site can be so boring, yet so busy at the same time. I don’t even know where I am supposed to look on the homepage, or what the best way for me to navigate around the site would be.

The site goes from a centered 3 column layout, to a left aligned 1 column site. Consistency is low throughout rest of the pages.

Verdict: A makeover is definitely needed for the University of Texas. A total redesign from the bottom up would help attract students and allow people to find information about them easier.

Conference Champion

Oklahoma State University pulled away with the win in this conference, as it leveraged consistency, depth of design and modern functionality. It almost wasn’t even a contest, as it was one of the only consistent sites here.

College Websites – Big 12

jruess — Tue, 09 Feb 2010 09:36:20 +0000

In our new series, we will look at the websites of colleges throughout the nation, broken down by football conferences.

To start us off right, we will go with the Big 12 (North). Let’s see what they had to offer:

University of Colorado

As far as usability goes, the University of Colorado website is pretty good. The navigation is clean and I can easily get wherever I want to in the site.

The overall look is a bit dated, probably around 3 years old. They have some beautiful photos throughout the site and showing them off a little bit more would not hurt, but their main focus of content always has to stay their main staple. The odd search area which seems to overlap just about everything also stands out like a sore thumb on all pages.

Verdict: This site could use a makeover to focus more on what would attract a prospective student into attending.

Iowa State University

I understand that there is a lot of information that universities want to get out, but this site just seems confusing with a few different types of navigation. The index at the top just seems out of place, especially with the search right within reach.

The visuals on this site are extremely underwhelming. Adding a bit of depth to the design by some simple gradients would make a world of difference on this site.

Verdict: Redesigning this site would help out both the usability and visual stimulation that this site lacks.

Kansas University

This site demonstrates how the A-Z index, search and normal navigation can co-exist in a logical, usable way. This site was easy to navigate and each page seemed to “belong” within the template of the rest of the site. Some of the icons are a little out of date, but overall, this design is solid and usable, gently directing the user where they need to click next.

Verdict: This site does not need a major redesign, but freshening up some of the iconography would not be a bad idea.

Kansas State University

Even though there is not a lot of information on the homepage, it seems overly busy and I am not sure where to look. This could be fixed by a simple color change: using purple as an accent color instead of dominating the page.

The layout makes the copy easy to read through, but need to do a better job at guiding the user to the intended destination.

Verdict: A full-blown redesign is not necessary, but changing the color scheme and a few other minor tweaks would make this Kansas State stand out from the crowd a bit more.

University of Missouri

The University of Missouri does a good job at presenting the massive amount of information, but it can get confusing with the links scattered throughout the content so much. Separating them outside of the content and putting calls to action throughout the content would help guide the user down the path they want.

The look is very clean, but very boring. Using larger images throughout the site could help with spruce things up a bit.

Verdict: A redesign would be a good move by Missouri. If it is kept it clean and made a bit more modern, it would really benefit the University.

University of Nebraska

This design utilizes the red to its advantage, making it more of an accent color that does not overtake the design. The clean navigation and large imagery help show that Nebraska is committed to their students and faculty.

Verdict: This site does not need to be redone right now. Possible improvements could be made in the footer area to add the news or events or even a quick link section.

Conference Champion

In a dog fight between Nebraska and Kansas, Nebraska pulls out a nail-biter on some of their special features, like Planet Red.

Overall, I was mainly disappointed in the lack of depth on most of the sites in this conference, and they all looked like they were built 2.5-5 years ago. For institutions that are teaching the next generation how to stay ahead of the game, they have dropped the ball and fallen behind on their websites.