All posts in Web Content

The Responsive Image Challenge – Part 1

ej

Images on the web used to be pretty simple. Upload your image to a server, throw the URL into an HTML <img> tag, and then it would appear on your page. No big deal.

However, a lot has changed in the last two years.

In 2007, Apple released the first-generation iPhone. The iPhone was the first smartphone that appealed to the average person. And, as we all know, it was a huge success and now all the major smartphone manufacturers are taking the same approach.

Overall, smartphones are great. You have instant access to the Internet, GPS navigation, calling, and texting all from a little device that you carry with you. For website maintainers, however, smartphones and the many devices they’ve spawned present some serious problems.

Problem #1 – Mobile connections are slow

While mobile speeds are a ton faster than they used to be, they’re still pretty slow compared to a traditional connection, especially outside of a big city.

So why is this a problem?

Well, compared to text and HTML code, images are really big. In fact, the text, html, CSS, and Javascript from www.bethel.edu is about 10% of the total page size. The other 90% is mostly images.

All that to say, text loads really fast, images load really slow. You can have an entire essay that’s smaller than a single image. On a desktop connection, not the biggest deal. However, this can make a huge difference on a slow mobile connection.

The simple solution: Make images as small as possible. Easy, right?

Not so fast.

Problem #2 – Retina

In 2010, Apple coined the term “Retina display.” In reality, this is just a screen with a ton more pixels than normal and an operating system that can still make everything look good. This is amazing for text and icons. Everything is smoother and overall better to view. So what is the downside? Well, images of course.

If anybody happens to be reading this on a Retina laptop, you might have noticed images look really bad on some websites. Why is this? Well, if you double the pixels of your display, but don’t double your image size, the images will have to expand to fill in the extra area. This causes blurry images all over your websites.

On a desktop, you can just serve an image twice as big. Not a huge deal. But what about mobile?

Retina screens are actually more popular on mobile than laptops because you actually hold those devices close enough to notice the difference. The catch-22 is that if we make our images look good, they are twice as big, and therefore take twice as long to load. If you compress them too much, the image quality will deteriorate. So we are dealing with the worst of both worlds—slower load speed with larger images. And even if connection speed wasn’t an issue, there is one more thing to consider…

Problem #3 – “Just make a bigger copy”

Pretty easy to say, but extremely hard to do.

If your source image is 300×300 but needs to be 600×600 for your Retina device, you can’t exactly just expand the 300×300 copy to be twice as big. It will look just as bad as if you served the 300×300 copy to begin with.

This relates to our first rule of images: “Always upload the largest copy possible.” Technically, we could serve this image all the time, and the let the phone or computer shrink it to the correct size. But these images are huge. At 3-5 megabytes a pieces, using this method would make our homepage close to 20 MB’s—a 2000% increase of our current page size.

So we need to resize it. But now the problem is that resizing and compressing images takes time. And time is very valuable when serving to a mobile connection. This creates a second rule:  ”Have your resized images ready to go before they’re needed.” Okay…so we need to have a different image size ready for every single width and height we’ll need to serve.

Great. And since we’re trying to speed things up, we’re going to need to make sure we only serve the exact size needed for the page. This ensures we’re loading as little data as possible. That is, if an image is only going to take up 100 pixels on the page, we don’t want to make someone load a 600-width version of the image. This is in line with our final rule, “don’t serve a bigger image than you need.”

Putting all those rules together shows how big of a problem this can be.

Before, we had one single image in an HTML tag. Now we have 10-20+ versions of the exact same image needed for a single webpage. After all, there are so many different phones, phablets, tablets, laptops, desktops, etc., that all need something different. That’s a lot of overhead.

We’ve spent a long time trying to create a solution that is fast, responsive, and extremely easy to use. And we think we’ve come up with something that, for our web authors, will be as easy as it was pre-2007 when we all we had was one image inside some HTML. Just put your image on the page, and leave the rest to us.

So how do we solve this? Check back next week for The Responsive Image Challenge – Part 2.

4 Tips for Writing Under Pressure

kl

As marketers and content creators, we’re under pressure.

It’s our job to dream up that next awesome campaign or turn a client’s musings into a profound message—as if a stream of clever copy rolls continuously through our minds.

But in reality, generating ace ideas for each new project is hard work—and some days, it’s just not happening. We’re human, after all, and no matter how easy Don Draper makes it look, brilliance doesn’t always strike when needed.

So how do you avoid panic when you’re out of inspiration? Here are a few tools I use at Bethel when I need to get the job done but can’t seem to cook up something fresh.

Strategy

When I’m stuck, I head back to the original strategy. Who’s my audience? What are their needs, goals, and priorities? Why should they care about this?

By articulating who I’m writing for and why, I can often reenter the project with a new perspective that’s grounded in the basics of what my writing should accomplish.

Brand

After defining my audience and what I need to say, I can then worry about how to say it. But if you have a good brand, this should be less of a chore.

A good brand sets the voice and personality for your writing. And a good branding guide helps you to get lost in your university’s culture—the language, life, and energy that’s unique to your campus—and infuse that culture into your words.

Your brand should also provide a solid vision for who you are and where you’re headed. It defines the characteristics that make your university stand apart, helping you tell a story that’s consistent and true.

Heart

In my struggle to craft the right message, I sometimes getting sucked into marketing speak and away from authenticity.

To get back to genuine conversation, I write down what I know and believe about Bethel. And when I write what I know, it tends to come from the heart. I know that sounds trite. But, for me, creative energy—and authenticity—begins to flow when I answer these questions:

  • Why do I work here?
  • What keeps me coming back each day?
  • What do I love about this place?

Clarity

When cycles are slammed or I’m hustling to wrap up a chaotic week, I don’t have the luxury of deliberating over just the right phrase. Instead, all I have time to focus on is delivering a clear message.

If I make clarity my priority, I can at least ensure my message is understood, even if it doesn’t tug at the emotions.

In your work as a content creator or marketer, may you find a bit of peace amidst the stress knowing that you’re not alone. The pressure to come up with great ideas is draining—and you won’t be at your best every day. So when you’re feeling the weight, get back to your strategy, focus on your brand, and write something clear from the heart. It might not win you any awards, but it will help you do more than just get the job done.

Launching a New Homepage

kl

Putting together a new university homepage is daunting. It’s the first impression you make on your audience, and it may be your only impression. There’s a lot at stake. And thinking about it gives me nervous sweats.

But here at Bethel, we pushed through our nerves and spent the fall building a new homepage. We rolled out the first phase back in November with the launch of an updated header and footer. Then we went to task revamping the filling.

To create our strategy, we did a lot of prep work. We looked at what other schools were doing. We examined analytics. We analyzed the current homepage to figure out what needed to stay and what was tough to maintain. We looked outside our industry. We read blog posts. We thought about the future, and we thought about our users. We thought about how we could deliver that meaningful first impression.

Then we set out with two priorities in mind: design and content.

Design Goals

Bethel University homepage

I had our talented designer, Jake Johnson, put together some thoughts on what he wanted to accomplish.

Here were Jake’s top five goals (in his words):

Give it space - I wanted to give everything plenty of breathing room, to use white space to create cohesion within an element and separation between elements.

Break into small bits - Instead of one big page, the content is sectioned off, hopefully making it easy to focus your attention on one content area at a time.

Use a big feature - Using big pictures grabs attention and makes it more personal.

Add more imagery - I wanted to mix in more imagery to the page overall to ratchet up the visual interest.

Balance new and returning visitors - I tried to balance useful, fresh information (news, events) for returning visitors with overview information for new visitors.

When I look over the new homepage, I see Jake’s goals come to life. The site design feels fresh and open. It’s easy to scan the content with his clean section breaks and heading styles. The big feature does feel personal. When I hit the photo of Tyler Esau behind his video camera I feel as if I’m entering his professional site or online portfolio.

Jake also did a fantastic job making the homepage feel like the same Bethel. He morphed the foundational groundwork laid by mStoner nearly 3 years ago without making visitors wonder if they’ve landed on the wrong site.

Content Goals

We also had three big content goals for our new homepage.

First of all, we wanted a flexible, collapsible feature zone that could disappear when we didn’t have something crucial to broadcast. We didn’t want to be stuck filling the space with billboards that weren’t relevant for the majority of our homepage audience.

Second, we wanted to showcase what makes Bethel different from other universities.

Now, I understand this is the big hairy goal for every institution. We want people to hit our homepages and feel the unique life of our university. We want to say something about who we are that isn’t what all the other universities are saying.

This is tough. This is what keeps our minds awake and whirling at night. All higher education institutions say they have rigorous academics. They’re all committed to excellence. They strive to create a unique community and a transformative experience.

That’s what college is about, after all!

So we needed our homepage content to go further. We needed space to use more specific language about how we do college at Bethel.

“Our academic programs will help you find your passions, develop your strengths, and prepare you to enter the world as a servant of God.”

That’s a bit more specific than simply saying “faith-based academics.” Through Bethel’s programs, we want you to find your God-given strengths and develop them so you can go out and serve. Now we’re getting somewhere.

“From Welcome Week to Homecoming to broomball tournaments and on, it’s in our nature to build relationships and stay connected.”

Where else will you find “Welcome Week” and “broomball” all in one clause? These are hallmark traditions at Bethel—the stuff that makes up the quirky fabric of our community.

“Bring Christ’s love to life.”

This was the brainwork of my skilled colleague Erik Gruber. We needed to go beyond the phrase “Christian institution.” He worked hard to come up with a statement that wasn’t wishy-washy and showed our heart for spreading Christ’s love.

We certainly didn’t hit perfection with every word, and we’ll definitely make changes down the road, but it was an awesome exercise to stretch ourselves to describe Bethel in new ways.

For our third content goal, we wanted to feature the voice of Bethel students. A student’s voice carries more authoritative weight than the voice of any marketer. Erik elaborates on this in his post Bethel Storytelling: Who Are We? He explains that we didn’t want to feature the editorializing of staff writers; we wanted to hear from our students.

Lesson Learned

At some point you just have to stop your planning and put something out there. So in December, that’s what we did.

In the end, I believe we met our goals and, ultimately, learned to get over the fear of trying something new. That’s the beauty of what we get to do on the web, isn’t it? We get to try new things and see how they perform. We can always go back to fix and adjust, and then we can try something new all over again.

It’s a lovely, challenging cycle that sometimes gives me those nervous sweats, but most often fills me with gratitude for being able to do the work that I love.