Applying a predefined Twitter theme is an easy way to escape the standard-issue look of a freshly minted Twitter account, but it doesn’t exactly scream “rugged individualist.” If you really want to stand out from the Twitter herd, then you need to customize your theme with your own background and (as I describe later), your own color scheme.
You may be wondering at this point why you should bother taking the time and trouble to build a custom theme. First, as you’ll soon see it doesn’t take all that much time and almost no trouble. Second, even if it doesn’t bother you to stick with a cookie cutter theme from Twitter, it’s not going to impress other Twitterers, and that may be the deciding factor when they’re choosing whether or not to follow your tweets (which are the updates you post). After all (a Twitterer might say), if you can’t be bothered to do something original and interesting with your theme, then perhaps your updates won’t be all that original and interesting, either. Myself, I think that most Twitterers decide on who to follow based on the quality of a person’s updates, not on the appeal (or lack thereof ) of their theme, but certainly there’s no harm in making your Twitter home look nice.
Using a solid color background
The simplest customization you can make to your design is to switch to a solid color background. Swirling patterns and striking photos have their place in the world of Twitter backgrounds, but some people find them distracting. Framing your Twitter home with an attractive color lays a solid foundation for your content, and focuses your reader’s attention on your posts.
ecause the update background is always white, you can give your profile an
attractively clean and classily simple look by switching to a white background.
Here are the steps you have to follow to switch to a solid color background:
1. Sign in to your Twitter account.
2. Click Settings. The Settings page appears.
3. Click the Design tab.
4. If you have a predefined Twitter theme applied, click Change background image, and then click Don’t use a background image.
5. Click Change design colors.
6. Click the Background swatch. Twitter displays two color controls, as shown in figure
2.5. The outer circle controls the base color, and the inner square controls the amount of gray in the color.
7. Click a spot in the outer circle to set the base color. You can also drag the small circle to set the base. When you make your choice, Twitter temporarily changes the background color so you can see the results.
If you happen to know the color code of the shade you want, you can type it directly in the Background swatch. Be sure to use the format #rrggbb, where rr is a two-digit hexadecimal value (00 to 99 and AA to EE) that specifies the red component, gg is a two-digit hexadecimal value that specifies the green component, and bb is a two- digit hexadecimal value that specifies the blue component.
8. Click a spot in the inner square to set the gray component color. You can also drag the small circle to set the grayness. Again, Twitter temporarily changes the background color so you can see the results.
9. Click Save Changes. Twitter updates your profile with the new background color.
Selecting a custom background image
If you want to ramp up the “wow” factor, if you want to use your Twitter profile as part of a personal or business branding strategy, or if you just want a Twitter home that truly reflects your style and personality, then you need to augment your design with a custom background image.
You might think this is just a simple matter of uploading your favorite photo, but Twitter offers several unique challenges when it comes to selecting a background image. Before I get to those, run through the steps you need to follow to apply a custom background image to your Twitter profile:
1. Sign in to your Twitter account.
2. Click Settings. The Settings page appears.
3. Click the Design tab.
4. Click Change background image.
5. Click Browse. If you’re using Safari, click Choose File, instead. A file selection dialog box appears.
6. Choose the file you want to use, and then click Open (or Choose in Safari). You can use either a JPEG or a PNG file, and the maximum size is 800KB.
7. If you want Twitter to tile the image to cover the background, select the Tile background check box.
8. Click Save Changes. Twitter updates your profile with the new background image.
After you save your profile, you might end up on the “Something is technically wrong” page or even the fail whale page. This is an annoyingly common problem, and the best solution is to keep refreshing your browser until Twitter gets its act together. Note that when you refresh, your browser asks whether you want toresubmit the form, so be sure to choose yes.
Background photo challenges
As I mentioned earlier, Twitter presents a couple of hurdles that you need to leap over when selecting a background image. First, the Twitter content area — the box in the middle of the screen that displays your updates and the Twitter sidebar — is a “fixed” target that you have to work around. I put “fixed” in quotation marks because it does move from side to side as you change your browser width or screen resolution, and it does expand vertically as you add updates to your profile and as you start receiving other people’s tweets. However, the content area is fixed in three other ways:
It’s always centered on the screen. It’s always the same width: about 760 pixels. It’s always located in the same position vertically: about 70 pixels from the top of the page.This means that your background image has got to deal with a distressingly large object. For example, on a screen with a resolution of 1024 × 768 with the browser window maximized, as shown in figure 2.6, you have about 120 pixels of open area to the left of the content box and about 120 open pixels to the right of the content. You also have about 70 pixels open above the
content box, but that area is partially blocked by the Twitter logo and the site navigation tools.
2.6 On a typical screen, you only get a bit of room around your content to show off a background image.
So if you want to use a photo as your background, then even if you use an image large enough to cover the screen, the bulk of the image will be blocked, which is going to be a problem for most photos. For example, check out the Twitter page shown in figure 2.7. You see part of a floating dock on the right, and a splash on the left, but the key part of the image (it’s a dog in midair after diving off the dock) is blocked by the content area.
If you want to use a photo as your Twitter background, a better idea is to use a scene where the action isn’t just in the middle of the image. A beach shot, landscape, or similar image where the subject either extends across the photo or offers visual interest on the edges is a good way to go. Figure 2.8 shows an example.
Twitter content box.
The second challenge you face when choosing a background is the size of the image you select. If you use a relatively small image, Twitter displays it in the upper left corner of the screen, and then fills in the rest of the background with your chosen background color. That’s not terrible if your background color goes well with your image, but it’s not optimum, either. Twitter does offer an option to tile the background, but few photos look good when tiled.
To work around this problem, you should use a relatively large background image, and by relatively large I mean a photo with dimensions that are larger than the browser window. This means the background color never appears, and you don’t have to worry about tiling the image. Of course, this leads to yet another problem: how large? According to the firm Market Search, as of December
2008 the percentage of users running their screens at various display resolutions broke down as
shown in Table 2.1.
| Table 2.1 | Display Resolution Percentages |
| Resolution | Percentage of Users |
| 1024 × 768 | 36.66 |
| 1280 × 800 | 19.68 |
| 1280 × 1024 | 12.68 |
| 1440 × 900 | 8.30 |
| 1680 × 1050 | 5.48 |
| 800 × 600 | 4.49 |
| Other | 12.77 |
As you can see, the most popular resolution is 1024 × 768, but more than 32 percent of users run their screens at 1280 pixels wide. So if you assume a maximum width of 1280 pixels, then you’ve got about 80 percent of the market covered (assuming some of those in the “Other” category are running at 640 × 480). This means that you should resize your photo to a width of at least 1280 pixels. What if you don’t want anyone to see the background color? Then you need to use a width of 2048 pixels, which is about the widest screen that anyone runs nowadays.
What about height? Again, you want to make sure that your photo’s height is greater than the display height of most of your users. From Table 2.1, you can see that if your photo’s height is at least 1050 pixels, then you’ll cover almost everyone. Again, if you want to be sure that no one sees your background color, go with a height of 1556 pixels.
You may be wondering how a 1050-pixel-high image will work when your profile extends down the page with your updates and your friends’ tweets. The secret here is that Twitter displays your background image with fixed positioning, so the content area scrolls as you scroll the browser window, but the background remains in place. So as long as the photo is taller than the browser window, no background colorappears at the bottom of the screen.
Using a background image to tell people more about yourself
The one-line bio that Twitter includes as part of your profile is limited to a relatively pathetic 160 characters. My life certainly can’t be summarized in such a teensy space, and I’m sure yours can’t, either. To work around this limitation, many Twitterers offer more information about themselves using their profile backgrounds. How? By taking advantage of the gap that most users see to the left of the content box. With a little graphics program know-how, you can create your own background image that includes a picture and some text in a vertical strip that runs down the left side of the image. Make this strip background the same color as your Twitter background, and you’ve got yourself a nice background and a chance to tell people more about yourself.
How wide should you make this strip? Because most folks use a display resolution of at least 1024
× 768, then almost everyone who visits your Twitter page will see at least a 120-pixel gap to the right of the content box (assuming they’re running their browser window maximized). So make your strip 120 pixels wide, add a nice picture that’s the same width, and use your graphics program’s text tool to add some text that runs down the strip. Figure 2.9 shows an example (which includes an added design bonus: a 70-pixel-high strip across the top), and figure 2.10 shows the background applied to a Twitter profile.
The specifics of creating the background image vary depending on the graphics program you use and the tools it offers. One basic procedure is to create a new image that’s the height and width you want, and then fill that image with the background color you want. Then use the shape-drawing tool to create a rectangle that’s 120 pixels wide and the same height as the background. You can then use the text tool to overlay your text on the rectangle.2.9 Create an image with a 120-pixel strip along the left side that includes more info about yourself.
2.10 The image from figure 2.9 applied as a Twitter background
It’s a good idea to test your custom background on a variety of browsers at a variety of display resolutions. If that sounds like way too much work, head over to Browser Shots (http://browsershots.org/) and choose the browsers and screen sizes you wantto test.
Overcoming background problems with tiling images
If you really don’t want to get into the hassle of worrying about photo sizes, display resolutions, and creating a custom background from scratch, you can get a blissfully problem-free background by applying an image with a pattern that tiles gracefully. Even better, there are plenty of sites out there that either offer ready-made patterns that you can download, or that enable you to generate your own patterns.
For simple pattern downloads, check out the following sites:
Twitter Backgrounds Gallery: http://twitterbackgroundsgallery.com Twitter Background Images: www.twitterbackgroundimages.com Twitter Gallery: http://twittergallery.comIf you prefer to come up with your own pattern, here are a few pattern generators you can try out: BgPatterns: http://bgpatterns.com
BgPatterns: http://bgpatterns.com Stripe Mania: www stripemania.com
No comments:
Post a Comment