The Evil Twitter Twins

Back in September, Twitter began rolling out a sparkly new layout and a few new features to some of its users, and officially completed it in October. Users are still given the option whether to use "old" or "new" Twitter, and I'd personally kept to the old one for a while for a variety of reasons, including my typical resistance to anything my favorite services try to change for the sake of changing (if it ain't broke...) but also because of the "new" version's wider layout, which fills most of the screen horizontally.

Old Twitter

New Twitter

The implication is that less of the user's background image will be showing. A little *ahem* background... on Twitter's backgrounds. You basically get three options when designing your Twitter profile's background appearance:

• solid color (don't use a background image)
• background image that tiles (repeats vertically and horizontally)
• background image that doesn't tile and is stuck in the top-left corner of the screen

This is a bit different from normal Web pages, which allow you to set a variety of options in HTML and CSS such as whether the image will be centered or stuck to a different side of the screen, whether it will be fixed or scroll with the content, and more. To be fair, most social networks do limit customization in order to maintain some kind of consistency for the user experience. Twitter in particular has always had a very streamlined interface and sometimes an overly-simplified approach to its service. The great thing about getting millions of minds together online though, is that often people will come up with extremely cool ways to work within the provided framework and still show off their creativity.

In the case of Twitter, one of these ways was to create custom background graphics which either reinforced a brand image, pointed to other social networks (Twitter limits you to one hyperlink in your actual profile), or just looked darn cool. There are plenty of nifty "Twitter background" roundups and tutorials floating out there which highlight this trend, but they generally display the narrower layout which provided more real estate for these creative backgrounds.

Now, I had not taken the time to design myself a cool background before this point, and in a way I'm glad I didn't because it's a shame for all the people who did, only to have them hidden today. However, in light of the imminent "You’re using an older version of Twitter that won’t be around for much longer" message posted along the top of every page, I decided that there must be a way to have a cool-looking graphic that fits in the new space provided.

And so, in honor of Spring cleaning, my new MacBook Air, and the design community at large, I put myself up to the challenge.

Thought process:

• I am not including mobile users, as they would be using mobile Twitter or a third-party application, so they wouldn't see any change in "layout" from old to new or any user's backgrounds at all.
• For some users, 1024px is the highest resolution their screens will allow. Browsing new Twitter with a 1024px wide window on a normal device, though, means that you have 40px of background real estate on the left, and 40px on the right. Unless you're going to write something at 4pt font size or place your favicon there, I don't see this as being useful. It is practically the smallest resolution you can use in the new Twitter before getting horizontal scrollbars (ick), so I think it's safe to say this resolution will not be our target.
• Moving on to the next big class of users: 1280px wide screens. Realizing that someone could resize their window a bit smaller even when their maximum resolution was 1280px meant that I wanted a design which could hold up to somewhere between 1024 and 1280, but generally 1280 would become the new standard. This gave me 120px to play with on each side of the screen.
• The right sidebar in the new Twitter is now slightly transparent. I could do something cool behind there...

Time to sit down and design. Approximately three hours, one drunken roommate, some Pad Thai, and a few bathroom breaks later, I was finally satisfied enough to test my design...

Eureka! It worked! My design didn't call for any specific top padding, and I eventually trimmed it down a bit, but I was very happy with how this looked online, how it scaled with the window, and of course, how very "Amy," my new Twitter background was.

Now off to write a how-to reference for the design community on http://color-and-code.com

Homepage Redesign

My headfirst dive into web design began in high school, with a custom Myspace layout and a primitive "blog" at Xanga. After transferring to Temple University and taking our required Computer and Information Science (CIS) course, I created my first homepage. But as I am looking forward to graduation, I realize that Temple won't continue to host my webpage on their servers, and honestly I'm not even sure if they will let me use my @temple.edu e-mail address anymore, but that's another topic...

With this in mind, I purchased the domain name amypospiech.com and a hosting package, but then the question in my mind was, "what the heck do I put up there?" It was actually quite intimidating at first - with no limits on what I could do creatively or technically, I spent a few months just sketching ideas and keeping notes of things I liked on other portfolio sites and personal pages, as well as business sites and blogs. I then scrapped it all, came up with a totally original theme, added in some signature Amy style and at long last came up with this:

I designed the theme around my favorite (abandoned) building in Philadelphia, the Divine Lorraine Hotel. It was built as an apartment complex in the late 19th century in a French Renaissance style, transformed into a hotel in 1948 under Father Divine and the Peace Mission Movement, and closed in 1999 when it was sold to developers (and subsequently re-sold for a hefty profit, but nothing to show for it yet). You can read about it here.

Knowing me, I will probably change this a few times a year (ha, ha) because after looking at something for too long, I get the crazy urge to go back and redo it all again. However, if anyone has suggestions for improvements, I'm all ears!

Here Comes Trouble

HCT Design Mode Description: Conceptualized, designed, printed, compiled, and burned the pieces for this audio gift set given by my mom to her childhood friend.

Uploaded a graphic design set I did for mom last year. Going through old computer files sure can be fun sometimes! This is a CD "identity" I came up with after she described her summers with best friend Lilly working at the Jersey shore in the 70's. I really had fun with this design, and I even enjoyed some stories regarding the musical selections which were burned onto these CDs, but most of all I'm glad it ended up in the hands of two women who I know appreciated it... and that's the most a designer can ever really hope for :-)

I've Matured (as a web designer)

Maybe I haven't, but my blog has definitely grown up over the past year+ that I've been blogging. Check out this blast from the past layout that I created back in the day, before the current one:

Let me know what you think of the updated look!

pollcode.com

What do you think of the new layout?

Great! It was time for a change. It's nice. Less pink is a good thing. I don't see the difference. The old one was nice enough. I liked the old one better. Molto bello! It's alright. Very slick, modern looking. Prettyyyy.

 

International Business Association (IBA): Director of Web Development (and more)...

Check out the work I've been doing lately for Temple's International Business Association... I was appointed webmaster for the semester and have been doing a lot of other oddjobs as well, including research/designs for getting coffee mugs and tee shirts printed with our logo.

The current IBA website is based on an archaic version which was used in the past. The entire site is essentially one graphic, with text overlapping in various places and poor coding. Not to mention the misspelling "Philidelphia" in the footer of every page:

The revamped,browser-friendly website looks like this:

It is updated with a Google Calendar on the "Events" page, a new membership application form, PayPal links for paying member dues, and more.

We're working on a whole new design with green as an accent color to generate the idea of a map or globe. This might change but it's a start. The design uses CSS so it loads quickly in most browsers.

Stumbled Upon: Jackson Pollock

(Two posts in one day, oh boy!)

Just signed up for a service called StumbledUpon, which lets you find cool things on the internet based on your interests and likes / dislikes (via a browser toolbar). So I clicked that I like art, graphic design, and other typical things. And the first page I was taken to was blank. "Huh? Stupid service," I think.

Until I moved my mouse around on the page!!!

Coooooooooool. Hey ya know what I like most about this? No one's trying to make any money, lol.

So I'm not sure if this is a post about StumbledUpon, Jackson Pollock, art, or the fact that the web is so cluttered with money-making schema, but enjoy. And have a good weekend!