New Twitter Design: 40+ Sources of Information and Inspiration!

DiggRedditPrintShare

By Tom Collins

The new Twitter design and features have been rolling out since April, but don’t feel bad if you haven’t updated yours yet. You’re not alone!

So let’s start with a couple of examples who haven’t uploaded a new header image to inspire you with what good company you’re in (as of June 6, 2014):

Procrastination or Minimalist Design?

1. Anderson Cooper:

AndersonCooper-TwitterHdr

It’s possible that not uploading a header image in the new, larger — ginormous? — size was a conscious design choice. The default header bar is clean and simple, you can choose your own color, and it minimizes the vertical dimension of the header, letting more content show. And this one takes advantage of Cooper’s recognizable face.

Knowing that your username will appear directly under your profile image could make this a sensible design choice for some, especially if you have a color that can be associated with you and your brand.

2. American Express OPEN Forum:

AmExOPEN-TwitterHdr

This one does seem purposeful, matching the header color with the OPEN logo and capitalizing on the white navigation bars above and below the color bar.

3. BlogPaws:

BlogPaws Twitter header image

For the moment, I’ll claim that’s why I haven’t updated the BlogPaws Twitter profile yet! Experimenting …

Twitter’s New Features

Before looking at some more elaborate header design options, let’s take a look at the new Twitter features. Here’s what the Twitter blog announced in April:

The new web profile lets you use a larger profile photo, customize your header, show off your best Tweets and more. Here are main features:

  • Best Tweets: Tweets that have received more engagement will appear slightly larger, so your best content is easy to find.
  • Pinned Tweet: Pin one of your Tweets to the top of your page, so it’s easy for your followers to see what you’re all about.
  • Filtered Tweets: Now you can choose which timeline to view when checking out other profiles. Select from these options: Tweets, Tweets with photos/videos, or Tweets and replies.

The Best Tweets feature happens automatically, but you can now show off your current favorite tweet by Pinning it to the top of your timeline. When you want to pin a tweet, click the ellipsis (…) below the tweet and select “Pin to your profile page” like this:

New Twitter feature: Pinning A Tweet

Anytime you want to feature a new tweet, just pin that one and it will replace the one before it.

The Filtered Tweets feature lets you look at other people’s profiles in a variety of ways, just by clicking Tweets, Tweets and Replies, Photos/Videos, Following, and so on, in the newly simplified navigation bars:

New Twitter Filtering Links

I especially like the way followers are displayed visually in the new Twitter layout:

New Twitter Follower Display

To me, this makes it much easier to visit others’ profiles, review their followings and followers, and select new people you may want to follow. This might be the strongest argument for paying close attention to how your header looks in the various places and sizes it will appear in Twitter’s new design.

How to Make a Header Image for the New Twitter Layout

Okay, back to the design question. The basics are pretty simple: the recommended size for your profile image is 400 x 400 pixels and 1500 x 500 for your header image.

But of course, it’s not that easy. Your profile image will get resized down to at least 48 x 48 pixels in the timeline and should remain recognizable. And your header image will get resized all over the place, from desktop monitors (mine is 1920 pixels wide) down to smart phone screens. In addition, the two images should work together on your profile, where the profile image will overlay the header image to varying degrees and in varying locations, depending on the screen.

Such is the beauty and the challenge of responsive web design!

(BTW, I tried using a couple of online screen size/resolution simulators — Screenfly and InfoByIP — but Twitter prevents them from display its pages in iframes, so I’ve been limited to testing on my desktop monitor and cell phone, a Sumsung Galaxy S4 with the Twitter App version 5.12.1)

4. Header Template Source: One way to attack the problem is using one of the templates that designers have already created. I found a good one by Greg Trujillo over on CT Social that includes lots of explanation and a downloadable Photoshop file to work with.

CTSocial-TwitterHdrTemplate

However, I discovered that in spite of the obvious care taken to identify “content safe zones” in the template, it did not work when my new header was displayed on my Galaxy S4 phone.

5. Enter Canva: I recently discovered Canva and then last week attended a Hangout with Mia Voss, Guy Kawasaki (Canva’s new Chief Evangelist), and Peg Fitzpatrick (Canva’s Head of Social Strategy). While there are image editing and design tools with more bells and whistles (I use Adobe Fireworks for most web design work), I am blown away by how fast and simple it is to make images specifically for social media using Canva.

For me, using Canva makes good old trial and error a better option than templates! I’m so impressed, I made this short video to show how quickly I was able to make the new header for my personal Twitter account:

As the video shows, the various desktop, tablet, and mobile screens resize, reshape, and reorient your header and profile images in ways that might change how they work together. Here’s just a small sample showing how mine displays:

On my 1920 x 1080 desktop monitor, the header image expands to the full width of the screen. But my profile photo position stays fixed in line with my account info and content, so that changes where and how much it overlays the header:

New Twitter Header - Tom Collins June 2014 - made in Canva; displayed on desktop

Because your image can be expanded so much, I recommend starting with the highest resolution you can get away with while staying under Twitter’s (generous!) maximum 5 MB file size for the finished header image. Since Canva saves your image as a PNG file, the size will be somewhat larger than the same image as a JPEG or GIF, but the quality will be better, too.

In a browser window at 800 x 600 pixels, the header image shrinks down to just about the width of my account content. But my profile pic keeps the same size and position, covering nearly half of the vertical space, but appearing a bit farther left of the center of the header image:

New Twitter Header - Tom Collins - June 2014 - small browser window 800 x 600

On my Galaxy S4, everything changed! My profile pic displays in the center of the header image. And of course on many smart phones and tablets, the screen rotates between portrait and landscape views, so you need to take that into account, too.

TwitterHdr-Tom-Jun2014-Canva1-phone-both-sm

TwitterHdr-Tom-Jun2014-Canva2-phone-both-sm

Note how in the landscape view, the header expands to fill the entire screen, pushing your tweet stream completely out of view. If your audience spends a lot of time tweeting from mobile devices, this might push you to consider including some text in your header — also really easy to do in Canva. Just be sure the font, color contrast, and sizing remain readable on the small screen.

One other bit of weirdness (to me), is that Twitter’s new design does not apply to all of your account. At least as of this writing, the pre-April “background” images still show in a few different views, for example your Home view, or when someone clicks to display a single tweet:

Twitter background image - Tom Home - June 2014

Twitter background image - Tom single tweet - June 2014

So you’ll want to come up with a background color or image compatible with your new header. Unlike the new header and profile images, which you can access to upload and change right from your profile page, you still have to go into Settings > Design to adjust the background.

Now, back to the inspiration! I’ve grabbed a wide variety of screenshots from Twitter accounts I follow (you’ll recognize many, I’m sure) and grouped them to illustrate three main design choices: simple (which includes the no image examples above), complex images, words and pictures.

“Simple” Twitter Header Images

These examples are really only “simple” in the sense that they are single images, with single subjects. I think they illustrate how much can be communicated this way.

6. Amanda Yantos – @DogMomDays

Amanda Yantos - @DogMomDays Twitter header

7. Felissa Elfenbein – @Felissahadas

Felissa Elfenbein - @Felissahadas Twitter Header

8. Intrepid Pup – @IntrepidPup

Intrepid Pup - @IntrepidPup Twitter Header

9. Lorie Huston – @LorieAHuston

Lorie Huston - @LorieAHuston Twitter Header

10. Pawcurious (Dr. V) – @Pawcurious

Pawcurious (Dr. V) - @Pawcurious Twitter Header

11. Lisa Taron, The Pet Blog Lady – @ThePetBlogLady

Lisa Taron, The Pet Blog Lady - @ThePetBlogLady Twitter Header
12. Southwest Airlines – @SouthwestAir

Southwest Airlines - @SouthwestAir Twitter header

13. Ted Nguyen – @TedNguyen

Ted Nguyen - @TedNguyen Twitter Header

14. Weruva – @weruva_bff

Weruva - @weruva_bff Twitter Header

Complex Images

By this I mean images with multiple subjects, or depicting action, even suggesting interaction — among the subjects, or with you.

15. Andrea Arden – @Andrea_Arden

Andrea Arden - @Andrea_Arden Twitter Header

16. Ask Dr. Anna – @Sweetbonana

Ask Dr. Anna - @Sweetbonana Twitter Header

17. DogTipper – @DogTipper

DogTipper - @DogTipper Twitter Header

18. Life with Dogs and Cats – @WithDogsAndCats

Life with Dogs and Cats - @WithDogsAndCats Twitter Header

19. Maggie Marton – @MaggieMarton

Maggie Marton - @MaggieMarton Twitter Header

20. Mia Voss, The Mia Connect – @TheMiaConnect

Mia Voss, The Mia Connect - @TheMiaConnect Twitter Header

21. MK Clinton – @mk_clinton

MK Clinton - @mk_clinton Twitter Header

22. Pet360 – @Pet360

Pet360 - @Pet360 Twitter Header

23. Pet Age Magazine – @PetAgeMag

Pet Age Magazine - @PetAgeMag Twitter Header

24. PetMD – @PetMD

PetMD - @PetMD Twitter Header

25. Steve Dale – @SteveDalePets

Steve Dale - @SteveDalePets Twitter Header

26. I Have Cat – @IHaveCat

I Have Cat - @IHaveCat Twitter Header

Words and Pictures

One of my favorite all-time quotes about design comes from Edward Tufte: “Words and pictures belong together.” The Visual Display of Quantitative Information (2nd Ed. 2001). Of course, Tufte wrote that before Twitter existed, let alone released this new responsive layout! ;-D

So how will you overcome the challenges of making your words and pictures work well together, when Twitter’s responsive design displays them across all those screens? Many of these examples work well on my monitor, but you’ll have to figure out what works with your images and text to best tell your story on the screens that matter most to your audience.

27. Aimee Beltran, Irrisistible Pets – @IrresistiblePet

Irresistible Pets - @IrresistiblePet Twitter Header

28. Carma Poodale – @CarmaPoodale

Carma Poodale - @CarmaPoodale Twitter Header

29. Carol Bryant – @CarolNBryant

Carol Bryant - @CarolNBryant Twitter Header

30. Cat CATastrophes – @CatCatastrophes

Cat CATastorphes - @CatCatastrophes Twitter Header

31. Angie Bailey, CatLadyLand – @CatLadyLand

CatLadyLand - @CatLadyLand Twitter Header

32. Yasmine Surovec, Cat Vs Human – @yasmine_surovec

Cat Vs Human - @yasmine_surovec Twitter Header

33. Elizabeth Keene, Chronicles of Cardigan – @ChroniclesCardi

Chronicles Of Cardigan - @ChroniclesCardi Twitter Header

34. Denise Wakeman – @DeniseWakeman

Denise Wakeman - @DeniseWakeman Twitter Header

35. Debbie Glavotsky, Glogirly – @Glogirly

Glogirly - @Glogirly Twitter Header

36. Kate Benjamin, Hauspanther – @Hauspanther

Hauspanther - @Hauspanther Twitter Header

37. Cathy Keisha – @CathyKeisha

Cathy Keisha - @CathyKeisha Twitter Header

38. Kimberly Dickerson, Saving More than Me – @SavedOneMore

Kimberly Dickerson - @savedonemore Twitter Header

39. Kimberly Gauthier, Keep the Tail Wagging – @TheFurMom

Kimberly Gauthier - @TheFurMom Twitter Header

40. Morris Animal Foundation – @Morris_Animal

Morris Animal Foundation - @Morris_Animal Twitter Header

PLUS, if you’re still in need of even more inspiration you can browse the header image collections at:

Hope that helps you tap into your creative side!

Let us know how your experimenting, trial-and-error goes. And please share images or links to your own new Twitter designs, or any other designs or resources you find that may help your fellow pet bloggers with theirs.