Blogs

Bootstrap Upgrade Project Update

By Catherine Poon posted Feb 17, 2015 12:43 PM

  

Hi HUG,

Last Summer Mark Eichler, Higher Logic's Product Manager, announced HUG’s re-launch with a new responsive design on the Bootstrap framework. Shortly thereafter, Higher Logic announced the release of many responsive client sites at Super Forum.  Higher Logic has received an overwhelmingly positive response from clients and users.  We are looking forward to a time when all Higher Logic sites are updated to the Bootstrap responsive codebase. 

So far, about half of Higher Logic's clients have been upgraded from the old codebase and are enjoying the benefits of mobile-friendly websites.  We are eager to help all our clients reach this goal.   Transitioning all clients to the new responsive template is something we would like to achieve by the end of Spring 2015.  Once clients have been upgraded, Higher Logic will sunset the old codebase and the adaptive mobile experience.

 
Bootstrap Benefits

There are two main benefits of upgrading your community site to Bootstrap:
  1. Bootstrap uses responsive design which means that content re-configures itself to fit with the size of your device. This will provide your end users with an intuitive and consistent mobile experience. 
  2. Started by Twitter, Bootstrap is an open-source framework that is recognized by many web designers and developers. As a result, there is a plethora of online resources, such as Bootstrap’s official documentation and a large number of bustling online forums, that can provide countless opportunities to learn and get support beyond Higher Logic’s product documentation. 
There are other benefits of the responsive mobile solution that resolves the shortcomings of the old mobile microsite:
  • You are now able to keep your organization’s branding consistent during the user’s mobile experience. 
  • Interior HTML pages are visible on the desktop and mobile devices.

 

Bootstrap’s Biggest Changes

As with all product improvements, there are some changes.  The new responsive design is more intuitive, and so some of these changes will go unnoticed, but are worth mentioning:

  • Adaptive mobile version will be turned off.
  • Content and the main navigation will stack on top of each other on a smaller screen to create a vertical scrolling experience on a mobile device.
  • Main navigation: On a mobile device, there isn’t a hover state for the main navigation. Therefore, if a parent navigation item has children, clicking on the parent navigation item will not direct users to a new page.  Instead, selecting the parent item will only open up the dropdown of children.
  • Profile page: Higher Logic has re-worked the profile page. We have consolidated the main profile actions into intuitive tabs (Ex: My Connections, My Contributions, My Account, etc.)
  • New theme manager option–Import Theme: Most clients accomplish their design using Color Picker + CSS Override, but some clients have imported a theme (ex: bootswatch.com). If the client is unable to change a design element on the site, they are welcome to submit a request to Higher Logic for small design changes.  Please note that clients may be asked to reach out to a design consultant for more advanced CSS assistance.

 

Are you Bootstrapped? 

Are you wondering what codebase you are on?  If your site was launched in the last three months you are almost certainly on the new Bootstrap codebase.  There are few checks to confirm if any Higher Logic website has been upgraded:

  1. After login, do you see your profile picture with a dropdown arrow which must be clicked to expose the welcome box links?   If so, you are on the new, updated codebase. 
  2. Minimize the width of your desktop screen.  Do the content items on the homepage re-configure themselves to fit the width of screen by stacking into one column? If so, then your site is responsive and on the new codebase.
  3. Navigate to the profile page, and select "Edit Navigation".  Is there a content item on the profile page called "profilebase"?  Profile base is our new best practice configuration for the profile page.  Clients who have been upgraded to Bootstrap should have this new page in their CMS.

If you found yourself answering "No" to any of these questions, your community site is mostly likely not updated

 

Getting Updated

You won’t go it alone - upgrading to the Bootstrap codebase happens in partnership with Higher Logic staff.  To submit a request to upgrade, please email support@higherlogic.com. Higher Logic will review each request and based on your configuration, will schedule your upgrade date.  Clients with more complex sites (lots of microsites, custom CSS, or custom controls) may require a longer lead time to complete the in-depth upgrade. 

More Information

For more information on Bootstrap and its benefits, please check out the following HUG-approved links to learn more about Bootstrap and responsive design:

  1. Bootstrap’s official documentation 
  2. Higher Logic’s bootstrap documentation
  3. Checklist of considerations for the new template 
  4. Info Sheet

 

1 comment
338 views

Permalink

Comments

Mar 02, 2015 05:10 PM

Very cool.