21

New Nelnet.com: 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 nelnet.com 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:

Completely updated content

Responsive layout

Grid or list view

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.

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:

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.

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.

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.

Related Posts:

Hi there, just became aware of your blog through
Google, and found that it’s really informative. I am gonna watch out for brussels. I’ll appreciate if you continue this in future.
Lots of people will be benefited from your writing. Cheers!

Raj Sinha

Promo Code : ” WORLDT20 ”

Description : This promo code credit INR 149/- in user Wallet, when user redeem this code then credit this amount in user wallet and they will use in Premium ad.Also chance to win “ICC World Cup T20 2016 Ticket”.