Permaculture.

All humans need these three things: Clean air, clean water, and clean food. Everybody wants them. Everybody needs them. Sadly, the concept of a clean “environment” has become politicized and saturated with unnecessary baggage. This is the beginning of my exploration into Permaculture, a way of thinking about and designing the world in such a way that there is an abundance of those three essential parts of human life. Air. Water. Food.

Advertisements

My plugin gets added to WordPress core!

WordPress 3.5 was released yesterday. After upgrading my site, I checked the editor screen and noticed a tiny tweak that made me smile. It looks like my humble suggestion finally made it in to WordPress core.

Screen Shot 2012-12-11 at 11.59.41 PM

Notice the Add Media button… it’s an actual button! The previous version of the button looked like this:

The old Upload/Insert button or link

It was an easily overlooked text and icon combo labeled “Upload/Insert” . This caused problems for users as I’ve discussed beforeI don’t know if this small change to a more clickable and noticeable “Add Media” button happened because I suggested it, but I’m glad it’s there. So after suggesting this usability improvement to the WordPress core team, their developers took notice and made it happen.

WordPress-usability-improvement-ticket

Thanks, WP devs. Also, I didn’t suggest the name change, but good choice on the new wording from “Upload/Insert” to “Add Media”. Much better.

How to fix the Netflix DRM Error N8151 in Google Chrome for Mac

Quick Summary:

* Try watching after each step. You may not need to go all the way through the process to fix the problem.

  1. Delete the PlayReady folder (This step fixed my problem)
  2. Uninstall & Reinstall Silverlight
  3. Create a new user
  4. Contact Apple
  5. Check Browser’s Rosetta settings
  6. Check for corrupt fonts
How to fix the Netflix DRM Error N8151 in Google Chrome for Mac
Error screen for the Netflix DRM Error N8151 in Google Chrome for Mac

The Troubleshooting Process

This process was recommended by Microsoft Technical Support.

  1. Delete PlayReady folder

    1. Quit all browsers
    2. Browse to Mac HDLibraryApplication SupportMicrosoftPlayReady and delete the PlayReady folder
    3. Restart browser (Safari or Firefox)
    4. Test Netflix again
  2. Uninstall Silverlight

    1. Open you Mac HD
    2. Go to Library
    3. Go to Internet Plug-ins
    4. Drag Silverlight.plugin to the Trash
    5. Go you to you Home Folder
    6. Open the Library folder
    7. Open the Preferences folder
    8. Look for the com.microsoft.silverlight.plist file and move it to the trash
    9. Look for the com.microsoft.SilverlightPlugin.loader.plist file and move it to the trash
    10. Check your Trash to make sure there is nothing you want to keep then empty your Trash
    11. Restart your Mac
  3. Install Silverlight

    To manually install Silverlight please follow the steps outlined below:

    (Note: when completing these steps make sure you have quit our of all running Applications and that they have not just been minimized to the Dock)

    1. Launch your web browser (FireFox/Safari) and visit Silverlight.net/GetStarted
    2. On the lower right side of the screen you will see Install Silverlight, Choose Silverlight Mac Runtime and allow this to download to your desktop. If the installation automatically launches quit out of it and complete the following steps.
    3. Mount the Silverlight image that is on your desktop
    4. Ctrl+Click Silverlight.pkg
    5. Choose “Show Package Contents”
    6. Open Contents
    7. Copy Archive.pax.gz to Desktop
    8. Ctrl+Click the Archive.pax.gz file that appears on the Desktop
    9. Choose “Open With”, BOMArchiveHelper.app or “Archive Utility”.
    10. This should extract a folder to the desktop called Library
    11. Open this folder
    12. Open the Internet Plug-ins folder
    13. Copy Silverlight.plugin to Hard Drive: Library: Internet Plug-ins.
    14. Restart your Mac
    15. Visit Silverlight.net and go to Showcase, if you can view this page without being prompted to install Silverlight then it has installed successfully.
  4. Create a new user

    If this is unsuccessful there might an issue with your user account preventing Silverlight from working correctly. What we would like to do is test a new Mac user. To create a new Mac user:

    1. Go to System Preferences
    2. Go to Account
    3. Choose the Plus sing in the lower left corner to open the new account window, enter Test for the user name, leave the password blank
    4. Put check mark in Allow User to Administer this computer
    5. Choose Create Account
    6. Now logout out of your original account and login to the Test account
    7. Once in the Test Account visit Silverlight.net and go to Showcase, if you can view this page without being prompted to install Silverlight then it has installed successful
    8. Visit NetFlix to make sure that you are able to access their content.
  5. Contact Apple

    If Silverlight works with the new Mac user you will need to contact Apple and have them decide why the original user will no longer allow Silverlight to work.

  6. Check Browser’s Rosetta settings

    If this fails another suggestion we can make it to check to see if the browser is running with Rosetta enabled. To verify this please follow the following steps. (NOTE: you must quit the browser to follow these steps)

    1. Open your Mac HD
    2. Go to Applications
    3. Locate browser
    4. Ctrl+Click on the Icon and choose Get Info
    5. Under General Make sure the box that says Run using Rosetta is not checked
    6. Launch browser and attempt to launch content on NetFlix
  7. Check for corrupt fonts

    If this fails then there might an issue with corrupt fonts within your
    operating system that is not allowing Silverlight to load when attempting to access NetFlix content because NetFlix uses DRM formatted content and corrupt fonts can prevent this type of content from loading.

    The next step will be to manually install the Arial and Verdana fonts to do so please complete the following:

    1. Go to the Hard Drive
    2. Then Applications
    3. Then Font Book
    4. Choose the Verdana font, and go to File, and Export Fonts. Name the folder Verdana.
    5. Then choose the Arial font, and go to File, and Export Fonts, and name the folder Ariel.
    6. Go to the desktop, and look for these two folders.
    7. Go inside each of these folder, then another folder with the name of the font. You will see multiple folders in here. You will need to go inside each of these folders, and copy all fonts located here to HD>Library>Fonts
    8. Restart the computer.
    9. Attempt to view Netflix content.

How I discovered the Netflix DRM Error N8151

My wife and I decided to sign up for Netflix again. We cancelled several months ago, but after buying a few kids movies on iTunes, we started to miss having access to loads of toddler-taming flicks for the price of one movie purchased from Apple.

Netflix had all of our account info on file. After three clicks I was back. My Instant Queue was stocked with everything I added before canceling. I was ready to sit back and watch a show.

I heard that the recent launch of their new interface design was a debatable attempt to make the site more user-friendly. Either way, I was excited to try it for myself.

I clicked my selection and waited for it to load. Instead of opening credits, I saw this:

How to fix the Netflix DRM Error N8151 in Google Chrome for Mac
Error screen for the Netflix DRM Error N8151 in Google Chrome for Mac

Bummer. Anticlimax. I had seen this error before. During my previous Netflix subscription I had to burn a long evening on the phone with support to fix the problem. The problem was frustrating but fixable, so I wasn’t too worried.

Digital Rights, Smigital Rights

After a little googling I found the help I needed.

The error has something to do with Silverlight, a Microsoft technology Netflix uses for their video player. The details of why, how and what circumstances triggered this error do not interest me. I just want the thing to work.

Within a few minutes I found step-by-step instructions from Microsoft Silverlight Technical Support on how to address each possibility.

In my case everything was fixed after trying the first step. The movie cloud was back!

I could simply post a link to the forum where I found all the answers, but then I would have to find that forum if I ever ran into this problem again. So, I’m posting the process here to help myself and maybe others who have a similar problem.

I hope this helps others fix this problem quickly so they can get back to watching their favorite show.

Discovering Synecdoche

I want a coke.

I’ve learned a new word: Synecdoche.

Synecdoche is a word that’s both fun to pronounce and understand. The Greek word it comes from means “simultaneous understanding”. In english it is a figure of speech expressed in several ways. Basically, a synecdoche occurs when the word for a part is used to refer to the whole and vice versa. Think of the Three Musketeers slogan, “All for one, and one for all”… sort of.

In certain parts of the southern United States, you may here the phrase, “I want a coke.” Depending on the context, the word coke in this phrase can mean any carbonated soft drink, while Coke is also a specific brand of carbonated soft drink. I could be wrong, but I think this is an example of synecdoche. More examples I came up with:

  • Everyone is doing it.
    • Literal meaning: All people are doing it.
    • Intended meaning: A large group people I know are doing it.
    • The term for the whole, Everyone, is actually referring to certain part of itself, a large group of people.
  • Do you prefer Mac or PC?
    • Literal meaning: Do you prefer Mac or Personal Computers?
    • Intended meaning: Do you prefer Mac hardware & software made by Apple, or hardware from other companies with Windows software?
    • The term for the whole, PC, is actually referring to certain part of itself, hardware from other companies with Windows software. Macs are also Personal Computers by definition, this one gets tricky.

I also found some biblical synecdoches that were enlightening. Depending on how they are translated, certain scriptures using synecdoche can have very different meanings, or at least emphasis.

An Inconvenient User Experience: Gmail Drafts

Summary

  1. I love Gmail.
  2. If you accidentally discard a draft its gone forever.
  3. I think Gmail should send discarded drafts to trash.
  4. You can vote for that feature here.

I love everything about Gmail except one thing…

Discarded drafts are unrecoverable without warning. I accidentally clicked the Discard Drafts button while scrolling by a different part of the page in Gmail. I also happened to have an important long-winded response selected. After the accidental click, it was “discarded”. Or in Gmail terms, “deleted beyond all recognition, and NOT held in the Trash like deleted messages, you should’ve used Google Docs, and your hair looks funny.”

Me: “Geez Gmail. Settle down. We’re all friends here. I just want my draft back.”

Gmail: “No.”

After googling “accidentally discarded drafts” I found that I’m not the only one whose had this problem. There are Gmail users who have lost drafts of love letters to children, important business responses, and other irreplaceable or inconveniently lost documents.

I should have known better.

The popular answer on Google discussion threads are, “You should have known better. You should have used Google Docs.” …

Should we? The Gmail interface doesn’t explicitly or implicitly say that I will not be able to find discarded drafts in the Trash. There is no confirmation to explain the consequences of this irreversible action. Granted, if you’re in the inbox, when you click Discard, there is a temporary “Undo” period. But user beware the Discard Drafts button in the Drafts section.

No warning when discarding drafts in Gmail

Angry little button

There is nothing about the “Discard Drafts” button that says,

“I will delete the (expletive) out of this draft, son. Do it. I dare you. What! WHAT! (slaps you in the face).”

That’s the message the button should convey visually.

Instead we get,

“Hey bud, I’m a normal button. Grey even. Need a back rub. There. Therrre ya go. That’s it. Shhh…”

The Discard Drafts Button: Accindentally discarded drafts in Gmail
The message is not consistent with the severity of the action it initiates. Glance through the book [amazon_link id=”1592535879″ target=”_blank” container=”” container_class=”” ]The Universal Principles of Design[/amazon_link] and you’ll learn about creating things in such a way that the user can’t fail. I recommend the section on Affordance.

A love letter

Dear Gmail UX/UI Design Team,

You guys are great. You got it 99% right and its only gotten better over the years. Its just that the 1% you missed happened to delete all my junk.  Please send discarded drafts to the Trash so that the click happy-fingers of myself and other Gmail users have a reasonable safe-guard against accidental discardationmentness.

Sincerely,
Paris Vega
AKA Guy whose lunch was stolen by the “Discard Drafts” button.

Yes we can (if there are enough votes to prove users care)

I’m sure Google gets millions of complaints daily. To their credit they have a robust help/support system. After voicing my concerns in Gmail Help they directed me to a place where you can vote on new features for Gmail. Low and behold “Discard drafts to trash” is in the Helpful Additions section.

gmail user experience suggestion

If you are a Gmail user and a decent person, please go there now and vote for this feature.

Product Review: Ecoflo Stainless Steel Water Filter Bottle

So, the doctor says I’m going to die if I don’t change my ways. According to him, sitting for 8 hours-a-day slurping down caffeinated high fructose corn syrup is not how to live a long healthy life. He recommended something called eksersize and claims there’s a type of food that grows out of the ground. Gross.

After my appointment I went by the health food store to grab the fish oil he recommended and gear-up for a healthier lifestyle. In the water section (the store has a water section) I found an interesting water bottle that filters as you drink. The Ecoflo Stainless Steel Water Filter Bottle.

Ecoflo Stainless Steel Water Filter Bottle, self-filtering

The Ultimate Water Bottle

The label claimed you could fill it with river, lake, stream, or even pool water and drink safely. Awesome. Not only will it help me kick my coke habit, but I now have a trusty source of clean water to carry me right on through the apocalypse.

Its made of 304 food grade, non-leaching , BPA and lead-free stainless steel. That means you don’t get that plastic taste or brain cancer. Bonus.

Screw plastic water bottles.

This thing filters 150 gallons of water before having to change filters. That’s 960 20oz bottles of water. Even if you bought in bulk, that much water would cost about $150. The Ecoflo cost $35, saving me $115. I’m all about saving money.

What about replacing the filters? I couldn’t find any info at the store and assumed they were expensive. The manufacturer’s website says each new filter costs $20 and cleans 150 gallons.

Sold

I’m now a proud, and somewhat leaner, owner of  a self-filtering water bottle. When I have it with me I drink way less soda and coffee. The only negative thing I have to say about the bottle is that sucking through straw took some getting use to. It takes a little more suction than a regular sports bottle might.

Tornado Proof

That’s right, my Ecoflo has also came in handy as a survival tool. The tornadoes that recently destroyed the south hit my city, Tuscaloosa, hard. The government issued a water warning for several days after the disaster. We were all supposed to boil our water before drinking, or use bottled water. With confidence I filled up my Ecoflo straight from the tap. After not dying from some water-born bacterial nastiness, I’m convinced of Ecoflo’s filtration claims.

Recommended

I recommend buying one for yourself and even everyone in your family. Especially if you like saving money, travel, or live in a disaster prone area.

Perfect for Paleo

If you happen to be following the Paleo Lifestyle this water bottle is critical since water and coffee are basically the only fluids recommended.

Bought one yet?

Thanks for reading, and if you decide to buy the Ecoflo please use the affiliate links I’ve provided to help support my blog. I leave with a promo video created by Ecoflo:

Fitts Architects Website Design Process

fitts architects office building

Fitts Architects in Tuscaloosa, Alabama hired me to redesign and rebuild their website. Here is the story behind the project and the process we went through to polish their brand on the internet.

Respect at first sight

In college I lived within 100 yards of the Fitts Architects office. Every time I drove by I would think to myself, “I really like the look of that building.”

The simple modern lines resonated with me. The design stands in stark contrast to the Classical, Victorian, and Early 2oth Century Style homes that surround it. I respected their boldness.

Fitts Architects office building front steps

A few years later I drove by and thought it would be awesome to have them as a client. I sent a cold email to the owner of Fitts Architects… Fitts himself.

I simply told him I was a fan of their work and that if they ever needed help with their website or other graphic design services I happened to be skilled in those areas.

Fitts Architects metal sign on brick wall

To my surprise he was very gracious and told me to come by the office. Several meetings later,  we signed a contract and I was officially the web designer for one of my local design heroes!

The Design Process

Here is a look inside the process I used to go from concept to finished product.

Phase 1: Set Goals

The first step involved meeting with the client to figure out the purpose behind the website. What goals were they trying to accomplish with this project?

  1. Basically, they wanted an updated version of their current website that was easy to navigate and elegantly designed.
  2. The design and functionality of the original website lacked the sense of high quality professionalism the Fitts brand stands for.
  3. However, there was a certain simplicity and elegance about the original site that the client wanted to carry through to the new design.

Fitts Architects original website

Considering their goals for the functionality and design of the new site I moved on to the next phase.

Phase 2: Get Exposed

Exposure to as much information about the client’s business, competition and industry at large is critical. I began scouring the internet for the websites of other modern architecture firms, taking note of how they solved similar problems to what my client faced.

Then I collected benchmarks, including  local competitors and global peer, and sent them to Fitts. He reviewed them and sent me valuable feedback and his vision for their new website. I’ve found several benefits of involving the client in the research process:

  1. Helps them compare their current site to others in their industry, reinforcing their need for my services.
  2. Helped answer questions that I never thought to ask by getting their feedback on the design, features, and functionality of other websites.
  3. Keeps the client and I in an ongoing conversation about their website throughout the project.

Phase 3: Find the concept

Phase three is basically visual brainstorming. With information from my research fresh on my mind I take out my sketch book and a mechanical pencil, or an ink pen depending on my mood, and spend at least an hour sketching out everything that comes to mind.

The goal here is not to create perfectly rendered illustrations, but to sift through the ideas that started to form during the first 2 phases. Sometimes I’ll draw random stuff to help kick-start my creative juices.

The Fitts sketches above include random lines, logo ideas, and even a sketch of their building – none of which were part of the website design I was hired to create. You might think this is a waste of time, but while exploring ideas like this I uncover valuable perspective and unexpected inspiration.

Until I have a strong conviction about a specific idea I keep scribbling. I think finding the right idea, or concept, is the most critical step in the design process. I’m a firm believer in pencils before pixels.

Phase 4: Mock it up

With sketches in hand I start bringing my favorite concept to life in Photoshop, or Illustrator. Depending on the project I may show the client some of my sketches to make sure we’re on the same page.

Fitts Architects Website Re-Design: Concept 1

The first concept I created for Fitts Architects strongly resembled their business card at the time. The header section shares the same logo placement and color scheme as their cards. My attempt to create consistency among their existing branding materials was rejected in the end.

After reviewing Concept 1 the client stressed how much they enjoyed the simplicity of the current website and wanted to see something in that direction. Happily trying to please the client, I presented Concept 2:

Fitts Architects Website Re-Design: Concept 2

Another meeting, another concept down. Concept 2 didn’t quite hit the mark either. They offered some more ideas, including the integration of a new gold-ish color into the design. I obliged and presented Concept 3:

Fitts Architects Website Re-Design: Concept 3

When this third concept failed to excite the client I got worried. Were they going to fire me? Not quite. The project continued but with some unexpected twists.

At the meeting to discuss the third concept pictured above, the client had literally built their own concept for what they thought the site should look like using construction paper and previous concepts I sent them. This was a first in my experience as a designer.

Client concept for FittsArchitects.com

They wanted the logo bigger and suggested the use of some decorative colors and shapes in a kind of modern art/abstract way. Architects are fellow creatives, so I understand the urge to just show me what they wanted. Still, this was one of the more awkward moments of my career. Dutifully, I agreed to digitize their mock-up:

Fitts Architects Website Re-Design: Concept 4

While presenting their idea to them, I suggested they give me one more chance to take their design and add my own styling to it. They easily agreed and I breathed.

This time, I wasn’t holding back. I axed the color, and made the shapes more of a subtle accent than a feature. For the logo I recreated their metal sign. The photos are the main feature of the site so I didn’t want random design elements to compete visually. The work is what the client wanted to feature. This design would do that.

I felt good about Concept 5. I sent the email with the concept attached and hoped for the best.

Fitts Architects Website Re-Design: Concept 5

With a simple, “That looks great!” the design was approved.

After building the site with HTML, CSS, Javascript and WordPress, the new site was launched: Fitts Architects Website