5 ms·

How to Design the Perfect Twitter Profile Page

29 points by pgrieselhuber 14y ago

Sumaso 14y 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.
- pgrieselhuber 14y ago
  Great feedback Sumaso, I'll update the post and reply again when it's done! Thanks.
- pgrieselhuber 14y 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 14y 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).
- pgrieselhuber 14y 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 14y ago
wow you really like macs
- pgrieselhuber 14y ago
  we do. :)
  - Smudge 14y 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-rule-revisited-and-useful-tricks/ http://www.smashingmagazine.com/2011/03/02/the-font-face-rul... Also useful: http://www.smashingmagazine.com/2012/04/24/a-closer-look-at-font-rendering/ http://www.smashingmagazine.com/2012/04/24/a-closer-look-at-...
    - pgrieselhuber 14y ago
      Smudge, this is awesome feedback. You probably noticed in our comment above we've just launched this week, so this is much appreciated. If you see anything else, feel free to fire away. We'll be working to address these issues this weekend.
ghostfish 14y 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.
- pgrieselhuber 14y 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 14y 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/ http://ma.tt/2010/07/centered-twitter-backgrounds/
- pgrieselhuber 14y 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 14y 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 14y 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.
- pgrieselhuber 14y 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.

29 points by pgrieselhuber 14y 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.

pgrieselhuber 14y ago
Great feedback Sumaso, I'll update the post and reply again when it's done! Thanks.
pgrieselhuber 14y 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 14y 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).

pgrieselhuber 14y 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 14y ago

wow you really like macs

pgrieselhuber 14y ago
we do. :)
- Smudge 14y 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-rule-revisited-and-useful-tricks/ http://www.smashingmagazine.com/2011/03/02/the-font-face-rul... Also useful: http://www.smashingmagazine.com/2012/04/24/a-closer-look-at-font-rendering/ http://www.smashingmagazine.com/2012/04/24/a-closer-look-at-...
  - pgrieselhuber 14y ago
    Smudge, this is awesome feedback. You probably noticed in our comment above we've just launched this week, so this is much appreciated. If you see anything else, feel free to fire away. We'll be working to address these issues this weekend.

ghostfish 14y 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.

pgrieselhuber 14y 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 14y 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/ http://ma.tt/2010/07/centered-twitter-backgrounds/

pgrieselhuber 14y 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 14y 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 14y 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.

pgrieselhuber 14y 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.