I hate to say it but they do. To be fair, it’s not their fault, it’s just that the standards of traditional print design do not always carry over to the web. It’s your job as the web designer to explain this newer medium to them and prevent them from overbearing the project. There are several key differences between web and print in terms of layout, precision and typography.

The primary difference between print layouts and web layouts is the space you are allotted. Print designers are often limited to fit their designs in a set number of pages. If the client wants a 10 page book or a Tabloid sized poster, that’s all you have to work with. Hours upon hours are spent finding the most efficient way to utilize this space (without making your original design look like crap).

Life Below 600px is a provactive article about designing below the fold. Make sure to click on the link below and read all about it.

While web designers are also constrained by the resolution of their target devices, they don’t need to worry about wasting paper. Adding more content can either be accomplished by including more pages or extending downward. Paddy Donnelly wrote an excellent article titled, Life Below 600px, in which he discusses designing “below the fold”. He argues that you don’t need to squeeze your website into the top 600px (initially viewable area on most monitors). In fact, that just leads to cookie cutter websites and mediocre layouts. Let your client know they can open up their designs and take advantage of this unlimited space.

They also need to know that sometimes precision needs to be sacrificed for flexibility. Print designers obsess over precision, and you would too if you only had one shot to print. Everything needs to aligned to the grid, quotes should hang, ragged lines balanced and orphans removed. While I don’t encourage sloppy design, achieving this level of precision in the web is nearly impossible.

The web is a different beast than print when it comes to precision. While print designers deal with one printer and can have absolute control of the outcome, web designers’ work displays different depending on what browser, monitor, computer or mobile device they are using. So, while it is possible to align your website to a grid, as A List Apart demonstrates, it would be foolish to expect it to render that way on every desktop and device. Let that print designer client know that sometimes precision must give way to graceful degradation.

Even a web "safe" font like Helvetica is not immune to different browser renderings (Firefox OSX vs. Firefox Windows XP courtesy of Adobe Browser Labs).

Another factor beyond our control is typography. For the same reasons that pages display differently, fonts will vary from computer to device. Even web “safe” fonts are not immune to slight variations in tracking, kerning and leading. Web designers don’t have the benefit of consistency when it comes to type. There is a point where old school print designer will just have to let go and except that their will be subtle differences. They will also need to understand what fonts can be used in a web project.

As discussed in my article Font Freedom, your choices are limited when it comes to type. There are image replacement and font embedding workarounds, but they require time to accomplish. They are also not without cross browser vulnerability. Let you client know what is possible and how this will increase the time and estimate for the project.  This way they are no surprises when they ask for a whole site that absolutely must be designed with Papyrus.

Print designers are entering an unfamiliar realm in which their rules and guideline may no longer apply. They may have a keen eye for design, but as your client, it is your responsibility to keep them informed about what is and what isn’t possible. The more you know about their profession the easier it will be to form a constructive relationship.

“Blazing-Fast”, “Turbo Charged”, “Lightning-Fast” are a couple of the phrases Sprint is “modestly” using to describe their new 4G network. With all this hype, smart phone users still using 3G, might feel a little left behind in the stone age. However, don’t set down your saber tooth pelt and club to go running to a Sprint store just yet. The truth is, when 4G arrives it might not be that much faster than the existing 3G network. First off, what the heck is a “G” and why do I need 4 of them?

1G

4G represents the 4th Generation of cellular technology to date. Each generation marked a significant advancement in mobile technology. The 1G of mobile devices took place in the 80’s and are commonly referred to as “suitcase” phones because of their enormous size. These phones were so big because they required larger batteries to reach the nearest mobile network site.

Takes me back to my childhood, my Dad used to keep a Motorola 2900 in our car.

2G

In the 90’s, as the mobile networks increased, batteries got smaller and phone became more manageable. The 2G era meant people could now carry phones in their pockets or purses without straining their backs. Another important landmark of this generation was the popularization of SMS (Short Message Service).

Phones in the 90's were much smaller because they didn't need huge batteries to connect to a network.

3G

Around 2002-2003 the third generation arrived on the scene and helped redefine mobile. Now mobile phones could simultaneously use speech and data services. Also, since data transfer rates were significantly faster people could now browse the web and perform advanced functions.

The iPhone is the poster child of the 3G era.

4G

The fourth generation is currently in development and will increase data transfer speeds up to gigabit-speed. This will allow smart phones to perform more like personal computers in terms of data transfer. It is an exciting prospect and promises to redefine how people interact with the mobile web.

Artistic rendering of what 4G will be like.

So what about Sprint’s 4G?

As I was saying, the fourth generation is currently in development. Sprint jumped the gun on declaring it’s 4G network because it isn’t even complete. As you can see on the Sprint site, coverage is extremely limited. So unless you are in one of these select cities (and have service), 4G will feel more like 3G.

The reality is that it will be a couple years before the whole country can enjoy complete 4G coverage, and by that time carriers like AT&T and Verizon will have updated their networks as well. The acronym “4G” is merely being thrown around as a marketing ploy. So, until the technology is proven, don’t buy into the hype.

The appearance and functionality of your mobile application can make or break the project. You may have a great concept and back end, but if the UI (user interface) sucks then the app will fail. This is because people have high expectations of quality and short attention spans. They like simple interfaces that are familiar to them, interfaces like the ones already found on their device. This is where user interface libraries like iUI and jQTouch come in.

iUI and jQTouch are frameworks that include all the css, javascript and images needed to build native looking apps (a.k.a you don’t have to reinvent the wheel). With minimal markup changes and coding experience you can turn your site into a mobile app that looks so good, people will think Apple made it. But which one is best for you?

iUI

iUI (iPhone User Interface) mimics the interface of a native app.

iUI (iPhone User Interface), gives you the appearance and behavior of a native iPhone app without excessive coding. In fact, the default iUI images are borrowed from the iPhone interface (but you can modify them to your own liking). The interactivity is also mimicked so there is no need to write any special JavaScript to use it. It overrides the standard behavior of html with ajax, loads external pages into one page, shows a progress spinner, offers sliding check boxes and modal dialogue boxes. The only downside is that it is iPhone specific and doesn’t support interfaces of Android and Palm Pre. If only there was another way…

Download Visit Site Demo (view using iPhone or other WebKit browser)

jQTouch

jQTouch helps you to create a To Do list interface just like on your iPhone, all with simple markup and JavaScript.

jQTouch not only provides frameworks for iPhone, but other WebKit browser phones like the Droid, Nexus One and Palm Pre. It is based on the jQuery library, which means you can leverage it’s power of simple syntax and plug-ins for your web app. However, because it is based off of the core jQuery library it’s page weight is around 112 kb vs. the iUI’s 40 kb.

Download Visit Site Demo (view using iPhone or other WebKit browser)

Interface libraries are a great tool for creating mobile web apps. Regardless of whether you decide to use iUI or jQTouch, you will be saving yourself a lot of time by not starting it all from scratch. I urge you to use these frameworks as a starting point, and build on the hard work of others to create something that is individual. That is the beauty of open source, but don’t forget about the hard working developers that gave you that starting point. Be sure to hook them up by donating a couple dollars.

For those of you who are looking to track clicks on your website, Crazyegg might be able to help you out with it’s heat mapping. Heat mapping is a technique in which JavaScript generated graphics overlay on your website to show “hot” click areas. Or as Crazyegg puts is, “Visualize the user experience on your website”. This is a paid service and plans range from $9 to $99 a month.

Now for those of you who already use Google Analytics, this may not impress you. You might say to yourself, “Why not just use a site overlay to track clicks?”. That’s true, you can use Google Analytics to track what links are being clicked frequently on a page. However, with Crazyegg heat mapping you can track clicks in general, not just clicks on links.

Visual representation of click "hot spots". The left side is "confetti" view and the right is "heatspot" view.

This feature makes Crazyegg best suited for image heavy website, where users could become confused about what is click-able. For example, maybe you have a “Buy Now” image on your E-Commerce website that doesn’t link to your store. With heat mapping you can recognize this mistake and capitalize on the focal point. Turn empty clicks into profitable clicks.

Make sure to check out the demo on their site. If it meets your needs, great. If not, don’t forget about Google Analytics, the free option to track you website.

When designing a site it is important to ensure that it will display properly on your target audiences’ browser and computer. In a perfect world, the website you design and preview on Firefox would look fine on Internet Explorer or Safari. However, because not every browser complies with the latest W3C CSS standards, you should always expect variations in what your audience views. This is where my new favorite toy, Adobe BrowserLab, comes in.

Adobe BrowserLab is a cross-browser compatibility application for web developers. It renders screen shots of your website in different environments. For example, you can see what your site would look like on a PC running IE8, even if you are on a Mac. This screen shot preview technique is a feature much like the one used by Litmus or IE NetRenderer. But wait, it gets even better.

You can view screen shots of your website from different browsers either side by side or as transparent overlays.

After rendering screen shots, BrowserLab lets you overlay them for more precise comparison. In this Onion Skin view, a slider at the top of the BrowserLab’s workspace lets you fade one view on top of another. This makes even the tiniest visual differences stand out on your screen. To make this even more precise, the application has rulers and guides that you can drag over your screen shot. Very quickly you can determine discrepancies and move on to debugging the site.

Onion Skin view allows you to overlay browser screenshots. Here is an overlay of IE8 Windows XP on top of Firefox OSX.

Check out Adobe BrowserLab and see for yourself how useful the tool is. The current version is a beta and will be free through the end of 2010, so use it out now while you can. Once they have worked out any bugs, the program will be available for sale in 2011 (@ $10-$20 per month). For a quick intro video, check out there Adobe TV episode: Introducing BrowserLab.

Support Skydivers is featured in this month’s Parachutist!

This month in Parachutist magazine, a skydiving magazine published by the US Parachute Association, SupportSkydivers.org was mentioned in the Five-Minute Call section (pg. 23). Support Skydivers is networking website I have been working on with developers Eric Lubow and Peter Dierx. We are all really excited that it is getting some more press.

The idea behind the site is to generate support for jumper’s businesses and to build a community. User may register, add businesses and post open jobs. It also features a search by location feature, so you can find your local skydiver owned businesses and then view it on a Google Map. Supporting your fellow jumper will keep money in the sport and keep the jump planes flying.

As more people sign up, the site will only get stronger and more useful. Special thanks to Jenn Bocker for doing a great job promoting the site and getting us in to the magazine.

When starting out in web design there is an overwhelming number of options for you to make a site. For me, I started with a tool that came packaged with my design software, Adobe Dreamweaver. However, If I could go back in time, there are three basic tools I would have given myself to get on the right foot. They are, TextMate for text editing, FileZilla for FTP and Firebug for debugging.

#1 TextMate

TextMate is the only tool that you will have to pay for of these three, but it is more than worth the price ($58). TextMate is a text editor that supports a huge list of languages and offers a lot of time saving shortcuts. It auto-completes common tasks, highlights errors, and displays multiple files in a project and is customizable.  It was originally designed for mac, but I have also heard of a PC equivalent called E-TextEditor (haven’t checked it out). Feel free to try the demo for yourself and see if you like it.

The sliding drawer feature on TextMate allows you to see your entire project.

#2 FileZilla

Once you write the code, you need to upload it to your server. I recommend using FileZilla because it’s easy to use and free. Some of the nice features are that it is cross-platform, supports drag & drop, includes a site manager and has a duel layout that shows both your local and remote sites. Plus, did I mention it was free?

#3 Firebug

I saved Firebug for last because it is an invaluable tool for web developers. If you don’t have it already, be prepared to have your mind blown away (I know this is a little dramatic, but Firebug is just so cool). Firebug is a plugin for Firefox that allows you to manipulate any website’s CSS, HTML and JavaScript. So if you were wondering how a new style would look on your website, just open up Firebug, apply it and see it’s effects live. Not only is this priceless for debugging your own site, but it is also a great learning tool when looking at others’ websites.

With these three programs you have everything you need to start building websites. You will have the text editor to write the code, the ftp program to upload it to your server and the debugger to work out the kinks. The best part about these tools is that they work just as well for experts as they do for beginners. So, whether you plan on building a static site or a complex web application, these tools will grow with you and your needs.

jQuery easing just got a lot cooler.

jQuery 1.4 was just released yesterday and I have been eagerly checking out the new features. My personal favorite is the new ability to ease per-property.

Easing is a function that allows you to smooth your animations in or out. For example, imagine an apple falling out of a tree. It doesn’t just drop at a constant rate, it gradually generates speeds as gravity pulls it to the ground. In the world of jQuery, this would be an example of easing in.

Easing has existed in jQuery in previous versions, but now in version 1.4 you are no longer are you limited to one ease for an animation. Within a single animation you can specify how you want each property to ease. For Example:

$("#box").animate({
    left: [700, 'easeOutElastic'],
    top: 300
 }, 1500);

As you can see in the above code, not only am I easing using the jQuery default swing ease, but I am also easing the #box left using ‘easeOutElastic‘. To specify easing for each property, simply define the property as an array where the first value is what you want to animate to and the second is the type of ease.

If you would like to see this new ability in action, check out my demo.

Only one problem… it is not a web-safe font like Arial, Helvetica or Lucida Sans. Well you have a couple options depending on your situation and hopefully these notes and links can send you in the right direction.

CSS Trickery

If you only plan on using your font only a couple times on your site (e.g. logo or navigation), you will want to use image replacement. There are few ways of accomplishing this, each has it’s benefits and setbacks:

1. Fahrner Image Replacement
2. Phark (scroll down article)
3. Shea Method (all the way at the bottom)

The last method is by far the most rugged option of the three because it works well with screen readers and works if images are turned off. The only issues is that if your image is transparent or slow to load, your trickery will be uncovered.

Dynamic Replacement

Now if you plan on using the font multiple times on a dynamic site, things get a little trickier. The two big options in this area are:

1. sIFR (Scalable Inman Flash Replacement)
2. FLIR (Facelift Image Replacement)

sIFR is a Flash-based solution that replaces your text with selectable vector type. FLIR is a php/JavaScript solution that automatically replaces the font with an image if the font is missing from the client’s machine. Unlike sIFR which requires Flash, all FLIR needs is JavaScript.

Fonts play a huge role in your brand and special care should be taken to ensure their integrity stays intact. If you do end up needing to replace the font, choose a method that works for your situation. Don’t go crazy and overkill.

Recently I was working on a site that required interactive charts. I researched a couple options and stumbled upon Highcharts.com in the process. Highcharts is JavaScript charting library that is highly compatible, offers numerous chart options, easy to use and… oh yeah it’s free for non-commercial use ($80 for commercial use).

As you can see, there is a nice tooltip that pops up as you hover. You also have the ability to zoom in closer to the data.

Highcharts is compatible on all modern browsers (and > IE6). It also relies on JavaScript and not client side programs like Flash. So you don’t need to worry about version Flash player your end user has. All you need to get high charts up and running is the highcharts.js core, a canvas emulator for IE, and either the jQuery or the MooTools framework. To do simple modifications, you don’t need to do any hardcore programing. This makes it really easy to work with as a designer.

Here you can eliminate sections of the pie chart by clicking on their counterpart in the legend on the right.

You have the ability to make line, spline, area, areaspline, column, bar, pie and scatter chart types. Charts can also animate when the page loads. Once loaded there are a couple nice interactive features like eliminating data, zoom and hovering tooltip text. These attributes can all be edited with little knowledge of JavaScript. Check out some demos to see the charts in action.

Highcharts is one of many options out there, but it’s simple designs and easy functionality win me over. If you are looking for some other nice chart options check out Google Chart API and JS Charts.