Tutorials Category

A common scenario that Drupal developers and site builders run into is the challenge of keeping the database in sync between the dev, testing and production versions of a site. Web hosts like Pantheon (highly recommended) make this a snap, but what if you're using a VPS or some other hosting that doesn't have that functionality? One popular option is to use Drush, but that isn't a good fit for everyone.

Backup and Migrate (BaM) can be a great tool for helping with this sort of problem. In this post we'll talk about using BaM for this task and include a very handy companion service that makes things even easier. What I often see with site builders who are using Backup and Migrate is the manual downloading of backup files and then doing a manual restore from the downloaded file.

A great alternative to that process is setting up an Amazon S3 bucket (cloud storage) where you can directly place your backups from Backup and Migrate. Once each version of the site has the S3 bucket set up, keeping the database in sync becomes a snap.

A lot of the time, when someone talks about making a website responsive, they mean that the layout will change depending on what device is being used to view the site. But there is more to responsive design than that. Perhaps an even more critical factor is the performance of the site, particularly on mobile.

At its heart, responsive design is about opitimizing the user experience across a wide range of devices. This can be a hard job, no doubt about it. But we've been making things harder than they need to be.

A major culprit has been the choices that are made with recent design trends - large images, lots of JavaScript libraries and even the continued use of carousels. This has led to swelling page sizes, with the current median page size of a top 500 website now coming in at over 1.5 MB - 33% larger than the year before!

What follows are some tips on evaluating responsive websites across different devices. We'll see how to use several tools and techniques - using a real website as an example - that can provide hard data on how your site is going to perform on mobile devices and help identify problem areas.

In the post on base themes that I wrote earlier this week, I pointed out that core adds a lot of CSS to your site that you may not want. If you find yourself overriding this CSS in your themes, you definitely have some bloat that you could trim down. You also run into this issue quite a bit with contributed modules. Views, Flexslider and Superfish are modules that typically add a lot of CSS I don't want.

So how to get rid of this potentially unwanted code?

In a previous post, we took a look at some of the major changes with the Omega 4 base theme. This time around we’re going to get our hands dirty and actually start using this powerful set of tools for Drupal theme development.

Before we get too far along, we need to get clear on a few major points. Omega 4 is a really big change in the way many have been working with Omega theme in the past. It’s now much more akin to the Zen base theme (heck, you can even use Zen grids in your themes without much fuss) and it requires the skills of a front-end dev to use to its full potential.

The beginner-friendly UI layout tools are gone. Setting up a “best practice” development environment may also be a bit of a speed bump. So the first step in using Omega as intended, is to get your workspace set up with the tools you’re going to need.

In this lesson we're going to talk about what is possibly the most useful Drupal site building module of them all - Views. If you're coming from a WordPress or Joomla background, you won't have experienced anything quite like it. Not only does Views allow you to easily build queries on your site's content, but it gives an amazing degree of control over the display of those query results.

We're going to begin by creating a very basic view just to get acquainted with the interface and some of the settings we'll be using the most often. If you've been following along and are using my free installation profile, then everything you'll need is ready to go. If you're using your own site, make sure you have Views installed along with some content you can work with. If you have a fresh install of Drupal, the Devel module is great for generating dummy content.

One of the best things about Drupal is the ability to flexibly manage your content. If you're coming from a WordPress background, you'll know that system uses the Post and Page for its content types. In Drupal you have something similar in the Article and Basic page, but also an easy to use interface for creating a virtually unlimited number of other content types.

When it comes to Drupal, Omega theme is hard to beat for building a responsive, mobile-friendly website. It has powerful GUI configuration tools that make it very appealing to those who don't want to mess about with code. Omega theme has taken care of the messy bits and all that's left for you is to tinker with the settings. In this post we'll go over some of the most important of these configuration settings.

I should also note that in this series of lessons we're not going to discuss creating an Omega sub-theme from scratch. For that I'll refer you to this nice little tutorial on Drupal.org. Instead, we'll do a walk-through of the settings and then finish up by talking about Omega's companion modules, which can help take your responsive site building to the next level.

Working with images is a bit different on a Drupal website. Most of the differences make it much easier to use images consistently across a site, particularly once you turn things over to non-technical content editors. But there are a few things to watch out for that can really throw a wrench into things.

For example, most web designers are in the habit of optimizing images before adding them to a site. Using Photoshop or a tool like Smush.it is standard operating procedure. In this tutorial we're going to take look at why that may not be the best practice when working with Drupal. We'll also go over using the image toolkit, creating image styles and using styles with the IMCE module.

I guess you could say I was in a bit of a rut. The modules I had been using for SEO had been working well, so I hadn't bothered to look at any alternatives in quite a while. Then I had a customer ask if I'd consider switching to the Metatag module. I took a look and came away very impressed with what I saw.

In this tutorial we'll review the Metatag module and explore the settings it provides (including the advanced ones) and how they can help optimize your site for search engines. Let's begin with a bit of set up and general configuration.

Website performance has been on my mind a lot lately, especially with regard to responsive web design. It's quite important, but it also requires a shift in thinking that is still underway for many involved with web projects, particularly clients.

How quickly your page loads has a big impact on everything from your site's search rankings to the abandonment rate for shopping carts.  But as I mentioned in a previous post, there are tensions between commonly desired features and mobile performance. I'll give you an example we run into here at Friendly Machine all the time.

I thought it would be fun to do a little experiment. I have a project for a client that is wrapping up and one of the final things I'm doing for them is optimizing the site's performance. The client is a good candidate for this little demonstration because they have their Drupal site in a shared hosting environment, something that's quite common, but often limiting with regard to what you can do to improve performance. 

Omega theme has some cool features that have rightly been given a lot of attention, but one companion module that doesn't get discussed as much is Omega Tools. It's a very useful module and one of its features is the ability to export theme settings, something that may come in handy on your next project.

Modules are the workhorses of a Drupal site. Most are useful, some are essential, but there aren't many that qualify as fun. This tutorial is about one of those rare modules that is actually a real good time, @font-your-face. 

For many years there were only about a dozen web safe fonts that you could use on your site. In retrospect, it was very boring. In the past couple years, however, things have completely changed. We'll skip the glorious story of CSS3 web typography for now and instead get straight into using @font-your-face to spiff up your site with some cool new fonts. 

One day about five years ago my boss called me into his office. There was a problem, he said. There had been some complaints and they needed to be promptly addressed. As I shifted nervously in my chair wondering who I had inadvertently angered, he opened his laptop and asked, "Have you ever heard of Drupal?"

When you're first getting started with any content management system there is a lot to learn and Drupal's past has given it an undeserved reputation as being especially challenging. Here's some quick advice to set beginners on an easier path.

You know those nifty "smooth scrolling" effects you've seen? Well, today I'm going to show you how to implement this animation on your Drupal site. As a bonus, you'll learn how to add any jQuery snippet or plugin the "Drupal way". But first, a little background.

Today I'm going to show you something really cool. If you follow what's going on with Drupal, you've no doubt heard about Omega theme. But maybe you haven't heard about its companion module, Delta. When used in conjunction with the Context module, Delta provides a simple, yet powerful templating system.

I recently did some work for a client setting up a multisite install on a shared hosting account using cPanel. With shared hosting, if you run into any problems you're pretty much on your own. And unfortunately for me, there were problems. Since I'm always looking for an opportunity to turns lemons into lemonade, I thought I'd write a 'how to' post to save others a bit of aggravation.  

Let's step through the process...

I returned from a long vacation over the holidays to discover that one of the sites that I manage had developed some serious performance issues. Page load times had gone from 1 or 2 seconds to more than 8 seconds on some of the slowest loading pages. 

After messing around with a few of the usual suspects, I decided to give the Drupal Boost module a try in hopes that it would speed up the site while I worked on tracking down the underlying issue. 

Adding stylesheets to a web page is one of the first things a designer or developer learns how to do, but adding a stylesheet the "Drupal way" calls for a different approach. In my rush to finish the custom theme for my first Drupal site, I skipped the documentation on adding CSS and simply placed a link to the stylesheet in the page.tpl.php template file. 

Pages