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

  • http://webmastericons.com/ Alan

    Responsive web design! Nicely done!