Example of a custom Twitter backdrop design to promote myself.

Twitter uses a very well researched (and well proven) format for its 140 character or less social blogging web post engine which is conducive to easy scanning and reading.  This layout will likely change in the future, but perhaps not for quite some time.  Many tweople use twitter from their cell phones and mobile devices as well.  Because of this, twitter tries to maintain compatibility across many platforms and resolutions.

In order to maintain a readable screen independent display format, Twitter does not offer a great deal in the way of personal customization.  The most they allow is for you to set a few element colors and possibly upload a background.  However, because Twitter maintains an optimum viewing format for reading 140 character or less lines of text by maintaining a combined width of 763 pixels (for both the post section and the right side info area), we can plan for accordingly.

Please note that there are exceptions to these rules.  At least at one time, the system often had trouble resizing the graphic for some users who used animated gifs, and this an other slight kinks might actually extend the width of their right-side information panel.  Some users had abnormally long words in their info panel which extended its width as well.  Such a width increase also increased that key 763 pixel format for the Twitter display area.  However, most of these little bugs seem to have been addressed, now.  And although these minor quirks may not still exist any longer, rest assured that we are designing for the masses and the widest majority of users possible will view your profile as intended if you can follow the instructions here.

The first time I designed a background for my Twitter account, I was horrified when I viewed it on another computer. Part of it was covered by the interface and it just plain looked ridiculous. So I did a lot of experimentation. After some fool hardy experiments I actually started investigating solutions through math. The result is a template that works well in all of my target resolutions. This tutorial explains the process so that it will be easy for you to create an optimized template for your own custom backdrops that displays well in your target resolutions, as well.

The trick, of course, is taking your desired variety of resolutions into account.  Since Twitter does not want to exclude any modern computer, its web interface defaults to looking good and readable for anyone using a browser at 800 pixel width or more.  Its workspace display is then centered for higher resolutions.  This strictly defined predictability in the Twitter web page platform allows us to plan our backdrop templates accordingly so that we can use it effectively to create pleasing aesthetics in any resolution. Take a look at the following example graphic image for a quick reference about how we do this…

Figure 1: Planning your backdrop design for multiple resolutions. Click on the image to view the original at full size.

The figure 1 graphic given above illustrates the constraints we have to deal with when we are designing our Twitter profile backgrounds for the most common resolution sizes above 800×600.  In this example, the 600 pixel height of the 800×600 resolution really doesn’t matter since we can actually scroll down the page.  But the width size is extremely important in order to figure out our margins when the Twitter interface is centered automatically.

However, please remember that there are many devices and an 800 width is set on many netbooks and hand-held devices.  These will not be able to view much of any custom backgound at all.  Cell phones also have their own separate application for viewing posts.  Below is a list of the most commonly used computer resolutions a user can easily view Twitter with:

• 800 x 600 – Twitter’s original default user interface configuration.  This may change in the future, but not likely for some time yet.
• 864 x 648
• 960 x 720
• 1024 x 768
• 1152 x 648
• 1152 x 864
• 1280 x 720
• 1280 x 768
• 1280 x 960
• 1280 x 1024
• 1366 x 768 – Modern WideScreen Laptops
• 1440 x 720 -  720 HDTV
• 1920 x 1080 – Full 1080 HDTV WideScreen

Now, as mentioned earlier, the first thing to remember is that because we find it easy to scroll down a page, the height (the second number in the above given resolutions) is really of no consequence.

However, we do want to pay attention to Twitter’s user interface, as sometimes it might not cover-up the whole screen as we would think.  Provided you use Twitter at least a bit, the Twitter interface is probably the shortest when messing with either the Notices, Connections or Password section tabs in the Settings menu.  In mine, the bottom menu stops at 451 pixels down from the top of the browser window.  But the main thing I am worried about is that items I repeat in My background to accommodate for a variety of resolutions are completely covered up from 65 pixels to 400 pixels.  However, no one else would likely see such an short interface that they didn’t even have to scroll down unless they finally made it to the end og my Followers/Following list and the last page was short.  You will have to decide whether or not you want to consider this type of a design problem in your work.  Sometimes I will consider this, and sometimes I will not.  It all depends upon the desired result.

Also consider that since Twitter is designed for a minimum size 800 width monitor, an 864 x 648 screen resolution is not very common and would only offer reveal to us an extra 32 pixels on each side to design for.  Even a 960 x 720 display only offers 80 pixels on either side of the Twitter interface, which isn’t a whole lot.  I want something long enough to add a name, address, web address or email address and feature it prominently, not just squish it in there.

Along the higher end, only graphic designers, photographers, videographers and geeks are readily adapting Full HDTV WS displays.  Plus, unless you are using a photographic or photorealistic backdrop for your Twitter profile, you usually do not need to address that resolution unless you are a designer, photographer, videographer and/or geek.  I am guilty of being all four, and as such I have chosen to incorporate Full 1080 HDTV WS resolution designs in many of my designs.  You may not chose to support such screen sizes in your designs, especially because noy many tweople use HDTV monitors, and those that do usually do not browse the web at full screen.  This is in part due to the fact that no one really designs websites that look good in 16:9 aspect ratio HDTV resolutions.  This might change in the future, but for now even if you have a computer hooked up to one of the many HDMI ports on your Full 1080 HDTV WS, it is doubtful that you will be surfing the worldwide web at full screen. From personal experience, I have found that most liquid websites look pretty bad at anything beyond a 720p HDTV resolution.   I am sure that will change in the future as people start adapting to the digital lifestyle, but it isn’t happening now.

So in review, our main concerns are our chosen target resolultion widths, and possibly the smallest configuration of a Twitter page which you could bear would be our main considerations when doing the math for our Twitter backdrop layouts.  By looking at figure 1, as well as some of my own notes, we can see the difference between these different resolution widths and how much room Twitter leaves us as a margin that we have to work with when we use one.  I came up with these widths by taking a couple of screenshots and expanding or contracting the canvas size in Photoshop as required…

• 1024 width = 130 pixels per side
• 1152 width = 194 pixels per side
• 1280 width = 258 pixels per side
• 1366 width =  301 pixels per side
• 1440 width = 338 pixels per side
• (1920 width for special HDTV WS projects)
• The size of the Twitter interface which can cover-up repeated info, which is from 65 pixels down (from the top) to 400 pixels or so (depending how picky you want to be with your own creation).

Planning  Our Available Workspace for Our Design:

When we plan our workspace to design in, it just isn’t quite as simple as the image that figure 1 represents.  All that figure 1 is representing is the room we have to work with between the centered Twitter interface and the edge of the browser window.  In most of these cases, we are also assuming that the browser is being viewed at full screen.   Remember that at 1366 wide and larger, often users are not browsing at full screen because these larger screens are in a widescreen format with a 16:9 aspect ratio and have more useable real estate.

Also remember that you are most likely to subtract your preferred padding between information elements.  So you might want to allow 2 or 3 pixels between areas that you have divided up on your layout. Of course, it all depends on what we are presenting and how we will design it. Most who will design their own backdrops or modify some of the existing designs with their own information will be promoting themselves or their company. The presentation has a more professional look when our little information blocks will also carry a bit of breathing room and not simply run together. So always consider adding small little padding spaces between resolution workspaces.

Now that we know how much room we have to work with things, I’ll show how these spaces overlap so that we can plan accordingly…

Figure 2: If we plan for only one resolution (usually the one we use), visitors may get strange results when viewing in another resolution. Click on the image to view.

Obviously, we can’t plan for every single visitor.  But if we usually view our twitter page in 1280×1024 resolution, and we design our layout specifically for that resolution, when someone shows up with a screen that is only 1024×768, the result is that the information we have left will be over halfway covered by the twitter interface.  This is not the professional result we intended, especially if we are trying to leave our company or professional contact information.  We will most likely wind-up losing a lead over this.  That’s why we tailor our designs for optimal viewing at a variety of resolutions carefully.

Tweople viewing your twitter profile at 800×600 also will not likely see anything.  However, we don’t want to insult them, either.  As an artist, I still want to provide an aesthetically appealing experience when they arrive at my site.  But twitter’s interface is actually designed to easily fit with an 800×600 monitor. In fact,  even with the scroll-bar there actually is a margin, as seen in the following screenshot (figure 3). That means that we also need to accommodate them by allowing a 10 pixel

Figure 3: Even at 800x600 pixel resolutions, Twitter still shows a margin of 10 pixels on each side of the user interface. Click on the image to view the original at full size.

So if we want our backdrops to look professional, we also have to think about the tweople viewing our Twitter profile page at 800×600, too.  This is actually an important resolution because so many netbooks are surfing the web reliably at this resolution and they really aren’t capable of larger resolutions.  Many other hand-held devices can support browsing the web by effectively using technology to reduce pages from this resolution, as well.

So now, our guidelines have to include a 10 pixel margin on either side, as well.  So here is our working template for our backdrop image workspace:

Safe work zones for resolution optimized backdrop designs. Click on the image to view the original backdrop template image.

There are other horizontal design constraints that we have to consider when developing a good design for our backdrop, too. But these are not always set in stone. Because people use a variety of different default fonts and sizes when viewing web pages, and because different resolutions default to different font sizes, these are a little tougher to nail down. However, if we are aware of these little details we can at least take them into account. An example is that the twitter main navigation bar (top right across from the twitter logo) will grow as font sizes increase, which will push the top border of our twitter user content area down. The reverse is also true, a smaller font will allow the content area to ride a little higher on the page. Because of this phenomena, for this tutorial, I am going to concentrate on mostly on utilizing our harder vertical design constraints.

I took some snapshots at the Sioux Falls Air Show this summer.  So I’ll use one of those photos as an example of how we can spice up our twitter profile page with a photo. Looking through my photos I actually grabbed the first one that I thought suitable for this exercise:

Originally at 2816 x 2112, the 6 megapixel image was reduced for web media and is shown here at 50% (click on the image to view at 800x600). This 800 x 600 image represents the original snapshot I decided to work with.

In this case, I am using a 1024×768 resolution screen as my ultimate goal for the supported smaller screen, though I also intent to let 800×600 screen sizes get a hint of what they are missing out on.  To do this though, I have to load my image editor (I highly recommend Photoshop and a 30 day free trial is available) to crop the example photograph quite close on the left side and top.   If you are a professional, you may have to crop your image a few times (as I had to) because we actually don’t want much white space (or blue sky) to the left of our subject air craft at all.  Because I wanted it to peek out a bit from behind the tweeter content area at 800×600 resolutions, I also cropped it a little close on the top, as well. I also cropped the right side of the image as closely to the smoke stream as possible without leaving a hard line.

The resulting theme snapshot at 1024×768 resolution is displayed below…

Air National Guard Stunt Plane Theme Screenshot (reduced 50%): Click on the image to view this screen snapshot at actual 1024x768 size.

The actual image I used as a backdrop shown below was uploaded through the twitter Settings > Design section, making sure that my image was not set to tile (tile background is unchecked).

Our subject stunt plane photo cropped for use in our theme. Note that I did not crop any pixels from the bottom so that larger resolutions will be able to enjoy more of the image as this helps avoid seeing a hard edge where the photo ends at the bottom.

If you would rather download the image and use it on your own page, you are welcome to as long as you get it from here at the twidrops website.

To finish off this theme, I changed the colors in the Settings > Design section:

Click the Change design colors>> link to…

• Set the background color to 628bb2
  This color is important as it will allow the blue sky to seemingly repeat as a solid background color without using the bitmap image, thus reducing file size and optimizing the load time efficiency of our backdrop for faster display.
• Set the text color to 3c3940
  (or your preferred text color).
• Set the links color to 006da8
  (or something a little darker)?
• Set the sidebar color to 96c6eb
  (or your preferred sidebar color).
• Set the sidebar border color to 00f2ff
  (or your preferred sidebar border color).

By following the above guidelines, we have a complete themed background for our twitter page.  But at this point it is still more decorative than promotial, as unless you are in the Air National Guard it probably doesn’t speaks volumes about you. However, if the photograph or illustration that you used was a company plane/truck/car/cycle/trailer bearing your logo, it would actually say a great deal.

I am going to work on expanding the scope of this tutorial in the future and I will add sections where you can customize it with your own highlighted website(s), blogroll & contact information.  But for now I am anxious to get the article published and start adding some more twitter oriented backdrops to twidrops for twitter users to download.

Hence, I’ll be back later with an update on how to further customize your theme using this twidrop as a starter.  Please check it out later if you are interested in this stuff.  I hope you enjoy what we have done so far.

Thanks for checking us out!

-Doug