All posts in Uncategorized

The Responsive Image Challenge – Part 2

ej

In our last post, we talked about why images are getting increasingly complicated on the web. It’s a challenge we’ve put a ton of time into solving here at Bethel so that our system is easy to use for authors, designers, and developers.

To create the right solution, we needed to resolve 3 big issues:

  • Selecting the correct image size using dynamic JavaScript and HTML
  • Creating different sizes of the original image automatically
  • Uploading original images into the CMS

So, what did we do? We first looked into getting some JavaScript and HTML to select a good image size. This task was made easier with a little help from our friends across the pond.

Selecting the Correct Image – Imager.js

The BBC has an awesome library called Imager.js. Without burdening you with too much technical jargon, Imager.js is a JavaScript library to dynamically put an image into a placeholder element when the page loads. There are quite a few different libraries to do this, but what separates Imager from the rest of the pack is that it uses the width of the container element, instead of the width of the entire screen. So if we only need an image 100px wide to fit a container (even if the screen itself is 2560px wide), that’s the size we get.

Another thing we liked about Imager was that it loads images by the exact width, rather than using generic identifiers like “small”, “medium”, “large” to specify size. This helps us follow our third rule from the last post, “don’t serve a bigger image than you need.” Imager will select the exact size to fit the screen area. I won’t go into the coding specifics, but it’s documented well and easy to use.

Once we had Imager working correctly, the next problem was figuring out what to do with tons of different sizes of the same image. Dumping them into our CMS would make the system very cluttered and unfriendly. So it was time to look into solutions for automatically creating different sized images of an original image outside the CMS.

Creating Image Sizes – Thumbor

After some searching, we found a Python application called Thumbor.

Thumbor is pretty easy to install, and very easy to use. You simply call the Thumbor service using a URL and send a few parameters. Most notably, you send a width and height. Then it will download the original image, resize, crop if necessary, and return the new image. This means we can put Thumbor URL’s directly in our <img> HTML tags and it will work just like a normal image.

Remember how Imager used exact pixel width instead of a size? This was perfect for Thumbor. It was extremely simple to configure Imager.js to work with a Thumbor URL using an exact width.

Thumbor also has a few other neat tricks. First, it can set the height of the updated image automatically based on the width. It also stores versions locally. So if you request a 300px-wide image, it will resize, crop, and return that image. But it will also save a local copy, either on the filesystem or in a database. This means that next time you request the same 300px-wide version of the image, it won’t have to resize, crop, and return. It will simply return the smaller version it saved. This means that Thumbor overhead is extremely small. It only has to crop an image once. This made meeting our second rule, “have your resized images ready to go before they’re needed” pretty easy. Thumbor stores the versions for us.

To make it even faster, we have a simple script to request popular sizes of Imager from Thumbor when each image is uploaded. This means all our images will be available when we need them.

So once we had Imager and Thumbor working seamlessly together, the last step was pretty simple.

Uploading Images

Now there’s only one rule left to worry about, “always upload the largest copy possible.” Unfortunately, there isn’t some fancy Python script to make sure our web contributors upload the largest image size possible. This step requires some training. However, there might be a few helpful things you can do depending on your CMS. Maybe you can set a minimum width and height for new image uploads? Or a minimum file size? Who knows…just brainstorming.

But once the image upload process is actually started in the system, we can start having some fun. The first thing we do when an image is uploaded is automatically upload it to the server. Nobody thinks to publish an image after upload anyway. The CMS automatically pushes this image to the CDN, which triggers the script to request the different widths from Thumbor. This means that there are now 5, 10, 15, or even more versions of the image ready to go.

The best part? The web contributor can work with the image within the CMS just like normal. They have no idea that the image they are working with is never actually used. And that’s not a problem at all. They embed their image onto a page, and the template configures Imager to create the Thumbor-friendly URL inside the <image> tag. And then, when the page itself is published and viewed, the resized images are ready to go, just like any other images.

Aside from a few installs and a little template work, it’s completely seamless for authors, designers, and developers. And, to top it all off, no overhead for end-users. Just like that, we’ve created a 2007-style way to interact with images that works seamlessly with 2014-compatible complexity.

6 Reasons Why Collaboration Doesn’t Make Me Cringe

kl

I’m well aware that the word collaboration causes many people to shudder. Believe me, I’ve been haunted by projects gone awry because of long meetings, dominating personalities, group think, or design by committee. I’ve been on the road to Abilene, and these experiences taught me to dread group work.

It’s true that collaborative efforts can be lousy and unproductive. But this doesn’t mean the idea of collaboration in itself is the problem.

As a writer, I love to collaborate. I know this sentiment is quite countercultural for the writing breed. Before I fell for collaboration, I’d throw on headphones and get lost in the cadence of my own voice instead of inviting other writers into my process. And when I came out of my hermitic retreats, it was tough to see how the ideas of an outsider could fit into my polished prose. I produced something great, thank you; I’m taking no comments at this time.

But, even though it’s in my nature to be the lone authoritarian of my written words, I’ve come to see that when I let other writers in, we produce something better than I could have alone. And because I want my writing to be its best, I now try to collaborate as much as deadlines allow (even if it drives fellow writers bananas).

Here are 6 truths that changed my mind about collaboration:

It makes me a better writer

We have a team of great writers here at Bethel. Whenever I let them speak into my work, I learn something valuable. With each revision and draft, I get more practice. And with more practice comes better first drafts.

It produces a useful product

In the end, what I write for Bethel is not about me.

I should care chiefly about creating the best product for my readers, audiences, and users, even if it means letting go of phrases I love. Having someone else read and speak into my work helps me focus on the bigger picture to make sure the words I’m choosing match the priorities of the project.

It creates consistency

Writers have a voice, a method, an approach to their writing that allows who they are to peek through. They have strong preferences about style and word choice. They believe in right and wrong.

But writing for Bethel requires that I quiet my voice and push aside partiality for the sake of the brand I represent. When other writers dig into my work, they take out the stuff that embodies too much of me and not enough Bethel.

It builds trust

I know I’m flattered whenever a teammate asks for my help. It validates my skills. It makes me feel valued, wanted, and appreciated. And I’m more eager to ask them for help in return because we’ve established an understanding that it’s okay to be vulnerable. It’s okay to have questions. It’s healthy to rely on others and to support them in return.

It strengthens relationships

The pressure to write something useful each day is daunting, stressful, and draining. If I didn’t have such insightful and caring teammates, I’d be nearing the end of my marketing stint. So I involve my colleagues in my work because it creates meaningful conversation that builds our bonds. And it’s these relationships that keep me coming back to work each day.

It broadens my thinking

It’s easy to fall into familiar patterns for approaching the same content year after year for the same audiences. But when I invite a new voice to speak into my work, someone who has less history with what I do, they can help me break out of routines and habits. They free me up to take risks that might produce something incredible.

Ultimately, I do better work when I invite others to help me out. Sure, there’s often heated editorial debate and disagreement, but I believe the benefits of this tough work far outweigh the complications. And I always have a few personal side projects going just to feed my domineering tendencies.

So instead of shying away from feedback, I’ve learned that my work’s more fun when I have colleagues eager to pitch in and produce something great—together.

 

Overcoming Complacency

gruber

A couple of weeks ago I wrote about the 8 obstacles to change, and it’s possible I left many of you discouraged, overwhelmed, and ready to give in. Then I didn’t post for a month. That was cruel of me, and I’m sorry.

What happened? Well…things changed. Our team was reorganized, new projects and tasks were added to already full plates, and blogging slipped down the priority list.

Hold on just a minute. Didn’t I say in my last post that change is hard and the process is full of obstacles? How could things have changed so suddenly?

Situations arose that gave us a valuable tool in the change toolkit and allowed us to leap over that debilitating first obstacle – complacency – in a hurry. But more on what that was in a moment.

Where does complacency come from?

Before we talk about beating complacency, it’s important to look at where it comes from. In Leading Change, Kotter outlines 9 sources of complacency.

  1. Absence of a major, visible crisis
  2. Visible signs of success (fancy board rooms, expensive cars in the parking lot, first-class flights)
  3. Low performance standards
  4. Focus on departmental silos rather than overall organizational success
  5. Unambitious, non-specific goals to ensure that everyone meets them
  6. Lack of performance feedback
  7. Discouragement of people who deliver bad news, lack of confrontation
  8. Tendency to deny things we don’t want to hear
  9. Happy talk from management

Does any of this sound familiar? Then you might be stuck in the complacency rut.

It that’s the case, and the people around you think everything’s hunky-dory even though you can see the writing on the wall, then all of your panicking and frantic yelling won’t make a bit of difference, and nothing will change.

How can you overcome complacency?

Urgency. Lots of it. That was the tool we had that allowed us to make rapid changes.

Kotter suggests that for change to take place, “a majority of employees, perhaps 75 percent of management overall, and virtually all of the top executives need to believe that considerable change is absolutely essential.”

You need to make people see that change is necessary. And that the time for change is now. Kotter gives us 9 ways to do it.

  1. Create a crisis, allow errors to blow up, expose weaknesses
  2. Get rid of visible signs of success
  3. Raise standards so high that they can’t be reached through business as usual
  4. Hold everyone accountable for overall success, rather than departmental goals
  5. Share specific performance data with all employees
  6. Force people to regularly meet with unhappy customers
  7. Hire consultants and outside sources to provide honest feedback
  8. Discuss weaknesses and competitive threats in open, wide-reaching forums
  9. Emphasize opportunities, rewards for taking advantage of those opportunities, and factors leading to missed opportunities

I admit, some of these ideas sound a bit risky. Others sound a lot risky. But we can’t make changes if we aren’t willing to take risks.

Are you willing to take the risk?

We’re all guilty of complacency at times. It’s easy and safe to accept routines and status quos. New processes and strategies take thought, and planning, and work. Implementing them also takes a lot of courage. Setting out on a new path is a great risk wrought with danger. What if the new way doesn’t work? What if it turns out the old way was better?

What if I fail?

We’re terrified of failure.  Maybe it’s time to get over it.

I’ve failed before and I’ll fail again. But I’ve realized that I’ll survive. So will you.

I know that wasn’t the best pep talk. Maybe one more cliché to drive the point home: with great risk comes great reward.

We can’t start getting better until someone is willing to put him or herself out there and take a risk. Will that someone be you? Cool. Check back for the next post.