Responsive Design Overview

What is it?

MemberClicks has designed 5 mobile optimized responsive designs for use on desktops and mobile devices. The design includes four views - one for desktop, one for tablet, and two for mobile (one vertical view and one horizontal view). NOTE: The responsive designs are for the front end website ONLY and will not impact the Admin/backend view.

What does this mean for me?

If you're a current customer using MemberClicks for your front end website, upgrading to the responsive design will allow your website to dynamically respond when viewing on a mobile device or tablet. If you're interested in learning more about our website design packages, click here to contact us!

Desktop View

NOTE: The screenshots below were taken using the MemberClicks Vinings design. See other design options available here.

In the desktop view:

• The Main Menu appears across the top of the page.
• The Login box at the top righthand side of the header will switch to a Logout button after a member has logged in.
• The home page slideshow will rotate constantly.
• There are modules/widgets in the right bar, and at the bottom of the home page.

Here's a .gif moving through the desktop view.

Tablet View

In the tablet view:

• The Main Menu will appear after clicking on the Menu button in the top lefthand corner of the page.
• The Login box at the top righthand side of the header will switch to a Logout button after a member has logged in.
• Click on the Search button to see the two search boxes available.
• The modules/widgets from the home page will stack vertically, and those from the right bar will appear side by side at the bottom of the page.

Here's a .gif moving through the tablet view.

Mobile View

In the mobile views:

• The Main Menu will appear after clicking on the Menu button in the top lefthand corner of the page.
• Click on the Member Login button in the top righthand corner to see the Login Box.
• The home page slideshow disappears in this view.
• Click on the Search button to see the two search boxes available.
• The modules/widgets from the home page and right bar will stack vertically at the bottom of the page in the vertical view, and two by two in the horizontal view.

Here's a .gif moving through the vertical mobile view.

FAQ

MemberClicks currently has five responsive designs available. In order to optimize the responsive design, there are several best practice restrictions that are in place to ensure a good mobile experience for your users. In other words, not all websites as they are constructed today are a good fit for the responsive design. Here are several FAQs related to the responsive design:

• MemberClicks Articles and Blog post will be responsive, meaning that the layout will reformat to fit the screen size. However, MemberClicks system pages (like the Event Calendar, Community Forum, Social Community, Forms, and My Profile pages) will scale down, shrinking the entire page to be viewed on the smaller screen.

• Child navigation on interior pages is not available with a responsive design.

• If you have modules/widgets on interior pages, the design will feature those in the right bar.

• If you're using Category Blog or Front Page Blog layouts on your website, those will need to be single column layouts to work well for mobile.

• If your website content contains large images and tables, adjustments may be required to that content in order for the responsive design to work well. We advise against using large images and tables on your website with the responsive design:

• Large images can lead to longer load times, which is worth considering when a user is viewing the site through a mobile data network.

• Large tables will size and auto-generate a scroll bar, as shown in the .gif below.

• There are several best practices for managing content when using a responsive design. See this article for additional details.

NOTE: The example images and .gifs above are all shown on Apple devices, however, the responsive design will work the same way on any tablet or mobile device. These screenshots were created using http://ami.responsivedesign.is/. In order to conserve file size, the quality of these images has been reduced.