Pongos

Highly Interactive

Blog

by

Commercial Themes and Visual Page Builders

Need a beautiful WordPress site on a smaller budget? You can probably get there with a commercial theme. Approximately half of our client sites, and all of our in-house sites, are built using commercial themes, so we have a lot of experience using them. We have used themes from every single one of the providers listed in this post.

Disclosure: Some of the links in this post are “affiliate links.” This means if you click on the link and purchase the item, Pongos will receive an affiliate commission.

Our Picks for Commercial Theme Providers

StudioPress, which was recently acquired by WP Engine, is the maker of the Genesis theme framework. The Pongos dev team uses Genesis, plus Bootstrap, for most of our more recent custom themes commissioned by clients. The Genesis framework comes with a lot of built-in features that allow for quick and easy customizations in the WordPress dashboard. Some of my personal favorite themes from StudioPress include KickStart Pro (look familiar?), Cafe Pro, and Academy Pro.

Elegant Themes is another great source for commercial themes. They are the makers of the very popular Divi theme, which includes their Visual Page Builder (more on that in a bit). The Pongos team has used Divi for several client sites, and we have supported other clients who just wanted to do it for themselves (with a little bit of help). If you’re looking for a great theme for blogging, Extra is perfect. I’m currently in the process of moving one of my personal sites over to it.

WooCommerce is the top choice for e-commerce in WordPress, and their themes are often the best choice for sites that rely on that framework. Our Pongos Learning Lab / Coder Kids Club website is built using their Storefront theme. My other favorites from WooCommerce are Outlet and Arcade, both of which are Storefront child themes.

BuddyBoss has some great themes, and plugins, for use with BuddyPress. If you need to create a social network for your site, the themes from BuddyBoss are perfect. We have used their Boss theme on a couple of client sites. Make sure you also check out their BuddyPress plugins! They have made my life so much easier.

Visual Page Builders

Many of our clients want to try to build their sites themselves. In many cases, they don’t want to learn how to code, but these days that’s not a problem. They can just use Visual Page Builders, which will give them control over the fonts, colors, and other aspects of each page of the site, from the WordPress dashboard. No programming required! Here are a few you can try:

  • Divi Builder is the plugin form of Divi. You can use it with any WordPress theme, to build custom layouts within content areas. It’s drag-and-drop, and relatively easy to use. We are currently using Divi Builder with the KickStart Pro theme on this site.
  • Elementor is another option, and one that we used on a site at a client’s request. It’s pretty easy to use.
  • Beaver Builder has been highly recommended to me several times, but I haven’t had a chance to use it yet. It’s on my list to try soon.
  • Design Palette Pro from StudioPress lets you change colors, fonts, and many other aspects of elements within a Genesis-based theme, but doesn’t let you make layout changes.

 

by

Introducing Association Engine

Association Engine, previously known as Big Purple Suite, has been released into the wild. This suite of plugins for WordPress leverages Abila’s netFORUM xWeb, seamlessly connecting your iWeb back-office and website. Member self-management, membership join/renew, Single Sign On (SSO), an integrated cart, event registration, and Vantiv and Sage payment gateway integration are just a few of the features of this powerful set of tools. Learn more at the new Association Engine web site.

Want a demo? Contact us, and we will be happy to give you a tour.

  • Please include your phone number if you would like us to call you.
  • This field is for validation purposes and should be left unchanged.

by

Pongos Interactive Launches the Big Purple Suite of WordPress Plugins on the Abila Marketplace for Nonprofits and Associations

Pongos Interactive Launches the Big Purple Suite of WordPress Plugins on the Abila Marketplace for Nonprofits and Associations

Users can now combine the ease of use and visual flexibility of WordPress with Abila netFORUM’s administrative power

Crofton, Md. February 23, 2015 – Pongos Interactive today announced it has launched the Big Purple Suite of WordPress plugins on the Abila Marketplace, designed to provide nonprofits and associations with quick and easy access to tools and services to enhance their existing Abila products.

Pongos Interactive’s Big Purple Suite of WordPress plugins lets you combine the ease of use and visual flexibility of WordPress with Abila netFORUM’s administrative power for optimal overall user experience.

“We’re very excited to offer WordPress users a way to provide a seamless Abila netFORUM user experience to their members,” said Chrissy Rey. “The Big Purple Suite of WordPress plugins will allow them to engage their members in new ways, using the familiar WordPress dashboard.”

Big Purple Pro for Abila netFORUM ProTM Key Features:

  • Account creation, login and password reset
  • Single-Sign On (SSO)
  • Easy integration with third party software
  • Member self-service dashboard for membership, events, products & personal profile
  • Custom post-login redirects to WordPress pages or 3rd Party integrations
  • An eWeb alternative for all but financial transaction screens

Big Purple Enterprise for Abila netFORUM EnterpriseTM Key Features:

  • A flexible, modular, eWeb alternative
  • Plug financial leaks by enforcing business rules using Big Purple’s custom permissions logic.
  • Increase donations with page-targeted campaigns.
  • Reduce member support calls with engaging user interfaces

“We’re excited to have Pongos Interactive be a part of the Abila Marketplace,” said Céline Felan, Program Manager for Abila. “Our partners are such an important part of our success. They offer key products and services that truly help our customers by extending the value of our nonprofit and association solutions.”

Abila Marketplace

The Abila Marketplace is a rich, interactive, engaging platform that showcases add-ons, customizations, and services offered by Abila’s Partner Ecosystem for its award-winning products and solutions. Customers and prospective customers can quickly and easily navigate the site to find the information they need, including descriptions, demos, pricing, ratings/reviews, and contact information. The Abila Marketplace is a first-of-its-kind designed specifically for nonprofits and associations.

About Pongos Interactive

Since 2008, Pongos Interactive has been creating user-centric digital presences for non-profits, associations, and businesses of all sizes. The Pongos team creates quality WordPress themes, plugins, communities, and integrations. Our talented developers also build mobile apps, games, and interactive elements for web, desktop, and devices. We love to empower our clients, and can provide training on just about everything we do. Learn more at www.purplepongos.com and www.pongos.com.

About Abila

Abila is the leading provider of software and services to associations and nonprofit organizations that help them make better decisions, execute with greater precision, increase engagement, and generate more revenue. With Abila solutions, association and nonprofit professionals can use data and personal insight to make better financial and strategic decisions, enhance member and donor engagement and value, operate more efficiently and effectively, and increase revenue to better activate their mission. Abila combines decades of industry insight with technology know-how to serve more than 8,000 customers across North America. For more information, please visit www.abila.com.

Media Contact:
Chrissy Rey
chrissy@pongos.com
(855) GOPONGO [467-6646] (301) 789-1815 ext. 700

by

Testing with Your Users in Mind

Editor’s note: Randy Sandberg is Pongos Interactive’s Chief User Advocate, and heads up our testing department.
>>>>>>
“Fundamentally you can’t do your own QA, it’s a question of seeing you own blind spots.” ~ Ron Avitzur

If you look carefully at the quote above you’ll find a typo. The point being that programmers are not best suited to find their own bugs. Just like writers rely on editors to catch their “bugs”, programmers use testers for the same purpose. That is, it takes a combination of highly skilled programmers and testers to create a quality software product.

Within the development community, it’s a well known fact—given today’s complex software—one cannot test every aspect of a project. Typical budgetary and timeline constraints only enhance this fact. Thus testers, with the help of other stakeholders, decide where to focus their efforts. This is called managing risks. That is, a decision not to test something saves time and money but increases the risk of bugs getting released into the wild.

How does one decide what to test and more importantly what not to test? The exact formula is beyond the scope of this article, but with your users in mind, three questions should be answered. First, what devices/operating systems/browsers do the majority of your visitors use? Second, what current features are popular and what upcoming features have your users most requested? And finally, if a particular feature were to break, what would the impact be on your users and your organization?

These questions help form a “Do Not Break” list of devices, operating systems, browsers, and features to focus limited testing efforts on. Once a plan of action has been made, and testers know what to do via test cases, then the process goes something like this:

1. Tester finds a bug and writes a problem report. The report includes a descriptive title, what the tester expected to happen, what actually happened, detailed steps to recreate the bug, and any other noteworthy information including screenshots and videos.
2. Programmer reproduces the bug, attempts to fix the bug, and then sends the problem report back to the tester for regression testing. Regression testing helps show the bug was fixed without introducing any new bugs.
3. Tester repeats the original steps and, if the bug can no longer be reproduced, closes the bug. Otherwise the tester sends the report back to the programmer for further investigation.

Testing with your users in mind not only saves time and money during the project, but ultimately pays off over the long term as well given less support issues and increased user appreciation as well as engagement. Oh, and as for the typo mentioned earlier, here’s how the quote should look: “Fundamentally you can’t do your own QA, it’s a question of seeing your own blind spots.”

by

Separating Content from Appearance: Semantic Markup

As a young web developer back in the mid-90’s, we didn’t worry about stuff like separating content from appearance. We just built our frame sets and table-based layouts, added all the fonts and styling inline, and just let everyone gaze in awe at the mere fact we could make one of those magical “web thingamajigs.” Plus we walked up-hill both ways to school, in the snow, and with no shoes. GET OFF MY LAWN!!

Where was I? Oh, yes, separating content from appearance. These days, things are very different, and with the advent of content management systems, it’s become increasingly important to truly separate your content from the appearance. This is the first in a series of articles that will explore some best practices for making your content portable.

Semantic Markup

Whenever I teach a basic web development class, I try to split a web page up like so:

  • Content is handled by HTML
  • Appearance is handled by CSS (and images)
  • Interactivity is handled by a client-side languages such as JavaScript and server-side languages such as PHP

For now let’s focus on the Content in HTML part of that list, which has a fancy name for it: semantic markup.

When you use semantic markup, all of your HTML will define the meaning of the content, and not its appearance. Sounds simple, right?

Read through your markup. Do any of the terms you used impart visual information? For example:

<i>Look at me!</i>

<div id="left-col">...</div>

<span class="red-highlight">Some important info to highlight</span>

Think about how you could adjust those lines of code without using any visual terms.

Let’s say, for example, you used the “red-highlight” class from the example above in a client’s site, because it went well with the logo, and it was defined like this:

.red-highlight {
   background: #ff0000;
}

Then imagine, a few months later, the client comes to you and says, “We’ve updated our logo, and it’s now blue and green. That red-highlighted text looks horrible with it. Make it green instead!” Would you do this?

.red-highlight {
    background: #ffff00
}

Really? You would have a “red highlight” that is actually green? I hope not. Maybe it would have been better to think about why the content is getting highlighted in the first place. Maybe it’s urgent information for visitors, so let’s use a word that correlates with the meaning behind the content, and not its appearance, to define the class:

.urgent {
    background: #ffff00
}

You might be wondering why this is so important. It’s all about portability! Web sites get redesigned all the time, and if you use visual terms to identify your content, then you’ll either have to change the terms, or updating the styling so it no longer reflects the meaning behind the identifier.

Grids and Frameworks

There are some great, widely-used, responsive frameworks out there, such as Foundation and Bootstrap, that might just be undermining the whole semantic markup crusade. While it’s not very obvious at first, this markup is not semantic:

<div class="rows">
   <div class="columns large-8 small-6">...</div>
   <div class="columns large-4 small-6">...</div>
</div>

The classes are dividing the content of the page up visually, and the terms “rows”, “columns”, “large-8,” “large-4,” and “small-6” specify appearance. In general, if a grid or framework uses terms such as rows, columns, large, medium, small, center, tiny,  any other word that specifies appearance, or abbreviations of those words, that grid or framework is not totally semantic.

Don’t get me wrong. I’m not telling you not to use these frameworks, especially since we use them here at Pongos to help speed development, but you do need to be aware that when you use them your markup won’t be totally semantic. I find these to be less offensive to my semantic super senses than the “red-highlight” example I used earlier.

If you want to stay totally semantic, there is a Semantic Grid system that’s worth a look.