The New Twitter

By Elyssa Dolinger on October 8, 2010 at 9:14 am in General,Reviews

newtwitterTwitter is in the process of rolling out its new design. Everyday I see people rejoicing or lamenting the new design. But what are some of the new design perks? I present a smattering of the new Twitter features. I doubt that I’ve found every gem, but this should give you an idea as to what the new Twitter is like.

They’re finally implementing some of the conveniences that third party applications have been providing. It may be too late to bring people back to the browser, but it sure can’t hurt to try.

The first thing you might notice is that the sidebar got huge. At first it was a turn off to have two equally sized viewing panes, but soon enough the reason for the right side’s expansion becomes clear. Added functionality. Everything you love about Twitter is still there. Well, maybe except the background. A measly 40 pixels of safe area is left on either side, though, if your browser supports, the right side bar should be semi-transparent.

favtweet

Twitter now even has a favorite tweet button. To choose a tweet to “favorite,” hover over the tweet you like. An option with a star and the word favorite next to it should pop up. Click it and the tweet will now feature a gold half star on the corner, as well as be listed on your right panel under the favorites option.

retweeted

retweeted-by

Retweeting? A two-shade green retweet label appears in the upper left corner of a tweet that has been retweeted. The number of times it has been retweeted is listed as well as a parade of mini icons of users that have retweeted by you.

userthumb

Click on a tweet and the right side panel changes. It now holds all kinds of useful information about tweets that you never knew that you never knew you needed to know. It can embed certain video and image links which is handy when it works. You can even see where tweets were made if tweeters want to be stalked.

embedded-imagethumb

If someone is mentioned in the tweet, it gives an abbreviated profile and link to their account as well as other tweets mentioning that account. If there are any replies to that tweet, they are listed in the side bar. Same deal for hashtags.

The new sidebar makes it easier to follow conversations, but you’d better hope you can find the first tweet. It doesn’t seem smart enough yet to track back to the first tweet of a convo.

Above all the tweets, the tabs at the top help navigate some new and old options, one of which is the ability to save searches. Also, when you search, you’ll have the option to filter for only those tweets with links or only those close to your location.

top-tabs

All in all it was a nice effort, Twitter. But I’m staying with my third party application, TweetDeck. (Though I have to admit, the keyboard short cuts, including “.” to refresh, are pretty sweet.)

keyboardshortcuts

5 Reasons why Fireworks kicks Photoshop’s Web Designing Butt

By Elyssa Dolinger on September 3, 2010 at 11:50 am in General

kickinbutt

When it comes to designing webpages I prefer working in Fireworks. I know, I know. There seems to exist a real prejudice against Fireworks. Sort of like you’re not a real designer if you use it. I challenge any web designer to give Fireworks the old college try. Making the switch to Fireworks was the best thing I ever did for the efficiency of my website building. And here’s why:

1. Fireworks is intuitive to web design.

Click to see full size.

Fireworks was built originally by Macromedia with a focus on web designer needs. That means it is optimized for a web designer’s needs. They made web-related things readily available like image compression, an intuitive slicing system and a whole different way of grouping and layering. One of my favorite features is that when you copy something, it pastes it in exactly the same place.

And for those of you desperately clutching to Photoshop because it is familiar to you, lots of things are just the same as in Photoshop –  some keyboard shortcuts, toolbars, panel layouts, etc. The design environment feels very similar.

Click to see full size.

2. Pages.

The way that Fireworks does its layer groupings is incredibly inclusive compared to Photoshop. One Fireworks file, like an InDesign file, may contain many pages. Each of those pages contains a unique set of layers including but not limited to a web layer where you make your slices (toggle those on or off by pressing the number 2 on your keyboard) and a locked master layer (so you can’t mess it up). If you make a master page, much like InDesign, those design elements will transfer to every page designed after. This is incredibly useful after you design the navigation, for example.

3. The Web Layer.

Click to see full size.There is more to it than just slicing and optimization. If you’re a non-coding designer, you can set up links and even rollovers for a working demo version of your site. Coders, you just keep doing your thing. The code it spits out is in no way clean, but it works for instant gratification. Which is nice ‘cause it’s instant.

4. Pixel-perfect sizing.

Do you need to make a box 697 pixels wide? With Fireworks’ inspector (reminiscent of Flash, isn’t it?) you can type in exact amounts. You can even tell it what degree to round the corners. No messy measuring or dragging handles. Simple.

Click to see full size.

5. Reactive Gradients.

Interactive Gradients

Gradients are all the rage ever since web2.0, right? Aren’t you tired of fighting them in Photoshop? In Fireworks, the gradients have handles. You can grab and drag the points so your gradient starts and stops exactly where you want it to within the object.

Don’t get me wrong. There are some things that can only be done in Photoshop- any kind of bitmap editing, actions, quick mask mode, to name a few. To some degree some of these things can be imitated in Fireworks, but it’s not made to edit everything under the sun- it’s specifically made for building websites.

It’s not like I hate Photoshop. Photoshop is good at what it does. We’ve been good friends for many years and I still use it in conjunction with Fireworks for bitmap editing. It’s just that designing a site in Photoshop always, to me, feels like using a fork to eat soup. Use the tool that was designed specifically for the job. Use Fireworks.

37 Feet…

By Elyssa Dolinger on May 28, 2010 at 4:18 pm in General

We’ve been all aflutter here at T&S because we are moving offices. We received our keys yesterday and even got the green light to start moving stuff in later today. It’s a pretty sweet deal. New paint, new carpet, a couple pieces of leftover furniture and the best of all—our new 1,100 sq.ft. office only 37 feet from our current 185sq.ft. office. We are gaining a LOT of space and keeping our AWESOME location (instead of three doors away from the Jimmy John’s east of OC, we are snuggled right up next to it. Mmmm. Free smells.)

Tim put a lot of in-progress pictures up on his facebook, but in case you’ve missed the awesomeness we’ve planned out our new space on paper and we’ve got the final photos from after the construction. So exciting! We just can’t wait to put all of our stuff in there.

The Intern Remix

By Elyssa Dolinger on May 12, 2010 at 8:00 am in General,Video

We were so excited to welcome our new interns and get to know them that we just had to share. Be sure to check out our video to see our interns introduce themselves. Remix style.

5 FREE Twitter Backgrounds

By Elyssa Dolinger on May 1, 2010 at 12:00 am in freebies,General,Social Networking

5freeHow would you like to be the proud, new owner of a custom twitter background? Rather than go through the pains of background design, why not let a professional take care of it? For free even! (That’s gratis, free of charge, for nothing, complimentary, on the house.)

In the Month of May, we’re offering 5 free twitter backgrounds.

So what do you have to do to get your mitts on a brand new, bouncing baby background? It’s as easy as 1, 2…

1) Follow @tandswebdesign

2) Simply tweet

Just entered to win a #FreeTwitterBG . Just follow @TandSwebdesign and retweet. http://bit.ly/aqt6Om

At the end of May we will be contacting the winners VIA twitter about their new background. Until then, enter the contest, sit back, tweet and enjoy some of our previous work:

screen-shot-2010-04-29-at-22105-pm
@littler4bbit

screen-shot-2010-04-29-at-22456-pm
@emilyspirek

screen-shot-2010-04-29-at-22558-pm
@cochristonline

screen-shot-2010-04-29-at-22525-pm
@timjpriebe

screen-shot-2010-04-29-at-24339-pm
@tandswebdesign

Cooookie?

By Elyssa Dolinger on March 18, 2010 at 4:03 pm in Comic,General

We always thought it was funny that those little bits of browser information were called cookies.

I dedicate this little comic to Cookie Monster. Even though they make you eat cookies in moderation now, you will forever hold a place in our heart.. I’ll save an internet cookie just for you, big blue.

cisforcookie

(Click to view full size.)

Email Etiquette Part 2

By Elyssa Dolinger on March 10, 2010 at 4:23 pm in Email

Continuing on with our Email Etiquette series, I have 3 quick tips. The sandwich method, active voice and the use of sentence case.

First, the sandwich method. It goes a little something like this:

compsand

When you sandwich your critique or bad news in good news, it makes people a lot more receptive to what you have to say. It looks less like an attack and more like the helpful-yet-unsavory idea it is meant to be. This isn’t a way to disarm people so that you can sucker punch them; this just a little something you can try to build respect and trust with a person you may not speak to a lot outside of email. Grease the wheels with politeness and things will go a lot smoother.

Another subtle change that can make you more personable is the use of active voice. Oh no. Grammar. Active voice just means that you try to use use the active role of a verb whenever possible.
Example:

Your updates will be processed by the end of the week.

My Response?

WebMeh. A robot sent me a response. I wonder if my updates will ever go through?

We will process your updates by the end of this week.

My Response?

Web I look at the calendar. Oh? Really? The end of this week? That’s fast.


An easy way to tell the difference between active and passive voice? Look at who the subject is. In the first example, it’s the ‘updates.’ The updates are processed. In the active example ‘we’ process updates. It’s a lot more personable when there is a person involved.

My last tip should be pretty self explanatory. PLEASE DON’T USE ALL CAPS FOR YOUR ENTIRE EMAIL. EVEN IF YOU ARE NOT SHOUTING, IT SOMETIMES APPEARS THAT YOU ARE.

Twitter isn’t so scary

By Elyssa Dolinger on February 10, 2010 at 6:44 pm in Social Networking

Twitter isn’t exactly new. People have been using, abusing and even making a living off of Twitter since it’s inception in 2006. In an instantaneous world, four years might as well be a million. It’s like an art form that I all-of-a-sudden need to know and I’m not even sure why. There are Twitter experts and then…there are people like me.

tweettrans

Hi. My name is Elyssa and I am Tweet-impaired.

The first step to using Twitter, I think, is to understand what it is. Twitter is like a Facebook status update. It’s like blogging in 140 characters. It’s like swimming in a pool of millions of people or stepping into a chat room with everyone in the world invited. It is like all those things, but not exactly any one of them. Twitter is Twitter.

So why is it useful?

It’s real time, instant action. You can follow the news not only by following a news station, but you can search for a topic and get real time information. Remember the attempted Iranian Revolution? As a fledgling twitterer, I watched with morbid fascination as people tweeted and re-tweeted which embassies were open, what streets were not safe and quotes of remembrance about why they were doing what they were doing.

People use Twitter like a community. It’s faster than a forum, and doesn’t require everyone to be present at once to hold a conversation like a chat or instant message. It’s a happy in-betweener. Like leaving a note for someone or sending a text message.

Businesses use Twitter to prove that they’re not robots. When you get a response from a large corporation, a non generic direct response, you’ll definitely start to feel important. @jetblue and @homedepot are actually pretty good at this.

So what can you do with it?

Make it easy to succeed. There are programs out there (like HootSuite, TweetDeck, or Twhirl) that make Twitter less overwhelming and more manageable. These applications will even let you load your Facebook on there (and other social sites) for cross posting…if you’re into that kind of thing. You can even use these applications to search twitter so that you can look for conversations that you might be interested in, or you might even find a conversation about you or your business.

Keep it short and sweet. You can post links/photos/videos you found useful or interesting in your community or even in the world. This is best done with the help of a URL shortening service like TinyURL or Bit.ly. It’ll help tidy up your tweets so that you can explain your link. People like to know what they are clicking into before hand, especially if they are at work.

Use your hashtags. As mind-boggling as they are, hashtags help tweeters follow a thread of conversation and discussion trends. It’s similar to tags on a blog. If you use them, it’ll help more people who are interested see what you have to say.

Yeah, I know. I’m late to the party. And I still feel like a fledgling Tweeter, but somehow Twitter is a little bit more understandable. Like any social media, the most important part is making connections. So get out there and make some friends.

Web Design is not Print Design

By Elyssa Dolinger on January 18, 2010 at 5:11 pm in Design

art

It’s easy to think that design is design and that there isn’t a whole lot of difference between the types of design.

For the most part this is true. There are definitely fundamental principles that translate across genres. Principles like the golden ratio and the rule of thirds and all of that good stuff. (If you’re a designer, even if you don’t know the name you’d know the rule.)

Aaaaand then there are concepts that definitely don’t translate.

Resolution

The great thing about web design is that you don’t need high resolution photographs. If you are buying stock images, this means you can buy the smaller (and usually cheaper) images.

As far as print goes, the higher the resolution, the better. You don’t deal with resolution as much in print design except for the dire need of a higher resolution image. Working in a higher resolution file means working in a larger file. Working on a larger file means higher processing needs.

Color Formatting

These are CMYK

Cyan, Magenta and Yellow printing pigments.

CMYK and RGB are two different animals. I could tell you one is additive and one is subtractive, but that doesn’t mean a whole lot to most people. It makes more sense to me to realize that one is light based (the light from the computer screen) and one is pigment (or ink) based.

It is very difficult to match print and web colors since they work with two entirely different color systems. Metallic colors are difficult to achieve, but more difficult for print unless you have access to metallic inks.

Fonts

aliasingIn large blocks of text such as books, brochures and newsletters, it’s advised to use serif fonts for ease of reading. The serifs have a way of directing the eye and helping you keep your line placement. It’s especially beneficial for the dyslexic because of the more obvious differences in i, I, l and 1. (Yeah those are all different characters.)

On the web, it’s advised that you don’t have large blocks of text. Sometimes it’s unavoidable, but for a lot of sites the fewer words, the better. The more you break up your paragraphs, the better too. So the need for serifs is pretty much gone.

There are also some technical benefits to using sanserif fonts. For example, sans serif fonts can be sized smaller than serifs and still be readable. There are also some aliasing issues (hard pixilation) with windows and serif fonts.

Organization

On the web, it is best to have your navigation available on every page so that you can navigate anywhere from anywhere. The print equivalent would be to have the table of contents on every page. It certainly takes up space.

Good design transcends browsers and platforms and material, but unfortunately a lot of times it is defined by them. Since the very make up of Print and Web are different, by definition shouldn’t the design be different too?

Older Posts »