New Sporting an Awesome Responsive Layout

Can a big, publicly traded (NNI) finance company take the lead in adopting latest web practices and technologies? Heck YEAH! On March 21st 2012, our team published the public facing website for sporting an awesome responsive layout, HTML5 and CSS3.

I began concepting the website about a year ago and since then, have been working with a team with brilliant designers, copywriters and developers to bring the sketches, wireframes and HTML prototypes to life. My role was primarily in figuring out the user experience, user testing and front-end development.

Here are few major highlights of the re-design:

  1. Completely updated content
  2. Responsive layout
  3. Grid or list view
  4. Instant search

Completely Updated Content

We spent a huge chunk of time  auditing and developing new content for the website, with a lot of emphasis on new imagery and videos.

[flickr id=”7004713219″ thumbnail=”medium” overlay=”false” size=”small” group=”” align=”left”] [flickr id=”7004713253″ thumbnail=”large_square” overlay=”false” size=”small” group=”” align=”right”]

Responsive Layout

This one was my “baby!” As the amount of content will grow in the future, we had to figure out a way to display it efficiently on desktops, laptops and mobile devices.

[flickr id=”7004724765″ thumbnail=”large” overlay=”false” size=”small” group=”” align=”none”]
One of the biggest responsive layout challenges I had, was figuring out how to deal with a rotating promo image. I think the solution I came up with works pretty well. All the boxes, no matter how much screen space they take, have same HTML markup:

<li data-priority="13" data-tags="nes,nbs" class="box one-column-box">
<div class="box-header">...</div>
<div class="box-content">..</div>
<div class="box-image">...</div>
<div class="box-icon">...</div>

Then, using a combination of CSS classes, media queries, HTML5 data attributes and some custom jQuery, I managed to optimize the appearance and functionality of the boxes for different screen sizes, while maintaining them in a specific order. Visit the website and resize your browser to see the effect.

Grid or List View

While a gridded box layout like this was easy to implement, we knew it wouldn’t be the most traditional way to present content. So we came up with a toggle button that allows users to view the content in a list or grid view. I’ve set up a cookie to remember users setting for the next time they come and visit us and voila! Everyone is pleased.

[flickr id=”6858596574″ thumbnail=”medium_640″ overlay=”false” size=”small” group=”” align=”none”]

Instant Search

This was another biggie I pushed for in the new design. Instant search is advantageous because it provides users with results and feedback on partial and full queries. Thus, despite some CMS challenges, our awesome developers were able to figure the server-side magic needed for us to interface with the search scripts. All I had to do was write some simple jQuery to tie it all together.

[flickr id=”6858625014″ thumbnail=”medium_640″ overlay=”false” size=”small” group=”” align=”none”]

Future Improvement

One of the biggest improvements we’ll be working in the  future is device optimized image delivery. Because we’re very mindful of users’ bandwidth, we optimized JS and CSS files as much as we could. For example, all layout images are in two sprites and content images are web optimized making our website pretty fast.

[flickr id=”6858684684″ thumbnail=”medium_640″ overlay=”false” size=”small” group=”” align=”none”]

However, it can be faster and that’s something we’ll be working on in the near future.

Check out the new and let me know what you think.

Related Posts:

  • No Related Posts