Mackey

Journal

by

5 Tips For Rewriting Content on a Major Website Redesign: How We Attacked 33,000 Pages of Content

When we started working on the redesign of the Pasadena City College (PCC) website we were presented with the daunting task of sorting through over 33,000 pages of content. Their current website had no site structure or organization. The majority of the pages had out-of-date, inaccurate information. Another hefty chunk were just duplicates of the same content, while another good portion were mysteries, with no idea of when or how they were created. On top of the massive amount of content in front of us, we were also faced with A LOT of content owners. Each area of the college owned different files of content — some they had created, some had been inherited, and some were orphans.

After kicking around a lot of methods on how to tackle this, we finally decided we had no choice but to purge. Say bye to 33,000 pages of content and pretend like we were starting from scratch. And so we set out on a quest with one goal in mind: what should be on the college’s new website?

The process required a lot of time, thought, and meetings — lots and lots of meetings. But, when the new website was launched it had a fresh look with up-to-date information (not to mention it was about 30,000 files lighter). Hindsight 20/20, we made some mistakes, prolonging an already arduous process. But, if we had to do it all again, I would still say, “purge, baby, purge”.

And, in case we do ever have to do it again, we came up with our big lessons, the 5 must-dos when beginning a website redesign project that includes a lot of content creation for a lot of content owners.

1. Develop a content strategy

Having a content plan from the start on how you will attack the content process will make the work you do more purposeful from the start. Create your own strategy, use an existing one or a little of both. For us, we found a lot of great content strategies and tips, but none that took into account the aspects unique to this project —  budget, timeline, and the institution itself. So, we developed the PCC Content Strategy, heavily based on the “Core Model Content Strategy” from information architect Are Halland. The Core Model focuses on the core tasks users need to accomplish and helps maintain focus on only necessary content. We used Halland’s theory, processes, and tips, and then created a process that would work for PCC.

[button url=”http:/https://alistapart.com/article/the-core-model-designing-inside-out-for-better-results” color=”black” size=”small” type=”square” icon=”” target=”_blank”] Read More About the Core Model [/button]

 

2. Gather tools to make your life easier

The one thing we knew from the very beginning was that there were going to be a lot of people involved, a lot of stuff to keep track of and a lot of time was going to pass from start to completion. Our tip? Don’t do what we did, which was not have clear tools selected beforehand. Instead, find the tools and set up a process for using them before you begin. Here are the tools and resources that ended up helping us the most:

  • Writing Style Guide: We developed our own based on the AP style guide. Whether you do that, or just adopt an existing one, have it set before you begin. This will make sure that what you write at the beginning and what you write at the end is consistent (i.e. fewer revisions in the end. yay!)
  • Trello: We didn’t use Trello at the beginning, but how I wish we had! Trello is a free project management tool that allows you to organize and collaborate in a very flexible way. It kept us sane and I highly recommend it – FOR EVERYTHING! Learn More About Trello.
  • Google Drive: Every time we worked on a new area, they got a folder in Google Drive. Everything — meeting notes, site outlines, resources sent from the area themselves— went in there. The project took a long time to complete, so having everything in one place (and knowing where that place was) to refer back to was key.
  • GatherContent: This is where we actually wrote the content. It allows for writing, collaborating and organizing. Plus, it has workflows that help you manage the project. It’s a bit of an investment, but if budget allows, get it. Learn More About GatherContent

3. Find out about everything that exists at the institution

“Everything” may sound a little dramatic, but it’s true. There is a lot that goes on at a college, resulting in a lot that will go on the website. Some of it should be there, some of it has to be there. So, start investigating — what programs exist? How is the school organized? What are the items that legally must be on the website?

To start answering these questions, we used the college’s current website (ok, so we didn’t completely purge) as a starting point— just to help identify the programs and areas of the school, knowing some may no longer exist. This was followed up with fact finding from key stakeholders to gather more information and fill in holes. From there, we put them in a long list, with notes about what each program/area was. We didn’t focus too much on the organization for the list. Our goal was simply to capture everything that was going on, so we knew where to go next.

4. Meet and Listen to Everyone

It takes time, but it’s crucial. Before we wrote a single sentence, we met and listened to a lot of people. We met with key stakeholders to get a better understand of the college. Then, using our list of “everything happening at the school”, we held content workshops with each area and program. Together with the staff of each area, we dissected their programs, services, and users’ needs to help us understand what needed to be included on their area’s website as well as how what they were going to fit into what the rest of the campus was doing.

It took time, but meeting with each area of the college was probably one of our biggest successes. We learned a ton about the college. But, even more importantly, we got buy-in from the campus. The people we talked to felt part of the project, creating a greater set of ownership and appreciation for the process that was unfolding.

5. Understand the Big Picture

Pasadena City College is a big place with a lot going on. But sometimes with so much going on, it’s hard for people on the inside to know about all of it. Each area were experts in their area, but to pull this off we needed an expert on all areas. Having the same team meet and communicate with every area, allowed us to see the big picture. Our team made connections, spotted duplicate information across areas and knew who to talk to when we had questions. Understanding the big picture led to a solid content organization that built meaningful pathways for users to better navigate the new website.

These five tips just scratch the surface of all we learned about how to approach content in a major website redesign. We are working on putting it all on paper (aka the blog) to share. But, in the meantime, reach out with questions. We like to talk.

by

First Comes Writing, Then Comes Design: How a Content First Approach Will Lead to a Better Website

When clients come to us to build a website, they often come with some type of design ideas. From the specific design features they want to a list of websites they like and don’t like, most people seeking to build a website have spent time thinking about what the site should look like. But, more times than not, very little time has been spent on what the site is actually going to say. For most, content isn’t fun. Hence it’s often pushed to the bottom of the list, focusing instead on the latest snazzy design trends to make their site seem, for lack of a better word, “cool.”

We get it. Content is not cool. It’s not always fun. And it requires time. But, content should not be an afterthought. In fact, we believe content should be the first thought when it comes to designing or redesigning a website. Pushing content to the beginning of a website project leads to an educated design that effectively delivers your message.

Why the Content First Approach?

Many get excited to see their new website, so they just want the design to get under way as soon as possible. But, if we don’t know what the website is going to say, it’s very hard to know what it should look like.  But starting the process with design results in a generic template that will force you to stuff content into meaningless places just so that it fits into the design that was made. By taking this approach, your website may look good, but often your message will be limited by the confines of the design.

“Content precedes design. Design in the absence of content is not design, it’s decoration.” – Jeffrey Zeldman

But, isn’t the purpose of a website to deliver your message? To share your story with your users? A cool looking site is fun for users to look at, but once they’ve seen it the honeymoon is over and now it’s about content.  Valuable content, on the other hand, is why users are there and why they’re going to keep coming back.  Taking the time upfront to plan and craft your site’s content, allows for content to be taken into consideration during the design process. We can then design a website that complements your content, showcases your core message, and effectively leads users to your main calls to action and your goals.

If You Build it They Will Come? Probably Not.

Having a website does not mean having visitors. There’s a lot that goes into driving traffic to your site, but at the core is content. Current and modern design trends, while important, are not going to keep users on their own. Users aren’t coming to your site to look at your homepage, they are coming to get something done. In an ever-changing design and technological world, it’s even more important to focus on Users’ Needs.

Our content first approach is based on the Core Model by Are Halland. It starts with identifying who your users are and what the core tasks are that they need to accomplish on your site. We then look at how those tasks overlap with the goals of the website owners. After identifying our users, their objectives and the website owners objectives, we begin to map out the content in a way that serves both. Spending this time planning and researching lays the groundwork for both meaningful content creation and effective design.

Content First Doesn’t Mean Final Content First

Content takes time and usually many, many iterations. Developing content before beginning design doesn’t mean the content has to be perfect. The goal is to get as close to a “proto-content” before beginning the design. Sure more content revisions will be completed before the finished site goes live, but that’s ok. A solid content draft will still work to effectively inform the design process.

When planning content, we focus on the cores — when the user’s tasks meet the business objectives. The same approach should be used when actually developing the content. This core content is your priority. It is what’s going to satisfy users’ needs as well as help you accomplish your goals for the website. Thus, it’s the core content that is the most essential to have when starting design.

Content development can be a very overwhelming task.  Being tasked to complete content before design, probably makes you feel like it’s going to be forever before you have a website. Breaking up the process into chunks helps alleviate that nagging “this is never going to happen” feeling. Set aside the non-essential content — that can come later. Spend your time focusing on the core content and making sure that is solid. And when it is, design can begin.

Whether you have a lot or a little content to develop, the approach stays the same.  Check out our 5 tips for writing or rewriting content on a website to help create a smoother content writing process.

by

Make Your Photos Instagram Worthy with the Foodie App

 

Instagram makes me hungry. It’s like opening the app cues my stomach to start growling,  even if I’m not hungry. That’s because the food photos on there look so dang good. And, there’s no shortage of them — restaurants showing off their menu items, chefs highlighting their creations, and diners showing off the incredible meal they are about to indulge in. As I scroll through the amazing shots of food and drink, it gets me wondering two things. 1, How can I eat that food, right this minute? And 2, how the heck do they get that perfect shot?

We currently manage the Instagram account for one of our clients, a local Pasadena restaurant. Preparing photos to post for them has made the second question even more relevant (though personally, I am still very intrigued by where I can get the food). I’m not a food photographer and the client doesn’t have the budget to hire one (which would have been the optimal solution). So, the question became how can we use the resources we have (i.e. an iPhone) to capture shots of their menu items that will be able to compete with other food pics on Instagram? The photos we were taking never looked as good as the food did in person. And, it was tough finding filters that enhanced the food rather than making it look worse. After some research and lots of trial and error, I found an app that has forever changed the way we capture food — the “Foodie” app.

Foodie is a dedicated camera app for taking pictures of food. Launched by LINE Corporation, Foodie is a free app for both iPhones and Androids. You can take photos directly in the app (which I recommend) or upload a previously taken photo and use the app to make it Instagram worthy. Either way, our food photos are looking much better and are making us hungrier than ever.

We have spent a lot of time trying out the Instagram filters as well as other photo apps, but Foodie really became the most streamlined process with the best result. Here’s how:

1. It has over 30 filters specific for food.

Not only are the filters made for food, they are actually made for specific types of food. There are filters for Ice Cream, BBQ, beverages, and more. Each filter is optimized for food photography helping you to photograph any food you want.

 

2. It helps you get the best angle.

Often times a “top shot” is the best way to capture food, but I never seemed to get right on top. But, when using the Foodie app camera, it changes colors to let you know when the camera is positioned flat, directly above the food on the table, helping you get the perfect angle for flat lay photography.

 

3. Adjust brightness for darker shots

First off, natural light is MUCH better for food photos, so hopefully, this feature isn’t needed as much. Also, adjusting for brightness is a pretty common feature in photo apps (Instagram included). But, the one in  “Foodie” often serves as the perfect final tweak to your photo.

 

4. Easy Sharing

Similar to most photo apps, Foodie lets you easily share your finished photo to Social Media, text messages, emails, your camera roll, etc., making for a seamless edit and post process.

All in all, you could spend hours editing and tweaking to get the perfect food photo for your Instagram. And in the end, nothing will compare to an awesome camera with a skilled photographer behind it. But, if you don’t have that at your disposal, then the Foodie app is a great way to make sure your pictures make the food look appetizing, intriguing, and social media worthy.

Foodie is available for download on the Itunes store and through Google Play.

by

3 Simple ways to track events, goals and campaigns in Google Analytics

If you have a website or any online presence, you’ve most likely heard of Google Analytics. You may have even dabbled with overall traffic, page views, demographics, sources, etc. This information is all great and very useful, but more often than not, we’re looking for a way to determine if our campaigns, marketing, and website are working.

Google Analytics is complex, very complex. There is a lot of information you can get from Google Analytics and there’s also a lot of information missing from Google Analytics that you would love to have. But, unless you’re going to purchase an enterprise solution or even a few enterprise solutions, Google Analytics is the best we’ve got and if used consistently, over time we can use trends and its data to make better decisions on our sites.

Besides the basic tracking mechanisms, how do you track specific actions, events, and campaigns in Google Analytics? We’ve compiled 3 ways to better track goals (conversions), events, and campaigns. These three methods can be used in conjunction to better understand if your marketing efforts are indeed working.

Let’s dive in!

1. Tracking Traffic Source Using Campaign URL Builder

This is useful if you are wanting to track clicks through to the site from a particular source. Case in point, you run an ad on Pandora, it’s a beautiful banner ad. You want to track this ad for:

  • How many people are coming to the site from the ad?
  • The number of leads that came from Pandora that lead to conversions/ goals.

Using Campaign URL Builder from Google, you can create a custom URL that includes a query string that is tracked by Google Analytics as a source. You can then connect this source to your goals/ conversions (and events in fact), see numbers 2 and 3 below.

Building the URL’s is pretty simple:

  1. Go to https://ga-dev-tools.appspot.com/campaign-url-builder/
  2. Enter Website URL you are wanting to link to, ie https://mydomain.com/get-started/
  3. Campaign Source, enter the source, ie Pandora
  4. Campaign Medium, enter the medium, ie Banner (both this and the Source will display when looking up the data in Google Analytics)
  5. Don’t worry about the other fields unless you’re so inclined
  6. Next, under “Share the generated campaign URL” copy the URL to use for your campaign or click “Convert to Short Link” and copy the Shortened URL
  7. When you use this in your campaign, any clicks to the site from the campaign will be tracked as a Source / Medium with Google Analytics

View Traffic From a Particular Source

  1. Log into Google Analytics
  2. Click on left side under Acquisition > Campaigns
  3. Once you click into the Campaigns or a specific Campaign, you can add a secondary dimension to further understand the user’s interaction with the site. For instance the “Page” or “Landing Page.” Additionally here you can view columns for you goals/ conversions and how many goals/ conversions were completed via the Campaign.

2. Tracking Clicks and Events

Within Google Analytics we can track specific events. An event is an action the user takes with a site. For instance, how often the “Get Started” button on a website is clicked. This could really be any number of actions, i.e. when a user opens/ closes a toggle — essentially any click on the site.

The code looks something like: ga(‘send’, ‘event’, ‘Get Started CTA – Desktop’, ‘Click’, window.location.pathname); and is placed on the anchor tag for instance:

<a href="/get-started/" onclick="ga('send', 'event', 'Get Started CTA - Desktop', 'Click', window.location.pathname);" role="button">Get Started <span class="fa fa-caret-right"></span></a>

In the basic setup:

ga('send', 'event', [eventCategory], [eventAction], [eventLabel], [eventValue]);
  • Event Category = The object that was interacted with, ie a video or button (be specific)
  • Event Action = The type of interaction
  • Event Label = Categorization of events (currently we use this as window.location.pathname which gives the URL of where the event took place
  • Event Value = A numeric value associated with the event (we don’t use this in simple implementations)

GA Events Generator by Raven Tools has a great tool for generating specific event tags and information on more complex implementation of tracking events: https://raventools.com/marketing-reports/google-analytics/event-tracking/

Viewing Events in Google Analytics

  1. Log into Google Analytics
  2. On the left side find Behavior, then click on “Events” then on “Top Events” — we’ve found this is the best entry point for view by Category.

Similar to Campaigns, you can align events with conversions and goals. We use this often to track conversion funnels, form submissions, call to action, etc.

3. Conversions and Goals

With Google Analytics you can set up Goals/ Conversions. This is the end of the funnel. This could be a thank you page after a form submission, a checkout page, or whatever the end of the funnel is for your website. Goals work best when you set them up in conjunction with Event Tracking and/ or Campaign Tracking because you can see whether your marketing efforts are working or not working.

You set up the goals based on:

  • Destination = the last page in a funnel, ie a thankyou.html page after a user submits a contact form.
  • Duration = time on site
  • Pages/ Screens per session = number of pages visited
  • Event = Specific event conditions

Set Up Goals

  1. Log into Google Analytics
  2. Click on the property
  3. Go to the Admin tab
  4. Click on Goals
  5. From there you can add or edit goals.

View Goals in Google Analytics

  1. Log into Google Analytics
  2. Make sure you’re on the Reporting tab
  3. On the bottom left of the page click on Conversions, then click on Goals, then Overview

The above are three of the simplest methods we’ve found to better understand what’s working or not working in our campaigns and marketing efforts, but of course, there is much much much more you can do with Google Analytics. If you have other techniques that you use or questions about anything we’ve discussed above, let us know in the comments or shoot us an email, info@mackeycreativelab.com.

Happy tracking!

by

Rock solid stock photo libraries that won’t break the bank.

It’s said that photos are worth a thousand words and it’s not far from the truth. Photos help create emotion, they convey context and often portray the message we can only try to put into words. But taking custom photos is not usually practical nor within budget — thus the necessity for great stock photos.

Stock photos, videos, and images are key to successful projects, whether that be a flyer, a website or a blog post. Stock photos cut down on costs and time, two major things that help move projects forward.  We’ve compiled our list of the best stock photo libraries that we use regularly.

[toggle title=”See what’s in this post…” state=””]

  • Stocksy (premium)
  • ShutterStock (premium)
  • iStockPhoto (premium)
  • Flickr (free)
  • Unsplash (free)
  • Life of Pix (free)
  • StockSnap.io
  • Death To Stock

[/toggle]

Premium Stock Photo Libraries

These libraries offer stock images, photos, and videos with full licenses — perfect for commercial use.

Stocksy

Stocksy is by far our number one go to website for stock photos. Their stock images have an authenticity that many other sites lack. We’ve been impressed with their images and found images that are more lifelike and journalistic in nature than most other sites. Their library is comprehensive, but not nearly as expansive as the larger players, ie Shutterstock and iStock. We always start our search at Stocksy.

Stocksy has a film archive as well as you can find videos intertwined (see https://www.stocksy.com/#video as a start).

Their pricing is simple and straightforward, small, medium, large, extra large — no packages, but the pricing is reasonable, see pricing.

[button url=”https://www.stocksy.com/” color=”black” size=”medium” type=”square” icon=”” target=”_blank”] Visit Stocksy [/button]

Shutterstock

Shutterstock

Shutterstock and iStock are very similar (a lot of times the same images), but we tend to lean towards Shutterstock. Why? Well that’s hard to answer, but their pricing structure of $49 per month for 5 images downloads works well for us — we often use them after we’ve exhausted our options with Free Libraries (below) and Stocksy.

Additionally, we use Shutterstock for video as well as vector graphics to help get a project going or fill in gaps. It’s also a good source to search a topic and get ideas centered around particular keywords or a concept.

You’ll find a lot of your typical “this is definitely a stock image” type images as well as plenty of giant street signs with all types of business buzz words, but if you weed through those, you’ll find some great stuff.

[button url=”https://www.shutterstock.com/” color=”black” size=”medium” type=”square” icon=”” target=”_blank”] Go to Shutterstock [/button]

iStock by Getty Images

iStock

Honestly, we rarely use iStock. It’s very similar to Shutterstock and our preference just happens to be ShutterStock, but that’s not to say there is not value at iStock. You can find photos, graphics, vectors, videos and more there and it’s a great place to get ideas. They offer pricing plans similar to Shutterstock.

[button url=”https://istockphoto.7eer.net/c/353581/258824/4205″ color=”black” size=”medium” type=”square” icon=”” target=”_blank”] Visit iStock [/button]

Free Stock Photo Libraries

For free stock photo libraries be sure to review their license terms prior to commercial use.

Flickr Creative Commons

Flickr Commons

The best part is it is free, you can find some great stuff here, but be sure to add attribution.  Though it’s not the best source for commercial use (https://www.flickr.com/creativecommons/),  we’ve definitely used it before for various projects, articles, and as dummy images. It’s great for editorial and finding images that are authentic and credible – after all, they are, for the most part, “real” images, not staged.

You can narrow down your results by:

  • Attribution License
  • Attribution-NoDerivs License
  • Attribution-NonCommercial-NoDerivs License
  • Attribution-NonCommercial License
  • Atribution-ShareAlike License
  • Public Domain Dedication
  • Public Domain

[button url=”https://www.flickr.com/creativecommons/” color=”black” size=”medium” type=”square” icon=”” target=”_blank”] View Flickr Creative Commons [/button]

Unsplash

Unsplash

Unsplash is amazing. It’s worth a look even if you don’t need a single photo. The images are beautifully composed — it literally speaks for itself.

Unsplash is contributed to by a number of photographers. This is definitely not 6 foot back, 6 foot up (if you know what I mean). All images are completely free and even if you don’t use them for a single project, they make amazing wall art (and are large enough to print).

[button url=”https://unsplash.com/” color=”black” size=”medium” type=”square” icon=”” target=”_blank”] View Unsplash [/button]

Life of Pix

Life of Pix

Similar to Unsplash, Life of Pix has new photography added weekly and the images are high quality and completely free. This is a great source for lifestyle photos as well as more artistic shots. If we don’t find anything in Unsplash, often times we’ll turn here next.

[button url=”https://www.lifeofpix.com/” color=”black” size=”medium” type=”square” icon=”” target=”_blank”] Go to Life of Pix [/button]

StockSnap.io

StockSnap.io

Now I’m a bit of a purest, well sort of, and I’m not a huge fan of online companies aggregating content and displaying it as their own, but that is exactly what StockSnap.io does (at least from what I have experienced). They have a lot of images pulled from throughout the web including other free libraries in this list, so don’t be astonished if you see the same images here as on Unsplash. But, it is a nice point of reference to start your search for free images.

[button url=”https://stocksnap.io/” color=”black” size=”medium” type=”square” icon=”” target=”_blank”] Search StockSnap.io [/button]

by

WordPress — serve different content based on location (geolocation)

I’ll keep this short and sweet, as mostly this is just to highlight a plugin that we found useful for serving content based on location for WordPress — geolocation or country filtering or whatever you would like to call it.

Our problem: We needed to serve different prices based on whether a user was in a European country, Great Britain, or default to the United States for all others.  The other caveat was that we needed to do this within an actual page in WordPress via the WYSIWYG Editor.

First we attempted with a plugin WP Geocode Filter. Although this works great with ability to use shortcodes to provide content based on country, it did not have the ability to make “else if” and “else” statements so that if no country matched or if the country could not be detected that it would default to the US Dollar.

So realizing this shortcoming, we had two options. 1. write our own plugin to solve the issue, or 2. possibly use another plugin called Country Filter WordPress Plugin and use in page PHP to execute the “if else” and “else” statements.  We decided to first test out Country Filter WordPress Plugin as it would be relatively quick to test and if it worked save the client time and money from building from scratch. In order to execute the PHP we also installed Allow PHP in Posts & Pages plugin (visit the plugin to see more about how to include PHP in your pages/ posts).

On our quick and dirty test of the plugin, everything worked smoothly.  Essentially our code within WordPress’ WYSIWYG Editor looked something like the below.

if (function_exists('isCountryInFilter')) {
if(isCountryInFilter(array("al","ad","am","at","by","be","ba","bg","ch","cy","cz","de","dk","ee","es","fo","fi","fr","ge","gi","gr","hu","hr","ie","is","it","lt","mc","mk","mt","no","nl","pl","pt","ro","ru","se","si","sk","sm","tr","ua","va"))) {

echo '[h1 style="text-align:center"]€0[/h1]';

} elseif(isCountryInFilter(array("gb"))) {

echo '[h1 style="text-align:center"]£0[/h1]';

 } else { 

echo '[h1 style="text-align:center"]$0[/h1]';

} }

 
I won’t walk you through all the options here.  This post is more to hopefully help those in search of similar functionality and steer them in the right direction, as well as validate that the plugin works and is worth the $18 price tag (and BTW I nor Mackey have any affiliation with the plugin author).

To view more about the Country Filter Plugin, go to https://www.codediesel.com/plugins/country-filter/