A Tech Geek’s Explanation of Responsive Design


Co-founders Mike Lloyd and Jason LaFosse give a more detailed explanation of CatholicMatch’s new website design.

Are you one of the many CatholicMatch subscribers who login to your account using your mobile phone? For the past couple of years we have tried to keep two versions of our site. One version is for regular computer users and the other version is for people who are accessing the site with their mobile phones.

As more and more people started using handheld devices as their main computers, we quickly discovered that managing two different sites would simply not work. It was more difficult to keep site features and security in sync — while also providing optimal user experience.

We wanted to develop a consistent design for our members that would be easy to navigate not only on a widescreen monitor, but also on a cell phone. But as a small business with only three developers, we knew we couldn’t possibly keep up with larger companies who have more than 100 programmers working on their site and are writing apps for every specific device. We needed to be smart about our investments and decided to focus our efforts on responsive design.

Responsive design provides easy reading and navigation across a wide range of devices from widescreen, desktop, and tablet(L)/desktop, to phone(L)/tablet(P) and phone(P). The goal was to minimize the resizing and scrolling when we tested the site in the widescreen window and then shrank it down to a phone held in portrait view.

In order to accomplish this, we used the front-end framework Bootstrap — originally built at Twitter by @mdo and @fat. Bootstrap was the right tool for us since many of the features we desired were already developed in this program.

This toolkit made a significant difference with our site design and how it renders on multiple handheld devices. The graphic library makes it possible to provide a consistent design for our forms, icons and tables, so that our site design looks the same on an iPhone or on a widescreen monitor.

This open source software allows small businesses like CatholicMatch to stay current and competitive in the web development community.

Help us by testing out the new site. Leave us your feedback in the comments below so we can continue to provide the best user experience for our members.



  1. Meg-920823 May 23, 2013 Reply

    So far I prefer the new. However, I’m having trouble on the fora seeing if the members are online. I haven’t noticed if it’s this way on the computer now also.

  2. Rose-925076 May 18, 2013 Reply

    I use a windows phone and so far this evening I have had to login four times. I have also got stuck on a forum page and could not move forward or backwards or into any of the other options presented. Instead everytime I login I have been brought to the profile of a woman who posted on the forum ( If it had been a man he’d be worried he had a stalker and I’d be worried the Holy Spirit was trying to direct me somewhere 🙂 ) I had no problems with the older versions of either the mobile or desktop sites.

  3. Marcus-860000 May 18, 2013 Reply

    Not without making note of the license. It must be publicly visible, as the product in question is the distribution of a derivative work from Twitter’s code.

  4. Dave-915458 May 18, 2013 Reply

    @Emmanuel-940296 – I too second the problem regarding not being able to see the previous message when replying.

    @Marcus-860000 – Why is this a violation of the Apache license? https://github.com/twitter/bootstrap/wiki/License seem to say it can be used for commercial purposes.

  5. Marcus-860000 May 17, 2013 Reply

    Violating the license? – http://www.apache.org/licenses/LICENSE-2.0

  6. Emmanuel-940296 May 17, 2013 Reply

    I think things look too confined, and simple. The original design felt more elaborate and unique. I also don’t like that you can’t type a message and view old recent messages at the same time anymore. It was nice being able to scroll up look at the various things a person typed to me, then scroll back down to respond to those things.

  7. Mark-890687 May 16, 2013 Reply

    So far I like it more clarity.

Post a comment