11 Steps to Membership Management Success – Plan Your Website – Page Templates, Layouts and CSS

Step 4 – Planning your Wild Apricot website

You’ve taken great care planning your database using our previous posts, and now it is time to design your new website. The website builder is one of the most powerful tools in Wild Apricot. Yet, we find it is the one least understood by administrators.

Getting the fundamentals of your Wild Apricot website set up correctly will give you a strong start toward a friendly and engaging system to manage your organization’s members and contacts – even if you use Wild Apricot on a budget.

Pick a Wild Apricot Theme

Wild Apricot has created four theme families with 12 themes. Each theme has several color variants. The current theme families are:

• Kaleidoscope, Building Blocks, Casefile and Tinted Tiles
• Showcase, Firma and Terra
• Homestead, Fiesta and Skyline
• Whiteboard and Bookshelf

Each family of themes share the same basic look and feel and differ mostly in color palette. The user interface elements like the login/logout buttons, the call-to-action buttons and navigation menus all have a similar design in a theme family.

Themes can be greatly modified to suit the need of your organization. Here for example is the Kaleidoscope theme when it is first installed:

After the theme is selected, a sample set of pages with placeholder graphics are added. The upper left corner in Kaleidoscope has a handy color palette that is used as a default in the theme.

Below is the Kaleidoscope theme customized for Denver Ballet Guild, one of our customers who has selected Wild Apricot. The logo, color palette and use of pictures has been customized specifically for their use.

Learn and use page templates, for the win

Once you’ve picked a theme, it’s time to set up your page templates.  Page templates are powerful website design tools. Using a Wild Apricot page template is the best way to design web pages that look consistent.  A page template is a great “starting point” for a page that allows the designer to not have to worry about items that should be part of every page.  Once you’ve gotten started, you can use each page template as many times as you need. If you’ve used slide masters in PowerPoint, you already know a bit about how page templates can work.

What’s cool about Wild Apricot page templates?

When a new page is created, a default page template is automatically applied. You can also select a different page template for a page. If you change a page template, all the site pages that use that template will automatically change too and inherit all the changes on the page template So, for example, if you want to change the header and footer of each page you can change the page template and avoid having to modify each page. Wild Apricot sites typically have the following page templates:

• a home page template unique for the website home page
• a standard template used across many pages, usually the default template
• one or more additional page templates for each section of your website
• a set of page templates for members-only pages

Remember that a page template can have content that automatically is inherited by the page that uses it. A page template is the basic design tool in Wild Apricot, which helps you make pages look consistent and easy to use and maintain.

And layouts — learn them and love them!

Another useful tool in page template design is the layout. Layouts are a great way to create grids on page templates and pages. They allow you to create a structure on your page template. They can also be used on a page to create natural containers for your content gadgets. Layouts help with responsive design for mobile devices, ensuring content can be positioned dynamically when viewed on a mobile device. Learn layouts, and you’ll wonder what you did without them!

Refine your Wild Apricot site with colors and styles

The colors and styles module is one way to change your theme. Each theme has a set of style and design options that you can change quickly. Some global options that you can change include the fonts, font sizes and colors of text. Certain themes have more options to change in the colors and styles module, and that makes the scope of this feature a bit hard to pin down.

However, it is currently not possible to change all the elements of a Wild Apricot theme in the colors and styles module. And it can be confusing to know which option changes every part of a theme. There is another powerful tool that will give you a tremendous amount of customization control. Cascading Style Sheets (CSS) is the best way to customize Wild Apricot themes, in our opinion.

Use CSS for a truly custom look and feel

Cascading Style Sheets (CSS) are the preferred and most powerful way to customize your website’s look and feel. CSS is a powerful layout and style syntax supported by all modern web browsers that defines how a website menu, button, link or almost any site element will appear. CSS does not affect function but rather look and feel only.

You can even use CSS to hide certain elements from displaying altogether, such as a label that is confusing. At NewPath Consulting, we typically identify and customize several hundred CSS elements on every single Wild Apricot website we build.  In fact, to make it easier to customize any Wild Apricot website we designed our own Wild Apricot Text Manager (WATM).The WATM supports publishing websites in 2 languages as well!

Wild Apricot Theme Design, Illustrated

The diagram below illustrates the Wild Apricot theme architecture.  One or more master layouts are inherited directly from a Wild Apricot theme and includes all the colors and styles inherited from the theme. A master layout is the basis for a page template, but master layouts are defined directly in the theme and are not easily modified. The theme also includes the default CSS style sheet. A page template’s design and gadgets define the content shared between a set of pages. The page inherits the page template and contains the actual unique content for that page.

Wild Apricot Theme, Page Templates and Pages Architecture (click image to zoom)

Design your site for mobile use

As you design your website, make sure you evaluate how the website works on mobile devices — you want your website to be mobile-responsive, so the page elements adjust to suit the user’s screen size and preferences.

Otherwise, you may find that the decisions you make while designing page templates and pages do not work well on mobile devices.

At NewPath Consulting, we find the Web Developer extension for Chrome and Firefox web browsers handy. We use it to test various mobile screen sizes without having to actually use a tablet or smartphone.

Next article in the series is Step 5 – Creating Your Website.