How to use the Google Font API
Posted by Michael Gaigg
Google fonts available
If you love typography and want some new fonts for your next web project then Google Font API might be worth looking into. It's
- easy to implement (as I will show)
- well supported by IE, Firefox, Safari and obviously Chrome
- open-source
- free (I should have mentioned first huh?)
End Result
Code Example
<html> <head> <link href='http://fonts.googleapis.com/css?family=Tangerine:regular,bold' rel='stylesheet' type='text/css'> <style> body { font-family: 'Tangerine', arial, serif; font-size: 2em; } </style> </head> <body> This text is in <strong>Tangerine</strong>. </body> </html>
Implementation
The important parts in above code are to embed the font into your page through the
Link
The link element referencing the google api and your desired font family.
<link href='http://fonts.googleapis.com/css?family=Tangerine:regular,bold' rel='stylesheet' type='text/css'>In above case I was referencing two variants delimited by a comma, the regular and the bold variant. Each variant will download an additional font and should be used only when really needed and used on the page to keep loading times as short as possible.
The variant parameter can be omitted for use of default.
<link href='http://fonts.googleapis.com/css?family=Tangerine' rel='stylesheet' type='text/css'>One can chose to include multiple fonts by using the pipe symbol, same rules as above apply.
<link href='http://fonts.googleapis.com/css?family=Tangerine|AnotherFontName:italic' rel='stylesheet' type='text/css'>Style
Use the font within your style sheet by simply referencing the font-family:
body { font-family: 'Tangerine', arial, serif; }Above examples specifies fallback fonts (arial, serif) that will be displayed (depending on browser) while the font is not loaded yet or if the browser doesn't support the Google Font API (e.g. iPhone, iPad, iPod, or Android).
Oh yes, the fonts are rendered as text and therefore support CSS3 features like text-shadow and rotation.
Tools
Font previewer
Use the Font previewer to play with some style attributes, get the resulting CSS code and see how the end result will look like.
WebFont Loader
Look into the WebFont Loader for getting more control over loading the right fonts at the right time.
The WebFont Loader is a JavaScript library co-developed by Google and TypeKit that also lets you control how browsers behave while the font is still loading as well as using multiple web-font providers.
UPDATE: Chris Heilmann just posted a REALLY nice post about Controlling custom fonts with the Google WebFonts API.
What about you?
Post your link if you are using the Google Font API already. I'd like to see some really creative uses.
Are you using any other Font library?
Highlights of Week 29/2010
Posted by Michael Gaigg
- A Complete Guide to A/B Testing (by Cameron Chapman) - convince yourself and your clients of a design that works better - good summary and tool collection.
- It Isn't Minimalism (by Dmitry Fadeyev) - as Dmitry argues: "Simplicity isn’t a design trend, it’s an attribute of good design."
- Complete Beginner’s Guide to Content Strategy (by Andrew Maier) - about strategies to abstract, analyze, collect, publish & manage. Nice!
- Understanding border-image (by Nora Brown) - nice CSS3 tutorial for custom borders - come on Microsoft, you can do it...
- Search Analysis with Google Analytics (by Dave Sparks) - may I introduce, your users. Get to know your users, what they do, what they want, what they are looking for. All invaluable information. Good intro by Dave.
- Best Tools for Testing Cross Browser Compatibility (by Joel Reyes) - every designers nightmare, browser compatibility.
- 10 Tools for Getting Web Design Feedback (by Ben & Jerry’s) -
- Drawing the Line: 6 Things You Shouldn’t Tolerate in Projects (by Sacha Greif) - Thank you, thank you, thank you. Can't reiterate enough. We Designers have to show integrity! Thank you.
Highlights of Week 26/2010
Posted by Michael Gaigg
- Complete Beginner’s Guide to Web Analytics and Measurement (by Andrew Maier) - a really great summary of tools and methods for web analytics.
- Favorite UX & Technology Blogs | Learning About New Web & Mobile Applications (by Janet M. Six) - uxmatters answer to favorite UX and technology blogs and how to learn about new Web and mobile applications.
- 10 New UX Books To Look Out for in 2010 (by Paul Seys) - what more to say...?
- 7 Steps to Better Website Feedback (by hongkiat) - good content but I really love this blog entry for its references.
- 15 Google Chrome Extensions for the Avid Designer (by Joel Reyes) - from Firebug to Resolution test and many more...
- Using Landmarks Makes Page Layout Easy (by Ben Gremillion) - harmony in design is based on well-known layout principles - great discussion by Ben!
Highlights of Week 11/2010
Posted by Michael Gaigg
- Google Analytics in Depth: Goals and Funnels (by Dave Sparks) - Money makes the world go round - funnel it (into your pocket)
- The reconstructive nature of human memory (and what this means for research documentation) (by Harry Brignull) - documentation of design decision is important to avoid pogo-sticking re-design or the HIPPO effect.
- Menu Item Usage Study: Part I (by Christopher Jung) - Mozilla's research into menu item usage.
- designing for experiences across channels (by Brandon Schauer) - have a look at this picture and let it sit for a while. Making sense?
- Basic CSS3 Techniques That You Should Know (by Joel Reyes) - always good to stay on top of technology, CSS3 is our friend!
- Participating in the Web of Data with Open Standards (by Chris Heilmann) - API's and geolocation made easy with YQL (Yahoo Query Language).
- Writing For The Web: Tips & Common Mistakes We Make (by Kelly Swee) - yet another list of tips, but then again we still don't seem to get it right...
- Rudy Giuliani Shares His Leadership Thoughts (by Bruce Temkin) - Bruce summarizes the 6 leadership principles Rudy Giuliani laid out in his keynote at the Intuit Financial Services.
“Buzz this” for WordPress integration
Posted by Michael Gaigg
Google Buzz
Christina Warren wrote a really nice blog entry on HOW TO: Integrate Google Buzz Into Your WordPress Blog, this will certainly get you started with your own buzz this icon/button.
I installed Google Buzz Button plugin (by Internet Techies) that allows you to add a “Buzz This” button to each of your WordPress posts (download google buzz plugin).
Yes, that's the nicely colored button right below these words - try it out, right here, right now
Highlights of Week 06/2010
Posted by Michael Gaigg
Maestros, at this point a quick note that I will be back writing my own content shortly (have quiet some stuff in my queue). So long, the highlights of week 6/2010:
- Paper iPad - you don't have the money for a real iPad? Make one out of paper
- Using a Pre-Launch Checklist for your Website (by Ben Gremillion) - building a website is fun and believe me, it's funnier to follow a protocol. This one is a great start.
- Leadership Lessons from Dancing Guy (by Derek Sivers) - Value your first follower, embrace him/her as equal, the rest will follow...
- If 1 of 5 users has a problem in a usability test will it impact 1% or 20% of all users? (by Jeff Sauro) - take observed usability issues serious, there are more than likely critical issues.
- Google Maps Get Labs With 9 Cool New Features (by Stan Schroeder) - nothing fancy when you work in a mapping company like ESRI, but probably a heck-full of work for google.
15 Outstanding Examples of Braille in our World
Posted by Michael Gaigg
Braille can be found everywhere. Some findings are real gems, love the McDonalds braille lunch menu which is even advertised on drive-through windows in corporate locations - yes, exactly, didn't know they had driving test in braille yet. I'd actually opt for scratch and smell menus at McDonalds - ok, that's just me
Love the braille bikini as well. Enjoy!
Hong Kong Disneyland (by tandaleo)
Wine label (by adactio)
Japanese beer (by preetamrai)
Medication (by Thijs van Exel)
Graffiti (by John Kannenberg)
Monopoly (by Tostie14)
Google (by johnbullas)
McDonalds drive through (by John C Abell)
McDonalds lunch menu (by nothingedifying)
Bike racks (by alex_lee2001)
Cake to celebrate the bicentenary of louis braille (by moirabot)
Playboy (by 1980Andrew)
Playing cards (by beerboxerboy)
Map of Cambridge (by DrNick3)
Don't touch (by mako)
Bikini (by tussenpozen)
Website Analytics I: Browser Support
Posted by Michael Gaigg
Which browser platform should we design for? To most web developers this question is a nightmare and dilemma at the same time, but yet again we face it almost on a daily basis. Just to show you how difficult an answer might be is the disparity between two projects I'm involved in, one for a federal government body that by definition only supports IE6 and another that is expected to be finished in 6 months and therefore was hoping to target IE8. Are these expectations realistic?
Analytics
Let's have a look at some website analytics that were collected over the past year (July 2008 - July 2009), taken from Fanposter.org, a social media website with over 5000 registered users from almost 100 countries and collected through Google Analytics.
Note: While I'm aware that the audience of this website might not be representative for all age groups or countries/regions, it still provides valuable hints about browser usage and trends.
Lesson 1: Internet Explorer on the fall
Internet Explorer is historically bundled with Microsoft Windows Operating Systems. IE6 was released August 27, 2001 just months before WinXP; IE7 was released October 18, 2006 and included with Windows Vista and Win Server 2008; IE8 final was released March 19, 2009 and will be included with Windows 7.
Figure 1: Website Analytics, Browsers Comparison
The combined total market share for Internet Explorer over the past year was 76.5% but the trend shows a clear decline over the past months from 74.0% in May to 68.8% in June and 53.9% in July.
Will this trend continue to hold true?
A lot will depend on the upcoming release of Windows 7 in October 2009 with Microsoft's power in reaching the people to upgrade their browsers. But almost certainly Microsoft will loose its dominant position of 95% in 2002 and 2003 (IE5 & IE6) or over 75% in the past year to its numerous very capable competitors.
Lesson 2: IE8 on the rise
Figure 2: Website Analytics, Browsers Comparison, Internet Explorer
When comparing the 3 current versions of Internet Explorer out there (IE6, IE7 and IE8 with IE5 and lesser not appearing in the analytics anymore and therefore being disregarded) it seems to be evident that IE8 is on the rise. Though the really surprising observation is that this increase cannot be accounted to users abandoning IE6 but rather to users upgrading their version of IE7. How come? The answer seems to lie in fact that many companies and their IT departments as well as governmental bodies still continue to hold on to and enforce the use of IE6. Can Microsoft overcome these - mostly security-related - concerns through IE8?
Lesson 3: IE6 might not die as soon as we all may wish
Figure 3: Google Trends; The spikes D, E & F indicate the introductions of Beta 1 (March 5, 2008), Beta 2 (August 27, 2008) and Final respectively.
As discussed above IE6 is still a requirement for many users. A quick look at Google Trends reveals that searches for IE6 (Figure 3: blue line) have been pretty stable over the past 4-5 years while searches for IE7 (Figure 3: red line) are declining and searches for IE8 (Figure 3: yellow line) are in the lead. This goes hand in hand with the observations in Lesson 2 above.
In the meantime let's join the numerous battles to kill IE6 like Norwegian Websites Declare War on IE 6 and IE Death March or more seriously at Bring down IE6. Joke or not, IE6 will be around for some more time and therefore needs to be considered if we want it or not.
It won't even help that Digg is discussing to drop support for IE6 or YouTube Will Be Next To Kiss IE6 Support Goodbye. Both sites don't need users that cannot upgrade IE6 e.g. due to limitations at work because exactly these users have limited access restricted by their companies anyway.
Lesson 4: Firefox stays on top
A very interesting observation is the fact that Firefox does a really great job in staying on top of things and keeping their user base up to date. In the last month of the observation period less than 5% of all Firefox users had a version lesser than 3, or in other words, the great majority of Firefox users was using version 3 and higher. And with versions 3.7 and Firefox 4 in the making, a huge base of motivated developers and fascinating plug-ins the future looks bright. Firefox's marketshare seems to climb steadily also, as of July 2009 it showed 32.1% (20.5% average over the past year) with the majority Windows versions and only 0.6% on Mac and 0.2% on Linux. Obviously we all love the high commitment to standards compliancy that makes developing web apps a blast, right?
Firefox 4 Mockup (Win Vista)
Lesson 5: Chrome & Safari
Google Chrome was released December 11, 2008 and first received as Google's never-ending battle against Microsoft (see graphic by Federico Fieni) but more likely just another smart move to keep users on the web - the faster, the better - or like Ben Parr explains "Revenue = Amount of Time on the Web".
Google vs Microsoft: Chrome
As far as marketshare is concerned, Chrome rose to 2.3% in July according to my analytics. This is still fairly small but not to be underestimated. In terms of testing Google's developer page for Chrome suggests that "if you’ve tested your website with Safari 3.1 then your site should already work well on Google Chrome". But what about Safari?
Safari accounts for 1.3% in the yearly average (with 1.2% on Mac and the rest on Windows). Should we test Safari with a marginal share like this? It really depends on your budget and company structure which might require unjustified additional resources for your QA team. Do the math for yourself: 1% of 10k visitors are 100 potential customers - is it worth the effort?
Lesson 6: Opera is the misunderstood genius
Opera shows an average of 1.1% with an unexpected peak in July 2009 - I need to continue observing where and why that came from. Needless to say, Opera is strong in European countries like Russia and on mobile devices such as mobile phones, smartphones and PDA's (personal digital assistants). It's a shame that Opera is not further ahead, it has been and still is innovator and spearhead in terms of new useful features as well as standards compliancy and implementation.
What are your experiences?
Without giving any decisive conclusions I'd like to hear your experiences or analytics to this subject. For which browser platform do you design for? What do you tell your clients when they ask you this question?
Design Guidelines: Error Messages
Posted by Michael Gaigg
Just some weeks ago I wrote about Design Guidelines for 404 Pages. Closely related are Error Messages in general, and believe me, they will save your life. That's why you need to get them right!
Why bad error message can hurt your company
Error messages are like saying "You are stupid", or "Come on old fart, you still don't get it?" - and that's bad, it's almost like constantly telling your kid "No, no, no". Be preventive, defensive and avoid Design Bloopers like the the one at Cingular: Having tried to log into my account the following error message appears "My Account is Currently Closed". Can you imagine the horror that bubbles up and the thoughts of who to call (but how?)? As it turns out Cingular was just maintaining their server and the only flawed thing was the error message. Is it possible to measure how much this little flaw will hurt the company?
Misleading and almost terrifying error message at Cingular
Defensive Web Design
The beauty of usability design is to think of ways to prevent showing error messages at the first place. The most prominent example is probably Google. Have you ever seen an error message on Google? How great is the "Did you mean:" function... I even use it day by day as a spell checker, like I use google images to visualize words I didn't know (do you know what a vicuna is?).
Design Guidelines: Error Messages
- Avoid error messages if possible.
- Explicit indication that something has gone wrong
- Human-readable language
- Polite phrasing without blaming the user or imply that user is stupid or is doing something wrong
- Precise descriptions of exact problems
- Constructive advice on how to fix the problem
- Visible and highly noticeable, both in terms of message itself and how it indicates which dialogue element users must repair
- Preserve as much of the user’s work as possible
- Reduce the work of correcting the error (e.g. list of possibilities)
- Hypertext links may be used to connect a concise error message to a page with additional background information or explanation of the problem.
Did you ever encounter a 'special' error message?
Send me a screenshot and/or tell me the story behind it.
I love Speed… therefore Google Chrome is.
Posted by Michael Gaigg
Happy St. Patrick
Happy St. Patrick's Day everyone! While you're still sipping your Guinness and chewing on your shamrocks, everything seems to be new and shiny at Google: As announced today in their new Google Chrome blog, Google has released their new beta of Chrome.
New Features
Besides some really nice features (form autofill, full page zoom and autoscroll) Google Chrome offers a cool new way to drag tabs out to get a side-by-side view - way to go.
Did Google Chrome Just Get Even Faster?
Have I mentioned speed yet? As if (ooooold stable version of) Chrome wasn't fast enough, the neeeeew beta promised 25% to 35% in speed enhancements according to their V8 and Sunspider benchmarks. Ask your typical user to see why speed matters
Which Browser do you use?
Are you still on Internet Explorer? Don't tell me IE6 - I'd have to creep through your monitor and strangle somebody... Firefox? Chrome? What are your experiences?
Recent Posts
- 500+ Free Stunning PC Icons August 31, 2010
- Highlights of Week 32/2010 August 16, 2010
- How to use the Google Font API August 10, 2010
- Secret of Pixar’s Success [Link] August 6, 2010
- Esri listens to their Users and changes Pronunciation of its Name August 3, 2010
- Highlights of Week 30/2010 August 2, 2010
Categories
Accessibility (13)
- Code Samples & Tips (4)
- Design Guidelines (11)
- Go figure (7)
- Good News (11)
- Here and there (11)
- This Week’s Highlights (23)
- Usability & UCD (14)
- Web Design (13)
Popular Posts
- Make it easy for your customers to throw money at you!
- Web Content Accessiblity Guidelines (WCAG) 2.0: Overview and Structure
- Section 508: WCAG 1.0 or WCAG 2.0?
- Powerpoint Wireframe Stencils as Free Download
- Go figure: 10 Comic Strips that have Something in Common
People that inspire me
- Björn Seibert
- Boxes and Arrows
- Bruce Temkin
- Christian Heilmann
- David Leggett
- Gez Lemon
- Hannes Schmiderer
- Harry Brignull
- Henny Swan
- Jared Smith
- Jared Spool
- John Rhodes
- Joshua Porter
- Kel Smith
- Scott Berkun
- The Access Pond
Tags
What I'm Doing...
- Top 20 Wireframe Tools http://t.co/zRBd0W0 via @garmahis 2 weeks ago
- RT @wpzoom 500 Free Icons: WPZOOM Social Networking Icon Set http://bit.ly/aEGdUJ 3 weeks ago
- RT @esriuc GIS: Designing Our Future. The concept of GeoDesign is really taking off, keep an eye out. http://bit.ly/9TioWQ 2010-08-12
- 1400 super cool web icons by FatCow: http://bit.ly/ctskcU 2010-08-11
- [JOB OPENING] User Interface Engineer, http://bit.ly/ui-engineer-position 2010-07-30
- More updates...
Posting tweet...