Akismet – The End of Comment SPAM

Has comment SPAM got you down?

icon-256x256Akismet to the rescue! Comment spam can take a lot of time to sort through, but Akismet can do the sorting for you. This nifty plugin will automatically filter out SPAM comments and place them in your SPAM folder. Whether you are holding comments for moderation or not, this plugin will save you time.

Installing Akismet is Easy!

Step One – Install and Activate Akismet

Navigate to the Plugins page from your WordPress Dashboard. Akismet is (most likely) already installed on your blog and all you will have to do is activate it. If you see Akismet listed on your Plugins page simply click the “Activate” link. If Akismet is not in your list of plugins navigate to Plugins > Add New. Akismet should appear at the top of the Add Plugins screen. Click the “Install Now” button and activate Akismet.

Screen Shot 2016-06-14 at 3.18.30 PM

Step Two – Get Your Akismet API Key

Go to akismet.com/plans/ and choose a plan. The “name your price” plan can be free, or you can choose to pay an amount that is a fit for your budget 🙂 . You will need to either login with a WordPress.com account or create a WordPress.com account if you do not already have one. Once you have successfully signed-in and completed payment (optional) you will receive an API key.

Step Three – Configure Akismet Settings

From your WordPress Dashboard navigate to Settings > Akismet and add the API key to the configuration page. Done!

If your website or blog is already burdened with a lot of SPAM you should navigate to Comments and click “check for spam.” Akismet will run through all of the comments on your site (that were submitted before installing Akismet) and filter out the SPAM. Please note that if you have a lot of SPAM this may take a while.

Tada! Comment Spam is Now a Thing of the Past

Now you can sit back and relax while Akismet sorts through your SPAM comments and leaves just the true gems for you.

If you are a power blogger or enterprise user you should check out Akismet’s paid plans to learn more about their advanced features and other WordPress services.

WP Engine: The Best Managed WordPress Hosting

Choosing a hosting provider for your WordPress website is an important decision. In this article we will discuss some of the excellent features offered by WP Engine’s managed hosting service and why we recommend them to every client.

What is Managed WordPress Hosting?

Managed WordPress hosts specialize in hosting WordPress websites specifically and they offer special features like caching, staging for updates, easy backups and restores, and speed enhancements. They are generally helpful with WordPress issues, and they often have additional security features that other hosts don’t have. This is very different than traditional shared hosting where you simply rent storage on a server which may or may not be well designed to work with specific platforms or technology, and where you may feel left on your own if your site is hacked or you have a WordPress specific question.

When you should consider switching hosts:

When you start a new blog/website it’s normal not to think about things like server performance, traffic and security and often people looking for hosting only consider cost. You want to worry about the site’s appearance and what content to publish rather than the technical underpinnings of the server hosting your site, and that’s totally understandable. Often it is only after the site’s been up for sometime that issues with your server will begin to arise, and you may start to wonder about your choice of web hosing. Maybe your site slows down or you have down time, or goodness forbid your site gets hacked. Good quality managed WordPress hosting guards against these issues, and even though it tends to be a bit more expensive, it can save you a lot of hassle, and even money, in the long run.

Why is WP Engine the Best WordPress Hosting?

1. Designed for WordPress

WP Engine’s WordPress hosting is designed and optimized for WordPress websites specifically. They take care of every single piece of server optimization to ensure your website is living on the most fastest and best WordPress hosting platform possible.

2. The Best Customer & Technical Support

WP Engine’s technical team and customer support consist of WordPress developers and trained experts. The WP Engine support team is available 24/7 via phone, chat or support tickets. We can not emphasize enough how valuable it is to have a smart and knowledgable support team available for you (and your website) at any time. They are also extremely professional and friendly!

3. The Best  Security

WP Engine takes security very seriously. They monitor server traffic 24/7 and are able to prevent malicious traffic and attacks. In addition to real time monitoring and finely tuned server security, all WP Engine plans include daily backups and 1-click restore points. With WP Engine you are only 1-click away from your site being restored to a prior state if anything goes wrong.

4. Speed!

The WP Engine architecture and caching system ensures your site will perform at optimal speed and their architecture is continuously improved to reduce site load time. Additionally WP Engine can make use of a Content Delivery Network (CDN) to distribute your site data across a global network of servers to reduce geographic distance between your site visitors and your website data if you server a global audience.

5. One-Click Staging Websites

We can not emphasize enough what a valuable tool the one-click staging feature is. We LOVE it! A staging website is basically a copy or clone of your live website. One of the reasons we love the staging environment is that it gives our clients are safe and easy place to try out core and plugin updates or plugin additions before changing things on their live websites. This way, clients can take control of their own updates while maintaining confidence that  those updates will not break any functionality on their live website.

6. Free SSL Certificates with Let’s Encrypt

To top it all off, WP Engine now offers free SSL certificates through Let’s Encrypt. With fast and easy configuration we appreciate how painless it is to configure SSL for any site on WP Engine.

TLC with WP Engine ♥

Your website is very much like a living thing. It needs care and love and maintenance. You probably spent many thousands of dollars investing in your new website, and you want your users to enjoy a fast and reliable experience when they visit it, while you want to maintain it in as pain-free a way as possible. This is where WP Engine comes in.

In closing, it may seem like spending $35/month on hosting is a lot, and with plans starting at $35/month WP Engine is not a “cheap” hosting solution. But with all of the great features, performance and support that WP Engine can offer, we believe that it is an excellent value.

WP Engine

How to Build an Accessible Web Slideshow (Slider)

There are several factors that contribute to making a slideshow accessible and inline with modern standards. First, the user needs to have the ability to keyboard navigate within the slideshow. This includes keyboard controls like previous slide and next slide. If there is text within the slide, keyboard navigation should allow users to tab into this text as well.

Secondly, a screen reader should be able to identify whether a user has tabbed into a slideshow, and identify which slide in the series is being displayed. Additionally, if there is text within a slide, a screen reader should be able to read this as well.

Though slider keyboard navigation could be developed entirely from scratch, one slider plugin in particular offers a robust javascript API that allows for custom functionality. That plugin is called Slider Revolution. Because keyboard navigation is so important to accessibility, Slider Revolution’s built in functions are very useful.

In the code below, navigation functionality for the previous and next slides are added.

In this case, Slider Revolution’s functions for next slide and previous slide can be bound to the left and right arrow icons on the slideshow. These slider controls can be used with a traditional mouse as well as keyboard navigation.

Speaking of keyboard navigation, the user will need to tab, or focus, into these new custom slider components. To accomplish this, the “tab-index” html attribute can be utilized. Tab index, as one might expect, allows the user to tab into an element on the page. A tab index of 0 uses the natural page flow to set the tab order. This makes the most sense for this particular use case.

This code example shows how to add both aria-labels and the tab index attributes to a slider.

Now that the slideshow is full navigable via mouse or keyboard, some screen reader enhancements can be made as well. Modern screen readers can identify where a user is on the page using aria labels. An aria label is an html 5 attribute that acts as a landmark that tells the screen reader to identify an element that’s getting focus. Aria labels can be added to the slideshow’s main container, the containers for each slide in the series, as well as text inside each slide. In the code above, an aria label is added to the main slideshow container using the .attr() method. With these aria labels attached, screen reader users will hear an audio cue confirming which element of the slide show is getting focus.

Combining all of these components adds up to a slideshow that’s more accessible than most!

SSL and HTTPS – Everything You Need to Know

What is SSL?

SSL (Secure Sockets Layer) is a standard security technology for establishing an encrypted link between a server and a client—typically a web server (website) and a browser (e.g., Chrome, Safari, Internet Explorer); or a mail server and a mail client (e.g., Outlook).

Originally HTTPS was designed to allow for sensitive information to be safely exchanged over the internet, today it is a best practice for all websites.

Here are the top four reasons why every new website being built today should be served over HTTPS:

  • SEO – Search engines have started to rank sites that are served over HTTPS higher than comparable HTTP sites
  • Trust & Security – HTTPS makes man-in-the-middle attacks much more difficult and establishes a level of trust with the server you are connecting to
  • Surveillance – The rise of government surveillance, both foreign and domestic
  • It’s easy! Setting up HTTPS is now generally easy to do and SSL certificates can now be purchased and installed for free

How SSL Works

The lack of encryption with http:// URLs makes it very unsafe to browse and interact with websites that contain sensitive information, like bank websites, shopping websites, or any website that you login to, and especially any website where you enter a credit card number.When you visit a website at an http:// URL, information is sent through the network (“over the wire”) unencrypted, and you have no guarantee that the server you are connecting to at the other end is actually the server you think it is.

The https:// protocol solves these problems by forcing the network packets to be encrypted and guaranteeing via a third-party that the server on the other end is the one and only valid server for that URL. HTTPS makes man-in-the-middle attacks far more difficult and establishes a level of trust with the server you are connecting to.

The Certificate Authority

The third-party that establishes this trust is the “Certificate Authority”. The Certificate Authority sells SSL certificates and creates the network “handshake” that happens when connecting to a website. This way you can be sure when browsing over HTTPS that the server you are connecting to is the server you are asking for, and that any network packets you pass back and forth will be encrypted.

How to Implement SSL

The process of purchasing and installing an SSL certificate is generally very simple, and many web hosts will both sell and install SSL certificates in one step. You can also purchase an SSL certificate yourself from a certificate authority like RapidSSL and then ask your host to install it for you.

Although SSL certificates can still be expensive when purchased through certain certificate authorities, a new initiative led by a group of the biggest internet companies in the world called Let’s Encrypt is promising to provide top notch SSL certificates for free. As of January 2016 this service is in public beta, but very soon it will be the go to place for acquiring free SSL certificates.

Standard vs. Wildcard SSL Certificates

The only decision a potential SSL certificate purchaser needs to make is whether to get a standard SSL certificate or a special SSL certificate called a wildcard certificate. Standard SSL certificates protect a single domain like mightyminnow.com but don’t protect subdomains like hello.mightyminnow.com, whereas wildcard certificates can protect one level deep into subdomains. If your domain name has any subdomains that you want to serve over HTTPS, you’ll want to purchase a wildcard certificate.

What Now?

If you want your website to be more secure, better trusted and better “liked” by Google – consider purchasing and configuring an SSL certificate.

Getting Started on Website Layout

One of the most daunting things for someone new to web design (or for someone designing a website for their own use), is to come up with the design/layout for the website. In this post, I will walk you through some things you can do to make the assembly of your site go a bit more smoothly.

For this exercise, I recommend only two things:

  1. some paper,
  2. and a pen or pencil.

These simple tools will help you explore different possibilities for site layout, while also giving you the basic bones for your new site.

Outline the Goals of Your Site

I think one of the best ways to start a layout project is to simply list the main goals of the website. If you’re a non-profit organization, perhaps your main goals are to educate/raise awareness of your cause, raise funds, and gain volunteers. If you’re a graphic designer, then maybe your goal is to show potential clients your work, discuss your design process, and take bookings. Whatever your website is, the first step in the layout process should be to list the top three goals. Go ahead and write them down in one corner of your piece of paper.

Design with Content in Mind

Hopefully, you or your client have already decided on the content that you would like to feature in your web project. Knowing whether your site will be image-heavy or text-heavy is important in deciding how the content will be laid out. If there will be a lot of imagery, than it’s important to also keep the color scheme in mind so that the colors and the images don’t clash with one another. If your website is going to be text intensive, then it’s important to consider adding more color or iconography to break up the text and keep your visitors interested.

Create a Wireframe

Now that you have an idea of the main goals of your website, and the type of content you will have, it’s time to start putting things together in a simple schematic. In web speak, we refer to this schematic as a wireframe. Basically, a wireframe allows you to try out a few options for layout, using simple tools like pen and paper, without wasting too much time at the computer. There are computer-based applications, like Balsamiq, that allow you to do the same thing, but pen and paper are a reliable and a quick way to get the job done. And don’t worry, you don’t have to be good at drawing to come up with a good wireframe (as you’ll see by my example).

For my example, let’s pretend we’re designing a site for the Fluffy Kitten & Cat Rescue, and the site’s three main goals are

  1. to raise awareness about the organization and the overabundance of fluffy, adorable cats and kittens;
  2. to sign-up volunteers to cuddle, brush, and feed the cats and kittens;
  3. to raise money to help feed the kittens, and keep operations going.

Fluffy Kitten & Cat Rescue is going to have a lot of images of cats on it’s site to tug at the heartstrings of potential donors and volunteers (as well as anyone interested in adopting a cat!). I spent five minutes (only five!) coming up with a basic layout with two alternate layouts for the header and second section of the main content.

Wireframe sketch

Normally, I’d suggest spending a bit more time thinking of more alternate layout ideas (because when it comes to design, one idea is never enough) in case the first few options don’t work according to plan. I’d also suggest focusing on one page at a time. The home page is always a solid place to start, but if you’re going to have sub pages, and/or a blog, it’s a really good idea to sketch out possibilities for those pages, too.

OK, I Have a Wireframe, But Now What?

Once you have your hand-drawn wireframe(s), then you can go ahead and start working laying out your working wireframe on your website. I’m going to make an assumption here that you’re using WordPress. MIGHTYminnow loves WordPress because it means we can give a client a site that looks great and is easy to maintain after the project is over. Once you have WordPress installed and ready, you can get started on layout!

In addition to being big fans of WordPress, we’re big fans of Visual Composer, which is a premium WordPress plugin that allows us to build web pages quickly without worrying about code. This not only makes it super easy for us to build sites fast, but it also makes it easy for our clients to maintain and update their website in the future.

Page layout with Visual Composer

The left part of the image shows how Visual Composer looks when working in the WordPress Admin. The screen on the right shows how the site looks to the public.

When adding visual composer elements to your website, it’s a good idea to add as many elements as you need up front, and worry about styling later. Essentially, you’re building a wireframe, or proof of concept, in the browser to test site architecture and layout. Once you’re happy with the layout, then you can work on more details like adding imagery, setting colors, and moving items around until everything is perfect.

This wireframing approach is perfect for our Website Weekend students to tinker around with layout ideas before class. If you’re stuck, don’t worry, we’re here to help, and if you’re looking for a custom design project, we’ll do the wireframing for you!

Dynamically Populate Gravity Forms Drop Down Fields

Gravity Forms is one of the best form plugins for WordPress powered websites. It allows you to quickly and easily create a form by dragging and dropping form elements into the editor, change their names, properties and settings. One of many elements available to use is the drop down field. You can either add the values manually using the form editor or populate all items dynamically via filters in your code.

For this example we will be covering dynamic drop down population via filters. We’ll end up with a drop down field populated with a list of movies, which is set up as a custom post type in our WordPress installation.

The first thing we’re going to do is add a new drop down field to our form. Here is what it looks like when you expand the edit options:

Drop down field

In order to keep it organized, and since we’re going to dynamically populate the items, we can delete all the default items (First Choice, Second Choice, Third Choice) that Gravity Forms adds when you add the field to the form.

If you check the official Gravity Forms documentation, you will see that it suggests you to write down the Field Id (in this example, id = 5) so you can use it in your code to target the correct element to be populated.

Even though this will work, I would prefer to add a class to the element and check for this class when targeting the element in the code. This way there’s no need to worry about ids, which sometimes can be a problem if you work with different environments or servers where the ids can be different on each installation.

For this field, we’re going to use the class name ‘movies-dropdown’, set under Appearance > Custom CSS Class on our drop down.

Drop down settings

With our drop down set up in the form editor, it’s time to created the logic behind it. The filter we’ll be using is the ‘gform_pre_render’ filter, which is executed before the form is displayed and can be used to manipulate the Form Object prior to rendering the form.

Here is the code:


Gravity Forms is an great plugin and it allows you to build pretty much any custom functionality using its Hooks and Filters, and there are many others you can use. For more information and details about all of the Gravity Forms features, you can always refer to their official API Functions documentation.

Hope this helps and see you next time!

Working with JSON

This week I wanted to talk a bit about JSON and how powerful it can be for developers. JSON played a big role in the creation of my very first plugin. Short for Javascript Object Notation, JSON has flexibility and a relative easy-to-learn format that can really help make working with complicated data structures easier for developers.

Typically you’ll see JSON used as the data format for sending back end data to a script on the front end and for responses from external APIs. In the case of my plugin, I wanted to display my “badges” that I earned from an online learning site. These badges, as well as pretty much every other piece of data tied to my account, are available in JSON format on this online learning site via their API. I can see data from every single course I have completed since I began using the site almost 2 years ago. I easily found the names of the courses, the dates I completed them, as well as the urls of both the courses themselves and the badge images tied to each course.

First I wrote a function to pull the JSON I needed from the site’s API:

This function simply returns the data from the API in JSON format. Notice how the $wp_username variable gets passed in so that any user’s info can be returned, if it exists. I’m also running the JSON through PHP’s json_decode() function before returning it, which will turn it into a standard PHP object that I can access just like any other object in PHP. This will come in handy throughout the process.

Here is a small sample piece of the raw JSON returned by the function:

First, notice how “badges” is a nested array. All of the data related to badges is in this array. I can easily filter through the data and get only the pieces I want by interacting with the PHP object returned by my function above:

Here I’m using count( $wp_profile->badges ) to get the number of total badges attached to my account. I want to display my most recent badges first and they are returned oldest first from the API, so I count the total number of badges and then use a for loop that decrements on each interation to build my output starting with the most recent badge. This loop could continue all the way down until my very first badge, or I can stop after a specific number.

From here, we can begin isolating the individual pieces of data that we want to display. Notice that every piece of data we need must start at the highest level of the JSON tree, stored in the $wp_profile variable. We then use the “->” symbol to move one level down into “badges”. We continue to use this symbol down through the levels of arrays, getting more specific until we get what we need. The curly brackets hold the specific names of the data we are looking for , including “badges”, “name”, “courses”, “title”, “url”, and “icon_url”. See the text block above to look at this code in action. Now that we have our data, all we need to do is wrap it in html markup. Now we are free to style and arrange this data as needed.

Obviously there is still plenty of work left to do to get a fully functioning plugin. However, the flexibility and simplicity of using JSON moves things along tremendously. This was a simple example showing the potential power of JSON, and the possibilities are endless! Hopefully you found this piece informative, and that it inspires you to jump into JSON for your own development. Good luck!

Choosing a Color Scheme

One of the most important visual elements of a website is the color scheme, and it can be one of the most challenging elements to get right. A site geared at the elderly calls for a completely different color scheme than a site geared at children. And likewise, a site focused on serious issues, like health or social change will likely have different colors than a fan site for Bronies. Not only that, but if you’re working on a site for an international client, understanding a color’s cultural meaning is important. For example, using green in a site for the Western world may signify wealth or freshness, while in Chinese cultures, green may signify exorcism or infidelity according to About.com’s Visual Color Symbolism Chart.

In this post, I’d like to discuss a bit of basic color theory, and few tools we can use to get started in choosing the right color scheme for your next website project.

Choosing a Base Color

First, let’s assume that you already have a logo to work with. Why? Well, having a logo as a starting place makes it a lot easier to choose a base color. A good designer will have already narrowed the logo down to one to three colors, and those colors should already be doing a good job communicating the appropriate message to the target audience. So from there, we can analyze the logo and decide which color acts as the main color, and whether that works as a main color accent in our web design.

Let’s look at an example.

We recently completed a site design for the Piedmont Education Foundation. Our client provided us with a logo, which was purple and white. Straight away, it was easy to tell that our base color for the project would be purple, but how did we come up with the other colors in the project?

Choosing a Supporting Cast of Color

One of my absolute favorite tools for choosing color schemes is Adobe Color CC. You have a few different options for getting started, so let’s go!

Choosing a Color Scheme from a Base Color

    1. For this example, let’s start with a warm, sunny orange. Go to http://color.adobe.com and plug that hex for our sunny orange (#ff6500) into the middle box, and make sure the white base color triangle is in that box (if it isn’t, hover over the bottom area of the box until the tool tip pops up, and click Set Base Color).
    2. Now, let’s select a color rule from the upper left side of the screen. What do these color rules mean? Well, here’s a brief overview:
      • Analogous
        Analogous colors are three or more neighboring colors on the color wheel. Since we selected orange in this example, we should see yellow, yellow-orange, orange, red-orange, and red in our color swatches.
      • Monochromatic
        Normally, monochromatic colors are versions of our base color with black, gray, or white added to create variations of the color, but Adobe Color CC appears to use saturation (how bright, or how rich a color appears) as way to affect color for the monochromatic scheme.
      • Triad
        A triad scheme uses colors that are an equal distance from one another on the color wheel. The result you see may be less than lovely now, but with a bit of finessing, you can get some great results from a triad color scheme. Try pulling the dot sliders in toward the center of the color wheel, or adjusting the bottom slider under a color to add more gray or black to a color.
      • Complementary
        Complementary colors are two colors that are directly across one another on the color wheel. A good rule of thumb when using complementary colors is that the complement should have a contrasting level of saturation, or perceived brightness. Otherwise, the complementary colors will clash too much when used together. To adjust the saturation in Adobe Color CC, simply drag the color dot toward the center of the color wheel.
      • Compound
        In Adobe Color, a compound color scheme is a mash-up of a complementary and analogous color scheme explains Tony Harmer in The Design Jungle, an Adobe blog and design resource. In our example, it is finding the complement to the orange (blue), grabbing one color that is analogous to the blue (green), and two colors that are analogous to the original orange (two desaturated yellow-oranges).
      • Shades
        Shades are fairly straightforward, and simply show different amounts of black mixed into the originating color. What’s fascinating is that adding a lot of black to yellow can actually turn it green!

        An example of different color schemes created using a single base color.

        Left-to-right, top-to-bottom: an analogous scheme, a monochromatic scheme, a triad scheme, a complementary scheme, a compound scheme, and saving a scheme.

    3. If you have an Adobe CC account, then you can log in and save the color scheme to the Creative Cloud library. This is particularly useful if you are going to work in Illustrator, Photoshop, or any of the Adobe apps on the iPhone or iPad because you will have access to your scheme (trust me, this is super helpful when you’re working on a logo in Illustrator!)
      I like the compound color scheme best, so I am going to go ahead and save that. Click the Save button in the upper left corner.
    4. In the pop-up box, enter a name for your color scheme, indicate where you’d like to store it in the cloud, and add any tags you’d like to describe your color scheme. You can also indicate whether you’d like to theme Published to Explore, which will make it viewable by the public (it may be worth being careful here if you are creating a scheme for a client project).
    5. Now you can fire up Illustrator, and see your new color scheme in the Color Themes panel!
An example of the Color Themes panel in Illustrator CC 2015.

Illustrator has a Color Themes panel that allows you to import and use the color scheme you created with Adobe Color. The color scheme can be added to the Swatches panel for ease-of-use.

Choosing a Color Scheme from a Photograph

What if you don’t have a color scheme? Maybe you’ve been tasked with the logo design, and are looking for inspiration for the color scheme based on the content you’ve already received from the client (like a photograph), or you’ve worked with the client on a moodboard, and want to grab colors from there. Well, you’re in luck. Adobe Color has an option to upload a photo and choose a color scheme from there!

  1. Go to the Adobe Color website, and click the camera icon in the upper right of the screen.
  2. Use select an image from your computer. For this example, I’m going to use a photo of our gorgeous office building.
  3. Not unlike the previous method for choosing a color scheme, you can choose different “moods” based on the colors in your photograph.
  4. If you choose Custom, then you can drag the dots around to customize the color scheme based on the image. I wanted a calming vibe with a single pop of color, so I moved my dots around to get some warm grays into the mix.
Examples of a color scheme chosen from a photograph.

Left-to-right, top-to-bottom: a colorful scheme, a bright scheme, a muted scheme, a deep scheme, a dark scheme, and a custom scheme based on a single photograph.

Using either of these methods for choosing a color scheme may not work perfectly, and you may need to consider finessing the scheme in another program, like Adobe Illustrator. The key here is to find a starting point, and use that to guide you in the color-choosing process.

If you want to learn a bit more about color schemes and some high-level color theory, Tiger Color has a brilliant resource on Color Theory.

Mm Plugin: Equal Height Columns

Making columns that have the same height without explicitly setting a height on each of them has always been a web design challenge. Doing this in a way that is full responsive so that content never overflows and the heights are equal on all screen sizes has always been an extreme challenge. We’re pleased to announce that this challenge has finally been solved with our Equal Height Columns plugin for WordPress.

Our Equal Height Columns plugin is simple but very powerful. Once it is activated it adds a settings page where you input a CSS selector for the elements you want to have the same height. You can also input a breakpoint below which you do not want the plugin to equalize the heights. Simple as that.

This information gets passed to a jQuery script that does all the magic. When the page loads the script measures the height of all the items that match the selector and sets each item’s height to match the height of the tallest item. Then it sets up some event listeners for window resize and orientation change and re-equalizes the heights whenever these events are triggered.

Equalizing the heights on page load and window resize was good, but we took it a step further and added some extra functionality to make it bulletproof:

– We check the selector that was input and catch any errors that happen if the selector is malformed so that we never stop JavaScript execution due to bad input. This plugin will never break your site!
– We added some debouncing on the resize and orientation change events so that the plugin only re-triggers once as you resize the window
– It supports multiple selectors at a time so that multiple collections if items can be equalized without affecting each other
– It always grab the items fresh from the DOM so that it will still work in situations where a new item has been added to the collection via AJAX or cloned with jQuery
– We added a custom event ‘equalheights’ that can be used to easily trigger the equalizing manually with jQuery’s trigger method like so:

There are also two jQuery methods that you can call directly, initEqualHeights() and equalizeTheHeights(). The difference between them is that initEqualHeights() sets up all of the event handlers for when the window resizes and when the ‘equalheights’ event is triggered on the window, but equalizeTheHeights() simply does direct equalizing of the heights without involving any events. Both methods can be used in the same way and support the same 3 args:

There is also a filter that allows you to programmatically set up the selectors and args you want to use, which allows you set certain elements to always equalize heights regardless of whether their selector has been entered on the settings page:

After many, many hours of refactoring and improving, we’re very happy with the plugin and are using it on many of the custom sites we build for our clients. Check it out on the WordPress Plugin Repository and on Github and let us know if you find it useful.


Google’s Mobile-Friendly Search Algorithm

Mobile-Friendly Search ResultMobile internet usage continues to grow. In fact, global internet usage on mobile devices has surpassed desktop internet usage in 2014 according to ComScore. We at MIGHTYminnow have been early adopters of mobile-friendly standards, and currently ensure our client’s websites are developed to be responsive. A responsive website displays beautifully on devices of all sizes and offers no barrier for user interaction and engagement on mobile devices.

Since Google’s search results are always about relevance, it makes perfect sense that they would serve search results to mobile device users that are mobile-friendly. This is exactly what Google will begin doing on April 21st when Google launches their mobile search algorithm, which will consider mobile friendliness as a ranking factor. Currently Google’s mobile search results include a handy label next to mobile-friendly sites letting users know that these sites will display well on their device. The next step will actually favor mobile sites in the search results. This means that if your website is not mobile-friendly, mobile users will have a hard time finding your website through Google search on a mobile device.

To find out if you website is mobile-friendly, try Google’s Mobile-Friendly Test.

Need help making your website responsive? Have questions? Contact us!