10Jan0
Highlights of Week 02/2012
Posted by Michael Gaigg
Starting into the new year with a short list of high quality links. As always, your feedback and suggestions are greatly welcome 
Cheers!
- Cross Browser HTML5 Progress Bars In Depth (by Zoltan “Du Lac” Hawryluk)
- 15 Web Design Trends to Watch Out For in 2012 (by Jake Rocheleau)
- Profiling CSS for fun and profit. Optimization notes (by kangax)
- Google Maps: Designing the Modern Atlas (by Willem Van Lancker)
- Password strength verification with jQuery (by Jim Nielsen)
5Dec0
Highlights for Week 48/2011
Posted by Michael Gaigg
- 15 Responsive CSS Frameworks Worth Considering (by Paul Andrew)
- Complexity and User Experience (by Jon Bolt)
- Origins of the Apple Human Interface
- Internet Visionary Paul Otlet - Networked Knowledge, Decades Before Google (by Meike Laaff)
- The Anatomy of an Experience Map (by Chris Risdon)
- A Complete Color Spectrum of Web Design Inspiration (by Chris Spooner)
Minimalist Web Design: How Minimal is Too Minimal? (by Delwin Campbell)
27Nov0
Highlights for Week 47/2011
Posted by Michael Gaigg
- CSS3 secrets - 10 things you might not know about CSS3 (by Lea Verou)
- Announcing jQuery Mobile 1.0 (by jQuery Mobile, Todd Parker)
- NASA now seeking candidates for astronaut positions (by NASA)
- A Look Inside Mobile Design Patterns (by Theresa Neil)
- Using Fonts for Icons… (by Chris Coyier)
- Make Your Own Fonts: Free Font Editors (Elsewhere on the Web) (by Jacob Gube)
- Which Custom Web Fonts Solution Should You Use? (by Chris Spooner)
- Create CSS3 Buttons Compatible with All Browsers (by Madalin Tudose)
- Quantifiable Design: How to Remove Subjectivity from the Process (by Stuart Silverstein)
- 25 Google+ tips and tricks (by Vail Joy)
24Jul0
Highlights of Week 29/2011
Posted by Michael Gaigg
- The Entrepreneur’s Guide to Coffee Shop Etiquette (by Erica Swallow) - "Sound = never appropriate" or "You only get one seat. Put your stuff on the floor."
- 10 Helpful Tools & Apps for Twitter Power Users (by Leo Widrich) - Tweepi – Get rid of unwanted followers
- 38 “Call to Action” Button Templates That Really Stand Out (by Alvaris Falcon) - Make it big, make it clear, make it delicious.
- Introducing BrowserID – easier and safer authentication on the web (by Robert Nyman, and Chris Heilmann) - strong forces behind this idea, will it take off?
- How I Write (by Mitch Joel) - Tools, tactics and techniques, very nice
- A different approach to conference Q&A – Interviews (by Christian Heilmann) - Q&A in separated session, very interesting approach with many advantages
- 40 useful APIs for web designers and developers (by Cameron Chapman) - great summary of google, yahoo and other API's
7Jun0
Highlights of Week 22/2011
Posted by Michael Gaigg
- User-interface, user-experience & usability explained (by Bernard Schokman) - I think the title is misleading, it's more about "Practical design principles for UI/UX/Usability Design"
- 10 Important UI Design Considerations for Web Apps (by Marc Gayle) - try polishing the little things to make your app truly awesome
- Tools for Facilitating Feedback on Prototypes and Wireframes (by David Leggett) - What's your favorite? Why?
- How to Identify the Best Design Problems (by Joshua Porter) - About the importance of prioritization.
- A Guide to CSS Colors in Web Design (by Alexander Dawson) - Once again a great guide by Alexander; contrast, shades, hues, transparency and co.
- 40 Beautiful and Elegant WordPress Themes of May 2011 (by Madalin Tudose) - very nice collection, wordpress has come a long way and so did its front-end designers
- HOW TO: Add the +1 Button to Your WordPress Site (by Christina Warren) - if you like it or not, here is the +1 Button integration...
- Why You Should Buy Your First 5000 Twitter Followers (by Rohit) - ethical or not... love or not love... with a little help from your friends
- So you think you can build a website? (by Vitamin in Talent) - a really handy flowchart to determine if your idea will result in a great website
- The ultimate HTML5 resource guide (by Cameron Chapman) - what else to say? ultimate resouce guide!
- (More) Useful Web Usability Testing Tools (by hongkiat) - What are your experiences with these tools? Which one is your favorite? Why?
31May0
Highlights of Week 21/2011
Posted by Michael Gaigg
- HOW TO: Get Started With Google Analytics (by Meghan Peters) - Helps you monitor and analyze visitors, traffic sources, content, goals, e-commerce,...
- Usability Testing: What You need to Know? (by hongkiat) - read about how to structure tasks and questions
- 30 Inspiring “About Me” Pages (by Stephanie Hamilton) - yes, get inspired!
- Designing Effective FAQ Pages (by Mohammad Moradi) - use them as a last resort, but most important: make them helpful and not require another FAQ page to decipher
2May1
Highlights of Week 17/2011
Posted by Michael Gaigg
- On Leadership (by Kel Smith) - Some really, really, really good lessons that we should honor (or be reminded of) every day.
- Considerations for ArcGIS Server developers: A look toward 10.1 (by Ismael Chivite and Sterling Quinn) - on web services architecture, custom geoprocessing tools, geometry service and server object extensions
- 10 Google Labs Experiments You Should Know (by bellefoong) - Fast Flip? App Inventor for Android?
- How to Use Your iPad for Real Design Work (by Joshua Johnson) - all I need now is an iPad, anybody got a spare? haha
- 4 Quick Tips for Getting the Most out of Google Analytics (by David Leggett) - Regular expressions to filter data? Give me a break... but on second thought...
- Common elements used in interface button design (by Callum Chapman) - excellent tutorials for anybody interested in button design
15Nov0
Highlights of Week 46/2010
Posted by Michael Gaigg
- 10 Intermediate and Advanced Tips from PHP Masters (by Jolie O'Dell) - experts offer their advise; nice compilation.
- Beautiful (Free) Fonts for Titles and Headlines (by bellefoong) - niiice.
- Ways to Horrify Website Designers (by Alexander Dawson) - right in time for Halloween
- Design is Choice (by Dmitry Fadeyev) - Dmitry's take on Google removing the "http://" portion in Chrome's address bar
- The Seven Deadly Sins of Design (by Rob Bowen) - a funny take on seven deadly sins.
- Google Chrome Extensions for Web Design Students (by Julia May ) - Ctrl/Cmd + Shift + J ... that's all I say...
- How to Design the Perfect Business Card (by Rob Bowen) - Great article that serves as categorization and motivation at the same time.
- jQuery 1.4.4 Released (by Addy Osmani) - may I introduce: .fadeToggle() - with 1.5 coming next year.
Anything I've missed?
Post it in the comments or drop me a note.
31Oct0
Highlights of Week 44/2010
Posted by Michael Gaigg
- 25 Tools to Improve Your Website’s Usability (by bellefoong) - which is your favorite?
- Book Review — Map Scripting 101 (by James Fee) - exactly what the title says... book review.
- What We Look for in Founders (by Paul Graham) - Determination, Flexibility, Imagination, Naughtiness, Friendship
- SEO for Bing Versus Google (by John Pring) - Google hates Flash... and more!
- Designing Hyperlinks: Tips and Best Practices (by Jake Rocheleau) - the bread and butter of web design, always good to remember.
- Becoming a Better Web Designer (by Alexander Dawson) - this is an awesome resource of resources - reserve some time for reading.
- Announcing the Wijmo Beta! (by Chris Bannon) - Wijmo is an extension to jQuery UI and adds new widgets and features to your arsenal - sweet.
- HOW TO: Optimize Your Social Media Marketing Strategy (by Josh Peters) - Awareness, Interest, Desire and Action + Loyalty and Advocacy.
10Aug2
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?
About Me
I'm Michael Gaigg, Lead UI Engineer at Esri's Prof. Services.
I have over 8 years of experience in designing map interfaces and can't stop thinking about improving them.
Help me by sharing your thoughts, ideas and comments.
Categories
- Accessibility (16)
- Code Samples & Tips (8)
- Conclusions (4)
- Design Guidelines (11)
- Designing Map Interfaces (3)
- Go figure (9)
- Good News (19)
- Here and there (21)
- Map Applications (7)
- This Week's Highlights (53)
- Usability & UCD (22)
- Web Design (21)
Popular Posts
- ColoRotate – 3D color scheme generator with social component
- Web Content Accessiblity Guidelines (WCAG) 2.0: Overview and Structure
- Powerpoint Wireframe Stencils as Free Download
- Go figure: 10 Comic Strips that have Something in Common
- Job Posting: User Interface (UI) Engineer at ESRI
Latest tweets
- Awesome resources for website designers http://t.co/oB77As8O 2 weeks ago
- I just contacted Rep. Jerry Lewis to oppose #SOPA #PIPA - Join me! http://t.co/BuFcgvqf #wikipediablackout 2 weeks ago
- Awesome #login #form #sample http://t.co/hob6dtvF 3 weeks ago
- Photo: Dude, just don’t pin the place you’ve been… ;) http://t.co/lwf3gIU8 3 weeks ago
- Photo: Who wants to buy a church in Los Angeles? http://t.co/0SJrYxCv 2011-12-31
- More updates...
Posting tweet...
Tags
Accessibility
analytics
best practices
book
color
content
contrast
css
design
esri
examples
facebook
feedback
free
google
guidelines
html5
inspiration
ipad
jacob nielsen
javascript
Joel Reyes
jquery
map
mobile
navigation
PHP
requirements
section 508
silverlight
techniques
tips
tools
trends
tutorial
twitter
typography
UCD
ui
usability
user
User Testing
UX
web
Web Design
