A responsive – or mobile-friendly – site adjusts its layout and appearance according to the size of the screen used to view it. Responsive behavior is becoming increasingly important because of the proliferation of mobile and handheld devices. Without responsive behavior, a page that displays well on a laptop might require excessive scrolling on a mobile phone.
How do responsive sites behave?
With responsiveness enabled, a number of adjustments are made to better display pages within smaller screen sizes. These adjustments include the following:
- Gadgets will be stacked within a single column
- Gadgets will be resized to match the device's screen width
- Column widths will be adjusted
- Image sizes will be adjusted
- Font sizes for text styles will be adjusted
- A mobile version of the site menu will be displayed, with a limit of 3 levels in total (main menu plus 2 submenu levels
Start with a responsive theme
Wild Apricot's supported theme sets are fully responsive. They will appear on the Themes screen with both desktop and mobile thumbnails.
Responsive themes automatically adapt their contents to fit properly on different sized screens, including mobile devices. You can, however, disable the responsive behavior of these themes using theme overrides.
If you're using an older theme, you should consider switching to one of the newer responsive themes.
Responsive design tips
Here are some design considerations you should follow to make your site pages mobile-friendly.
Headers
- Avoid complex layouts within your header area (the top placeholder within your page template).
- Place your menu and login gadget at the top of the page and in a single column – placing it in the top placeholder will do the trick.
- If you have a choice, choose a horizontal menu gadget rather than a vertical one.
- If you want a login gadget to appear centered on a mobile device, you have to set the alignment option that way for the desktop version as well.
- When placing your logo and association name, combine them in a single content gadget.
Layouts
- Avoid placing important content – such as login boxes – in a right sidebar of a multi-column layout. Because of the order in which multi-column content is stacked on smaller screens, gadgets within a right sidebar will end up halfway down the page on a mobile device.
Instead, place important gadgets in the left column, or in a single-column layout. - Use column spacing rather than padding and margins to control the positioning of content within a layout. Padding and margin settings are applied to the mobile version, while column spacing is not.
This allows you to space out elements on your desktop page, while keeping your mobile site looking compact. - Do not specify a fixed height for multi-column layouts.
Images
- If you insert your image as the background for a placeholder, layout, or gadget, the image will not scale when the screen width changes. If you can't avoid displaying a background image that's wider than a mobile screen, you can choose to center or left align the image, depending on where the critical portion of the image appears.
- If you want an image to scale according to the screen width, insert it into a content gadget, and optionally, position the content gadget within a layout.
- If you've placed an image in a content gadget along with text, whatever appears on the left will be stacked first on a mobile device, and other content will appear beneath. For example, content that appears like this on a desktop computer:
...would look like this on a mobile device:
- If you want content to appear on the same line, insert them into different columns within a table.
Tables in Wild Apricot are not responsive. The content within each column will scale but will remain on the same line.
Text
- Use paragraph styles instead of setting font sizes manually. Text with manually set font sizes will not scale on mobile devices.
Tables
- Wild Apricot's tables are unresponsive, meaning that content displayed in a table is not stacked. If you want multiple elements to be displayed on the same line, add them to different columns within a table. For example, if you add images to different columns like this:
...the pictures will scale on a mobile device, but remain on the same line.
Using an unresponsive element like a table to display responsive elements can be a bit tricky, so be sure to test the results on a mobile device.
Layers
- You can use layers to precisely position content within a page. For example, you might want to position text over an image.
Unfortunately, however, absolutely positioned content is not responsive. The mobile browser will maintain the absolute position relative to the left margin, with a portion of the element cut off by the edge of the screen.
If you need to position text over a graphic, consider placing the text in a content gadget and insert the graphic as the content gadget's background image.
To properly use layers with responsive design, try to keep in mind:
- The width of an absolutely positioned element with its padding from left edge of the site must not exceed 320 pixels.
- Keep your absolute positioned elements close to the left edge of the screen. You can p lace the layer into a left sidebar or column (with 25% width) so that it appears the same on both desktop and mobile versions of your site.
- In most cases, you can design your element without layers. Try to use gadget margins, padding, and backgrounds to position your element.
Margins and padding
For most gadgets, you can use margins and padding to control the positioning of gadgets and their content. However, you must remember that margins and padding are applied to both the desktop and mobile versions of your site. Their values are not reduced or adjusted in any way.
You should therefore refrain from applying large values to either setting. A padding of 60 pixels before or after a heading might give your desktop version a nice airy look, but on a mobile device, the result will be just a lot of empty space. You'll need to play with margin and padding values to achieve an optimal balance.
Other
- Limit the number of top-level menu options
- Limit the number of graphics on a page
- Avoid large graphics
- Resize graphics to the size you want to display them at before adding them to a page
- Limit overall page content
- Do not use Flash content
- Test any third-party plugins on mobile devices
Testing whether your site is mobile friendly
Google now offers a free online tool to test whether your site is mobile friendly.
Disabling responsiveness
To disable responsive behavior within responsive themes, follow these steps:
- Enable theme overrides (if you have not done so already).
- Click the link to download the theme files.
- Unzip the theme files to a location of your choice on your computer or network.
- For Bookshelf, Firma, Showcase, Skyline, Terra, and Whiteboard themes, open the basic.responsive.grid.less file from the Styles folder using a text editor. For Building Blocks, Caseline, Fiesta, Homestead, Kaleidoscope, and Tinted Tiles themes, open the layout.less file from the Styles folder.
- For Bookshelf, Fiesta, and Whiteboard themes, replace the following lines...
@state2-minwidth: 600px; @state2-maxwidth: 959px; @state3-maxwidth: 616px;
with...@state2-minwidth: 0px; @state2-maxwidth: 0px; @state3-maxwidth: 0px;
For Firma, Showcase, Skyline, and Terra themes, replace the following lines...@state2-minwidth: 600px; @state2-maxwidth: 959px; @state3-minwidth: 320px; @state3-maxwidth: 616px;
with...@state2-minwidth: 0px; @state2-maxwidth: 0px; @state3-minwidth: 0px; @state3-maxwidth: 0px
For Homestead themes, replace the following lines...@state2-minwidth: 600px; @state2-maxwidth: 959px; @state3-maxwidth: 616px;with...@state2-minwidth: 0px; @state2-maxwidth: 0px; @state3-maxwidth: 0px;
and....zoneInner, .zoneWrap { max-width: 960px; margin: 0 auto; width: 100%; }
with....zoneInner, .zoneWrap { margin: 0 auto; width: 960px; }
For Building Blocks, Kaleidoscope, and Tinted Tiles themes, replace the following lines...@Device-M-MaxWidth: 991px; /* 768 - 991 */ @Container-M-MaxWidth: 970px; @Device-S-MaxWidth: 767px; /* 480 - 767 */ @Container-S-MaxWidth: 750px; @Device-XS-MaxWidth: 479px; /* 320 - 479 */
with...@Device-M-MaxWidth: 0px; /* 768 - 991 */ @Container-M-MaxWidth: 970px; @Device-S-MaxWidth: 0px; /* 480 - 767 */ @Container-S-MaxWidth: 750px; @Device-XS-MaxWidth: 0px; /* 320 - 479 */ body { min-width: 1230px; } - Upload the modified file to the Styles theme folder on your site via File management or WebDAV.
- Click the Rebuild theme button on the Theme overrides screen.
The site will now appear the same regardless of device size.
