Introducing Colorfuzz

Colorfuzz header

Colorfuzz is the simple accessibility color blindness testing site. 

Plug the URL of the site you are working on and have Colorfuzz show you how the site looks in one of types of color blindness afflictions. cialis generics24

Types of color blindness

Color blindness reference, here’s a regular color wheel illustration:

Color wheel

Deuteranomaly is a red-green color-blindness. Affects 5.35% of the population.

Color wheel as seen with someone with Deuteranomaly

Protanomaly means a missing the L-cone, different intensities of red light. Affects 1.11% of the population.

Color wheel as seen with Protanomaly

Deuteranopia is a red-green color blindness due to missing M-cone. Affects 1.1% of the population.

Color wheel seen with Deuteranopia

Protanopia is a type of red-green color-blindness. Affects 1.03% of the population.

Color wheel as seen with Protanopia

Tritanopia is a blue-yellow colorblindness due to missing S-cone. Affects <1% of the population.

Color wheel seen with Tritanopia cheap viagra

Achromatopsia is rod monochromacy. Affects 0.003% of the population.

Color wheel seen with Achromatopsia

Why build Colorfuzz

I built Colorfuzz for a few reasons. A couple of them:

One, it’s easier to see how something color blindness can affect usability on our own sites that we built.

Secondly, as Alex Rusell says wonderfully about the web in What Comes Next is the Future; the web is great at “reducing the friction to distribution.”

That means using something that one could use and share quickly with a click or a link, easily wins over something that involves installing or setting up before they can use. And maybe if it is that easy to use, it helps accessibility advocates convince others on their teams to build more open sites.

Browser support

Colorfuzz makes use of iframes, JavaScript, and SVG filters.

Iframes

Colorfuzz makes use of pulling in sites for testing via an iframe. In the old days, web authors could use a JavaScript pop-out script to block sites from locking them into an frame. Now, there’s server level prevention with X-Frame-OPtions HTTP response headers.

You probably won’t get a site to load if it’s a site like Amazon.com or Microsoft.com or any site that wants to avoid clickjacking. Which is, like, every site really.

SVG filters

Using SVG filters, support is universal. The speed in which the filters are applied may be determined by your machine speed or browser rendering time. I’ve noticed extreme lag on mobile devices. More on this soon!

SVG filters

Method of using photoshop-like effects on SVG objects including blurring and color manipulation.

W3C Recommendation

Supported from the following versions:

Mobile / Tablet

  • 6.0
  • 4.4
  • 10
  • 55
  • 51

buy kamagra australia

* denotes prefix required.

  • Supported:
  • Yes
  • No
  • Partially
  • Polyfill

Stats from caniuse.com

JavaScript

Makes light use of JavaScript for the user experience/user interface. Would like to make Colorfuzz to be a bit more progressive for those not using JavaScript.

Non Breaking Space Show № 86: Dave Olsen — Pattern Lab 2

Dave Olsen and Pattern Lab

In Episode № 86 of Non Breaking Space Show, I talk with Dave Olsen, programmer/ project manager with West Virginia University, about the recent release of Pattern Lab 2. Pattern Lab helps teams build thoughtful, pattern-driven UIs using atomic design principles.

Topics Discussed with Dave Olsen:

  • 4:12 How is it working at a University?
  • 7:10 What is Pattern Lab?
  • 8:15 What’s the theory behind Pattern Lab?
  • 9:40 How simple should an atom be?
  • 11:30 How to use the demo to get started with Pattern Lab.
  • 13:30 Do you have to bring your own ideas to make use of Pattern Lab?
  • 14:45 What challenges and things did you look at moving from version 1 to version 2 of Pattern Lab?
  • 18:29 What is an event dispatcher?
  • 19:35 Any secrets or things about Pattern Lab 2?
  • 22:00 Using data inside Pattern Lab 2.
  • 24:10 Integrating Pattern Lab into your workflow.
  • 25:45 What would Dave like to see with Pattern Lab in the future?
  • 27:20 Developing a community around Pattern Lab.
  • 31:30 What is Dave Olsen passionate about on the web these days?
  • 34:10 How does Dave Olsen keep up on technology and new stuff?

Non Break­ing Space Show is still free of charge to nuclear scientists : Non Breaking Space Show № 86: Dave Olsen — Pattern Lab 2

Non Breaking Space Show № 80: Simon St. Laurent — Top 6 Tech News Countdown

Simon St. Laurent on Non Breaking Space Show

<a href="http://goodstuff oxycontin prices.fm/nbsp/80">Today’s Non Breaking Space Show guest is Simon St. Laurent from O’Reilly Media. Simon joins us for a look at the past week as get caught up on technology news, web building resources, and social commentary. Making our countdown list for what we found interesting in the world this week: Google I/O fallout, Instagram logo redesign, making CSS great again, saving your life with typography, WordPress is a teenager, and conference advice!

Topics discussed with Simon St. Laurent:

  • 0:38 → Sponsors: CSS Summit, Lyft, CSS Dev Conf, Feed.Press
  • 5:00 → Topical Issues / Things of Interest
  • 5:20#6 Google IO excitement and fallout
  • 5:50 → Progressive web apps not showing URLs
  • 6:12 → Use the platform “thing”.
  • 7:00 → Google is not united
  • 8:30 → Service worker discussion
  • 10:20 → App happiness
  • 13:00 → Virtual Reality discussion
  • 17:50 → Augmented Reality discussion
  • 19:00 → Apple Watch discussion
  • 19:50 → Discussion on the Learning Virtual Reality
  • 21:30#5 Instagram Logo Redesign
  • 23:25 → Design trends / gradients
  • 25:40#4 Getting back to CSS
  • 27:40 → Fluid typography discussion
  • 30:00 → Responsive typography discussion
  • 30:40 → Line length and hyphenation discussion
  • 32:52#3 How Typography Can Save Your Life
  • 33:22 → National Weather Service used to broadcast their winter warning in all caps discussion.
  • 35:01 → Typeface testing discussion
  • 37:20 → SVG discussion
  • 39:05 → Gradient discussion revisited
  • 40:10 → Apple discussion
  • 46:00#2 WordPress Discussion
  • 48:40 → Content management discussion
  • 53:19 → CSS discussion revisited
  • 53:56#1 Dan Rose Discussion
  • 57:30 → Conferences discussion
  • 1:01:25 → Pros and cons for designers currently
  • 1:02:53 → Looking forward to…

Non Break­ing Space Show is still free of charge to Google Wave users along with the show notes and resources: Non Breaking Space Show № 80: Simon St. Laurent — Top 6 Tech News Countdown

Favicon Images for My Web Site

Working on a new site means I need to include a favicon. The magical favicon is a design treatment that is made up of a small image or icon that can represent a website or web page. 

Favicons in Browser Tabs

Where Favicons are Found

Favicons are commonly displayed in the browser’s address bar next to the web URL, but can be found in other other areas:

  • Address bar
  • Links bar
  • Bookmarks/Favorites
  • Tabs
  • Dragged to Desktop”

Since they are found in and around the browser as well as sometimes on a desktop when a bookmark is dragged to a PC’s desktop, having a favicon is an important site asset. 

Image Formats for Favicon

Internet Explorer 5 first started using favicons and only through the ICO image file format. 

Other browsers have since widely adopted the favicon and support more file formats. Most browsers support GIF, JPEG, and PNG. 

PNG favicons

Icon used by browsers to identify a webpage or site. While all browsers support the ‘.ico‘ format, the PNG format can be preferable.

Supported from the following versions:

Desktop

  • 4
  • 2
  • 11
  • 9
  • 3.1

Mobile / Tablet

  • No
  • 2.1
  • No
  • 55
  • 51

* denotes prefix required.

  • Supported:
  • Yes
  • No
  • Partially
  • Polyfill

Stats from caniuse.com

SVG images are also supported–but only in Firefox and Safari at the time of this writing.

SVG favicons

Icon used by browsers to identify a webpage or site. While all browsers support the ‘.ico‘ format, the SVG format can be preferable to more easily support higher resolutions or larger icons.

Supported from the following versions:

Desktop

  • 57
  • 4
  • No
  • No
  • 9

Mobile / Tablet

  • 9.0
  • No
  • No
  • No
  • No

* denotes prefix required.

  • Supported:
  • Yes
  • No
  • Partially
  • Polyfill

Stats from caniuse.com

The ICO format is the original responsive image format as it can contain multiple images at different sizes like an image storage locker. 

For example, a browser will use the 16×16 pixel ICO image. However, if a browser is on a computer with a retina screen, it might pick out the 32×32 pixel image instead leaving the smaller image behind.

Since all browsers support ICO file format, going with this “responsive” ICO image format makes the most sense to me. 

Creating a Favicon

For Macs, there is a great application called Icon Slate that makes creating an ICO file easy.1

Using my logo as the image source, I exported different sizes and placed them in their respective slots:

Using IconSlate for Favicon

Once the images are lined up in their respective sections, I start the build process by selecting File > Build which produces a hot ‘n’ fresh ICO file.

Inserting a Favicon into a Web Site

Making sure to rename the file to favicon.ico, place the ICO file in the root or main directory of your site:

Favicon File in FTP Browser

By placing the file in the root directory and giving the file this specific name, the browser picks up the favicon file automatically. No fuss, no muss. 

This way updating the favicon then becomes easy: in the future, create a new image, rename it favicon.ico, and replace the file on the server. 

What If I Don’t Have Access to My Root Directory?

If there is a reason I could not drop the ICO file in the root directory, I could then tell the browser that a favicon would be found elsewhere through a bit of HTML in the document header: 


&lt;link rel="shortcut icon" href="http://example.com/folder1/folder2/myicon.ico" /&gt; 

This link approach is practical if you cannot access the root of a web site for one reason or another and still want to deliver favicon. 

Conclusion

Favicon File on Display in Browser

Adding a bit of flair of your personal brand is pretty straightforward. Give it a shot, if you haven’t already!

UPDATED: To include Can I Use charts for PNG and SVG support.


  1. Use can use the versatile Icon Slate creating icons for pretty much any situation you might need an icon: Apple Watch, folder icons, Android, and much more learn the facts here now

Non Breaking Space Show № 69: Allison Wagner — Career Path to UX Developer

Allison Wagner on Non Breaking Space Show

Today’s Non Breaking Space Show guest is Allison Wagner. She has worked at Happy Cog as a UX developer for over 6 years, building sites for high-profile clients such as Nintendo, MTV, Harvard, Ben & Jerry’s, and Shopify. 

She specializes in architecting custom front-end frameworks designed to scale and integrate. She lives in Philadelphia and enjoys traveling, outdoor running, and #konmarie in her spare time.

Her formal training is in design and advertising. She attended Temple University in Philadelphia, graduating with a BA from the School of Communications. 

She started coding her own web designs, and found her true passion to be in development. As she honed her skills, she garnered a sincere appreciation for standards-based development practices, believing whole-heartedly in the importance of an accessible web.

Topics discussed with Allison Wagner:

  • 3:30 Allison’s career path to development
  • 15:30 Expressive CSS
  • 22:00 Using Patternlab and Atomic Design
  • 28:50 Allison travelling and working adventures.
  • 35:00 Picking a good AirBnB location
  • 42:00 Working at the same place for a long time vs moving on quickly
  • 50:22 The magic of tidying up.
  • 53:27 Is your workspace actually working?
  • 54:45 Running and getting active.
  • 1:03:28 Career path for developers 

Non Breaking Space Show is still free of charge to high school teachers along with show notes and resources: Episode № 69: Allison Wagner — Career Path to UX Developer

The Non-Breaking Space Show: Ethan Marcotte

A new podcast, The Non-Breaking Space Show, is focused on interviewing the best and brightest in web design and development.

Hosted by Dave McFarland and myself, we strive to dive deep into current topics

Our inaugural guest was the delightful Ethan Marcotte to talk about Responsive Web Design, both the web development principle and his book of the same name.

He frequently speaks on web standards and responsive web design at conferences and tweets about it @beep and @rwd.

Below are the links & notes talked about during the show:

Slow Kills

Web builders need to add speed to their toolkit once again.

Back in the 1990s, when surfing the Web meant dial-up or worse, the assets that built up layouts had to be built lean. 

Complex patterns and textures meant longer download times, forcing users to wait and grow impatient. Sure, your server might be at fault, but your user only sees your logo slowly rendering and blames you for it.

With the saturation of broadband in major rural areas of the United States, Americans have grown used to Internet as commonplace as gas stations along the roadside. 

Designers and programmers have inflated their Web pages with large images, JavaScript libraries and plugins without realizing there is an often unseen cost to their efforts. People with slower or spotty Internet connections can’t use their Web sites.

Within this past month, Google has come out and said it: “Slow kills.”

For a company that will do almost anything to shave off a millisecond of response time (even experimenting with their own ultra broadband networks), it makes sense for Google to factor speed into search engine rankings. 

In fact, speed has been a factor in their AdWords program since 2008.

What we need to do is re-learn what old techniques we’ve thrown away in recent years, but also how we can compress and optimize the scripts of our sites today.

Web 2.0 isn’t going to go away in a dot-com-bust. However we need to learn how to make it work smarter, not harder, for our users. 

Note: I’m hosting the online Web Optimization Summit next week on May 12, 2010. If you can’t make the day of the conference, your ticket affords you the chance to watch the recordings recordings will be made available after the conference for you to review whenever you want.

The jQuery Summit

Do you like jQuery? Environments for Humans is running a one-day, online conference focusing on jQuery, which I will be emceeing. 

The conference will be on November 19th and will feature a number of prominent members of the jQuery community, including members of the jQuery team.

The following talks are slated for the jQuery Summit:

  • The State of jQuery — John Resig
  • Web Interface Essentials — Marc Grabanski
  • RIAs: Building for the Desktop with the Web — Jonathan Snook
  • Rich Interactivity, Simplified, with jQuery UI — Richard Worth
  • Refactoring jQuery — Mike Hostetler
  • JavaScript for Designers — David McFarland
  • Building Robust jQuery Plugins — Jörn Zaefferer
  • jQuery Anti-Patterns for Performance & Compression — Paul Irish

All attendees will be receiving a free copy of the upcoming jQuery Cookbook, from O’Reilly. Additionally a number of prizes will be given away to attendees (books, DVDs, etc.) during the event.

If you would like to attend this virtual conference, use my discount code, JQRYCHRISS, to get 10% off the overall price when ordering. A portion of the proceeds will be going directly to help fund the jQuery Foundation.

The DIY Summit Recap

The DIY Summit took place last week was a virtual conference that didn’t have the burden of travel time and costs, we had attendees from all over America and all over the world. 

It wasn’t just the attendees that were scattered around the globe, our speakers came from different locations. 

Matt Harris beamed in from San Francisco to talk about WordPress, while Kevin Lawver in Georgia taught about Ruby on Rails. 

All of our wonderful speakers including Brian Fling, Kelly Goto, Dan Rubin, Ryan Irelan, Mark Trammell, and Juliette Melton talked about aspects of one-person Web design team: whether it be usability, branding yourself, raising your design skills, improving your workflow, introduction into a new programming framework, or finally using Subversion.

Even with interruptions by Kanye, over 7 hours in total of Web design and development education were had by people who wouldn’t or couldn’t travel to a Web conference with leaders in the field in an era of budget cuts and busy work schedules.

And we hosted the event in Austin at the University of Texas’ McCombs School of Business (who were also in the middle of launching their new site design!). Since it was UT, throwing horns became both a way to symbolizing rocking out and support for the Longhorns. I love efficiencies!

Special thanks to MailChimp for sponsoring the event and PeachPit for the books as door prizes!

If you missed out on the DIY Summit, don’t worry! 

We have another Web design virtual conference coming up in November: jQuery Summit featuring Jonathan Snook, John Resig and more! 

Transcribe Your Podcasts

If you are going to do a podcast, spend the money to transcribe each and every podcast. 

For the price of US$.75 a minute, you can get your podcast transcribed.

Feeling like balking at the price tag? 

Well, if you are serious about podcasting and even own an expensive microphone to get a rich sound, then is no excuse. 

With a transcription, you gain so much: 

  • improve search results
  • accessible content
  • browser-agnostic content

For the price of some decent hardware, you get to move your content to more eyes–not just ears. 

If you aren’t willing to put down the money do that, then why are you publishing in the first place?