Five Techwe are
May 20, 2014

Responsive Web Design for Minnesota Bank

Five Technology designed and implemented a responsive web design for a American National Bank, located in Brainerd, Minnesota. American National Bank has been a long time client of ours, we had designed their website awhile back. So, it was definitely time for a website redesign. Design standards and trends change often, so we typically suggest redesigning your website every three to five years.

ANB needed a website that provided easy to access information regarding its banking information, i.e. checking, savings, investments, and more for business and personal accounts. It also needed a gateway for its online banking system and real estate listings. ANB realized that many of its users had been accessing its website from mobile devices like tablets and smartphones. So, we wanted to optimize their new design for mobile use.

We would optimize the new website for mobile use by implementing a responsive web design. Essentially, we designed each page template three separate times for desktop, tablet, and phone screen resolutions. The page and its content would then adapt to each screen size once the website was implemented.


There were some important things to consider when designing the responsive states to a banking website. We wanted to make sure that the main components of the site were easily accessible on all devices, mainly the gateway to the online banking login. On the smartphone screen resolution, we cut out the hero image to push the login to the top and reduce the amount of scrolling on the homepage. We also made the phone numbers for each location readily available on the mobile responsive state by implementing a main menu tab for “Locations”. Users on the go do not have time to navigate through multiple pages, so by providing direct access to phone numbers and the online banking login, we increased usability of the new website.

ANB Hero Phone

American National Bank wanted a website that stood out from the other banks in Minnesota. It needed the usability of a large bank, but the look and feel of a reliable local bank. So, we implemented a custom website design. A custom design would give this banking website a professional look that would standout from the other bank websites on the web. We included elements in the design that were unique to the American National brand, such as the eagle in the back drop, a faded American flag, and flag like headers in the main highlight section.

ANB Highlights

We also built a unique piece of custom website development for this banking website, so that the website admin could easily add and manage real estate listings that were being promoted by American National Bank. The admin could easily upload images, property descriptions, and more.

American National Bank has seven locations and has plans to grow in the future. So, we wanted to highlight each branch with a specific page. Each page includes contact information and a integrated Google Map. This would allow new and existing customers easy access to information regarding their specific banking location.

Bank Locations Page

Overall, this website redesign was a great addition to our web design portfolio. A responsive web design will give American National Bank’s customers a great a user experience, and the custom website design will help set ANB apart from its competitors. We look forward to helping this bank out with all of their Internet technology needs for many more years to come.