Why mobile sites are good for you and your business

By Chris Engstrom on September 27, 2010 at 3:00 pm in General,Mobile Web

mobile_devicesHi! This is Chris, one of the interns here at T&S Web Design. After working at T&S for about five months, they have finally let me speak publicly. Well, on the blog, anyway!

A couple of weeks ago Adam talked about the key differences between a regular website and a mobile site in his post Websites On The Go. This week I wanted to go ahead and show you a few examples of mobile sites of businesses that are really neat and easy to navigate through. When people are quickly navigating on their phone, they want something fast and easy or else you’ll lose their interest very quickly. Being condensed and organized well makes your site more appealing to the people that will be viewing it.

Keeping your mobile site simple can be difficult when you have a lot of content that you want to put on it. Sometimes, instead of cramming all the content into your mobile site from your main website, it is better to trim off some of the less important things. And if you absolutely can’t get rid of anything then the next best thing is to have a menu that is set up very well so it is easy to navigate.

The following are a few sites that I think have done their job right. There is a lot of content on these sites but they organize it in a way that makes it easy to get to where you want to go. I’ll list a few things that stand out that I like about each site and you will find a couple things that are consistent across all the different sites.

Walmart

walmart_mobile

http://mobile.walmart.com/

  • Search field on top
  • Store locator
  • Nicely organized menu
  • Link to main site

BlockBuster

blockbuster_mobilehttp://www.blockbuster.com/mobile

  • Search field on top
  • Major categories and store locator on top nav bar
  • Popular movie rentals are showcased
  • Link to main site

IMDB

imdb_mobile

http://m.imdb.com/

  • Advertising their app on top
  • Search field on top
  • Major categories on main bar
  • Most-viewed movies are showcased
  • Mini menu at the bottom
  • Link to main site

Facebook

facebook

http://touch.facebook.com/

  • Main tabs on top
  • News feed automatically selected so you can get up to date quickly
  • Status update right on top
  • Option to view older posts
  • Download link for Facebook app on the bottom

Twitter

twitter

http://mobile.twitter.com/

  • Download for Twitter app advertised on top
  • Refresh button on the top
  • Ability to tweet right away from top form
  • Main tabs towards top
  • Shows most recent tweets
  • Option to see more tweets
  • Ability to turn images off

So now you’re still probably asking yourself, “Why does my business need a mobile site?” Well, just like how it’s easier to view Facebook or Twitter as a mobile site on your phone, people want the same ease of use with your website.

Most people are familiar with phone applications, and minus a few differences, mobile sites are created with the same concept as apps; they are faster to use with more accessible info. Everyone is always looking for the next best thing that uses less brainpower, so creating a mobile site could be a huge asset to your business. If you look at the site examples above and follow the techniques as a base to your mobile site, users are more likely to stay on your site, which will in turn benefit your company. And if you need some more convincing, T&S is always willing to answer any questions you have! info@tandsgo.com

Die Mother Printer, Die.

By Emily Spirek on September 24, 2010 at 9:18 am in Fun Friday!,General,Video

After being a faithful printer for several years, our HP all-in-one slowly failed us until a power outage finally took its life. By that time, we all resented it anyway, so we made a little video to show our disdain.

Many should recognize the reference to the Office Space printer scene, but we had Erick Alexander Music create a custom and more appropriate song for our video.

We definitely have no regrets and it was actually quite liberating. In fact, we’re thinking of framing the bat and hanging it in our office. Also, please don’t try this at home (we had highly trained actors).

Let others tag your Facebook page photos

By Tim Priebe on September 13, 2010 at 1:21 pm in Social Networking

evilfacebookcolor

It turns out that the default setting is that others cannot tag pictures you post on your business’s Page. They can for your personal profile, but not on your Page.

Luckily, a Facebook user figured out the following method, and we were able to use it on our Pages here at T&S. Works way better than a baseball bat.

Follow these steps to allow users to tag photos on your business’s Facebook Page:

  1. Go to your Facebook Page.
  2. Directly below your Page’s Profile photo, click on “Edit Page”.
  3. In your browser’s URL, note the number that comes AFTER ‘edit/?id=’ That number is your Page ID.
  4. Go to this URL, but change REPLACEME to your Page ID from step 3: http://www.facebook.com/pages/edit/app_settings.php?id=REPLACEME&aid=2305272732
  5. Click the setting for “Allow All Fans to Tag Photos”
  6. Save your settings.

Not too difficult, and good to know!

Websites On The Go

By Adam Booth on September 10, 2010 at 4:30 am in General

Smartphones

In the technology world, mobile phones have seen the largest advancements in the shortest amount of time when compared to desktop computers. Recent phones have become incredibly fast and most sport high resolution touchscreens which makes using them much more practical. With these advances, mobile browsing has become a viable option for many people on the go.

Here at T&S, we try to stay on the cutting edge and offer mobile versions of websites that we create. A mobile website is designed separately from the original site with a few things in mind including larger buttons and larger text. We test all our mobile websites with the newest versions of iOS (iPhone/iPod Touch/iPad), Android OS, Blackberry, and Windows Mobile phones.

The two images below illustrate the differences between a mobile website and a full website like you’d see on your computer. On the mobile website, the text has been resized so that it can be easily readable on a smaller screen and links/buttons are larger so that they can be easily tapped by a finger instead of a mouse. This website has been optimized for phones with slower data connections and does not show all of the unnecessary content such as tags on the right side of the page.

Desktop Version:

(Screenshot of a section of the website)

Tim Full Site

Mobile Version:

(Showing the full length of the scrollable page)

Tim Mobile Site

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.