Sandstorm Blog

Seeing the Possibilities, Pushing our Drupal Web Development, and Showing Off with the Sandstorm Website

Earlier in the year, I was fortunate enough to take part in launching the new Sandstorm website in Drupal. For those of you who’ve been here before, you know it’s a long winding road from the initial concept, marketing, content strategy, and design before you even begin the black magic known as Drupal web development.

It’s an ongoing, almost never ending, process.

Once you push through those phases and launch your first website, it can come as a surprise, to some, that the website isn’t actually complete. In fact, some of the most exciting features from the initial concept may have not made it into the final product. Instead, at launch, you’re more likely left with a large todo list of development ideas you would still like to see implemented.

What can we do next?

This is when most of us toss around the phrase “phase two”, but a website is, and always will be, a work in progress. This is one of the most exciting parts about working on the Sandstorm website in Drupal, because I knew when developing each section that this was just the first draft. Now that we are finishing up the year I have begun thinking about our website again. A year is a long time and, with “learning and sharing” being one of the core values at Sandstorm, I have learned a lot and can’t wait to begin pushing our Drupal development further than where it is right now.  

“The Results”

A new website, responsive web design or Drupal module is a great way to see each department flex their creative muscles and show the industry what we can really do, and good work immediately pays off. The increase in high-quality leads led to new clients, which led to our explosive growth, which ultimately led to taking over that office next door. This might be one of the coolest aspects of the entire project.

This blog was posted by on December 14, 2014.
Kyle Lamble

About the Author

Kyle Lamble

Kyle is your stereotypical bluehat hacker, by day, who wants you to upgrade your browser to support his love for cutting edge web development techniques. By night, he is a curator and publisher of art. Co-founder of Loosey Goosey Art, Kyle spends much of his off time helping artists find their inner potential.

Emily Kodner
Neurosurgeons Designing Websites?

Looking back at 2014, one of my favorite website projects was cns.org, the responsive website for the Congress of Neurological Surgeons built in Drupal.

Why was it my favorite? Because they were strategic and truly embraced user-centered design.

A focus on user needs

User-centered design takes the subjectivity out of the decision-making process. We didn’t have to define user needs because we had talked to users firsthand. And, as it turns out, neurosurgeons are some of the most direct and decisive users that we’ve ever interviewed.

Because we interviewed stakeholders, we knew the organization’s priorities and were able to strike the right balance between business needs and user needs (hint: you can’t meet the first without meeting the second).

Navigation designed by users

Who better to organize the navigation than the users themselves? We asked CNS members to sort cards (each corresponding to a page on the site) into groups and create labels for the groups they made. Those labels became our navigation. Best practices can tell us how many menu items to have or how flat or deep to make the navigational structure, but only users can really tell us how to intuitively group and label pages and sections.

User tested designs

A neurosurgeon’s time is particularly hard to come by. To ensure we had adequate participation in our usability study, we took our wireframe prototype to the CNS Annual Meeting where we had a captive audience. This was a great opportunity to identify potential stumbling blocks and to allow users to weigh in on areas where there had been internal debate.

We love making great user experiences, and we are able to make the best experiences when we talk to users early and often. That’s why this was one of my favorite projects of 2014.

This blog was posted by Emily Kodner on December 11.
Emily Kodner

About the Author

Emily Kodner

Emily is our Senior Director of Client Delivery. She consults with clients, leads projects and works alongside our team of creatives and developers to provide solutions to complex business challenges.

Sandstorm Talks UX at Drupal MidCamp

Learn more about how to better the user experience on your Drupal website. Take some time this weekend and attend the Midwest Drupal Camp 2014 (or Drupal MidCamp). Michael Hartman, our Technology and Usability Director, is giving a presentation that highlights 4 of the best user research approaches. He will walk you through the practices that uncover what your users are looking for, their needs, and areas to improve.

The user experience research methods discussed include:

Michael’s talk is scheduled for Saturday, March 29 from 1:45 p.m. to 2:45 p.m. in the River room at the University Center (525 S. State Street, Chicago).

Learn more about his talk or sign up for Drupal MidCamp.

This blog was posted by on March 26, 2014.
Megan Culligan

About the Author

Megan Culligan

Megan knows the importance of picking a winner. With a background in politics and PR, she knows that a successful marketing campaign requires coordination of many moving pieces and a team focused on achieving a great goal. You’ll see her analytical point of view on the blog, providing insight and tactics for success.

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 on September 12.
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.

Responsive Web Development earns Drew and Alma a sweet treat

This morning the Sandstormers were greeted by a very welcome surprise from Sweet Sensations Bakery. This assortment of scones, cupcakes, and, my personal favorite, coffee was a thank you gift from our partner .orgSource. We recently developed their brand new responsive site (all made in Drupal). Take a look at their site on your desktop, tablet and smartphone. We’re really proud of it, and we’re glad that .orgSource is, too!

Thank you to Sherry, Tara and the rest of the .orgSource team for this thoughtful gift and the opportunity to develop your new responsive site. Congratulations!

This blog was posted by on July 10.
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.

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 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.

Sandstorm Launches Community Drupal Web Site for PROmeasure

Standardization is a hot topic in the PRO (patient-reported outcomes) community. It’s hot enough that the amount of information out there can be difficult to filter through, and makes it impossible to get your voice heard. PROmeasure is taking on these challenges with the beta launch of their site PROmeasure.org.

The site aims to involve the PRO community of authors, medical practitioners and health care IT professionals in enhancing the use of PRO in clinical practice and research by standardizing its use of measures (questionnaires). Users can download an open-source data model for measure standardization, search through a database of measures and participate in discussions with the community.

The PROmeasure web site is built in Drupal and includes a PubMed integration, user dashboards, commenting and personalization features, community forums, and content-manageable rotating graphics on the homepage.

Learn more about the possibilities available with Drupal development.

This blog was posted by on August 21, 2012.
Karen Boehl

About the Author

Karen Boehl

Karen does a little bit of everything – webmaster, social media manager and search engine optimizer. She can most often be found on Twitter, in the Usability Lab, or happily buried in the Drupal admin menu.

Drupal basics

So, you're going with Drupal, eh? Let me be the first to pat you on the back! You're joining the likes of The White House, National Association of Realtors, Forrester Research and Harvard, all of whom have websites built in Drupal. This open source content management system is a developer favorite because of its robust and flexible capabilities for managing large amounts of content.

As with all things, the first step you probably took was a Google search to learn the basics of Drupal. But that quick search may bring up some overwhelming results as a lot of the information out there is actually for the thousands and thousands of Drupal developers who have made this content management system what it is today.

But you're not a developer, and no one expects you to be! (That's what we're here for.) You're what we call a content administrator. And we've put together some of the Drupal basics you'll need, without all that developer mumbo jumbo.

CONTENT TYPES

There are three main types of content on a Drupal site - Basic Pages, Articles, and Webforms. Each type has its own set of fields and purposes:

  • Basic page - Just what it sounds like, a basic page. This content type will usually have fields like a main header, sub header and body content and is used for most of the pages on your site (like About Us, Products, or Services).
  • Articles - These can be used for blog entries or news items. They have fewer fields than a basic page and include special fields like author and date.
  • Webforms - This content type is for the forms on your site, like Contact Us.

MENUS

Every site needs some form of navigation. The menus let you take the different pieces of content on your website and organize them in an outline. The main menu, for example could be made up of a few basic pages like About Us, Products, and Services, and a webform for your Contact Us page.

BLOCKS

Blocks are smaller chunks of content that might show on a page but wouldn't be part of the content type. For example, you might have a callout on all the pages of your site. If this callout is a block, you can edit it once and the changes will show on every page.

CONTENT + MENUS + BLOCKS = YOUR WEBSITE!

When you take these different pieces and add them together, they make up your website! Look at the example Drupal website below and see if you can identify the different elements:

Drupal Basics: Example Drupal 7 Website

 

BASIC PAGE CONTENT

Although we call it a basic page, not everything on the page is part of the basic page content. Notice in the image below that the basic page content only takes up the center of the page...

Drupal Basics: Basic page content

 

MENUS

That's because the rest of the information on the page is either a menu or a block. There are three menus on this page—the main menu on the top left, the secondary menu below that and a utility menu in the upper right corner.

Drupal Basics: Menus

 

BLOCKS

Finally, the callout on the right is a block. It would be edited separately from the basic page content in the center, and the changes would be carried over to any other pages on the site that include the block.

Drupal Basics: Blocks

There you have it, now you understand content types, menus and blocks! The basics of Drupal are easy to grasp, and once you log in and start updating, you'll love the ease and flexibility of it. Of course, if you ever need more than content updates, our Drupal developers would love to work on your website!

This blog was posted by on March 16, 2012.
Karen Boehl

About the Author

Karen Boehl

Karen does a little bit of everything – webmaster, social media manager and search engine optimizer. She can most often be found on Twitter, in the Usability Lab, or happily buried in the Drupal admin menu.

Realtor University - Example of a Drupal web site

REALTOR® University and the National Association of REALTORS® partnered with Sandstorm's Drupal development team to build their first ever master's degree program. The web site was developed through a combination of marketing messaging, copywriting, tagline development, user interface design and implementation of the Drupal 7 CMS. Featured on the homepage are rotating graphics emphasizing the core advantages the university offers. We are so excited to announce this launch!

This blog was posted by on October 20.
Karen Boehl

About the Author

Karen Boehl

Karen does a little bit of everything – webmaster, social media manager and search engine optimizer. She can most often be found on Twitter, in the Usability Lab, or happily buried in the Drupal admin menu.

Chicago marketing firm Sandstorm Design just moved

Following a year of exceptional growth, Sandstorm Design is excited to announce its move! Don’t worry, we’re still in Chicago—just a couple blocks north of our old address. In the heart of the Ravenswood Corridor, this architecturally inspired space is perfectly suited for the strategy and execution of Drupal web sites, interactive web applications and creative marketing campaigns.

With this relocation, we have expanded space for collaboration and day-to-day activity. This includes an on-site usability lab, ideal for conducting formal and informal usability studies. Our “zen room” is the ideal place to find inner peace.  The new office is distinctly Sandstorm with our giant swirl logo painted at the entrance (It’s 8-foot by 11-foot!), and 4700 feet of exposed ceiling pipe was hand-painted Sandstorm blue to give some added color to this former warehouse space. To see more about this exciting development, check out the Sandstorm Photostream. We even tallied all the numbers from the move, and put together this infographic.

Be sure to update your records, CRM system, and iPhones. Our marketing firm is now located at 4619 N. Ravenswood Suite 300, Chicago, Illinois 60640. Our phone number is the same, 773-348-4200, but all extensions have shifted with an upgrade to a new Shoretel phone system. 

This blog was posted by on October 17.
Karen Boehl

About the Author

Karen Boehl

Karen does a little bit of everything – webmaster, social media manager and search engine optimizer. She can most often be found on Twitter, in the Usability Lab, or happily buried in the Drupal admin menu.

Pages