Styling <select> Form Elements

A handy CSS/jQuery snippet to style <select> elements.

Check out this Pen!

Post Navigation for Use with Types & Views and URL Parameters

This code is an example of post navigation for use specifically with Types & Views. The post navigation works well in tandem with View’s parametric search forms, and can output next/previous post links based on URL parameters that indicate custom taxonomies and fields.… Read More »

:hover Effects for Mobile

We recently completed a project in which we needed to popup a tooltip-like box when hovering over an element. The :hover CSS pseudo-class works fine in desktop, but not so well on mobile. What ends up happening on mobile is that tapping the target element does indeed pop up the tooltip, but tapping elsewhere on the screen fails to close it. Clicking another link or hoverable element does the job, but we needed to emulate proper lightbox/tooltip behavior, in which clicking anywhere else will trigger it closing.

What we ended up with is the following jQuery/CSS combo that seems to do the trick nicely.

Check out this Pen!

Fake See-Through Backgrounds with CSS

Here’s a little bit of CSS to create a cool “see-through” effect, which is particularly fun when using fixed-position background images.

Try scrolling me!

Check out this Pen!

Considerations

This method utilizes the :after pseudo-element, which doesn’t work so well on inputs, but if you want to apply the same effect to form elements you can just create a lighter/translucent version of the same background image and apply it to the <input>‘s. Anybody have a way to do this without creating a second image? We’d love to hear about it.

Why WordPress?

Sometimes MIGHTYminnow gets the question, “Why do you guys use WordPress?”

First, CMS (Content Management System) based websites are easier to maintain than “static” websites. WordPress is one choice of CMS and there are tons of other CMSs on the (open source) market. While no CMS is the perfect answer for every website, we find WordPress to be a great fit for most of our clients. The why is simple:

WordPress is easy for developers to use

In the old days, we used to write out in prose what content of the home page for a new website would be, and give that straight to a designer to draw. We used to create an outline of the pages in MS Word to show the site structure. We used to do sketches in OmniGraffle of what the various content blocks would be. In those good / bad old days, there were a lot of documents and a lot of extrapolation happening about how a site would be architected and how it would function. But now, with WordPress, it is just as easy (or more so) to do all of that planning work and architectural sketching by creating an actual, working website. We get a development website up and running at the earliest possible point we can in the website project process, so that everyone can see how it will be organized and what content will be included. From there, it is really easy to make changes in real time so that we can collaborate effortlessly with our clients on something that they can actually see and that feels like a website to them from the start. This process leads to better communication and *way* fewer design revisions later in in the process.

WordPress is Easy for clients / business owners to use

Our clients want to maintain their own websites. Since most of them write their own content, it makes sense for them just to add that content to their websites themselves. In the old days, we used to have to train our clients on complex web development software (over a course of *days*) in order for them to be able to make simple content changes. And then we had to worry because it was so much easier for things to go haywire. With WordPress, web editors don’t need days of training, nor do they have to be HTML experts to be able to update their websites. The visual editor within WordPress allows even computer novices to easily edit and change the content and images on their websites using a word processing approach that feels familiar. In other words, WordPress gives users the power to maintain their own websites without the ongoing (and unnecessary) expense of a web developer.

WordPress is extensible

WordPress uses a plugin architecture that allows for developers all over the world to create and publish new features and designs for anyone to use. Open source (read “free”) and premium (read “paid”) plugins and themes allow WordPress users to quickly and (in most cases) simply, expand the functionality of their websites. For instance, if you have a restaurant with live music and you would like to post the events you host on your site, there are plugins that easily allow you to add, manage and promote these events, provide event details, and even sell tickets. (We recommend Events Manager / Events Manager Pro, which we use for class registrations on this site!) And because this is a smart CMS, you can even set events to stop showing up after they have passed, thus lessening the number of things you have to remember to go in and update on an ongoing basis. As another example, if you are a photographer and would like to include galleries of your work on your website, there are plugins upon plugins that allow you to create beautiful and easy to navigate showcases for your work. (We recommend Nextgen gallery to start.) There are even themes that specialize in presenting portfolio pieces. There are plugins and themes that accomodate just about any type of website or feature you can imagine, and there are thousands (mostly free) to choose from.

WordPress free and open source

WordPress is an open source CMS. This means that the software is available to use for free, the code is public, and the contributors to the software do so (mostly) out of the goodness of their hearts. The creation and continuation of the software is a collaborative effort of a vast community, and it is actively enhanced, maintained, and made more secure by that community all the time. And because the core software (and most of the plugins and themes) cost nothing, you can build your own custom WordPress site for just the cost of web hosting and your domain name.

WordPress is SEO friendly

WordPress has many features that you can use to make your site more SEO friendly. Since WordPress makes it easy to expand your site by adding new pages and blog posts, most WordPress sites grow over time, which Search Engines like. Because most theme code is light and clean, pages tend to load quickly and be easy for Search Engines to understand. Because analytics tools like Google Analytics and Jetpack Stats integrate easily with WordPress, you can see how people are finding and interacting with your website and you can make changes based on this data to draw more visitors to your site (and to encourage more conversions). WordPress makes it easy to use keyword rich URLs, called “permalinks” that add archivable content to your site to give you a higher ranking in search engines. On top of all that, there are many plugins and methods to allow you to enhance your SEO through meta data and also to connect your site to social media to foster sharing and encourage visitors.

WordPress is well supported

WordPress is very popular – 53.8% of CMS based sites are built in WordPress (followed by Joomla at 9.2% and Drupal at 6.7%). Over 72 million sites around the world are built using WordPress, including this one. This includes popular companies like Mashable, The New York Times, UPS, CNN, and many more. 22 out of every 100 new domains created in the US are running WordPress. This popularity is not just in the US, as WordPress is has officially been translated into 40 different languages, with more being translated every day! All this love means that if you encounter any problems with your site, there are literally thousands upon thousands of qualified developers who can come to your aid, including us!

So, to recap, WordPress is awesome. We use it and so do a TON of other people. It is a sound technology choice for most websites – either theme based sites or custom designed sites – and there is a world of support available to WordPress website owners. You can use it for free, you can maintain your own site, and you can get up and running quickly. And if you need help getting startedfixing a problem, or making something beautiful, we can help. Feel free to reach out to us or sign up for a class.

(Statistics are from Yoast.)

Check out the New Mailchimp!

If you use Mailchimp to send emails to your clients and customers, you may have become very lost when you most recently logged in! Mailchimp redesigned their interface in June, which is optional until July 15th. So, what’s great and different in the new Mailchimp?

Design

dashboard-MCMailchimp’s new design is much simpler than before. The designers took out as much clutter as possible which allows the user to focus on building, sending, and analyzing campaigns. When we first opened the new Mailchimp, we were a little confused about where everything was, but have found that the new design much easier to navigate and find your tools.

Tools for Teamwork

The new tools Mailchimp has created for collaborating on campaigns are pretty awesome. We have been trying them out around our office and have found them very helpful. When writing/editing a newsletter, you can comment on different sections to let your team know what you would like change. You can also write comments when sending test emails to your teammates.

Responsive-ness

Redesign2x_iPadMailchimp has made it much easier to work on your tablet. By making their Mailchimp responsive, they have eliminated the need to pinch and zoom with your fingers that can often be frustrated when trying to get something done on the go.

Subscriber Profiles

The layout of the subscriber profiles have changed pretty drastically. There is much more functionality within the subscriber lists which means getting work done faster and more easily! When scrolling horizontally through your lists, the user’s email is now always visible so you don’t lose track of which line you are on. You can also move around, hide, and toggle columns for a faster workflow.

What is Crazy Egg?

MIGHTYminnow recently came across a service called Crazy Egg. This tool helps you to analyze user interaction for various pages of your website. There is a heatmap (that shows clicks), a scrollmap (that shows how much of the page the user saw), and confetti overlay (to show where people did or did not click and read). We are using a 30 day free trial to evaluate the software (you can too) and have been using this software for about a week. We will let you know how valuable we found it at the end of our trial! For MailChimp users, you will find it similar to their campaign analytics feature, where you can view a click map for every campaign you send. The difference is that you use it on your website and it comes with a much more detailed analysis.

Screen Shot 2013-07-01 at 10.29.32 AMIn addition to the features above, you can also set up pages for comparison. This would be great if you are A/B testing landing pages for Adwords or looking to make some changes to the user experience on your site.

ScrollmapWe are excited about the 30-day trial, as well as their 90-day guarantee. After our 30 days are up, we plan to write a follow-up on how this impacted our analytics and our SEO/SEM strategy. Stay tuned!

Styling TinyMCE content in WordPress

I, for one, was tired of my left aligned images creating a staircase in TinyMCE when my theme CSS is set for them to nicely clear. Here is what it looks like in WordPress TinyMCE:

2013-06-28_10-12-37

When this is what it looks like on the page:

2013-06-28_10-16-01

In TinyMCE it can often be challenging to tell what the true layout of the page will look like when your front-end CSS is applied, but it turns out that it’s easy to change the TinyMCE styles as well. All you need to do is drop this code into your theme’s functions.php:

And then create a corresponding CSS file called custom-editor-styles.css in your theme folder.

Write the CSS to clear your <h2>’s, make any other style changes you want to show up in TinyMCE, and voilà! You’ve got a page that makes visual sense.

Clearing Headings

There is a lot more you can do with this, like incorporating more of your actual theme CSS, but the main point is just to make your TinyMCE (back-end) and theme (front-end) CSS more consistent. We don’t need it to look exactly like the site, just enough to understand how the final page is going to lay out.

If you’d like to learn more, you can always check out the add_editor_style() post in the WordPress Codex.

Tech Tip Tuesdays: Output a list of pages that includes/excludes pages based on their title

Hello and welcome to our first Tech Tip Tuesday, MIGHTYminnow’s very own tips & tricks series. Stay tuned for more…

WordPress’ native wp_list_pages() function is great for doing just what it sounds like – outputting a clean list of pages with one line of code – but sometimes we need to do more.

The following code goes in your theme’s functions.php file and can be used to output a list of pages, in which pages are included or excluded if their title contains a specified “test string.”