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.

Yahoo! Pipes

My Pipe pulls from 3 different RSS feeds and filters them by content. It displays only deals that contain a mouse. I am shopping for a new mouse right now so I can use this to find the best deals without having to visit 3 different stores.
I could add more feeds but I have found that these 3 sites almost always have the lowest prices on computer hardware. Those sites are NewEgg.com CheifValue.com and Buy.com.

Here is my Pipe.

Google Chrome OS

I downloaded the pre-Beta release of Google Chrome OS and am running it in a Virtual Machine on my computer. My initial reaction is that it maybe too light weight. Everything is web based. There is no access to your local file system that I have found. Everything will be stored on the web. The image to the left is a screen shot of the Chrome OS main menu. All of these "Applications" open in a new Chrome (Web Browser) Tab.

The light weightiness of this custom linux kernel is great for light weight netbooks or older laptops that are not as fast as new dual core laptops. Here is a link to a youtube.com video about Google Chrome OS. The concept of a completely cloud dependent computer seems a long way off but Google plans to release Chrome in late 2010. There are several issues that they need to over come before this OS will be used by the masses.
1. Connectivity - To log on to their computers users must have a constant internet connection everywhere they want to use their computer. Many new netbooks are shipping with 3G cards built in that will solve this issue.
2. Drivers - Google must work with manufactures to come up with standard drivers to work on their OS. A big problem is with printer drivers. Each manufacture has their own proprietary drivers. They might be able to tap into CUPS which is an open universal printer driver developed by Apple that works for linux.
3. Cloud Acceptance - Google has to build up confidence in the Cloud. GMail and Google Docs have had outages in the past. It is crucial for the cloud to be dependable all the time for this to be a viable option.
4. Web standards - Many websites use additional programs or plug-ins to make there apps work. For instance Flash, Java VM, Java FX, Microsoft SilverLight, and Adobe AIR are all add ons to web browsers. These plug-ins allow for lots of awesome interactive content. Google might be able to get these companies to develope these for Chrome and build it into the browser. On the other hand HTML 5 is close to being released and it supports much of this sort of functionality in a web standards way.

Some other screen shots of Chrome OS:

What is Skype?

Here is a video Betty made for Wordia.com. Currently wordia does not have a mechanism to allow us to upload definitions to words not in their corpus but they plan to have that feature in the near future. For now check out the video here and maybe in a few months you can watch it on wordia.com

iPhone Web App Development

I have been working through a tutorial that Jonathan Stark put together that explains how to customize a web page for an iPhone. The beauty of this solution is that the site will function and display normally for anyone accessing it with a desktop browser but for someone on an iPhone or and iPod Touch the experience will be customized. This is made possible by CSS (using some WebKit) and JavaScript (using some JQuery).

Here is my Index page of iPhone Web Apps. Note: you need to access this with Safari Mobile to see the cool iPhone App look.

Net Neutrality

Net Neutrality is a complex issue that can have huge implications on the information age that we live in. Currently all information online is treated the same way by ISPs. This means that your internet service provider does not give preferential treatment to certain types of data such as email, video streams, or bit torrent traffic. Similarly ISPs do not give preferential treatment to specific domains. Without net neutrality laws there is a possibility that ISPs could block or limit access to certain domains and give faster access to others that pay them more money. For example, if my local ISP (Charter Communications) is paid by ABC to have their website delivered to me at 10mbps but NBC does not want to pay Charter then Charter could limit my connection speed to NBC to 1mbps or block them altogether.
This is dangerous! The internet has brought us into a global economy and if ISPs are allowed to block certain domains or businesses then the internet will become fragmented and it will destroy the very concept of open information that can be accessed from anywhere.
If you would like to get more information about Net Nuetrality or if you would like to join the debate go to www.savetheinternet.com/faq.

New Apple Mac Mini Server

I work for an accounting firm and we are purchasing a new Apple Mini with 2x 500gig HDDs and Snow Leopard server installed. This will be replacing 2 older dell server boxes. We will be testing this box for performance and stability over the next few months. The unix OS should be perfect for our needs. We will be running a Ruby on Rails application.

iPhone Dev Websites

A blog discussing best practices in general for web development. It also has some good points about using special css for people accessing the site via iPhone.

knol.google.com

----------------------------

Here is some good documentation from apple about how to configure the view port on the iPhone. Safari looks for a meta tag to set the view port.
<

meta name = "viewport" content = "width = device-width">

developer.apple.com

----------------------------

Here are some suggestions for working with css on an iphone.

eisabainyo.net

----------------------------

This web page displays a bunch of different components that display differently with browsers that use webkit vs non webkit browsers. It give an example as well as some instruction on how to code for it.

lipidity.com

----------------------------

iUI is a framework for developing web applications for the iPhone that look like native apps. It uses JavaScript and CSS as the framework.

code.google.com

Findability: beyond just google-binging it

According to Peter Morville at findability.org, "findability refers to the quality of being locatable or navigable. At the item level, we can evaluate to what degree a particular object is easy to discover or locate. At the system level, we can analyze how well a physical or digital environment supports navigation and retrieval."

This sounds like a fairly vague definition and a very hard concept to measure. Do you quantify this by how much money it takes to find an item or maybe how much time it takes? It is probably easier for a mechanic to find a wrench in a workshop than a stay at home mom who never had shop class. Does that mean the wrench is easy or hard to find? These are a few questions that I do not have answers for right now.

I do know that SEO, usability, information architecture, and accessibility are all related to findability. The goal of a website is to deliver information. The concepts of findability make it easier for search engines to crawl a website and return relevant search results. Also if a user directly accesses a site and wants to find some piece of information they want the site to be laid out thoughtfully and for it to be very usable. The information architecture needs to be clearly defined so that they can find something quickly. This is where web standards come into place. If a website is designed using web standards there should be a straight forward way to navigate the site and find information or in other words the site should be accessible with different browsers and also different technologies such as screen readers for the blind.

JavaScript iPhone Web App

We wrote our first iPhone web app in class on Thursday. It was a simple app that utilized JavaScript to register which way the iPhone was oriented. We the iPhone was turned to the right or the left the accelerometer registered the change and the text on the page was updated to show which way the screen was oriented.

I added a few lines of JavaScript to have the screen display when ever the page is first loaded. That way the user doesn't have to turn the phone to get the orientation to register.

Here is the JavaScript code to make it work:

Best practices for producing and distributing video on the Web

Say there is a company that has produced a great how-to-video on making widgets. The next thing they need to think about is how they are going to publish or distribute this video on the web. When posting videos online there are a couple of things to consider. First what is the goal of posting it? Is it to start a viral marketing campaign about a social issue or is it to provide a service on the company's website to draw more people in? And secondly, what kind of web server does the company have and how knowledgeable is the webmaster? The answers to those questions can help the company decide whether to host the video on their on server or post your video to a sharing site such as YouTube.

Benefits and concerns of a company hosting its own videos:

Hosting your own video can draw more visitors to your site, enable you to customize how everything on the page looks, and one can choose to sell ads or not. There are a few things that need to be in place before this is a viable option. First, you have to know how to work with the video files if you are going to host your own videos. The webmaster will have to encode the video into a different format to incorporate it into the website. For example a lot of videos are edited using mpeg or avi but to put them on the web in an easily usable form they need to be in Flash (by Adobe) or Quicktime (by Apple). Most web videos are streamed using Flash. The second thing to consider is can I afford the bandwidth? Video files are large and require a lot of bandwidth to host.

Search Engine Optimizations tips:

Limit each page to one video, allow the URL to be specific to a video, place all videos in a central folder/directory, use an embedded player in the page instead of a popup, use text on the page to describe the video, use tags and meta tags to help search engines, submit the video to Google sitemaps to help speed up the indexing of the video for search, and allow users to share the video with friends by providing the url or providing social networking links.

Benefits and concerns of a company posting videos:

Unlike a hosted solution that requires video conversion, the posted solution takes care of converting the video files, and they pay for the bandwidth. Also, most of these sites, like YouTube, MetaCafe, or GoogleVideo, have a good reputation and a large user base that is constantly watching videos and sharing the videos with friends. This is a great solution for any type of viral marketing campaign. Popular YouTube videos are tied into universal search (incorporated into Google "web search", people don't have to be specifically searching for videos to be shown videos on that topic ) in Google which is a great way to publicize a video. Going with a posted solution however, you lose the full customization over the look of the page and whether ads are shown. In most video sharing sites, ads are displayed. Some ads maybe images or text but some maybe videos that play before your video is shown. In some cases this could be an ad for a competitor.

Search Engine Optimization tips:

Post your website URL in the description of the video, create your own account/channel/brand to allow people to follow all of your videos and any future updates, use your url in a watermark in the video because these might be copied and posted elsewhere (it is viral), allow comments and ratings to generate user excitement and discussion, and use tubemogul.com to upload the video to all major sharing sites and see analytics on those videos. TubeMogul looks like a very powerful tool for businesses or individuals to track videos all over the web.



Information from ReelSEO