Debis on your landing page?

First of all what exactly is a 'Landing Page'? You have probably heard the phrase talked about around the water cooler at work or on a tech article. A landing page is a web page that is specifically designed to be a first impression for people navigating to a web site from an ad or from a search query. A landing page is not a home page with lots of links and brand recognition. It is a place for the user to find out a little bit more information and to complete a transaction or at least begin the process. Landing pages are very focused and tend to be specifically targeted at a user group or demographic.

Attributes of a Landing Page:

• Limited Links to the rest of the site - There is no need to have lots of links to other products or services. This is supposed to be designed specifically for the ad.
  
• Limited Branding - This page should be devoted to the product or service advertised. There is not enough room for a lot of corporate branding.
  
• Limited references - Including references or testimonials for other businesses or customers is a good idea but don't over do it.
  
• Use same wording and call to action as in the ad - Make sure the ad and the landing page share the same wording, images, and product or service. If these do not match up the potential customer feels cheated or swindled.
  
• Relevant and Interesting copy -The text should not be too short or too long. Some people like to read more so have enough text for them but high light the important stuff for people that do not want to read a lot.
  
• Call to action repeated every so often - There needs to be a call to action or a way for someone to take the next step in the process. This might be to buy a product, sign up for a service, or download a white-paper.
  
• Secondary call to action - If the customer is not convinced of their need for the initial call to action give them a secondary option to complete.
  

The Future of Internet Connected Appliances

Why should my washing machine be connected to the Internet? Why should any appliance be apart of your home network? In this day and age it seems like everything has a WiFi chip in it. The truth is you will start seeing even more WiFi enabled devices as the technology improves. The benefits of such connectivity are becoming more and more recognizable.

Next Generation Devices
If your refrigerator can email your phone while you are at the grocery store and tell you that you are out of milk you might be able to save some gas money and the hassle of going back out. If your oven is connected to your network it could start preheating to the correct temperature when you pull up a recipe on your iPad or your refrigerator could pull up a list of recipes based on what you have inside. HVAC systems can also benefit from connectivity. They would become smart and be able to prepare for colder or warmer temperatures in the forcast. Laundry systems could use energy more efficiently by waiting until off peek hours to use electricity.

Futuristic Connected House
A less practical but totally futuristic feature could be a simple twitter client built into a toaster or a microwave. This feed or your email or stock prices could follow you around the house and show up on any device that has WiFi and a screen. You could even watch your favorite tv as you are getting ready in the morning - it simply follows you around the house. If these devices have built in web cams you could video chat unobtrusively from anywhere in your house. Your electric car could also be connected and it could preheat before your morning commute or it could download your favorite podcast before you leave.

For more information check out LG's SmartHome system

HTML Forms: Capturing User Input

Old Techniques
On of the most frustrating thing to do on the web today is to fill out forms. How many times do you have to enter your address or phone number? Most web developers don't really think about this too much. They create and HTML form for the data they need. Some add in some JavaScript to make it a little easier to fill out. Some break up the form into smaller parts or suggest certain input based on already entered data. Others take advantage of location based technology to help fill out forms. The bottom line is there has to be an easier way to do this. There have always been form auto complete add on as long as I can remember but they don't always work. First you have to be on the same computer that you set up the auto complete on. What if more than 1 person uses that computer? What if you don't want that information available to anyone that uses your computer?
New Techniques
Some of the new solutions try and address all of these issues. One really cool technology allows you to sign in with some kind of social network account and that website will pull information via APIs from your profile. This will autocomplete a lot of stuff for you and make your life much easier. You don't have to worry about being on a different computer because everything is stored in the cloud. There are some security concerns with this process. Once you log in can you control how much information this new website has access to? Do you want them to have your cell phone number or just your home phone or maybe no phone. Which email address do you want to give them? This might sound like a good idea at first but there are a lot of other issues that arise.
Random Idea
What if there was a way to log in to a site and create a profile of your contact information. Name, address, phone numbers, etc. Then when you come across another site that has a form just log in to the original site and then pick a profile or drag and drop certain items onto the form of the new site.

Web design for all

Most people want what they make to be seen or used by as many people as possible. Some people however will only target the large percentage of the population that do not need any special access. Is this fair? Is it a smart business decision? The quick answer that most people would give is, NO -especially for web design.

Web Standards and Accessibility
Standard HTML and CSS provide all of the necessary tools to make any web site accessible by anyone regardless of disability. Why then are there tons of sites that are not accessible? For one people are not aware of all of the tags and functionality of HTML and CSS but they are also not aware of all of the different disabilities. There are many different disabilities from physical to mental. HTML can not address everything but it is a framework that other technologies can use to deliver content to the end user in a format that they can understand. For example, you are probably reading this blog post using a standard web browser but someone who is blind does not have that luxury. They must use a screen reader or a braille printer.

HTML Tags that help with accessibility
You might be surprised after reading some of these since you are probably already familiar with at least some of them. Adding these extra tags does not take that much more time and the users that rely on these assistive technologies will love you for it.

<> - This allows the screen reader to read headers for a table
<> <> <> <> <> - This allows the screen reader to read headers first in case the user wants to skip to something they are more interest in
<> - To show emphasis on a word or phrase
< src="" alt=""> - A way to describe the image if the user is blind
<> - The text inside the a tags needs to be descriptive of the link not just "click here."
<> <> <> - Ordered or Unordered lists give structure to data and allows the screen reader a better way to navigate multiple lines of data.




This is probably my new favorite error message.

Typeography on the Web

Why is it so hard?
You open up Microsoft Word or fire up Adobe Photoshop and there are hundreds of fonts available to chose from. Why are there so few choices on the web? Well fonts are rendered in the browser so the end user has to have the font installed on their system for the browser to know how to render and display the font. System font differ from computer to computer. Some people might have a font installed because they purchased a software that loaded the font on their computer while some one else might not have the font. So the challenge is how do we get the fonts and all of the images and algorithms that make up a font transferred to the client? It is easy enough to transfer some files from server to client but the problem is the fonts are copyright protected and we can not just send the font files all over.


Old Hacks

There are a couple of ways people got around the limited number of web fonts available. One, they could right scripts that detected what OS and browser a client was using and then set a specific font for that environment. This still works but it does not give the developer complete control over how the site looks. One font might render slightly differently on a Mac versus a PC.
Another option was to create images of the text in Photoshop or another image editor. The developer would be able to use any font that they had on their system and they would not have to worry about where the client had that font installed. This works well and is great for design but is horrible for accessibility, usibility, and updatability of the site. Screeen readers can not read images, the text can not be copied, and it takes twice as much work to update a web page if the developer has to recreate an image every time they want to change a word.

New techniques


There are several easier was to use cool new web fonts on the web today. These solutions are not perfect but there are a lot of smart people working to make this a universal standard that will work for any browser on any platform. Even though @font-face has been around since CSS2 it is making stride in CSS3. With CSS3 @font-face, which allows the browser to download the appropriate font from the web server, can now use the .tff and .otf font standards. The problem is that most of the fonts that have been made for this format are not licensed for web use. Remember fonts take hundreds of hours of labor to make sure they look good in any platform at and size and at any resolution.
Google also has a service called Font Directory that allows you to embed a link to fonts hosted on Google servers so that the client does not have to download anything special. http://code.google.com/webfonts
There is also a cool project called TypeFace that uses JavaScript to render text. This does not work in all browsers but it is a cool open source project that aims to tackle this issue. http://typeface.neocracy.org/

Web Standards

Why are web standards important?
Standards allow a programmer to learn one set of APIs that will work in any standards compliant browser. This means they can program a website once and it will work in any browser. Today all of the browsers are not 100% compliant but they are getting closer. Most of the new browsers already support the new HTML 5 spec. HTML 5 and CSS3 are expected to be ratified later this year. This new standard brings with it many new features that will make it even easier for developers to create dynamic, great looking websites. Even Microsoft is going to support most of the new features with IE 9.

Visit this site to see how your browser scores with HTML 5 http://html5test.com/

History
When the web was first invented there was no official standards body. It was like the wild west in the browser market. Each browser maker would add their own new features without even thinking about sharing the specs with their competitors. You might be thinking that all this competition and new features is great for consumers. Well in most markets that is true but in this case the browser is not really the end product - the websites are and all the disparate features makes creating the websites almost impossible. A developer would have to keep learning all of the special features for each browser and how to program for each browser. This takes way too much time and money and it was stagnating the web. We finally got web standards with version 2.0 of HTML in 1995 thanks to the efforts of Tim Berners-Lee and the HTML Working Group . It wasn't until 1997 that HTML 3.2 was released by the W3C. This is considered by many to be the first true standards spec.

Information Architecture (IA)

What is it?
Information Architecture is an emerging field that has become a necessity in the information age in which we live. There is so much content on the web. How are we going to find what we are looking for? According to the Information Architecture Institute, an information architect designs the structure of shared information systems. He also designs the labeling and organization of online web sites to make it easier for people to use the site and find the information that they are looking for.

When do they work?
According to the folks at IBM an IA needs to be brought in on the project as early as possible. They are an architect first and foremost and so they develop the framework that the site is built around. You would not start building a house without an architectural plan so there is no reason to build a complex website with out a detailed plan of how to organize the content.

How do they work?
The start by gathering information. Then they do a bottom up approach. After they have an initial taxonomy completed they start a top down approach to clean up every thing with a higher level overview.


http://www.ibm.com/developerworks/library/us-inarch.html

Top 5 web writing tips
Summary from Erin Anderson’s section of Interact With Web Standards

1. Make it short and to the point
Web writing does not need to be elegant. State your main point as quickly as possible. Web users are not sitting down to read novel or critique a doctoral thesis. Most web readers scan articles instead of reading every word. They are typically in a hurry or just looking for something very specific. If something in the article does not jump out quickly they will move on to something else. On the other hand most print readers are a little more relaxed are are reading for enjoyment or education. They tend to read the articles more closely.

2. Provide action points
If you are able to capture a readers attention and they read the whole article or at least the first part they are probably looking for a link to something. That something could be a link to twitter so they can follow you or a video to reinforce your point. Most people are looking for more when they find something that interests them so you need to provide it. This is also a great way to get referring credit.

3. Outline with active words
Since most web readers scan articles you need to provide them with short descriptive headings and subheadings. The best way to accomplish this is the use verbs to start your headings. There is no need to have a sentence long heading. Start with the verb and make it relevant to the content in the paragraph.

4. Use the inverted pyramid
Start your paragraph with your conclusion. There is no need to give people background information if they are not interested in the problem. Tell them upfront what you have concluded and then if they are interested they will keep reading. Then you will provide them with the supporting information and finally you can throw in any technical or background information on the problem at hand.

5. Balance SEO and readability
Search Engine Optimization and how easy it is to read your content do not always work together. Many times it is easier to read an article if the writer uses the same word to refer to something. However SEO requires you to have lots of synonyms through out the article. This will allow the search engine to tag the article with many different keywords that a user might use to search for the topic. The more descriptive words you use the easier it is to find what you are looking for. Using additional descriptive words unnecessarily will stick out like a sore thumb to the user.

Follow Erin on twitter @erinarie
Visit her site http://braintraffic.com

iOS4 fail

Here is yet another reason why I despise Apple. Their closed system leaves me no options. I can't do anything until they fix their mistake.