Thursday, April 28, 2011

3 ways to develop a mobile website

With the use of smart phones growing in the world, businesses need to start having a mobile website. I previously wrote a blog about why a mobile website is necessary for your business. In that blog I discussed usability, links, design and screen size as well as why it is important to build a mobile based site.

For this blog I'm going to talk about the 3 different types of development for mobile websites:
  1. Mobile application vs mobile website (a redirected website or a multi-platform compatible website).
  2. The difference between an application and a website is that an mobile application that run on mobile phones, usually connecting to the Internet and making it easier to search that application. 
  3. A mobile websites is basically the same as a normal website, except it is designed differently according to screen size.

Mobile Application

Applications have their pros and cons. They are extremely useful in certain situations. Take for instance The Weather Channel App. I have it on my iPhone, whenever I open it up to look at the weather it determines my location and updates me on the weather that is coming in the next 36 hours. I don't need to go through the Internet, type in the web URL of a local weather station, load the site and then type my location in, and THEN get my weather. I just had to open up an application.

Their biggest pro of mobile apps is that they are super convenient.

There are a few cons to consider as well. One con is that each application must be downloaded -- which takes time and space on your phone. And then comes the different mobile platforms and app stores that you can buy/download these apps from. For websites that need customers to check in or buy things from their site, an application is a beneficial tool to invest in for your business.

Mobile Website

Right off the bat, you know that a major pro to a mobile website is that you don't have to download it, all you need is the Internet to view it. From Ten Digital Trends 2011, there is an section at the bottom called "The Year of the Mobile Website". They talk about how mobile websites are going to be more feature-rich through HTML5 and media queries. A mobile website could almost match the functionality of an application with these perks. For example here is the weather channel mobile website and mobile app.

Mobile Website
Mobile Application

The mobile website takes you right to a search feature, the weather channel knows that it's customers come to search their weather so they put that on the home page of their mobile site. The application automatically brings up my location because I programmed it in already, but basically gives the same information that the mobile website would give if I type in my area code.

Mobile Website

The con to creating a mobile website is time and money. This is where the mobile website splits into different categories:
  • mobile version of the site or 
  • a multi-platform compatible site. 
Both require extra time/money, but creating a whole different version of would be more time essentially equaling more money.

Mobile Version of the Site
What would happen is when your site is viewed on a phone, the website will recognize that it is being viewed on a phone and will redirect to a separate and uniquely programmed and designed version of the site. This version will have the dimensions of the screen and will provide the appropriate content that is needed.

Take for example Dictionary.com: what does it need on it's mobile website? What are the bare minimums? Well the search feature of course and then a reference and a thesaurus tab, since those are the other sections you can search under and most frequent usage by visitors. Also popular, it offers a button to download the dictionary.com app, and it has the word of the day.

Mobile Version

Multi-Platform Compatible Site
This means that your website is built to recognize what platform it is on meaning: if it's a computer or phone, and what the screen dimensions are. Instead of redirecting to a different version of the site, it will adjust it's content to match what the user really needs to use depending on the platform and screen size. This way you wouldn't have to have an entire separate version of the web, you would just have to have extra coding that would recognize and change the way your website looks.

Robotornot is a great example of this. If you change the size of the screen when you view it on a computer, you can watch it adjust it's design to format what size the screen is.

Website viewed from a computer
Mobile Website (Multi-Platform)

Summary

To wrap things up, the number one thing to remember when deciding which development path to take for your mobile site is: what do you want your customers to go to first? What is the main purpose of your site? Are you just letting people check in to your business (such as an airport) or offer a shopping cart for product purchase or are letting them search for information that they need? If your answer is yes to any of those questions, we recommend an application custom developed for your website.

Otherwise, pick out the top pages you want visitors to see (or think they will be looking for on their phones) and have those showing on your mobile-version website. Out of convenience, we would recommend developing a multi-platform compatible site. In the end, it creates less code which will help your loading time and will take up less server space.

At TBH Creative, we believe that mobile web design is the becoming essential to your online marketing plan and Internet success. While your customers are on the go and need information about your business, they will search for it through their phones. This is why it's important to have a mobile website.

Sunday, April 24, 2011

HootSuite's down? Try one of these five social media management alternatives

HootSuite uses their blog to keep users up-to-date when their service is down.

What do the social media teams who work at Papa Johns, the Los Angeles Times, and Facebook have in common? Like me, they rely on HootSuite, a popular client, to help schedule their microblogging and monitor brand-related chatter. When the helpful browser-based tool went down last week because Amazon Web Services' cloud crashed, many were left wondering which HootSuite alternatives for managing professional social media needs are worth considering—either as a long term replacement or back-up during outages.

Popular alternatives include:

  • Tweetdeck
    Pros: Works for Macs and Windows users; simple navigation; robust features set
    Cons: You have to install it
  • Seesmic
    Pros: Fast; works in every browser; lots of useful features
    Cons: User interface doesn't use screen space as efficiently as other tools
  • Twitterrific
    Pros: The latest version includes username auto-completion, easy spam reporting, and an advanced settings page that allows you to choose to not to see @ mentions from strangers
    Cons: Mac only; to add multiple accounts or remove ads from your timeline, you'll have to pay
  • Brizzly
    Pros: Allows multiple accounts; easy monitor searches; built in "muting"
    Cons: Steeper learning curve than the other tools
  • Twitter For Mac (formally Tweetie)
    Pros: You can use it to manage multiple accounts
    Cons: Mac only; once only for iPhone and iPad Touch, the latest release includes a desktop version

Thursday, April 21, 2011

Interesting and Useful CSS Tricks for 2011

Staying current with new website technology, coding tricks or hacks, and changing techniques is part job as professional web designers. One example is Cascading Style Sheets or CSS which has continued to grow and expand throughout the years.

In the past, CSS was used for basics page styling such as to change color of text, create colored borders, style different fonts, change the background, etc. Nowadays, with CSS3, you could basically style the moon... okay not literally. But truth be told, you can style almost anything on your web page and do things with CSS that you would only have dreamed of doing a couple of years ago.

A few examples of CSS advancements tricks in 2011 are listed below:

Rotation

Eric Meyer created some examples of the different ways that you can rotate images using CSS. These rotations include transforming the origin. The image remains the same height and width because the image is being transformed from only one origin in the image.

This working example is the best way to view how this occurs. The six different rotations have a dot in on the image marking the origin.


3D Hologram

This is a new trick that I just stumbled upon today: a 3D hologram box. This only works with a webkit browser and has only been tested on the iPhone. The creator, Hakim, was inspired by a french video by Geoffrey with Firefox that created a holographic effect on an image -- while viewing the webpage on a mobile phone, the image changes perspective depending on what way you tilt the phone.

This was taken from my iPhone to give you an idea.

Creating a Pattern

Patterns are often used in backgrounds of websites or to possibly outline a call to action area, but these are usually created by using images. Images are okay to use, but having a CSS alternative is a great way to creating less loading time for your website. Lea Verou has created some aesthetically pleasing CSS patterns.

Love the Tablecloth pattern, don't you?

Drop-Shadows

Like patterns, drop-shadows have been created by using images (until recently) and are an intrical part of your webpage aestethic. Now, CSS also allows you to create drop-shadows without images and even control the color, distance and opacity. The perspective can also be altered as well as different types of drop-shadows.

See Nicolas Gallagher's example of different CSS drop-shadows. Using CSS for elements that would normally require extra coding and images saves overall loading time of your webpage while still offering visual appeal and attention to detail.


These are some pretty great looking shadows considering no images are being used!

Gradients

Gradients also tie in with the loading time, because most gradients are created with Photoshop and then turned into an image. Similar to the above tricks, a gradient created with CSS will have less of a loading time than a repeating background image -- allowing potential customers view your website faster.

Web Designer Wall has created some code and image examples of gradient background and then gradients used for navigation.


Summary

CSS is a more useful tool than it was 5 years ago; heck even 2 years ago. Can you imagine where it would be in the next couple of years? I'm sure we will find out soon enough, and TBH Creative will work hard to always learn the newest tricks.


Monday, April 18, 2011

Web Design Case Study: Fort Harrison Reuse Authority

TBH Creative has been working with Fort Harrison Reuse Authority since 2006. For the past four months, we have been redesigning and developing 'sister' websites to represent the history of FHRA and tell the story of Lawrence Village. We are pleased to announce the launch today.

In addition to a new design and code, the project included reorganized site architecture and taxonomy. The new website offers a softer feel to match the Lawrence Village Brand. The information tells a story and shows the personality of Executive Director, Kris Butler who says, "I am very proud of this effort and hope you all think it’s more useful and comprehensive."

Visit the new Fort Harrison Reuse Authority website

 Visit the new Lawrence Village at the Fort website (Live. Work. Play)

The FHRA logo was tweaked to compliment the new look and feel.

BeforeAfter

Thursday, April 14, 2011

Why every website must have a contact form

Every business must have a contact page on their website -- it's essential to help bring in business and to allow customers to contact them.

Some businesses list their contact information to let the customer contact them via phone or email, others have an interactive contact form. Often, they even have both. Hving a contact form makes everything easier and organized, and makes you available 24/7. With a contact form, your visitor (potential new customer) can provide upfront information about what they need. With this information, you can best respond and determine if services are a good match (and ultimately make a sale if so).

Your website should have a contact page and form. Your interactive contact form should:
  1. Ask visitors for some general information (not too much, but not too little depending on your business and needs).
  2. Form fields should be validated for most important and required fields such as name and phone or email.
  3. Offer one textarea for general comments and questions.
  4. After submission, the page should return a confirmation message with expectations of what is next (e.g. someone will call you within 1 business day).
  5. Include a privacy policy or statement.
  6. If the visitors do not wish to complete your form, they should be given the option to call or email.
The best contact forms are easy to use and styled to match your website. Regarding style, the sky is the limit these days -- such as highlighted boxes, jQuery techniques, customized submit buttons, rounded corners, and drop shadows on the text boxes. Here are some examples we found that you may enjoy.

Contact Form Examples

CSS Tricks
This first example is from CSSTricks, the blog post is about creating the example that he has made. He also has a live demo so you can see how the page works.

This form has each box highlight upon hover.

Digital Base

This form sample is simple and has a nice, clean and colorful design.

Point Zero

This page has rounded corner text fields, gradient boxes, and offers alternative contact methods.

Branded07

This form sample has a customized submit button and when the boxes are clicked on to type in, they highlight a different color.

Christian Sparrow

This form sample is developed in Flash. I didn't like on this form that you have to highlight the suggested text and delete it before you write your information.

ftDesigner

This form sample has different fonts and colors for each input field. 
Orca Bay Seafood

This form sample is styled to look clean and unique. It uniquely allows you to adjust the size of the comment box.

Form Development

There are many different technology options to develop a contact form (from basic HTML, AJAX, PHP, ASP.NET or classic and even Flash). According to our research, PHP contact form is the most common form used.

Minervity created 5 basic contact forms based on these different options that you can download and customize to fit your needs. All of these forms can be styled to match your website using CSS.

From 1stWebDesigner there is a list of 21 easy to customize PHP forms that you can download or purchase.

The technology you use doesn't matter as long as it works properly, has security to avoid spam and phishing links, and is validated with an appropriate response message. An expert will know all of this and can easily do this right. There is nothing worse than filling out a long form to receive an error when trying to submit. Your visitors will instantly click away.

Friday, April 8, 2011

Finding the right "Type"

With Google Web Fonts, Cufon, and Typekit (font kits) at every web developers finger tips, choosing the right "type" has never been so available. I'm not talking about the "cute type" or the "humorous type", I'm talking about your website's font type (also know as typography, type face, font face, or font family). So many years have past where web developers as well as businesses have only had a select choice of web safe fonts. Now that the Internet is basically it's own planet, companies are testing the waters (and succeeding) in creating ways to use more fonts on the Internet. Web designers are now able to choose and display any font regardless of whether or not your users have that font installed on their systems.

Whatever the font solution used, more options with fonts has several advantages / benefits:

Better Design
Typography is an extremely powerful and important part of design. Good 'type work' can make or break a design in many cases. With more fonts choices for your website, it will look better and be less restricted. Designers will not be stuck to choose body type from 3-4 main fonts. Subtitles and headings can be more strongly styled to help the flow of content. And websites will be more unique without heavy technology like Flash or a lot of cut up images.

Quick Loading
By using different fonts (especially fonts different from the ordinary web fonts), load time for images to display text will decrease. Before options for more font rendering became readily available to web designers, we had to create images to represent anything that the browser could not render including special font treatments. Using a bunch of different images just for some text bogs down your website taking it longer to load.

Increase Search Engine Optimization
Your webpage can have the design you want without images and still have text on your page which ultimately effects and increases internal SEO. If images were used in the past, plain text will increase your keyword volume which should effect on your search ranking, especially when used in combination with headline or bold mark up tags.

Easy Changes
Edits or changes to text after set up will be much quicker as compared to changing images with text on them. In the past, these changes required opening the Photoshop file, making the change, cropping to the appropriate dimensions, and saving for optimal file size. With web fonts, these edits require opening the HTML file and simply making the text change. With a Content Management System, businesses can do this themselves.


Via: VPS

Web Safe Fonts

Google Web Fonts is a font kit that Google offers for free. You can use up to as many different fonts as you want on your website. Be aware that the fonts are being held on the Google server, so the loading time could sometimes take a minute or might not work if the server is down. A really neat thing about Google Web Fonts is that it is always updating and creating new fonts for everyone to use. Most of these fonts can also be downloaded to you computer, so you can use them on any program on the computer that uses fonts.



Typekit is a great website to use for fonts as well. It has a free version, but it allows you one website and 2 fonts for that website. There are different memberships that you can upgrade for. The upgrade plans range from $24.99 to $99.99 all with different benefits. Web developers can easily avoid upgrading plans as long as they have the business sign up for their own free account.


Typekit also separates their fonts by style and language. The image above is of a few of their decorative fonts. These are fonts that you would use for "Call to Action" sections. Good examples of these would be headers, your logo, or an important sentence that you really want to stand out. The fonts that your business and web developers would use for the actual text would be the sans serif fonts. Google Web fonts also separates their fonts into categories based on their roots (greek, latin, khmer, or cyrillic).

Cufón is an improved use of Typeface.js that is focusing on the speed of their load time. Cufón uses the browser to draw vector objects using VML (Vector Markup Language) for Internet Explorer and the HTML 5 Canvas element for the more advanced browsers. (TBH Creative's unique fonts are displayed using Cufón very successfully. :]) Cufón is definitely the way to go if you want faster loading times and of course, that it's free. One of it's downfalls is that if javascript isn't enabled, the fonts aren't going to work. Other than that, Cufón produces a very rich and smooth text.


Font Pairing

There are also websites that can help you figure out what fonts pair well together. FontFuse does a great job of giving examples to help inspire font pairings and examples you can use on your own site.


Your business's website should try to have two different fonts. FontFuse is a great resource based on this statement alone. Noupe Design wrote a blog that contains 7 rules for mixing fonts. The two best rules in this blog are keep the body text readable and to use color and style to differentiate between your chosen fonts.

Great Examples of Web Typography

Jason Santa Maria


Elysium Burns


Rustin Jessen
 

 

Subscribe to this blog