UX Design

How to Solve Your Customer's Problems and Make Money Doing It

Emma Ruehl — Mon, 31 Jul 2017 19:51:54 +0000

How to Solve Your Customer's Problems and Make Money Doing It

Emma Ruehl Mon, 07/31/2017 - 2:51pm

You’ve invested the time and effort to craft a solid sales message and marketing campaign. The offer is great, the price is right, and people should be flocking in your doors and email inboxes to purchase. You’ve even paid a company to help get your website to rank in the top five of Google’s search results page, and your site’s traffic has soared as a result. But somehow, the sales aren’t rolling in.

Turns out, ranking #1 in Google doesn’t directly get you sales. Helping people does.

Back to the Drawing Board

At the heart of every potential sale is a person with a problem. Is your business the right solution to the problem? Does your prospect feel understood, cared for, and compelled to partner with you to work towards a solution? Before you sell, it’s imperative that you understand the person and the problem. Otherwise, you’re marketing blindly. Here’s where to start.

1. Stop Trying to Think For Your Customer

Instead of developing products and messaging around inferences and feelings, ask the consumer directly. Start with a simple survey asking about their pain points (there are a ton of great chat bots and survey tools out there right now), interview people as they use your site to uncover frustrations, and read through your reviews and testimonials.

Photo via Olark.

Uncover why your prospect went looking for a solution and other approaches they’ve tried. Why have your customers chosen you? What almost stopped them from choosing you? Before you prescribe the solution, flush out the problem, and observe it from multiple angles. It’s your goal, as the Master of the Solution, to better understand the problem than your prospects and customers.

2. Build Content that Resonates with Solution-Seekers

Your prospects and customers don’t want content shoved down their throat. They want to encounter messaging that speaks to them and their problems. Have a conversation that brings them to the conclusion that you are the right fit and worth their dollars.

Screenshot via Hubspot

Much of the best content comes directly from the mouths of your customers, which is another reason why surveys and interviews are critical. There is no better way to help someone feel understood than to translate their very own thoughts and feelings into helpful messaging. Did a prospect express frustration around cost? Include messaging about value, or offer a free trial. Even better: when you know their pain points, include a list of features that directly addresses those pain points.

3. Rid Design of Disruption and Trend

So many brands are latched on the heels of the latest design trends. Heard of parallax? Ghost buttons? Hero rotator images? Perhaps you’re not familiar with the terminology, but no doubt you and your competitors have toyed with one or all of these design trends.

Look familiar? Screenshot via ABC.

It’s rare that businesses choose design elements based on actual research; typically, design is dictated by a template you purchased, or someone on your sales team saw an effect on a competitor’s site and thought it would be “cool” to implement on yours. If everyone else is doing it, you should be too, right?

The problem with trend is that it’s often broken from its original context and applied to a million different projects, despite relevance and suitability. When design dictates development and content, you end up with a pretty portfolio site that is irrelevant to your target audience. And all your money goes to making a piece of art that no one buys.

The best design adds to, and doesn’t detract from, user experience. It’s a supporting player that should be the last thing people notice. It should help logically guide users through your site architecture, keeping interest up and building trust in your brand.

Easy to digest and navigate site via Ted.

At the end of the day, your content is the star of the show. It is what resonates with your customers at their core, communicating that you can solve their problem and solidifying the connection that supports a lasting, mutually-beneficial relationship.

4. Invest In an SEO Strategy that Seeks to First Answer a Query

At the heart of SEO is simply being the best answer to a particular query; it’s inherently about solving problems. No doubt, you’ve searched yourself for product or service pricing, clicked on one of the top search results that you expected to contain pricing information, and much to your disappointment found no pricing but a barrage of CTA popups and contact forms.

Screenshot via Google

What happens when people don’t find what they’re looking for? They’ll exit your site. They’ll delete your email. They’ll go somewhere else because there will always be someone else who is actually solving their problem.

Be a smart marketer and lead your team to new thinking. If your business has been stuck in a rut of one-sided communication and has no idea what your customers and prospects actually want, be the voice for them. Seek to understand pain points and solve the problem; don’t add to a million other voices trying to tell consumers what they want. If you put in the effort to understand your prospects, they will reward you.

4 Challenges with a Webform Project, Part I

Travis Flatt — Tue, 23 Sep 2014 13:42:59 +0000

4 Challenges with a Webform Project, Part I

Travis Flatt Tue, 09/23/2014 - 8:42am

I like Javascript. There, I said it. It’s all out there floating across the internet, and no doubt my kids will mock me for it twenty years from now when they’re busily developing code via direct brain-link. For now, though, I find it to be a remarkably versatile problem solver for things that just aren’t quite handled by the default behavior of your favorite framework or CMS.

A recent Drupal project allowed me the opportunity for some Javascript/jQuery troubleshooting, which I usually find to be the fun part of any given day. Even when I’m not technically at work.

Computering until this point, basically.

I was originally thinking this would make for a single quick post, until I started explaining things. I’ve broken it up into four easily-digestible bites, each focusing on a specific problem that needed to be handled and its solution. First, we begin with...

Challenge #1: Hide the form

I was working in Drupal for this particular project, but the jQuery methods I’m going to talk about are pretty platform agnostic.

In this case, we wanted the form to not immediately appear on the page. The desired behavior was the appearance of a shiny button, which when clicked would display our glorious webform.

This is a pretty common general usage, and easily accomplished with a display: none in CSS.

.hide-this-element { 
  display: none; 
}

With the element stealthily hiding on the page, we need to take over the behavior of our button. In this case, I’m going to use jQuery’s slideToggle()method just to give the added functionality to open or close the form with the same button.

var button = $(‘.button-selector‘);
var form = $(‘.form-selector');

button.click(function(event) {
 form.slideToggle(‘slow');
 if (button.text().trim() === ‘Default Text') {
			button.text(‘Different Text');
		} else {
			button.text(‘Default Text');
		}
 event.preventDefault();
 $('html, body').animate({
	 scrollTop: form.offset().top
	 }, 800);
	 form.addClass('open');
});

So, there’s a few extra things going on here. The function itself is living inside a jQuery .click()method that’s telling the browser, “When this thing is clicked, do these things.”

An important element of event listeners like this is that event.preventDefaultbit. For most modern browsers, event.preventDefault()will work just fine in keeping the browser from doing the default behavior associated with the element. Usually this is a link. We don’t want the browser to look for an href attribute or redirect the page here, so we block that behavior.

(The actual production code is a bit heavier for some things, and preventDefault()is one of them, as it doesn’t work with IE8, but if I start turning this into a discussion of what doesn’t work on IE8 we’ll never get anywhere.)

There are a handful of options with slideToggle, but we’re keeping it simple here, only passing it ‘slow’. This refers to the speed of the animation when the element we’re hiding or displaying is revealed or hidden.

The conditional isn’t something that made it into production, but I threw it back in for the sake of building a more interactive event handler for this discussion. By using slideToggle(), the button has hide and show functionality. I like the idea of changing the text of the button to refer to whatever its current action will do.

The last bit is using the .animate()method, which has enough options to fill a book. Here we’re using it for a bit of user experience consideration. A big form has just opened, so we’re going to assume the user actually wanted to use said form and scroll the screen down to where it begins.

Working example here.

Next time we’ll talk about problem #2: Hide the form some more — which turned out to be a significantly different problem than the title might imply. We’ll cover some default webform rendering behavior, the problems it can cause, and ways to work around it.

[Images: Simon Pow, Patrick Gensel]

Web Design Trends Are Cool, But Design for Your Audience

Michelle Burk — Wed, 23 Jul 2014 14:52:18 +0000

Web Design Trends Are Cool, But Design for Your Audience

Michelle Burk Wed, 07/23/2014 - 9:52am

It seems like the possibilities of web design are becoming endless. I began designing and teaching myself a little bit of coding as a kid during the times when decorating your web page with flashy graphics, scrolling text, and putting a border around everything was cool (or, more like the only thing you could really do with web design).

Now, roughly ten years later, it is amazing what we can do with a couple lines of code thanks to HTML5 and CSS3. Here are a couple of trends that I have noticed gaining popularity in web design.

Videos

The evolution of HTML5 gives developers and designers the chance to create interactive and fully immersive websites. Recently, I have seen a number of websites taking a leap from welcoming users with an animated jQuery slider to utilizing the entire desktop screen with a video.

These videos add subtle movement to the website and may be a pure design aspect, or actually tell a story about who the company and/or person is and what they are all about.

There are advantages to this new feature in web design. From personal experience, I am probably more likely to patiently watch a video informing me about your business than wait for a slider to finish its round of images; a video engages my interest to click through your website and learn more about your company.

While it can be more difficult to pull off using a video as a background on your website, the effect it adds to your website is stunning and worth it.

Flat everything

Love it or hate it, we can probably thank iOS7 and Windows 8 for this push in the design world. So, take away those gradients from your buttons and think twice before you add a drop shadow to your text.

Many websites and designers are stripping away details from icons, text, and layouts to keep things as minimalist as possible — flat colors, simple shapes, and grids make up a lot of a design.

Why is this becoming so popular? Mobile devices. With many users visiting websites on mobile phones and tablets, it is crucial for designers and developers to consider how their website content will look on all devices.

Taking a flat and simple approach to a website design allows for easier responsive design and helps your website look better on smaller screens.

Single-page websites

Another thing I have noticed in web design is an effort to fit everything on one page. Rather than clicking through your website, users can simply scroll through one long page and (in theory) get all the information they need.

My take on this — a little bit on the fence.

On a desktop, it is too easy to scroll quickly through the website, skimming through text and graphics and leave without much thought.

This is not to say I can’t appreciate a well-designed parallax scrolling website (I actually love them). I just have a few thoughts on what I believe makes one successful.

Break up your content. Separate content sections on the page with different color backgrounds. This lets the user pause and take in the content in each section of the website.
Navigation bars are not obsolete, even if there is only one page. Having a navigation bar at the top of your website that jumps down to certain sections of your webpage saves time for the user looking for specific information.
Tell a story. If you are going to have only one webpage, make the user want to scroll down to the bottom. Putting great thought into the arrangement of your content and design and the message of your company are essential when it comes to a scrolling website.

So which of these work best?

In the end, these are merely trends and things could change in the next year — or even in a couple of months. The best you can do is find what works best for your audience while keeping things modern, unique, and memorable.

Why You Should Make Your Content Look Great on All Devices

Gabrielle Kinderknecht — Wed, 12 Mar 2014 14:46:01 +0000

Why You Should Make Your Content Look Great on All Devices

Gabrielle Kind… Wed, 03/12/2014 - 9:46am

Today, responsive web design is a way for developers to create smooth transitions between various viewport sizes using media queries. The media queries tell the browser, if a person is viewing from 320px width device, look like this (a condensed version of the desktop version to fit a mobile phone).

Desktop, tablet and mobile phones are common devices we see today. Within those 3 categories, each have different resolution sizes. For example, the different resolution size between an iPhone5 (1136 x 640 pixels) and a Galaxy S4 (1080 x 1920 pixels).

Responsive Web Design was created to comply with future devices and even accommodate older devices without having to create HTML markup for desktop, tablet or mobile.

Know thy user

Before even considering a responsive website, it is important to understand who will be viewing your website and on what device. For example, I almost always look up restaurant locations and hours through my iPhone or iPad.

In “Mobile Path-to-Purchase” it was found that mobile search behavior – by people who search the Internet for good food using their phones or tablets – has a nearly 90 percent conversion rate.

So if you are in the food business it is probably a good idea to have a mobile and tablet version of your full site.

Knowing your user will help you decide how to build a user-friendly site. In many cases, having a fixed site will be the best solution if most users view your site on a computer.

In some cases, designers will choose Mobile First, creating an HTML markup and CSS of a mobile version and then build up to tablet and desktop.

I love Joshua Johnson’s insight on Mobile First: Why it’s great and why it sucks. Again, there are so many approaches to consider but understanding who you will serve your content, will help make the best decision.

Displaying content properly on each device

In responsive design we develop a full version of desktop and use degradation to minimize the content that is served on a tablet and mobile.

Let’s examine Enochs, a beautiful responsive website in the UK. Go ahead and grab the bottom right corner of your screen and move it in and out. Take a look at how the content moves around and how the navigation changes.

The nav goes from a single row navigation, to a two-column two-row. Then in the mobile, they keep the two-column two-row but include it between the header image and intro paragraph.

What about the rest of the layout?

There are no really big differences between desktop to tablet version. The biggest change in layout is in the mobile version, which you see all the content stacks to fit the width of the mobile.

Did you see how long the mobile page gets? Yeah, I know, I hate scrolling infinitely to get to the never-ending bottom too. They have placed an anchor on all versions of the website which takes you back to the top navigation. Even with the anchor, it does not help because all that content on the desktop is not needed on the tablet and mobile version.

This is what I mean about displaying the content properly. A mobile user just needs certain amount of content that is most important. In my example, they display the interactive game, as shown on tv, etc..

A mobile user is probably just looking for the menu or contact information. Did they really need to keep all that content?

Hiding content can cause slower loading

Just like in Joshua Johnson’s blog post, he and several developers have agreed that one con to responsive design is that you can hide content from the desktop to display certain things on the mobile site.

You can hide content through your CSS stylesheets but it will still upload all the HTML content. Since they share the same HTML markup it can make mobile user experience slow. This is a side effect to responsive design that could be solved through mobile first.

Building minimally and progressing

Using mobile first approach is a backwards process in which developers focus on the mobile design first. This allows designers to prioritize content into its simplest form — mobile — and then have it respond to larger devices.

Many choose to design for mobile first, so that they do not design a heavy-content site on desktop and then have to “hide” content.

Offer the right flavor

Now it’s your decision to choose the best solution in building a website. Understand who your market is by researching how many users access your content through what devices. Take advantage of what responsive design can do for your company.

Reach out to your consumer, hold their hand and walk them through your web content. Do not let them to wander to other sites because you gave them a banana split sundae when all they wanted was an ice cream cone. Yes, it’s true that they cannot always get the flavor they want but it is your job to give them several choices to fit their needs.

Be the right flavor from the start by researching what they like. Be dynamic, go responsive.

Yes! A Website Spam Prevention Tool Marketers Won't Hate

Valarie Geckler — Wed, 04 Sep 2013 16:39:18 +0000

Yes! A Website Spam Prevention Tool Marketers Won't Hate

Valarie Geckler Wed, 09/04/2013 - 11:39am

As a marketer, captchas are a necessary evil. Can’t live with ‘em: you want to avoid adding obstacles to conversion or a form submission. Can’t live without ‘em: too many spam submissions could knock your website offline or result in a deluge of unwanted email notifications and meaningless content on your site.

For every new Digett site I recommend a captcha tool called Mollom, a very useful and powerful alternative to the typical captcha monster.

Spam prevention based on text analysis

When a site is connected to the Mollom service, the text of a form submission is instantaneously analyzed to determine whether the content is legitimate, possibly suspicious or spam.

What I like best about Mollom is that it doesn’t get in a marketer’s way. It does most of its work in the background, only asking someone to confirm they’re human with a captcha if a submission is suspicious.

Imagine this:

A visitor arrives at a form on your website (a landing page, a contact form, a blog comment form, etc.). They enter their information into the form and click Submit. The contents of the submission is analyzed by Mollom. Then...

A. Mollom detects spam
While spammers are getting very creative with their submissions these days, there are some red flags that make it obvious a message is spam. If Mollom is sure a message is spam, the submission will be blocked. The spam won’t be submitted and won’t appear on your site or in your inbox.

B. Mollom sees something potentially suspicious
When it’s not clear whether a submission is legitimate or not, then Mollom will show a captcha question. If it’s a real human trying to reach you, they’ll be able to answer the captcha and complete their submission. If it’s an automated script running trying to submit spam, those submissions will be stopped.

C. Mollom says the content is safe
If Mollom doesn’t detect anything suspicious or spam-like in the submission, the visitor’s submission is immediately completed. That’s it. No captcha, no additional obstacle to submission.

What makes Mollom such a cool captcha tool is that a visitor doesn’t even need to know it’s there but you can have peace of mind knowing a spam prevention tool is in place.

What else to know

Check out Mollom pricing to make sure it’s right for you. (You might be able to leverage their free plan).
It is hard to block all spam 100 percent of the time and Mollom isn’t always perfect. Spam techniques are constantly evolving and so must spam prevention methods.
Mollom doesn’t work exactly the same on all platforms. Mollom is full-featured on Drupal, but we’ve been a little disappointed with its WordPress implementation.
If you’re embedding third-party forms on your website (from your CRM or marketing automation tool) then Mollom may not be an option.

If spam on your site is frustrating you, let us know so we can see if we can help.

Review: Two amazing products to add to your design workflow

JD Collier — Wed, 14 Aug 2013 13:38:08 +0000

Review: Two amazing products to add to your design workflow

JD Collier Wed, 08/14/2013 - 8:38am

I want to tell you about two amazing products, Pixelapse and Invision. The two overlap a little bit, so you could choose just one of them — but I use both and I'll tell you why.

Visual version control with Pixelapse

I use SVN and GIT for code. I also have version control for design files — Pixelapse. With this tool, I create a restore point every time I save a design file (PSD, AI, etc to about 50 file types).

Once the tool is installed, save your design files into the special folder that Pixelapse creates. Every time you save a file, it uploads the file to the service.

Now, I make changes to my files without worrying about saving dozens of iterations in case a design idea doesn't work out. I can just go back and download a past version of the design.

This tool changed my workflow. During design and review, I keep my design files in the Pixelapse folder. Once a design goes to development, I take it off Pixelapse and move it to its final resting place. For Digett, this is Google Drive. Not to worry though, I can still restore the full version history of a file by viewing and restoring deleted files in Pixelapse.

In the screenshot below, you can see the thumbnails representing each time I saved the file. I could view and restore any version in this timeline of thumbnails.

Visual feedback and review with InVision

In the past, I always found it a challenge to get feedback on a visual design. I have tried everything from printing PSDs to screencast movies to presentations with a projector. I'm not talking about client feedback — I'm talking about internal team review. I want a tool that allows:

Me to quickly send designs for internal team review
Team members to easily comment on portions of a design
Team members to see each others feedback

I want a tool that powers collaboration, not just a way to send a PNG file to a coworker.

Enter InVision.

With this tool, I output a screen-sized static image (PNG, JPG) of a design to the InVision sync folder on my computer. The file is auto uploaded to InVision and from there I can send it out for feedback and manage the review process.

I also use InVision to add dev notes. Often, there are behaviors, font attributes or other notes that I want to pass along to the developer. I can add these notes to InVision and the developer can see all of the notes.

In the screenshot below, you can see a conversation about some copy on a print brochure. The comment could just as easily be placed there to discuss heading color or other visual aspects of the design. When I implement a piece of feedback, I can mark it complete to hide it from my default view.

I find myself surprised and delighted on a regular basis with InVision. There are lots of other features I'm not mentioning — hotspots to allow you to mock up a design and email notifications to name two more.

Try these tools … I bet you will like them!

What about you?

I have seen lots of other Photoshop version control tools … do you have one you prefer? Let me know!

Elements of a successful newsletter

JD Collier — Fri, 11 May 2012 14:49:52 +0000

Elements of a successful newsletter

JD Collier Fri, 05/11/2012 - 9:49am

All of us get newsletters. I'm signed up for everything from my neighborhood news to web programming. The majority of these get less than a 10 second glance before I delete or trash them; but there are one or two I look forward to receiving and read everything they write. What makes these different?

Content is king!

The most important criteria for me (your customer) reading your newsletter is relevance. I am not going to read a newsletter about electrical engineering because it doesn't fit my interest profile.

There are two reasons I read your content:

Need - I read the newsletter for my neighborhood because it has information I need.
Want - I read a newsletter about web design because I want the information.

Both scenarios score high enough in relevance to me that I am willing to give a few minutes to the content.

Authenticity

After relevance, authenticity is vital. Authenticity may have become a buzz-word, but for good cause. If I have the slightest twinge that the newsletter is using marketing techniques disingenuously, my brain starts to tune out. People aren't stupid. We recognize marketing.

To clarify though, just because I sense marketing techniques in a message, I don't immediately tune you out. I understand and appreciate that your business is working to stay in business. So am I. If, however, the marketing techniques feel to me like you aren't helping me while I'm helping you, it feels like a bad relationship. I'm giving time and sometimes money and not getting a return on that investment.

Give me something

An added bonus of my favorite newsletter is that they almost always include free downloads of things I want. Free downloads are great … if I want the item. In my case, they are things like free fonts or photoshop textures.

The trick here is to offer things that the audience wants. This can be a challenge, but it is a wonderful bonus when it is there. I think it is one of the key reasons why my favorite newsletter is my favorite.

Layout

It doesn't have to be pretty, but it does need to be well organized. My favorite newsletter has the same header every time and then a series of articles; I always appreciate that there is a title and a four line teaser for each article. They also place a great image next to each article. I am a visual person and my favorite newsletter always has images that draw me in. Whether it is a silly image to illustrate a point or a specifically drawn image to quickly explain a concept, I appreciate it.

Clean, clear, quickly scanned … these are the rules that make me read on.

My favorite newsletter is from the Webdesigner Depot. Here is an example of the last newsletter I received.

Image credit: Webdesigner Depot Enews Header

Submitted by Noa on Thu, 03/07/2013 - 8:25am

Thanks! This is quite helpful.

Submitted by Amy Peveto on Thu, 03/07/2013 - 9:07am

Glad to hear it, Noa!

3 Small Modules That Make Good Drupal Websites Great

Art Williams — Wed, 02 May 2012 16:57:53 +0000

3 Small Modules That Make Good Drupal Websites Great

Art Williams Wed, 05/02/2012 - 11:57am

Identifying the difference between a good website and a great website has everything to do with the care put into the details. Elements the site visitor never consciously notices combine in such a way as to affect them on a deeper level to convey stability, credibility and competency.

There are three small modules that I find make a big difference in the way a visitor/client interacts with a site. By “small” I don’t mean code size, but more about feature set. They each do one thing very well and have become an essential part of our builds.

Custom Breadcrumbs

The custom breadcrumbs module provides the flexibility to build breadcrumbs that have a specific hierarchy based on node type or any other node parameter (through php). This aligns your breadcrumbs with the node paths that you’ve established with pathauto.

The breadcrumbs that are baked into Drupal core do an adequate job, but we find that this is one of those details that is more important than it seems at first glance. The more consistently all of your menus, breadcrumbs, paths, and page titles align, the clearer it will be to a user how everything fits together.

Custom Contextual Links

Contextual Links is one of my favorite additions to Drupal 7. Those little gears that expand with links that are contextually aware provide a quick way for your site managers to know if and how they can interact with a section of the site.

But wouldn’t it be great if you could add your own items into those menus? Custom Contextual Links (CCL) module does just that.

To create a link you specify the Title (the text of the link that is displayed), the URL (path of the link) and then the context in which the link should appear. It’s this last part where the magic happens; I can choose to place my custom link on a specific node, all nodes of a content type, a block, a view display, or a group of view displays. I have yet to find a context that isn’t covered by this module.

As an example of this modules use, I commonly create a custom contextual link on the homepage rotator that links to a view so that the site manager can rearrange and edit the rotator items. The contextual area is the logical place for the site manager to look for this link.

The icing on the cake with this module is that it supports some basic actions such as:

Publish/unpublish content
Make content sticky/unsticky
Promote/remove content from the front page

Search Configuration

Every site we build has some content type that shouldn’t be searchable. For example, the homepage rotators. They are just promo items and don’t need to be searchable, but Drupal 7 doesn’t offer any search customization beyond nodes and users and content ranking settings.

Once you turn on the Search Configuration module it does two things:

The permissions page (admin/people/permissions) now has options to toggle permissions to search each content type per role.
A new fieldset called “Additional Node Search Configuration” appears on the search settings page (admin/config/search/settings).

The first item allows me to solve my problem of visitors being able to search rotator content. I can now allow administrators to search for rotator content, but only allow visitors to search the blog content types.

The second item the module adds gives us a new settings that control how the advanced search form renders and can override field labels on the search forms.

Details Modules

As the brilliant architect and furniture designer Charles Eames said, “The details are not the details. They make the design.” These three modules are details modules that many sites would leave out in favor of bigger features. But we agree with Eames. Fine tuning the client/visitor interaction with your site is never a waste of time.

Image: Wikimedia Commons

Submitted by thamas on Fri, 05/04/2012 - 2:30am

I recommenend you the Menu Position module. In most cases it does the job instead of Custom Breadcrumbs and - as its main task - "allows for the creation of rules that will dynamically add the current page into the menu system at the requested spots". (And when it is needed bradcrumb created by menu position can be overwrited by Custom Breadcrumbs.)

Submitted by azul on Fri, 05/04/2012 - 4:14am

How about modules; custom_search, search_restrict, finder

Submitted by Art Williams on Fri, 05/04/2012 - 11:17am

@thamas: Menu Position looks like a nice module. We'll have to evaluate it more to how it will fit in our builds. Thanks!

@azul: More good modules! The Finder module looks especially interesting. As always there is more than one way to skin a cat in Drupal.

3 great Drupal 7 Modules you may have missed

JD Collier — Fri, 06 Apr 2012 13:06:05 +0000

3 great Drupal 7 Modules you may have missed

JD Collier Fri, 04/06/2012 - 8:06am

I am such a nerd about Drupal modules … I get really excited when I think I need something that does [blank] and then I find a module that does exactly that. I love even more when I find a module that makes some UX or usability problem go away. We have talked about the Drupal 7 contrib modules Digett considers foundational to every project. Today I'm sharing three of my personal favorites that make UX or usability problems go away.

Block Class module

Drupal.org project page

I am a big fan of this little module which does one thing I LOVE. With this module, I can style a block with something like ".sidebarcta" instead of "#block-block-5." I have never been a fan of styling anything with a specific reference to something in a dynamic and changeable CMS. Haven't you also had situations where you make a new block and then realize that you styled by the block name and then had to adjust your CSS to include the new block?

Another benefit I have found with this module is the ability to create a class like "contactstyle" and then apply that same class across multiple blocks. No need to look up the machine name of each block and add them to my stylesheet, I can just name the style and put that in each block.

I also appreciate the elegance in my CSS … I can read what the style is for rather than depending on a comment around the #block-block-5 style declaration to tell me which block that is talking about.

External Links

Drupal.org project page

This module is a brilliant fix to a common client/web/usability issue. We need links to external sites to open in a new tab/window, but that requires the client to understand "target=_blank" in the WYSIWYG link dialog.

No more!

Use this module and any external links automatically open in a new window.

Linkit

Drupal.org project page

Linkit adds a new button to the CKEditor (or through WYSIWYG) to allow you to easily add internal and external links. With this module, you can simply type the title of the content for the destination link. When you select the correct page using the Autocomplete field, it adds the correct link.

Do you have any goodies to add that are your favorites? I'd love to check them out!

Photo by andercismo

Submitted by ColoursAlive on Sat, 04/07/2012 - 9:38am

Thank you for the useful information in this post. The only one I'd heard of was the 'external links' module.

Very useful.

Submitted by Mathijs Groothuis on Sat, 04/07/2012 - 9:54am

I like the 404blocks module which does render blocks on 404 pages. Many drupal sites totally break on a 404 page when navigation and such are really needed. Even websites as Dries his own and webchick are hit by that flaw.

Submitted by John Mark Maina on Sat, 04/07/2012 - 10:27am

Cool stuff man.. I absolutely love the ext link..

I appreciate them all.
Thanks.

Submitted by Jon on Sat, 04/07/2012 - 1:09pm

Nice suggestions, I will check them out.

Submitted by Adam on Sat, 04/07/2012 - 1:32pm

Hard to believe anybody would have missed linkit, but block class is nice.

Submitted by TafkaS on Sat, 04/07/2012 - 1:38pm

thanks for your tips!
If you like the block class module, you may like even more "display suite" module

Submitted by MRobit on Sun, 04/08/2012 - 8:57pm

Great stuff! Definitely checking out these modules - they seem very helpful.

Submitted by E on Mon, 04/09/2012 - 8:09am

Forcing links to open in new tabs/windows is bad UI design, and should never be done generally.

Submitted by JD Collier on Mon, 04/09/2012 - 11:48am

@Mathijs: I do like the D7 equivalent 404 Navigation. Have you tried Search 404? It's great!

@TafkaS: Display Suite ... agreed! We use it on just about every site!

@E: There is quite the flame war still burning on the UX impact of forcing new windows. I am in the camp that feels it is the right thing to do for external links ... and I know good people who believe the opposite of me :) I haven't found any real quantifiable, modern data on the topic one way or the other...just opinions.

Submitted by Hugh Barnes on Wed, 04/11/2012 - 5:41am

I nodded when I read E's comment, just as I reeled when I read you describing new windows as a UX improvement. I don't believe in taking away users' control over their own web browsing experience.
There's contention over this, for sure, so let me finish telling you the experience I had on this site which prompted this post. I came here from Drupal Planet, didn't notice the link had opened a new tab. Got to the end of the comments (your response to E), muttered my disagreement :), and then hit Alt-backarrow to go back in history. No response. Moment's confusion, annoyance … ah, new tab, bingo. A minor annoyance in the scheme of things but don't we live by "Don't make me think"? I wasn't feelin' the UX love.

Submitted by E on Wed, 04/11/2012 - 10:49am

Jakob Nielsen (use-it.com) did a lot of great research on UI and why opening new tabs/windows is a bad idea. Although his research dates from a few years ago, it's still just as valid today as then (even more so, if anything, given the common concept of tabbed browsing now). External links are no different than other links in this regard.

On the off chance one would do this due to thinking that links should open externally to keep people from "leaving your site" is nonsense 1990s-think (and was invalid even then).

Submitted by Susheel Chandradhas on Wed, 04/11/2012 - 12:31pm

Personally, I always open links in new windows. So it's always Rtclick+new tab or Ctrl+Click... I hate losing the page that I clicked away from...

Submitted by HyperGlide on Wed, 04/11/2012 - 11:37pm

Interesting write up and appreciate the comments.

Would be interesting to compare http://drupal.org/project/linkit with http://drupal.org/project/CKEditor_link

Thank you,
Hg

Submitted by Joe on Thu, 04/12/2012 - 1:47pm

The LinkIt module is probably the most brilliant thing I've ever seen. Thanks!

Submitted by Rachael on Tue, 06/12/2012 - 10:03pm

Interesting modules! I've been playing with them and a couple others you've recommended, and have a question.

Any idea if there is a way to only use the External Link module for certain, specified links? We run some services on our site that we pay for, and consider vetted/authority resources, but also want to include other sites. Management wants to put a disclaimer on those sites we aren't sponsoring. Any idea on how to make this happen, or know of a module that can do that?

Submitted by JD Collier on Wed, 06/13/2012 - 11:44am

@Rachael: I have used External Links on to allow some sites through and others not (for example, I didn't want external links on YouTube pop-ups. I did have some problems with it though. It didn't work quite right for me.

Submitted by 3 great Drupal… on Tue, 02/12/2013 - 4:47am

[...] 3 great Drupal 7 Modules you may have missed From www.digett.com - Today, 5:47 AM I am such a nerd about Drupal modules … I get really excited when I think I need something that does [blank] and then I find a module that does exactly that. I love even more when I find a modu Ludovic Coullet's insight: [...]

Go ahead, add some flair to your site with CSS3!

JD Collier — Fri, 23 Mar 2012 13:00:51 +0000

Go ahead, add some flair to your site with CSS3!

JD Collier Fri, 03/23/2012 - 8:00am

The day has come to stop focusing on Internet Explorer's limitations and start focusing on the other browsers that allow CSS3. It takes very little extra time, and you can add some sizzle with just a few extras in your CSS.

Justifications for CSS3

There are two main reasons I recommend you include CSS3 extras in your site development.

Polish is one piece in the puzzle that has been proven to enhance the perception of value and professionalism of your site. (Full study is available here.)
Surprise can drive engagement with your site. (See In Defense of Eye Candy.)
A bonus reason: it's quick! Why not?

CSS3 attributes to definitely use

There are a few that we can start incorporating immediately, including @font-face, border radius, box shadow and gradients. These can be used to reduce dependence on images in your design and reduce page load time. They also degrade gracefully (IE 7 for example, will see a square border and a solid color instead of a gradient.)

CSS3 attributes to try out

Two that I highly recommend you begin incorporating into your site development today are transitions and transforms.

Transitions

With CSS3 transitions, you can add a transition effect when you change the style of an element. The best example of this is when you hover over a link or button. Why not set a one-second ease in of the color transition, just to give some polish to your buttons? It is quite simple to add this, chances are you already have a:hover. Just add the new declarations to the bottom of that style declaration.

Transforms

Add a transform to your buttons or icons on hover. I love how the Facebook developer page does it (hover over the three middle, round icons.) This is also very simple to add to the a:hover declaration in your stylesheet.

My secret weapon

Use this wonderful CSS3 Generator to create the code and paste into your stylesheet. You can quickly build your effect and see which browsers will support your code.

UX Design

How to Solve Your Customer's Problems and Make Money Doing It

Back to the Drawing Board

1. Stop Trying to Think For Your Customer

2. Build Content that Resonates with Solution-Seekers

3. Rid Design of Disruption and Trend

4. Invest In an SEO Strategy that Seeks to First Answer a Query

LEAVE A COMMENT

4 Challenges with a Webform Project, Part I

Challenge #1: Hide the form

LEAVE A COMMENT

Web Design Trends Are Cool, But Design for Your Audience

Videos

Flat everything

Single-page websites

So which of these work best?

More design articles

LEAVE A COMMENT

Why You Should Make Your Content Look Great on All Devices

Know thy user

Displaying content properly on each device

What about the rest of the layout?

Hiding content can cause slower loading

Building minimally and progressing

Offer the right flavor

LEAVE A COMMENT

Yes! A Website Spam Prevention Tool Marketers Won't Hate

Spam prevention based on text analysis

Imagine this:

What else to know

LEAVE A COMMENT

Review: Two amazing products to add to your design workflow

Visual version control with Pixelapse

Visual feedback and review with InVision

What about you?

LEAVE A COMMENT

Elements of a successful newsletter

Content is king!

Authenticity

Give me something

Layout

Related Articles

LEAVE A COMMENT

3 Small Modules That Make Good Drupal Websites Great

Custom Breadcrumbs

Custom Contextual Links

Search Configuration

Details Modules

LEAVE A COMMENT

3 great Drupal 7 Modules you may have missed

Block Class module

External Links

Linkit

Related articles

LEAVE A COMMENT

Go ahead, add some flair to your site with CSS3!

Justifications for CSS3

CSS3 attributes to definitely use

CSS3 attributes to try out

Transitions

Transforms

My secret weapon

Related Articles

LEAVE A COMMENT