Michael Gaigg: Über UI/UX Design

10Aug0

How to use the Google Font API

Posted by Michael Gaigg

Google fonts available

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

&gt; <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.

&lt;link href='http://fonts.googleapis.com/css?family=Tangerine:regular,bold' rel='stylesheet' type='text/css'&gt;

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.

&lt;link href='http://fonts.googleapis.com/css?family=Tangerine' rel='stylesheet' type='text/css'&gt;

One can chose to include multiple fonts by using the pipe symbol, same rules as above apply.

&lt;link href='http://fonts.googleapis.com/css?family=Tangerine|AnotherFontName:italic' rel='stylesheet' type='text/css'&gt;

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?

14Nov0

Design Guidelines: ‘About Us’ Page

Posted by Michael Gaigg

IT Solutions About Us page

Example of an 'About Us' page from IT Solutions

There are many reasons for improving the usability of your 'About Us' page. Unfortunately many companies, especially bigger and well-known companies, tend to underestimate the value that comes from a well-designed 'About Us' page or simply assume that there is no need to explain themselves to their users.

The 'About Us' page helps to establish and re-enforce Trust and Credibility. Users of different backgrounds may need to know who is behind the content or service. Should I invest in this company? Apply for a job? Write an article about their service? Order a product?

The best news over all is: a simple link on your homepage is cheap and easy and the benefits of a clean and well-structured 'About Us' page outweigh many times the effort of creating it.

Design Guidelines for 'About Us' pages

  1. Provide clearly visible link on homepage
  2. Label the link either “About ” or “About Us”
  3. Present content in ‘inverted pyramid’ layers:
    • Tagline: Few words or brief sentence summarizing what you do
    • Summary: One to two paragraphs about goals and main accomplishments
    • Fact sheet: Section that outlines key points and other essential facts
    • Details: Subsidiary pages providing indebt information about processes, company structure, philosophy etc.
  4. Disclose address

References

28Oct0

Best Practices for accessible Links

Posted by Michael Gaigg

It is essential that users can find, identify, and comprehend hypertext links quickly. Even though there are no Level 1 (A) checkpoints associated with links it is pretty easy to fulfill Level 2 and even Level 3. It's definitely worthwhile the little effort with the added benefit that e.g. most browsers render the title attribute as a tooltip.

Basic Rules

See also my Design Guidelines for Links.

  • Contrast link text color and regular text color
  • Underline link text
  • Ensure link text is descriptive of its destination
  • Make visited links change color
  • Limit link text to a maximum of four words
  • Place important words at the front of link text
  • Minimize amount of links to seven (excluding the menu) unless they are presented in a clear structure
  • Use meaningful pathnames when creating directory structure

Best Practices

Level 1

No Level 1 requirements.

Level 2

Level 2 Checkpoints - Section 508 Compliancy Standards
Checkpoint Description W3C 508 Example
Links Clearly identify the target of each link 13.1 n/a <A href="my-doc.html">My document is available in HTML</A>,<A href="my-doc.pdf" title="My document in PDF">PDF</A>,

<A href="my-doc.txt" title="My document in text">plain text</A>

Level 3

Level 3 Checkpoints - Section 508 Compliancy Standards
Checkpoint Description W3C 508 Example
Links Create a logical tab order 9.4 n/a <A tabindex="2" href="link2.txt"">Link 2</A><A tabindex="1" href="link1.txt">Link 1</A>

<A tabindex="3" href="link3.txt">Link 3</A>

Links Provide keyboard shortcuts to important links 9.5 n/a <A accesskey="2" href="link2.txt"">Link 2</A><A accesskey="1" href="link1.txt">Link 1</A>

<A accesskey="3" href="link3.txt">Link 3</A>

Links Include non-link, printable characters (surrounded by spaces) between adjacent links 10.5 n/a [<A href="a.htm">Link A</A>] [<A href="b.html">Link B</A>] or<A href="a.htm">Link A</A> | <A href="b.html">Link B</A>

Templates

Find out more about <a title="Michael Gaigg IT Solutions Webpage" href="http://www.michaelgaigg.com/">IT Solutions</a>

References

About Me

Michael Gaigg is Lead UI Engineer in Esri's Professional Services Division.

He has been designing map applications for 15 years and is author and curator of UI Patterns for Maps.

Categories

Popular Posts

Error: Feed temporarily unavailable.