How to Design the Perfect Twitter Profile Page

http://www.loudnoises.us/the-noise/how-to-design-the-perfect-twitter-profile-background/

by pgrieselhuber • 14 years ago

29 16 14 years ago

Sumaso• 14 years ago

Maybe I'm way off here but I was under the impression:

Size of screen != # of pixels on that screen

Shouldn't the article talk about that? A Retina Mac's screen may not be as large as a 21 inch screen, however it probably has more pixels.

pgrieselhuber8• 14 years ago

Great feedback Sumaso, I'll update the post and reply again when it's done! Thanks.

pgrieselhuber8• 14 years ago

Hey Sumaso,

Thanks again for pointing out the super high-res on Retina screens. We've updated the post. If you have any more feedback, feel free to leave a comment on the post!!

pubby• 14 years ago

This is really just an article on handling different size monitors rather than actual graphic design and layout.

The funny thing is that author's website and twitter get cutoff horribly on my monitor (1024*768 which about 20% of web users use).

pgrieselhuber8• 14 years ago

Hey Pubby, yeah the post is meant to be a quick tip, in and out, get your twitter profile fixed.

We specifically decided to avoid teaching people design in this post. That is forthcoming. :)

Also, thanks for the feedback on our own site - we just launched about 60 hours ago and are still working out a few kinks. We'll get this fixed pronto.

Best, Paul Grieselhuber

m_ke• 14 years ago

wow you really like macs

pgrieselhuber8• 14 years ago

we do. :)

Smudge• 14 years ago

It's the reason your site's fonts look so terrible in Chrome for Windows.

Nothing says built on a mac like jagged webfonts on Windows.

Edit:

Here's some more info on the issue, to (hopefully) be more useful:

"Using Web fonts in your design requires thorough testing on as many different browsers and platforms as possible, with a close look at various options for rendering text. If the screen display is of poor quality and lacks subpixel rendering, then opt for graceful degradation by serving system fonts to older browsers and OS. Conditional comments are the easiest way to exclude older browsers and operating systems from style sheets with Web fonts. Of course, JavaScript is a more elegant way to detect whether a client’s subpixel rendering is turned on."

http://www.smashingmagazine.com/2011/03/02/the-font-face-rul...

Also useful:

http://www.smashingmagazine.com/2012/04/24/a-closer-look-at-...

ghostfish• 14 years ago

First of all, this is something that's always bugged me when using twitter, and I like seeing someone address it, but I have a comment. I agree with the 13" laptop screen examples, but how many people browse the web full screen on monitors over, say, 21"? On my 24" monitors (1920x1200) I usually have browser windows dragged to 2/3rds of the screen at most. Most websites look patently ridiculous at full 1920 width, let alone 27" or 30" monitor resolutions like 2560x1600.

pgrieselhuber8• 14 years ago

Thanks Ghostfish, the post seems to be getting great response here and on Twitter. It's been a pet peeve of ours so wanted to get it out to the world as our first major content contribution.

Granted, most of the world isn't seeing twitter at full size on a huge screen. Our goal is simply - let's make it perfect for everyone in one fell swoop.

rkudeshi• 14 years ago

The biggest takeaway from this article is that at some point in the recent past, Twitter finally added an option to CENTER your background image.

The reason most of those brands have "bad" profiles? Because they were designed before the center option was added.

For context, centered background images were a long-standing request of Matt Mullenweg: http://ma.tt/2010/07/centered-twitter-backgrounds/

pgrieselhuber8• 14 years ago

Yep, what amazed us most was who WASN'T on top of the change yet, given Twitter's importance to branding these days. Well, and the free template.

empire29• 14 years ago

Im not a twitter user, so this may be just initial shock -- but while looking through the article's screenshots, i had flash backs of myspace.. not quite as bad, but a crowded over-personalized, over-whelming page.

lifeisstillgood• 14 years ago

I am going to have to channel patio11 here - the Perfect Twitter Profile Page is one that supports your Twitter goals and is proven to do so with empirical testing.

What are your online goals? How do you measure them? Now how on earth does a twitter home page help that? If Facebook pages for major brands are one step removed then twitter home pages are a long down the road towards the shops.

If your tweet goes viral and most people then go to your twitter homepage, instead of that embedded URL, something is badly wrong

frankly your twitter homepage irrelevant - it's a 140 character broadcast service with no relevant interactivity on yr homepage - make it blank, put up a picture - if it is more than one hours work for the same designer who did your real home page then it's too long

Edit: curiously their own twitter page is my ideal - simple, clearly states who and what and links right into their main online presence - which fwiw is very funky.

pgrieselhuber8• 14 years ago

Thanks for the compliments on our Twitter profile design!

Completely agreed re: your Twitter page (and any other marketing channel) needing to serve your business objectives.

As quality design is one factor in establishing trust in a brand, we feel that when brands get something so basic as layout of their Twitter profile wrong, it warrants a nod and perhaps a nudge, which is what this post is intended to be.

How to Design the Perfect Twitter Profile Page

Related Stories