Sandstorm Blog

Andrew
Drupal Development: Relationships and Contextual Filters in Views 3

In Drupal, I’ve encountered a common problem: setting up a view to pull content that relates to the node the view is on at that moment. In this post I’m providing a few quick-reference guides to this Views problem.

Before we start, a few assumptions:

1) The view in question is a block display. Otherwise none of what I’m about to say will make sense, as the “View Is Here” indicator relates to what node the block display is on.

2) Your content has a Node Reference field.

3) In these examples, I describe the referenced node as a “Parent” and the node making the reference a “Child”. (This is an arbitrary distinction since the node reference field could just as easily be called “Child Node,” but this is less likely since “Parent” to “Child” is more frequently one “Parent” yielding many “Children.”)

We’ll cover the following views:

  • Pulling fields from the node it’s on
  • Pulling fields of a “Parent” node by node reference
  • Pulling fields of “Child” nodes by node reference
  • Pulling fields of “Sibling” nodes by node reference

View pulling fields from the node it’s on:

Here’s an easy one. You want a view to return information about the node the block display is on.

For example:

Let’s say we have an online grocery store. When a customer is on the product page for Oranges, we’d like a view that shows fields from that particular product. We’d like the fields to appear in the sidebar, and while this wouldn’t normally be done with Views, it’s important to do this first step to build on later.

This looks like:

What’s happened here?

This contextual filter orients the view to the page it’s on. It basically says, “Show content that has [Content: NID] values that match [Content ID from URL].”

[Content ID from URL] is another way of saying “this page’s NID”, so the only result is the current node.

Note that this can be achieved more efficiently with proper templating and modules like CCK Block.

Pulling fields of a “Parent” node by node reference:

Now, let’s say you want to pull fields from the node that the page you’re on is referencing.

For example:

The grocery store has two content types: Product (Oranges), and Food Group (Fruit). He’d like to show information about the Food Group on the Product page.

At the bottom of the Oranges page, the Nutritional Benefits of Fruit are displayed–this is not a field on the Oranges node, but it’s parent, Fruit.

This looks like:

The first step is the same, orient the view to the node you’re on. Then add a relationship to the node reference field.

You will want to use the relationship for any additional fields, otherwise they will be pulling from the node you’re on.

What’s happened here?

Like the last example, the contextual filter says “Show content that has [Content: NID] values that match [Content ID from URL]“, but by using the Relationship, we’re telling the view to look at the referenced node for this information.

Pulling fields of “Child” nodes by node reference:

This time it’s the reverse, instead of pulling information from the node the current node is referencing, we’re pulling from nodes that reference it.

For example:

When you’re on the Fruit page, we want any item that has Fruits selected as its Food Group (node reference) to be displayed.

Now, you might think this would be easily accomplished by creating several displays of the same view, filtering by content type Product, and filter those by a different Food Group content type for each display. That’s the brute force method. For five or six Food Groups it might be fine, but if your example has hundreds of possible referenced nodes, you will have to use a contextual filter.

This looks like:

What’s happened here?

Unlike the previous examples, we’re not choosing NID as the Contextual Filter; we’re choosing the Node Reference field itself. So, this time the contextual filter is saying “Show content that has [Node Reference Field] values that match [Content ID from URL],” i.e. nodes that reference this node.

Pulling fields of “Sibling” nodes by node reference:

At first glance this may seem simple. This is a behavior usually associated with Taxonomy (i.e. “related content”), and there are a lot of built-in solutions for this kind of View when working with taxonomies. What if the relationship is defined by something else, such as in our example, Node Reference? Then you need to build it from scratch.

First, you need to ask, “what is this node referencing?” then “who else references this?”

For example:

Oranges, Banana and Mango all have the Fruit node selected in the Node Reference field. So, we would like Bananas and Mangos to show up in the sidebar when you’re on the Oranges page.

This looks like:

What’s happened here?

The first relationship sends the view through the Node Reference field to the referenced node. Anything that uses this relationship will now point at the referenced node. In other words, the first relationship says “that references X,” and the second, being reversed, says “that is referenced by X”.

We still need to orient the view, this time to the node we are referencing.

All the parts come together to read: “Show content [that is referenced by] content [that references] [Content ID from URL] using the [Node Reference Field]“.

Put these Views tips to work!

These four examples should cover all the basic scenarios of pulling content that relates to the page you’re on. I expect many of you, like myself, will use this post as a quick reference for setting up complicated views in your Drupal development. I hope it gives you a better understanding of Views and make expanding the Advanced tab a little less intimidating.

This blog was posted by Andrew on September 12, 2013.
Andrew Jarvis

About the Author

Andrew Jarvis

Andrew lives in Bucktown with his wife and three cats in various states of hairlessness. When he's not at Sandstorm doing front-end development he is passionate about creating 3D art.

Will
Brand strategy - voice and tone

What sets authors apart? Subject matter? Historical context? It really boils down to their words. Read these three literary excerpts.

  1. The master was a fat, healthy man; but he turned very pale. He gazed in stupefied astonishment on the small rebel for some seconds, and then clung for support to the copper.
  2. When spring came, even the false spring, there were no problems except where to be happiest. The only thing that could spoil a day was people and if you could keep from making engagements, each day had no limits.
  3. It is a curious thing, Harry, but perhaps those who are best suited to power are those who have never sought it. Those who, like you, have leadership thrust upon them, and take up the mantle because they must, and find to their own surprise that they wear it well.

These are clearly from different authors. One is a British master (Charles Dickens), an American man’s man (Ernest Hemingway), and an Edinburgh single mother with a love of magic (J.K. Rowling). Without knowing who was who, you could tell simply from the test that every passage was at least from a different person (yet alone a different time period).

How does your business communication relate to this? Is your company’s voice recognizable?

Could you look at 4 different company whitepapers or pages of your website and feel like they are written by different people?

It’s often overlooked, but the voice and tone of a company is as important as color palette, iconography, and photographic style. Below are four reasons why you need to put more emphasis on your company’s voice and tone.

 1. Consistency

It adds to the consistency of your brand. What kinds of words you use, sentence length/complexity, use of descriptors are all things to consider. It’s just like visual brand consistency. Consistent voice and tone makes it easy for new team members to integrate and start communicating for the company. It creates a regular expected voice for your company that is almost as recognizable as your logo and tagline.

2. Identity and Culture

Who you are as a business and as a brand is important. You know how MailChimp, Chase, McDonald’s, UPS, and many well known brands sound. Hospitals speak differently than banks. Mountain Dew speaks differently than Diet Coke. Your brand has a personality and you should be reflecting that in your words on the web, in print and in all communications.

 3. Customer Relationship

Are you talking in their vernacular? Are you talking up to them? Down at them? Are you trying to educate them? Do you just want to sell to them? Your content and how you deliver it engages your customer is different ways.

  • Come to the zoo.
  • You really should go to the zoo.
  • Go to the zoo!
  • The zoo is great. It would be a shame if you missed out.
  • You’re fun (so is the zoo).

These all say the same thing, but all sound very different. Do you want to be more imperative? Do you want to have a sense of humor about your brand? Do you want to be seen as a trusted friend?

This post is full of questions that are meant to help you and your organization create a voice and tone that conveys your brand across every communication vehicle. Voice and tone are part of who you are as a company and who you are as a group of people working toward a goal.

The old aphorism remains true: “It’s not what you say. It’s how you say it.”

How do YOU want to say it?

This blog was posted by Will on August 30, 2013.
Will Biby

About the Author

Will Biby

Will wears many hats at Sandstorm. From writing web content to executing social media strategies, he is quick to act and insistent on a job done right. Will enjoys writing, so expect to hear from him often on the blog.

Laura
Brand strategy - empathy

The importance of empathy in business cannot be denied. It will create efficiencies across the board. It provides a construct from which to accelerate the speed of solving business problems. Multi-functional collaborative teams are a given for today’s economy, and leveraging these teams to their full potential requires each individual to think about the other. How do they think? What is their situation? Why? These questions help to create an empathic solution.

This is more than active listening. This is tapping into imagination and fully embracing the challenge through another person’s point of view. Once this is accomplished, solutions can be more quickly implemented with less friction within an organization. This cuts down on rework and shortens timelines by leaping forward from the beginning.

For example, we currently have a global client who is outsourcing much of their tradeshow support to Sandstorm. This organization has been successful by embracing sophisticated processes for developing high-end mathematical software. They have a meticulous process for everything and trusting Sandstorm with this process will be critical to their continued business growth.

Sandstorm is filled with passionate, non-linear thinkers who are always looking for a better way. Sandstorm’s creative process and culture generally produces unorthodox solutions. This is why we are enlisted by our clients to assist them in building their businesses.

Bridging the above mentioned cultures and processes to create something larger and more effective for our client requires active empathy. I challenge our teams to actively empathize with this particular client in order to solve their problems more quickly. This quickly innovates in small and big ways to move their business forward.

Honing your empathy takes practice, particularly if you are driven. Reacting and pushing our agenda and/or ideas forward is the more reflexive mode for most successful business people. It will be scary at first, believe me, I am a control freak; but in the end, better results will abound with a more empathetic worldview.

This blog was posted by Laura on August 22, 2013.
Laura Luckman Kelber

About the Author

Laura Luckman Kelber

Chief Strategy Officer, Laura Luckman Kelber leads Sandstorm's team of strategists with wisdom from her 20 years of marketing experience. Combining seemingly disparate ideas to solve a problem, Laura unearths unexpected insights to help clients’ fuel their success.

Will
Top 7 Responsive Sites from 1996 (Yes, 1996)

1996 was a crazy time. Everyone was shouting “Show Me the Money!” or using a Fargo, ND accent. We were just meeting Kato Kaelin and teaching our friends the “Macarena”.

It was a huge year, the U.S. hosted the centennial Olympic Games in Atlanta, and Star Wars was back in theaters for the first time since its original release. And oh yeah, people started using the internet more and more. Sure it was on Mosaic and Netscape browsers, but the World Wide Web was in more households than ever. The sites were amazing by 1996 standards, and well... “interesting” by 2013 standards.

Exhibit A:

Accidentally responsive?

There is one thing that was happening that no one anticipated, many websites from ‘96 are tablet responsive. What? I thought this was a new thing that only recently started happening.

Well, it just recently started happening on purpose. Many of the sites in ye olde ‘96, were built using HTML tables — which meant that they were adjustable based on the size of the browser window. So, with a small window you would have compact content and on a larger window everything was more spread out. In effect, the site was “responsive” to your large (or small), hot, CRT monitor. (Note to our hipster friends, do not make giant, heavy monitors hip again. Thanks.)

Are we saying to build using tables? No. Not at all. It’s just fun to see how things from the past relate to modern technology.

Trends tend to repeat themselves, and a lot from 1996 has come back again. Game of Thrones was first published then and now it’s a phenomenon. Tupac (1971-1996? R.I.P.) was “revived” at Coachella last year as a “hologram.” So, building sites that are adjustable based on screen size is back, too (just for different, more portable screens).

We’re reviving a few website gems that are excellent examples of “antique responsive”. (There’s also a wealth of great examples on the Wayback Machine, too.) Enjoy.

7. VH1.com (circa 1996)

6. Beavis and Butthead Do America

5. CNN: OJ Simpson Trial

4. Dole/Kemp ‘96 Campaign

3. CNN: 1996 Year in Review

2. Space Jam

1. Lego.com  (circa 1996)

 

[Bonus: This site is not “responsive,” but it’s a great period piece of the era. 1996 Internet World Exhibition]

What will we think about sites from today in 17 years? Which will still be around?

This blog was posted by Will on May 30, 2013.
Will Biby

About the Author

Will Biby

Will wears many hats at Sandstorm. From writing web content to executing social media strategies, he is quick to act and insistent on a job done right. Will enjoys writing, so expect to hear from him often on the blog.

Michael
Mobiletanious responsive development on multiple devices and screen sizes.

I’d like to go on the record and claim the next catch phrase in UX and user experience design....Mobiletaneous!

Mobiletaneous is the art and discipline of building experiences for multiple screen sizes simultaneously, as opposed to starting from the mobile or desktop version. This a slight spin on the recent design trend “Mobile First” which was popularized by design guru Luke W. (Luke Wroblewski).

This is not to take anything away from the “Mobile First” philosophy. I’ve read “Mobile First”, practiced the mobile first methodology and extolled its virtues. There is no denying the expansive growth in mobile use, and the shift from desktop to mobile is indisputable. Any organization not focusing on their mobile experience is missing the boat.

Mobile First

However, as we’ve been designing and building for varying screen sizes, we’ve found it most useful to consider all screen sizes simultaneously. This applies to both the user interface design and front end development phases. It is particularly helpful when breakpoints for mobile, tablet and desktop screens are needed.

Mobiletaneous

This approach ensures designs for all screen sizes are getting the attention and consideration needed, rather than prioritizing one over the other. Because at the end of the day, the most important screen size to design for is the one your user is using.

We’ve learned this is a more efficient way to develop responsive designs. It’s no surprise it requires more time (and budget) to design and build responsive experiences, but we’ve found the mobiletaneous approach to be the most efficient.

So our interpretation of the “mobile first” philosophy is slightly different. We believe your mobile experience is crucial. So is your tablet and desktop experience. That’s why we’re on the leading edge of the mobiletaneous movement.

This blog was posted by Michael on May 23, 2013.
Michael Hartman

About the Author

Michael Hartman

As Sandstorm's Technology and Usability Director, Michael leads our developers and usability researchers in creating web sites and applications—both desktop and mobile—that embody our favorite blend: intuitive user experience and dynamic Drupal development.

Laura
Thinking in action at Sandstorm

I think the reason we are all so busy planning is that we are scared to think. If we think, that takes a leap of faith in ourselves that we will actually think of something worthwhile. Thinking is murky and unstructured, there is a possibility that you may spend a long time thinking and still not have the answer to your problem at hand. Thinking does not necessarily guarantee anything, but it does give you valuable perspective.

Crowd with lightbulb sign demonstrating the thinking behind marketing strategy.

A plan on the other hand has structure—deadlines, action items, concrete goals and budget numbers. It is impersonal. A plan is about the metrics established by the organization and structured by the budget and timing parameters given to the team by someone else.

The problem is that I have personally seen so many well-organized and structured plans go awry because no one in the organization has paused to think. A goal is handed down with a budget and timeline; and then, with a heavy dose of organizational cognitive dissonance, a plan is created within a construct that may or may not make any sense. No one has asked why; just how, what and when have been addressed.

I know the caveat you will throw at me, "but Laura, we have no time to think." You are not going to like my response to this one: I think that’s a socially acceptable excuse to not think. I almost never leave a marketing presentation without someone quoting Steve Jobs in admiration. Do you think he was too busy to think?

Something else that is impacted by lack of thinking, your bottom line. I am always amazed by the good money thrown after bad, because Clients do not want to invest the time and money needed to create a thoughtful positioning or marketing strategy before diving right into a web site execution or social media promotion. Effective marketing tactics require thinking.

Do me a favor, start integrating a minute of thinking into your day. One minute. Ask "why?" at least once a day and let me know what happens.

This blog was posted by Laura on May 14, 2013.
Laura Luckman Kelber

About the Author

Laura Luckman Kelber

Chief Strategy Officer, Laura Luckman Kelber leads Sandstorm's team of strategists with wisdom from her 20 years of marketing experience. Combining seemingly disparate ideas to solve a problem, Laura unearths unexpected insights to help clients’ fuel their success.

this file was posted under: 
Michael
Finger as a navigating device on a tablet.

There's a distinct usability difference between navigating a web site on a desktop with a mouse and on a tablet or mobile device with your finger. A mouse is accurate to the pixel. Fingers are far less precise. They’re particularly less precise if you have big fat caveman fingers like mine.

This came to mind this morning as I inadvertently accepted a LinkedIn request on my iPad that I intended to ignore. It’s true, I don't willy nilly accept every LinkedIn request I get... but that's another rant. The options were just too close together and like I said, I've got caveman hands.

Physical Space, Not Pixels

This is just one example of why you need to consider real world physical space when designing for tablet and mobile. Bigger pointing devices, like fingers, need bigger targets. Between Apple, Microsoft, Nokia and MIT’s Touch Lab the recommended guidelines for touch targets are between 8 and 14mm with a minimum of 2mm of spacing between actions (source: Mobile First by Luke Wroblewski).

Recommended tablet design guidelines for usability.

 

 

Guidelines, Not Rules

LinkedIn followed the guidelines for some of their targets. However, guidelines are meant to lead you in the right direction, not force you into a rigid structure. How often the target is used and its position on the screen should also be considered for optimal usability. Context and common sense should lead your design if you want it to facilitate human behavior.

The touch targets below are the worst offenders. The options arrow (B) is far too small and placed too close to the accept button (A), making it too easy to accidentally accept a request when all you wanted to do was view the options. Accidentally tapping on a nav item is frustrating. Accidentally tapping on the wrong action item causes you to blog about it.

Tablet usability example of poor touch target spacing.

 

Thumbs, Not Cursors

Here's a good rule of thumb (pun intended) when designing targets for mobile. Just ask yourself, “Could I hit it with my thumb?”

 

This blog was posted by Michael on April 1, 2013.
Michael Hartman

About the Author

Michael Hartman

As Sandstorm's Technology and Usability Director, Michael leads our developers and usability researchers in creating web sites and applications—both desktop and mobile—that embody our favorite blend: intuitive user experience and dynamic Drupal development.

THIS FILE WAS POSTED UNDER: 
this file was posted under: 
Brill Street Chicago Top Gen Y Employer Sandstorm Design

We are so excited to announce that — for the 3rd year in a row! — our UX agency is one of Brill Street's Top Chicago Gen Y Employers for 2012.

Here at Sandstorm, a Gen Y employee has the opportunity to shine doing what they do best and to be proud of it whether it be interactive marketing strategy, UX design or Drupal web development!

Our Warrior Spirit drives us to create compelling online experiences and cutting edge work — all while having loads of fun!

Inspired by the idea of giving back, this year the team came together to create an interactive holiday card inviting users to choose a charity for Sandstorm to donate towards. We were encouraged to make the card fun and, most importantly, to make it our own.

Sandstormers have the platform to do great work, to learn and grow, and to become part of a forward-thinking UX agency. It's a great place to work for everyone: generations X,Y, and the eventual (hopefully awesomely futuristic) Z!

This blog was posted by on January 29, 2013.
John Lombard

About the Author

John Lombard

John is an intern at Sandstorm.

this file was posted under: 
Benefits of video from Sandstorm

The benefits of video marketing are stacking up. If you've put video creation on the back burner, consider these five benefits that can increase your web presence and up your conversions.

1. Make the complex...less complex

If a picture says a thousand words, imagine what a video has to say. If you're in the business of complex technology or seemingly “dry” services, video can add the pizazz you need to explain or engage potential clients. How can you convert a lead who doesn't understand your business? Video is your chance to do a little “show and tell”. For National Association of REALTORS® Global, Sandstorm created this custom motion graphic to explain to REALTORS® the opportunities available when selling to global real estate buyers. By use of visual representation, it becomes more meaningful; it's now more than just statistical information.

[TIP] Make sure your video is in the right format. Animation is great for explaining complex ideas and processes. Live video encourages a human connection and lets you showcase your company culture.

2. Easy to like, easy to share

Here’s a crazy stat: Each minute, over 700 YouTube videos are shared to Twitter. One could say the idea of sharing is embedded in all of us. And this idea of garnering views isn't just for B2C either, consider the B2B video made by Corning explaining the myriad uses for their glass technology. Right now, it has over 20 million views!

They've successfully taken content about glass manufacturing and made it shareable. What content do you have right now that's missing its opportunity to be shared?

[TIP] Don't take the “user” out of user experience. In order to get your video shared, make sure:

  • the content is relevant to your audience
  • it’s placed on the right page in your site
  • and uploaded throughout your social media channels.

3. There's always a link back home

After sharing your video, expect it to travel the web. Just be sure to equip it with plenty of links to drive viewers back to your site. Think of it as a traveling salesman who never runs out of business cards. When hosting on YouTube, add a link in the description and make sure your URL is at the end of the video. YouTube also lets you create floating links that direct viewers back to your YouTube channel or to subscribe. Consider using these to increase viewership of all your videos.

[TIP] Take advantage of YouTube Analytics to monitor and track video viewership.

4. Improves visibility in search engines

Search engines rank quality web sites higher. So what is considered "quality"? Video and other media content, low bounce rates and longer times on pages are all contributing factors. Living Direct Inc found that, "Consumers...spend 9% more time on a page when video is present." Having engaging video can improve your SEO by enriching the type of content on your site and ultimately keeping viewers on your site longer.

[TIP] Optimize your videos by incorporating keywords (title tag, description, etc). Also, consider adding subtitles (on YouTube) as they can help up your SEO.

5. Video is Memorable

Picture this scenario:

A prospective client (let's call him Mike—there are 3 Mikes working here!) is shopping around for services you offer. After looking at fifteen different companies, the information begins to blur together. Then, as Mike is explaining his favorite to the team, he finds himself explaining the services using what he learned in your video. You’ve not only planted yourself in Mike's memory, you've helped him make it easier to get the approval he needs to purchase. (Plus, sharing YouTube videos makes him look cool.)

It has been proven that viewers retain more information when visuals are implemented. Consider this as a tool to not only stand apart from competition, but also to be remembered at the end of the day. This video from Eloqua explains the future of revenue with voiceover and animation. It has all the right tools for success, and reaps the benefits accordingly:

[TIP] Empathy, story, and humor are three essential tools for creating memorable video, says Author Kevin Daum. Be sure to weave these elements into your video whenever appropriate.

Has you seen any of these benefits? Share your video in the comments!

This blog was posted by on January 24, 2013.
John Lombard

About the Author

John Lombard

John is an intern at Sandstorm.

THIS FILE WAS POSTED UNDER: 
this file was posted under: 
Matt
Here are 3 ways to improve your corporate blog

Let's face it, some blogs are just boring. Blogs aren't white papers. They are stories written by people. Opinions, levity, original ideas, relevant humor, these are things that all humans have, and corporate blogs should be no different. That doesn't mean that it can't be “professional.” None of those attributes disqualify anyone from being seen as an expert; it just means that it should have some life! But how?

Tune Your Tone

Tone is tricky, and corporate blogs have a history of tonal shortcomings. Finding your tone will come from your culture:

  • the attitudes of your employees
  • the environment of your office
  • the creativity of your work

Don't stifle these things. Each of them goes into what makes your company unique and can drive your content strategy. One of the best ways to share that uniqueness is with a company blog.

Craft Your Conversation

In The Corporate Blogging Book, Debbie Weil says there are three Cs of blogging, "be conversational, cogent, and compelling." Blogs should start dialogues with your audience, not force rhetoric down their throats. Caterpillar regularly uses their blog to engage in relevant discussions with their audience. Maintaining a conversational tone is key to avoiding a boring blog. Have some fun — you can have an expert voice and still have a heart. It can be a fancy three-piece suit with a silly tie. Also, don't forget to follow up with audience comments to keep the conversation going. Check out web app company 37 Signals blog.

Be, Befriend, or Buy a Blogger

You have established a tone and crafted the conversation you want to have with your audience, but there is still one more big hurdle. You may be the foremost thinker in the area of international toothpaste distribution, but that doesn't necessarily make you a blogger. If you look to your innerself and don't find a blogger, chances are there is someone capable within your office. It is easier, and smarter, to dictate your ideas to someone who already has a grasp on tone, than to try to "discover" it yourself. If all else fails, hire someone. Finding someone who can succinctly capture the voice of your company, while still being entertaining and conversational is essential to beating the boredom! Are you ready to breathe life into your corporate blog?

This blog was posted by Matt on January 15, 2013.
Matt Chiaromonte

About the Author

Matt Chiaromonte

Matt is a copywriter and social media guru in Sandstorm’s Internship Program. With a background in marketing, journalism, and improv comedy, Matt brings equal parts knowledge and entertainment to our little corner of the Internet. When he isn’t generating social media content, Matt can be found enjoying pizza, podcasts, and many other things that begin with the letter “p”.

Pages