Overview
Responsive design means that your website/features works on your PC, tablet, and mobile devices by adjusting the content to fit the screen that it is being viewed in. If your website uses a responsive design, you can set Membee's widgets (Events, New Member Signup, etc.) to use a responsive design to enhance visitor experience. This document will provide you with some guidelines on how to help ensure that Membee's widgets will appear as expected on your responsive website.
Table of Contents
Find out if your website is responsive
Website standards
In order for our widgets to appear correctly on your website, you must ensure that your website abides by these standards:
Your site must be using a responsive design. If it's not, then you will not be able to take advantage of our widgets' responsive design feature. If you're not sure if your website is using a responsive design, your web developer should be able to tell you if your site is responsive or not. You can also click here to find out how to test whether or not your website is responsive yourself.
Your website must allow Membee's widgets to use 100% of the page width. Membee's widgets are designed to use the entirely of your page width. This means that there can be no margins or padding on the page as this will decrease the space that the widget can use. The only way that we can guarantee that our widget will be displayed correctly on all websites is to know that 100% of the page width will be available to the widget. This is something that you can have your web developer investigate for you.
If margins or padding have been added, space is taken away from the widget so it can no longer occupy 100% of the page width. For example, if there is 20px of padding on the left and right, 40px will be taken away from the widget (the widget won't be able to use the full width), which means that the widget will not appear as expected.
By default, phones automatically add a bit of white space around the borders of the screen. This means that you won't have to worry about the webpage content being placed to closely to the edge of the screen when there are no margins or padding.
Find out if your website is responsive
It is necessary that your website uses a responsive design for our responsive widget feature to work. This section will go over how you can determine whether or not your website is currently responsive.
The easiest way to tell whether or not your website is responsive, is to use an online "responsive design checker". On these websites, you can simply enter in your website URL and you will be able to see what your website looks like on different devices.
Here are the link to a responsive design checker: http://responsivedesignchecker.com/
To use this site, you can follow these guidelines:
- Go to http://responsivedesignchecker.com/
- In the bar that says "Enter Your URL Here", type in your website URL
- Click on "GO"
- Just under the bar, you'll see a list of devices that you can view your website on. Click on one of these device images and you'll see what your website looks like on that device at the bottom of the screen
If the content on your webpage is adjusted so that you don't have to scroll from side to side to view information or images, then your website is likely using a responsive design. If, however, you find that you are only able to view a small portion of your website at a time and would have to scroll to the left or right to view the rest, then your website is not responsive. Your web developer can assist you further if you are unsure as to whether or not your website is responsive.
If you don't have a responsive site and would like to work with Membee to re-develop your site, send us an email to support@membee.com and we would be happy to provide you with more information.