All posts in Portal

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.