All posts by

Portal Redesign Part 2: Some Web Design Challenges

jj

It was like an old farmyard pig, starting to get a little ornery and a little rotund around the middle. We needed a solution to make it more appealing, and we knew it wasn’t bacon.

We were stuck with ‘ole Blink, Bethel’s community portal, but need to prettify it. So, we harkened back to one of the most memorable quotes spoken by a vice presidential candidate in 2008. We broke out the lipstick.

A new login screen

First, we tackled the login screen. The old one was filled all sorts of information like why Blink existed, how to get help, a link to a virtual tour, and the animated eye .gif that actually blinked. Oh, and there was also a little form you used to log in.

To cut down on distractions, we stripped away everything that wasn’t essential to the task at hand—logging in to Blink. That meant putting the login form front and center. Only 4 other links survived, and they took secondary spots on the page or moved to the footer.

A few CSS surprises

Then we moved on to the portal interface. Once we started to change the colors and typography, we found crazy CSS split into multiple stylesheets with tons of style overrides. What does that mean? A maintenance nightmare. And once we started to edit the CSS, we started poking around the HTML to see what we could change and—surprise!—we found tables.

So we were sitting on an antiquated, table-based HTML structure with CSS that was built on exploiting browser quirks, specifically in Internet Explorer.

To move forward, we decided to keep the base styles intact, strip out any additions that had accrued along the way, and put a reset.css stylesheet over the top to normalize things across browsers. Next we started applying Bethel-specific styles, like our university colors and typefaces. The result wasn’t great, and we ended up having to pull back on some of the additions to the CSS to make the management areas of Blink work properly. But we managed to unify all of Bethel’s styles into one document, making it easier to maintain in the long run.

This allowed us to better reflect Bethel’s branding and colors as well as unify the typography. We also added some CSS3 techniques to remove all images from the interface to speed page load times, aside from the logo and icons.

To create a more seamless navigation, we brought the main navigation forward in the design and used spacing and borders to make the channels look more discrete and the titles more prominent. This was all completed in the winter of ‘10-‘11 with the intention of launching summer of ‘11.

A delayed launch (which paid off)

Due to the unforeseen circumstances, the launch date was pushed back indefinitely. But little did we know, like so many good things that come with time, this would work in our favor. Responsive web design was gathering steam and by the time we resumed work, the techniques were solid enough to put to use.

We first tried to make the tables responsive. That didn’t work, because of course, that is not what tables are made for. Then we made the crazy decision to convert all of the tables to divs, which took lots of time, patience, and chocolate. At the 11th hour we did it, applying media queries to produce 3 breakpoints—phone, tablet, and desktop.

The site has gone from looking suspect on a desktop, to looking quite spiffy in all browsers, on tablets, and even on mobile devices. Good ‘ole Blink went from country bumpkin to Babe, Pig in the City.

If you’re not a Bethel community member, check out the new Blink using our guest login:

user: demo
password: demo

Portal Redesign Part 1: A New Look on an Old Blink

jj

Hey Bethel, you’ve probably noticed that your old friend Blink has a new look. We thought we’d take a minute to answer a few questions about what changed and why we made the update.

I see Blink is different. Did you do something? Why yes, thank you for noticing. We redesigned it.

Did you change everything? No. All of the content should be the same except for the login page. We simply took what was already there and spiffed it up a bit.

Are you going change the content? Yes. Certainly. We know that a lot of the content also needs refreshing. However, that will be an ongoing project slated to begin early next year.

Why the redesign? Well, the short story is that 2001 called and it wanted its website back. ^_^’ But on a more serious note, we wanted to clean up the interface and highlight navigation to hopefully make it easier for visitors to get to the content they want to see and to complete the tasks they’ve come to do.

Why now? We were hoping to launch it last summer, but the underlying technology was a little antiquated, which lengthened the project a bit. In our next post, we’ll share more about those challenges and how we worked through them.

Also, due to new developments that rolled out in the Internet over the last few months, we were able to make Blink more useful on mobile devices. This is something we’re really excited about.

Will it work on my phone or tablet? Hopefully, most of the content will be accessible on common devices, but we can’t make any full guarantees. And if you’re hitting the site from an older phone, all bets are off.

Where’s the blinking eye? To every thing there is a season.

I don’t love it. Can you change something? If you have comments or questions for the Web Services team, feel free to post your thoughts here.

Stay tuned for our next post when we’ll share about the technical challenges we worked through to give Blink its new look.

Design Decisions

jj

A desire path is a path worn in the ground by people walking between paved surfaces. Usually just dirt, these paths often represent a shortcut. If you are familiar with Bethel University, you may have seen a few around campus, especially near the Freshman Hill area.

Park planners and architects have been known to visit new spaces after every snowfall to view newly created desire paths. When the snow covers the existing paths, people tread wherever they prefer.

When a person uses a website, they usually have a place they want to go. Rarely will users take the “sidewalk”, they will muddle around until they find their own way. In the web world, we don’t have the benefit of seeing the physical evidence, so we have to rely on feedback from users. We can also try to guess where desire paths may exist, and design the website accordingly.

Originally, we positioned what we’ve termed “task-based” navigation on the top row of the new site, as you can see in the screenshot. This included options like Login, Directory and Find People. We also positioned what we’ve termed “user-based” navigation in drop-down menu in the upper left corner that included options like Parents, Alumni and Prospective Students.

 

We decided to swap this location of the two menus in an attempt pave a potential desire path area. The drop-down menu has now become “Tools & Resources”, instead of “Information For”. Looking at the initial design, we wondered if we were creating too many paved areas that didn’t cut right to the content, but took a circuitous route instead. The decision was made in part because of the size of Bethel’s website. It has the potential to be daunting to first-time users and we determined that if would could get a user to quickly identify who they are, we could consistently and efficiently send them off in the right direction.

A parent, for example, may not know exactly where to go on his or her first visit to the site. Now that we have a navigation item on the top of the page called “Parents”, hopefully that will catch their eye and get them to click.

Website optimization is an ongoing process. Even after the new design has launched, we’ll continue to identify areas where the site can be improved and to pave the desire path areas for our users in order to create a great web experience.