Pixalt Blog

Website Launch: SweetTrio Online Store

I am pleased to announce that we recently launched an ecommerce website for SweetTrio, a gourmet apple and chocolate store in Grafton, WI. Besides the regular features, the site includes live UPS shipping prices and the ability to administer products/details. It is also already performing well in search engines, and has taken top 5 Google rankings for almost 1/2 the products.

Congrats to SweetTrio on their first ecommerce website!! You can see it live at www.sweettrio.com.

Pixalt Launches Website for the Movie 'La Soga'

I'm pleased to announce that today we launched a website for the movie "La Soga." Check it out at http://www.lasogamovie.com. It's a beautiful film (think "City of God") that was shot in the Dominican Republic and stars New York actor Manny Perez.

The La Soga website features streaming video and an AJAX photo gallery, which updates asynchronously but still allows the web browser's "Back" button to work correctly.

A few credits where they are due: this site was designed by Archetrope™ Design and produced by Steven Holtzman from Holtzman Films.

Usability Lessons From the iPhone

I don't think I've been in a meeting about a website or application in the last couple years where someone hasn't mentioned the Apple iPod or iPhone. I am starting to hear "We want the website to be simple, like Apple's stuff." as often as I hear "We need our site to rank high on Google." But why does everyone love the simplicity of Apple products? Behind this praise is a great usability lesson that can be applied to websites and applications.

The funny thing about this is, the iPhone is not a simple device. It does some very complicated things for a phone: you can surf the internet, send email, find restaurants, take photos, listen to music.... sometimes all at once. And then you can buy an application that makes light saber sounds while you update your FaceBook profile (a good Jedi Knight is always plugged into his/her friend network). If the iPhone were a simple device it would have nothing but a clock, a phone, and maybe an address book. It is definitely not that.

Why, then, does everyone think the iPhone is so "simple"? Because what they really mean is that the iPhone is easy to use. All these great features might be hard to master on other phones, but even my grandmother could use an iPhone to check her email (and as research for this article, she will). In programmer-speak, it's a device with high "usability".

Why is the iPhone so Usable?

Let's look at the main iPhone interface and try to figure out why it's so easy to use. Here's a picture and quick description for anyone who hasn't seen one yet.

The iPhone
Select an application by pressing an icon. To switch to another application, press the big button at the bottom and tap your next choice. No other menus, buttons, or shortcuts are possible.

You're done writing email? Press the big button.

Finished searching for local sushi restaurants? Press the big button.

It's pretty easy - when you want to switch programs, just press the big button and then tap the next program's icon. With most phones and PCs, this task is far more complicated because users have to look for the 'exit' button or decide which menu to open. The iPhone washes all this confusion away with one omnipresent button. Is this one button the reason for its great usability? It's an obvious place to start. A highly usable device or website reduces the amount of thinking its users must do, and only having one button definitely accomplishes that.

However, I think that this one button approach is not the reason that the iPhones is easy to use. Think of all the phones or appliances that only have 1-2 buttons but are still hard to figure out (ever tried to set the alarm clock in a hotel room?). If you look underneath this magical button, you find that the real reason the iPhone is easy to use is it perfectly models the user's thought process. The interface presents controls that correspond to the user's chosen task and current thoughts in a simple and easy to understand way.

Compare the iPhone to a PC

That might sounds like programmer babble, so let's consider an example. As a user, when you want to switch tasks on a phone or computer you have to (1) exit the current program and then (2) open a new one. The iPhone corresponds perfectly to these steps: (1) press the big button and then (2) choose a program. Other phones and computers don't quite have this correlation, which forces you to think more. If I'm using Excel on my PC and want to open Outlook, here are my options to accomplish Step 1:

Navigate to my desktop and look for the Outlook icon.
Go to the Start menu and look for Outlook in my programs list.
Press the hot key on my keyboard that I assigned to Outlook.
Close Excel (wait...should I save?).
Try to remember if Outlook is open and then press alt-tab.
Look at the Taskbar to see if Outlook is open and then click on it.

My PC seems to require a lot more thought to complete this task than the iPhone. Only option #4 is anything like Step 1, but it will distract me with messages about saving my Excel file. Option #3 is also pretty good, which shows why people like shortcuts (no need to deal with all these other steps). But none of these really match the task and thinking in Step 1. Plus, many of them require multiple steps or special configurations (shortcuts have to be created, for example). Deciding which of them to pick and how each relates to my task makes me ...have to think. And thinking is work, which means I will forever say that using a PC is harder than using an iPhone.

Conclusion: Learn How Your Users Think

Let's review what we've learned:

The iPhone is a pretty complicated phone, but people find it easy to use.
It is easy to use because you don't have to think very much - it takes minimal effort to choose what you want to do, and then do it.
It accomplishes this because its interface matches the user's thoughts and goals in a simple and correct way.

When people crave "simplicity" in a website or application, what they are really seeking is a highly usable interface that reduces the amount of thought users have to put into each action. Accomplishing this means that people find your software easy to use and full of delightful features. We don't want simple devices or websites, we want ones that make complicated and amazing tasks very easy.

Usability at it's finest, and the iPhone definitely deserves its kudos.

Pixalt Launches Shopping Website For Frankly Wines

I am happy to announce that last Monday we launched a new website for Frankly Wines, a wine store in Tribeca, New York City. You can view it here: Frankly Wines Website

The site houses its own shopping cart and ecommerce system, and synchronizes with a POS inventory system that the store was already using.

Congrats to Frankly Wines on their new website!!

Security Part II - Passwords

This is Part II of an ongoing series in basic internet security for web users. Last time, we talked about email accounts and how important it is to keep them secure. This post, I want to talk about passwords - how to keep them "strong" and the best practices for creating them.

In short, there are 3 habits to keeping your online passwords secure:

Use a unique password for every important online account (banks, etc.).
Create “strong” passwords, which are harder for hackers to obtain.
Look for “HTTPS”, which ensures that your transactions are secure.

1. Important Accounts Need Unique Passwords

This point relates somewhat to the previous security post. While most of us have one password we use for every website, doing so is very dangerous. If a hacker were to steal your password from one website, that person could probably login to every site where you have an account (especially he or she knew your email address). Think of it like this - if you had your life savings stashed in 10 different safes, would you give them all the same combination code?

If you want more motivation, think about how many people work on or around the average website. For all your online accounts, do you trust every programmer, subcontractor, temp worker, or janitor who works for each company? You might be surprised at how accessible your information is - personally, that scares me more than the prospect of an outside hacker stealing information.

To keep your web activity secure, every online account you have with a bank or financial site needs a unique password. No exceptions. As I mentioned last time, your email needs a separate password too.

I know remembering all these passwords won't be easy. However, there are a few tools to help you out. For example, CP-Lab makes an encrypted software program to store your passwords. You can even copy them to clipboard for easy pasting into a login page. Or, there is the Handy Password Manager, which has similar functionality. Both of these utilities sell for around $30.

2. Strong Passwords - Why Websites Make You Enter Weird Characters

Many sites require numbers, non-text character, and/or minimum password lengths. Annoying? Yes, especially if the addition doesn't fit into your normal password that well. However, it keeps your password from being a common word or phrase, which is the next important part of password security.

You might think that strong passwords are important because the extra characters make your password your harder to guess, but that’s not the main purpose (although that might helper keep your kids out of your online accounts). The real benefit is that they make your password less likely to be in a hacker's "password dictionary". If you're willing to listen, I’ll explain why you should care about that.

[A small aside - please accept my apologies for the overly technical explanation in the following paragraphs. If you're not interested in the gooey details of strong passwords, please feel free to skip to the next section. Just remember that passwords for EVERY critical website should include numbers and non-text characters, whether the site requires them or not.

Password dictionaries come into to play with websites that store what are called “hashed” passwords. Instead of storing passwords in plain text, these websites use hashing functions to turn them into long strings of letters and numbers. These new strings can’t be decoded – if I told you the hashed version of my password for this blog, you couldn’t decode it into my actual password. How does a website log you in if it doesn’t know your password? It hashes the password you provide when you login and compares it to the stored version (which is also hashed, remember). You can learn more abut a popular hashing function called SHA1 here.

OK, here’s how this applies to strong passwords. Hackers, of course, know about hashing and have found a countermeasure. These are actually only a few hashing functions around (they’re pretty hard to write – the few that exist were written by MIT and the NSA). Hackers realized they could create databases that store common passwords and their most common hashed versions. Then, when they gain access to a website's password database, they can look up the hashed password in their database and find your real one. This is why you need a strong password - you are ensuring that your password is not a common word and is therefore less likely to be in a hacker’s database.

[Another side note - for any programmers reading this, I know I am ignoring a few other security techniques, like password salts. Those are a bit outside the scope of this article, I am merely trying to show why strong passwords are a good idea for end users. If you want more information on password security, Keith Brown has written a nice article in MSDN.]

3. Always Look for 'HTTPS'

OK, this is the last habit to learn. HTTP is the protocol that makes the internet work. HTTPS is just like HTTP, but it operates over what's called SSL (Secure Socket Layer). Whereas HTTP works in clear text (that anyone could read), HTTPS in encrypted. The details of how this works are beyond this post, for now just understand that HTTPS ensures that your web transaction cannot be viewed by anyone but the website for which is it intended.

The reason you should look for HTTPS when entering important passwords is that the internet is, by definition, a very public place.. Your transmission must travel through a number of networks to reach its destination, exposing your password to more people than you might like. Using HTTPS makes your password unreadable during this transmission.

Making sure you do this isn’t hard. Whenever you login or enter your credit card number, make sure the web page is using HTTPS. This should be pretty obvious - the characters will be written in the address bar (i.e. “https://www.yourwebsite.com”). Also, your web browser may also display a padlock or change the color of the address bar for HTTPS sites.

Not all sites will use HTTPS for passwords, but important ones will. If a website doesn’t use it, make sure you are using a password that is not connected to any important accounts.

Conclusion

Protecting your passwords is far more important than most people think. Luckily though, it isn’t really that hard. These three habits can help you improve the security of your online accounts and identity.

Happy web travels.

The Benefits Of Detailed Planning

As I write this, there are thousands of designers and developers making websites. They are hard at work with coding, graphical work, and object creation. And they are wasting their time, because a large part of the work they're doing will eventually have to be changed.

Question: What is the single most important tool for a web designer?

Answer: A pencil.

The BIGGEST mistake in web design (and probably the most common too) is a lack of planning. It's a very hard urge to fight - you get excited about a new site or great idea, your client is itching to get started, and your schedule is finally clear... so you launch into it. A flurry of designs and database code later, you've got a good solid version of your site finished. And then your client says the scariest words a programmer ever hears:

"I was wondering how hard it would be to add [insert feature no one has thought of yet]?"

O-o-o-o-o-p-s. Adding that feature will require reworking three database tables, two layers of application code, and the web page itself. The whole process will take 3 days, whereas it would have only taken one day if the designer had known about it from the beginning. This pattern eventually leads to another popular phrase, but this one will come from the designer:

"This client has NO idea what he/she wants and keeps changing the project specs. I'm redoing things constantly!"

Who's fault is this? It's the designer's fault. Well, it may be the project manager's fault at a bigger firm. But SOMEBODY messed up, because there is an awful lot of programming going on without the proper blueprints, prototyping, and specifications. Programming a website shouldn't begin until the following has been accomplished:

A thorough analysis of the client's business and needs.
A diagram of the entire website, including all links, menus, and functionality.
A graphical mockup of AT LEAST 2-3 main pages in the site (all the pages would be better).
A complete class and database diagram, if the site has with significant application features.
An analysis of the future of the website and features. Will it need a mobile browser or web service? Integration with backend accounting system?

Anything less and you should be asking questions (whether you are a programmer or a client). As an example, a lot of web design firms instead use this model when designing websites:

Pick a domain name and register it.
Sign up for a hosting plan.
Approve one of these three site designs we made.
Write your content and give it to us.
Pay us, we're done.

After this process, you will probably have a website. However, over the next few months you will also probably have some problems with the site - new features you want, graphic ideas that no longer fit, pages you didn't think of, etc. All of these issues are pretty straightforward, they could have been discovered with some forethought and planning. Instead, they'll take 3x the amount of time they should because the designer must now destruct what he/she built and then construct the new functionality in place. Imagine building a house and then trying to change the height of the ceiling in the living room. Does that sound ideal?

Buy a good pencil and eraser, they'll be the best web design tools you own.

Security Alert: An Easy Change to your Router Can Help Protect You From Phishing Sites

In the last few weeks, a significant flaw in the way traffic is directed on the internet has been uncovered. While ISPs and network administrators are scrambling to fix the problem, there is still a risk for the average internet user.

A Quick Technical Lesson

Internet domains (i.e. "pixalt.com") are masks of what is called an "IP address", which is basically a phone number for websites. When you type a website into your web browser, your computer or router must lookup the IP address of that site from a DNS server. Your internet provider (Verizon, Timer Warner, etc) usually handles this for you.

The Problem

A flaw has been found in the way these DNS lookups occur. This flaw could let a malicious attacker manipulate a DNS lookup and redirect you to a different IP address, which would then lead you to a different website than the one you requested. The website at that address would probably look similar to the intended site, but would collect your financial or personal information.

Are You Vulnerable?

This is a problem that your ISP will eventually fix, and many are doing so as I write this. The current estimate is that about 50% of the servers in the world have this problem. To check if you're vulnerable, use the "Test My DNS" button on this page:

https://www.dns-oarc.net/oarc/services/dnsentropy

The Solution

If you are vulnerable, you need to set your computer to use a DNS server that is known to have fixed this flaw. If you have a home network, you can usually change your router's settings and protect every computer you have. A good choice for this is a service called OpenDNS, which is free and also offers features like adult content filtering. Go to http://www.opendns.com for step-by-step instructions.

You can also learn more about OpenDNS from this article on CNET: http://news.cnet.com/8301-13554_3-9834579-33.html

More Information

For more information, see the following articles:

http://www.nytimes.com/2008/07/30/technology/30flaw.html
http://news.cnet.com/8301-13554_3-10002392-33.html?tag=bl

Security Part I: Email Accounts and Why Google and Yahoo Are Bad

This is Part I of a new series on basic security for the average web user. While most of us recognize that the web is an unsafe place, many people engage in practices and habits that put their personal information at risk, often without even knowing it. This series will highlight a few of these areas and provide some easy solutions.

None of these are catch-all solutions - internet security is more a combination of measures than a single solution. Think of each step as way to increase the height of your fence that prevents would-be internet assailants from invading your privacy and finances.

Email Accounts Are a Crucial Security Barrier

Your email account is usually the gateway to your online accounts, and control over it is crucial to keeping your information safe. Many sites - including Ebay, Paypal, banks, and trading sites - will let you reset your password if you have access to the email registered with your account. Therefore, your email account is one of the most important pieces of your internet security. Someone with access to your email can gain control of almost every online account you have by resetting your passwords one by one.

A Real Story

A friend of mine was victimized in this way. Her Gmail password was stolen, and the hacker immeadiatley changed the password on her account. She was completely locked out of her email, and the hacker started to change the passwords on her other online accounts - Ebay, PayPal, and others.

This, as you can imagine, was a horrifying experience for her. She was fortunate to get out of this without any significant damage (more on how in a minute), but most of us will not be so lucky.

The Problem With Yahoo, Gmail, and Hotmail

You might wonder why the title of this post singles out Yahoo, Google, and Hotmail. These are good companies with solid products, I am not suggesting that there is a problem with them or their services. There are, however, two fundamental problems with using their email addresses for sensitive online information and financial data:

Most people know how to login to these types of accounts. All you have to do is go to yahoo.com, hotmail.com or google.com.
If someone gains access to your account and changes your password, it will be very hard to get one of them to change it back for you.

The first problem is somewhat elementary - having an email account from a popular provider means most people will know how to login if they do get your password. Getting an email account where the login page is more obscure (or better yet, is under your control) is much better choice.

The second problem is the major one. Have you ever tried to contact customer support for Yahoo or Google? Do you think they even have such a department for their email subscribers? My friend tried to call Google for help with her problem and was told to press 7 for customer support. After doing so, she heard a message that Google, at this time, does not offer customer support. Essentially, there is little or no recourse available through these companies for a stolen account. You get what you pay for.

In fairness to these companies, the support may improve in the future. But as of right now, I consider this problem a serious security risk for critical internet accounts and information.

Solutions and Best Practices

My friend was fortunate to know someone who worked for Google and who was nice enough to BEG the right people there to reset her password. But most of us will not be so lucky, and need to utilize the following two solutions:

Take control of your email hosting.
Protect your password.

Taking control of your email account is not as hard or expensive as you might think. A good option is to get your own domain (i.e. "www.yourname.com") and manage your email account yourself. Otherwise, you can pay for better email hosting through a variety of web hosts. These solutions have two important effects that can curb the problems above:

Logging into your email account from a web browser will be harder. A hacker would have to guess your mail sub domain or application path - "webmail.yoursite.com" for example. Depending on your needs and host, you might even be able to disable such access.
If someone gains access to your email account, you can handle the problem yourself. This is far more important than #1 and could mean the difference between quickly stopping a hacker in his tracks and being paralyzed while he slowly changes the passwords on all your online accounts. If you are paying a company for email hosting, they will be much more responsive and helpful than the companies that give accounts away for free.

Getting your own hosting is pretty easy - GoDaddy, Yahoo, and other web hosts all have plans where you manage your own accounts. Your ISP (Verizon, Time Warner, CableVision, etc.) may have them too. And it's not that expensive - most of these plans, even with your own domain, cost around $50-$70 a year, and accounts through your ISP are probably included in your monthly fee. Alternatively, another option is to find a friend who has his or her own domain/hosting (even if it's for their business).

Protecting your password is the subject of my next post. To give a quick summary, make sure your email account has a unique password and that you never give it out to anyone you don't trust. Also, don't ever send a password via email - there are a lot of people between you and the recipient that can read the message.

More to Come

Taking control of your email is a good first step, but there are some other easy ways to increase the security of your online world. Stay tuned for Step 2 on passwords.

The Legend of the 'Average Web User'

There is lot of fuss made in website development meetings about the "Average Website User". I often hear statements like "Studies show that the average web user doesn't like drop-down menus.", or "The average web user ignores most sponsor ads if they are placed in a sidebar." Or there was the marketing exec who looked me in the eye and said, "The average web user uses Internet Explorer, not Firefox."

I'm going to let you in on a secret: there is no average web user.

Yes, There Are Average Behaviors

Now I have a bit of social science training, so I should add that I do not mean that average/median behaviors do not exist. I'm sure that a certain percentage of us hate or misuse drop-down menus, and Internet Explorer had an 85% market share when my marketing friend made his comment. These numbers exist, and studying them as general web trends is worthwhile to some degree.

The point is that the designing your website towards these median behaviors is a poor strategy. Instead of worrying about these statistics, you should instead focus on your actual audience and the context of your website.

The Average User is Not Using Your Website

Every website, even the big ones, have specific markets and audiences they serve. Each of these audiences is unique and uses the internet differently. Therefore, your website should be designed for YOUR users instead of a theoretical profile of median behaviors - it is unlikely that your audience consists of too many people that match the "Average User" profile.

For example, drop-down menus might be a poor choice if your site offers information about retirement benefits for senior citizens. In general, older users probably have a harder time with them than younger users. But if your site is a directory for finding BitTorrent videos and concerts, drop-downs might provide a nice look and functionality your audience will enjoy.

I'm not trying to generalize based on age or site content, that would be impossible. I'm merely trying to show that your audience is most likely different than any "Average User" statistics might tell you. 55% of people might misuse drop-down menus, but 95% of the users of your site might find them helpful and pleasing.

Context is More Important Than Median Behaviors

Besides analyzing your audience, it's also crucial to remember that every site is unique and has its own experience and context. Is there any proof that the websites used to profile "Average Users" were anything like your website? Keeping with my example, drop-down menus might be great in a certain situation, but horrible in others. Instead of asking what the "Average User" likes, you should instead ask "What will THIS user do with THIS element on THIS page of THIS site?".

This idea of context leads to an important lesson in web design: there is no "right" way to design a website. Websites are much more unique and varied than this idea allows, and there are rarely any ideas that are 100% correct across all situations. There are best practices in most situations and things that are correct in 95% of circumstances, but there are few, if any, universal truths to web design.

Apply This To Your Website: Usability Testing

Instead of worrying about the "Average User", let's worry about the actual ones. Discovering the behaviors and trends of your users takes solid usability testing, which should be done during development. I'll save a complete explanation for another post, but the basic idea is to test your potential designs on real people who are in your general audience. Then, instead of saying "55% of web users like XYZ", you can say "95% of REAL USERS of our website liked XYZ and used it appropriately."

And the next time someone asks about the "Average Web User", please respond that he/she/it has not be heard from in a long time.

How to Properly Design a Website

Welcome to our new blog. I thought I'd start by talking about our web design process. There are too many design companies do things backwards, and your website can be seriously affected by such practices.

Why This is Important

A lot of web design companies start by asking clients about urls, site colors, and hosting platforms. They ask some questions, get a quick idea of what the website needs to do, and shortly thereafter start producing potential site designs.

While that might sounds OK, here's the problem: The best coders and designers in the world cannot make up for shoddy planning.. The above approach will almost always lead to revisions, architectural problems, and missed opportunities for your website. Instead, a web design company should initially focus on the content, functionality, and overall purpose of the website.

Web Design by Pixalt

We start with more fundamental questions. If you went to a contractor and asked for a building they would ask you questions like "What kind of building do you want?" before they asked "Do you want blue or green siding?" We use a similar approach, and it yields websites that are cohesive, powerful, clear. Here's how:

Step #1: Hold On While We Find a Pen

The first thing we do is help our clients establish the purpose, uses, and goals of their website. We ask questions like these:

What is the purpose or goal of the website?
What will your clients and users want from the site? What will draw them in?
What will you and your staff want from the site?

You should know your website's purpose, even if it's as simple as "to give potential customers information about my business." Are you trying to sell a product? Are you trying to attract users and then charge for advertising? A clearly defined purpose is the key to good site design.

Once we've established these, we'll help you think of everything the different groups of people might want to do on your site. What features might attract your target audience and help you build a customer base? Is there a part of your current administrative work that the website could handle? We'll also help you consider the future - what might the site need to do in 5 years?

We can't stress how important it is to spend time on this step, it will be more responsible for the success of your website than any other.

Step #2: Research Your Competition

Every website and business has competition. We will ALWAYS research your competition, and we'll encourage you to do so as well. Researching websites similar to yours will give you ideas for your site, a sense of the experience of one of your users, and a better idea of how you want your information to be organized and presented. You should look at everything from design to functionality. If you like something, bookmark the site or write it down. And if you hate something then write that down too. The more information you can gather at this stage the better.

Step #3: Diagram the Website Site as Best as Possible

By now we will have an emerging vision for your site. But before we start designing and coding, we need a bluperint. Our designers will process all of the information we've gathered and diagram your entire site. Once we have the information, layout, and functionality in place, we'll solicit your feedback. Often this will take a couple rounds of edits. The goal here is to put the best vision of your site together that we can, before anyone writes any code.

Step #4: Visual Design

Now it's time to design the website. Our designers will incorporate your company's logo and branding into potential designs. We typically provide clients with several designs to chose from, and allow for editing and fine tuning as well.

Step #5: Programming

Once you've settled on a design template, our programmers will create your site. We usually set up a temporary location for the site so you can check on the progress. We will also test the site as we go along to ensure that the links, functionality, and design are in perfect working order.

Step #6: Testing

When your site is nearly ready, we put it through rigorous testing. Every link, feature, and page is tested repeatedly to ensute there are no problems. For sites with a lot of features, usability testing is recommended.

Step #7: Launching

After you give the final approval, we'll launch your site. Some sites are launched in stages, depending on their nature and marketing tactics.

Step #8: Maintenance

All websites need to be maintained and edited - very few websites are ever "finished". As time goes on you will likley want to add new sections, update information, add features, and more. We usually build sites with content management system so that clients can do as much of this on their own as possible. Or, we also offer maintenance contracts to do the work for you as needed.

Conclusion: Website Design From The Inside Out

The best websites come when we help our clients think about their website's purpose and goals before worrying about technology and color schemes. Designing a website is like building a house, both are far better with the right planning, blueprints, and foundation.

Also notice that this guide makes little mention of technology. A common mistake is to fixate on a certain technolgy before finishing Steps 1-3 above. Information, functionality and purpose are more crucial, and they often dictate technological decisions. We want our clients focused on goals and substance, not whether their site should be coded with PHP or ASP.NET.