With the Winter 2015 Release, HandsOn Connect introduced, as a public beta, Mobile Responsive Design for the public and volunteer pages. This means that these pages will “adapt” to smaller devices, such as smartphones and tablets.  But sometimes the content itself (e.g., text, images, videos, forms, buttons) is not all that mobile friendly.  Here are some best practices for when you are adding content via the Content Mangement System (CMS) to make sure your content is mobile responsive too!

The key to mobile responsive content is simplicity and structure.  Since the content needs to be able to work gracefully on multiple devices, resolutions, and orientations (i.e., landscape, portrait), it is best to keep it simple.  This goes for both your copy and resources, as well as the underlying HTML.   

On mobile devices, you are not only trying to have your pages to look good, but also to provide the user with a good experience.  Hence, the page needs to load quickly, and the site must be easy to interact with and to navigate. Keeping your content layout simple, structured and consistent, and your copy to a minimum, will make the user experience a lot better.  It also makes your site more compatible across more devices and browsers.

We recommend that you:

• Lay out your content using standard headers, paragraphs, and inline images or videos.  

• Keep your copy and resources (e.g., images, videos, forms) to a minimum. For example, if an image is not adding value, remove it.  Mobile connections tend to be slower. You do not want a user to wait for an image or large chunks of content that are not adding a lot of value. 

• Use standard fonts and check that they are readable on small screens. Try to avoid over stylizing fonts with colors, different sizes, various types, etc.

• If you work with HTML directly, remove any unnecessary tags and avoid inline styles and absolute placements of objects, as well as fixed widths, if possible.


Here are some recommendations for particular pieces of content:

Images

As we mentioned above, images should be used prudently and when used, minimized to have the smallest possible file size.  Reducing the resolution and dimensions of your images is essential to improving the response times when on a mobile device.  A few more recommendations:

• Use standard image formats: JPEG, GIF, and PNG.

• Avoid using the texts on the image, since it will be scaled down and possibly made illegible when on a mobile device

• Avoid defining fixed sizes in the HTML tags


Embed Third-party Resources Responsively (e.g., videos, Google Maps, Instagram)

When you embed a resource on your page, such as a video from YouTube or a Google Map, it can be tricky because they use what is called an “iframe,” which does not always play nice on mobile devices, so it requires some coding work.  Luckily, there is a nifty tool called Embed Responsively that you can use.  Go to:

http://embedresponsively.com

If you search the web, you will find others too, as well as how to manually do your own responsive coding, for you HTML and CSS Jedi masters!

Third Party Forms (e.g., Formstack, Clicktools)

Formstack recommends that you use the Javascript embed option since it is the “best at retaining adaptive size in the browser.”   You can also use the iframe version, but we recommend that you use embedresponsively.com and select the Generic iFrame option.

Sponsor Image

For the mobile version, the sponsor image on footer was hidden, given that the image was too wide and resizing it for mobile version distorted the image. Administrators can:

1. Create a new image for the sponsors with the appropriate size for mobile, with a maximum width 300px
2. In Salesforce save the new image under Images folder in Documents tab. The image must be named "sponsorlogos_mobile".

As more users use mobile responsive, we are sure other issues will surface. We will add recommendations on how to best address these as we run across them.

If you need support in making your content more mobile-friendly, please contact us via Zendesk.  Send is the URL of the page and device you are using to view it. If you can send a screenshot, that is a plus!

Lastly, remember that the current mobile responsive, which we launched in Winter 2015 Release, is in public beta. This is the version after the private beta, where we received feedback from a subset of users.  We understand it still has some rough edges.  We ask you to report any issues you find and for your patience.

Thank you!