The time my custom webfonts stopped working in Chrome and Firefox

When I last rebuilt erica-schultz.com back in 2012, I decided to incorporate a custom webfont in my Design and Judaica sections. In the interest of cross-browser compatibility, I used FontSquirrel’s free Webfont Generator to export EOT, SVG, and WOFF files, which I then called in my CSS @font-face declaration.

Fast forward to late 2016: I discovered that while my font still looked nice in Safari, it had stopped working in Chrome and Firefox. They had apparently gone and changed their font rendering in a way that broke my site. THANKS DUDES.

This week, I finally did a little research into the issue.  Continue reading

Website launch: Training Insight

Who doesn’t love a good referral? In this case, Dianna Sanchez was so happy with her new site design, she referred one of her neighbors to me for some website work.

Training InsightChristine McKay runs her own consulting practice, Training Insight, doing custom training and computer setup for financial software (specifically QuickBooks and Sage Timeslips) in Cambridge, MA. She’s been in business for many years, which is great for her clients. On the downside, her website www.trnginsight.com hadn’t been updated since 2004, and it was time for an overhaul. (Skip to the end of this post for the before-and-after slideshow… because, also, who doesn’t love a good before-and-after?)

Christine already has an established visual identity that is serving her well, and she wasn’t looking for rebranding or significant changes to the look of her site. What she mostly wanted help with was search engine optimization, in order to enhance her site’s reach and visibility to potential new clients. However, I told her that SEO would be best served by some structural adjustments to her site: Continue reading

New website project launch: DiannaSanchez.com

On Friday, I officially launched my latest website project: an author website for children’s book author Dianna Sanchez, whose debut novel A Witch’s Kitchen is forthcoming in a month from indie YA publisher Dreaming Robot Press. Check out the site!

Backstory: Two months ago, I put out a call to the Universe (via Facebook) for some freelance work. Among the respondents (and there were a few, thank you, Universe) was an old friend from my MIT circles who needed a spiffy new website to go with her first book’s upcoming publication. She had set up a starter website back in April, in WordPress, but it was… rudimentary. (I’d say “basic” but that word has acquired problematic cultural overtones in the last ~5 years.) I never took a screenshot of it, but now I wish I had for posterity, because like most people I love before-and-after stories!  Continue reading

Purim is coming! Have some music!

Mishenichnas Adar, marbin b’simcha.
“When the month of Adar enters, we increase in joy.”
— Gemara (Taanit 29b)

Quick primer: Today is the first day of the Hebrew month of Adar. In fact, it’s the first day of the second month of Adar, since this year is a leap year — which, in the Jewish lunar calendar, means not just adding an extra day but a whole extra month (known in those years as Adar I).

The point is, it’s less than two weeks until the festival of Purim, when we celebrate the Persian Jews’ deliverance from persecution in the fourth century BCE, as detailed in the Book of Esther.

So I wanted to share some little-known Purim music collections… the perfect soundtrack for your hamantashen baking.

First, The Ramaz School in NYC (where I was the webmaster from 2011-2014) produced an album of Purim songs in 2012, featuring both students and faculty. The whole collection can be played or downloaded for free at web.ramaz.org/purim/index.html. Brush up on standards like Mishenichnas Adar and Shoshanat Yaakov, and enjoy some new and original compositions. Yasher koach to Ramaz for being leaders in Jewish education and music education, as well as service to the greater community.

ramaz-purim_photo-bar_1000px

Second, I would be remiss not to point out the two Purim-themed operas by David Bass, The Coronation of Esther (2001) and its sequel Springtime for Haman (2004). The North Cambridge [MA] Family Opera Company hosts recordings of both operas:

Chodesh tov and shabbat shalom!

New website project launch: Growing Minds

A good friend and colleague in the Boston area, Dr. Anya Dashevsky, is launching a private psychology practice, and I had the privilege of assisting her with her marketing materials.

She had already decided on a name for her new practice: Growing Minds. She made sure that the domain name growingmindspsych.com was currently available, so we moved forward with that. She specializes in assessment of children (starting as young as 18 months) through adolescents, so she had come up with a name that conveys both the objective (minds that are growing) and the process of assisting those minds to grow and develop.

My first task was to come up with a logo. I wanted to capture that same duality, so I used two contrasting typefaces:

  • a script face known as Banshee with a dynamic, organic feel, and
  • Book Antiqua (Microsoft’s knockoff of Palatino), which will also be suitable for general text use in her website and business materials.

For her branding colors, I chose green to represent optimal growth, and blue to connote a calming, supportive, and trustworthy presence for the presumably-anxious parents seeking her services. (Note that blue is a common choice among medical practices as well as financial institutions.) I provided a wide range of alternative concepts, but this jewel-toned scheme was the one my client was drawn to, so I knew we were on to something!

[Growing Minds]

The two-sided business card featuring the final logotype.

Next, we worked together to create a website for her practice that would provide substantive information as well as basic logistical details to inquiring new clients. We settled on a clean white background and a simple page template that would perform just as well for iPad visitors as for desktop browsers. All the text is in Book Antiqua to match her brand identity.

[GrowingMindsPsych.com]

The finished website frontpage. Look at that smile! Click to browse the full site.

This site build uses pure CSS, no JavaScript, to achieve both the dropdown main menu tabs and the click-to-expand bullet points on the front page. The menu code was adapted from this simple but effective version on CSSMenuMaker.com. The bullet point code was substantially adapted from this vertical accordion on sitepoint.net — they made use of CSS3’s built-in :target selector, and I had to change around the code to make it function under CSS2, but the basic structure remained the same.

The site is hosted on 1and1.com (Mr. Y’s recommended vendor for basic, economical web hosting). I had my client set up her own customer account, then went in myself to set up the domain name (growingmindspsych.com), post a placeholder page, and eventually transfer the files for the full site once the design and content were complete.

My client’s new practice officially opened this week in her Lexington, MA, office. Congratulations and best wishes for much success! (We’re still working on the coordinating brochure. I’ll post that as a follow-up when it’s completed.)

Don’t forget this essential finishing touch on your webpage!

Webmastering pop quiz time:

  • Raise your hand if you’ve ever seen the word “favicon”.
  • Keep your hand up if you actually know what it refers to.
  • Now keep your hand up if you already know how to produce one and add it to your own website.

… OK, you awesome folks with your hands still raised can go grab a coffee. The rest of you, read on!

What is a favicon?

Go to your Bookmarks or Favorites menu in your web browser. Right now. (Readers who aren’t well acquainted with bookmarking can probably go grab a coffee too and skip the rest of this post… but let me know and I’ll do a separate post on that, seriously. It is the key to managing your Internet life.)

[sample bookmarks menu]

A snippet from my own bookmarks menu, showing 9 visually distinctive favicons… and the dreaded “blank page” default icon in the highlighted 10th item.

See those little icons next to every item in the menu? Some of them are plain “blank page” document icons, but the majority of them are colorful little images that tell you at a glance exactly what site they’re referencing. This is a favicon, short for “favorites icon” (because it shows up in your Favorites list, get it?). It’s your site’s brand identity boiled down into 16×16 pixels (or 32×32 or more, depending on your operating system). And since it’s the only piece of your visual identity that gets stored along with a user’s bookmark, neglecting to supply one is like leaving your business cards in your other pants.

How do I make one?

There’s a special file type called “.ico” reserved for just such uses as these (also, say, desktop icons for Windows application files). Most browsers will also accept a PNG file as your favicon image, but not all. (For the technical specs, I commend to your attention this excellent 2013 article, “Understanding the Favicon” by Jonathan T. Neal.) So it’s best to use a dedicated .ico file.

Here’s the trick: for some reason, image editors do not include “.ico” in their repertoire of file types. So to convert your desired image (PNG, GIF, JPEG, even BMP) to .ico, you have to use one of the many online file converters. Here are a few:

  • http://realfavicongenerator.net/ – If you want heavy-duty performance, this site will take a 260×260 file and produce a single icon that correctly embeds all the different sizes any modern icon set requires, then check your usage once you’ve installed it.
  • http://favicon-generator.org/ – Quick and dirty for 16×16 pixels.
  • http://tools.dynamicdrive.com/favicon/ – As a happy medium, this one will embed 32×32 and 48×48 versions of your image, as well as 16×16, into a single .ico file.

You can certainly use a solid square image, but if your logo is natively any shape other than square, your favicon will look more slick and professional if you use a transparent background.

Once I have the image, how do I set it as the favicon for my website?

If you have named your file “favicon.ico”, all you really need to do is place it in the root directory of your site. Browsers are hard-wired to look there and do the right thing with it. Presto!

You can also place it in another directory (such as /images) or use a different filename, but then you have to place a little extra code in the headers of your pages. Just add these two lines for your .ico file.

<link rel="shortcut icon" href="/images/favicon.ico" type="image/x-icon">
<link rel="icon" href="/images/favicon.ico" type="image/x-icon">

(Of course, use the actual path to your own image filename, if /images/favicon.ico above isn’t it.)

If you’re using a PNG file, the code is similar, but you also have to change the specified type:

<link rel="shortcut icon" href="/images/favicon.png" type="image/png">
<link rel="icon" href="/images/favicon.png" type="image/png">

Good news for this WordPress.com blog and everyone else’s: you can now set a custom favicon here, too. Go to your blog dashboard (you can type in /wp-admin after your blog’s wordpress.com URL) and click the “Settings > General” tab. On that page, you’ll see a box in the right-hand column for “Blog Picture / Icon”. Upload something here, crop and save, and it will automatically be set as your “blog image” (avatar), which WordPress will also use as your favicon.

Bonus question: How is it pronounced??

Unsurprisingly, opinions do differ. The top contenders seem to be:

  • FAV-ih-kahn (short a, short i)
  • FAVE-ih-kahn (long a, short i)
  • FAVEEYE-kahn (long a, long i)

Whatever your preference, happy fav(e)-ing!

Know someone who wants my day job?

Happy 2014!

Well, since I last posted (literally a few days after my last post), I got engaged to an incredible guy from back home — the Chicago area, specifically northwest Indiana, one town over from where I grew up. This is someone I have known (and been various degrees of madly in love with) for almost 20 years, which is actually a fantastic story for which this is not altogether the place. :-)

The point is, in early April I’ll be moving back to the Chicago area into his house there. This means that my current employer needs to replace me and is trying to find a moderately experienced Webmaster/Social Media Associate to start in March.

Anyone in the NYC area interested in a full-time position that combines technical skills (HTML), graphic design chops (Adobe Creative Suite), and general social media savvy, please check out the following listings and apply as directed:

http://www.ramaz.org/public/jobs.cfm#webmaster
https://jewishjobs.com/jobs/view/27019

(Some knowledge of Hebrew and Jewish culture is EXTREMELY helpful, but not strictly required.)

Feel free to share this with any likely candidates of your acquaintance!

As for myself, I expect to be looking for a graphics-related job in the NWI region, as well as bumping up my freelance work and joining the family consulting business. But not until April (or possibly July). In the meantime, I will have a few, er, wedding-related design posts to make, so stay tuned. (Space ketubahs!)

Big performance news: The Bliss Jockeys

Yesterday, I signed on as a backup vocalist with NYC rock band The Bliss Jockeys, fronted by the remarkable and charismatic Phil Robinson and backed by a gospel-choir-style ensemble of 7 female singers. “Part rock, part gospel & part jam band, The Bliss Jockeys feature a large, over-the-top sound and deliver an energizing and delirious experience every time!” Their debut album, The Birth of Bliss, is close to complete and will be forthcoming in 2013 from Roomful of Sky Records.

How it came about: Last weekend was my 20th (shhh) college reunion at Brandeis University. Phil, along with two of his ’98 classmates (having their 15th), were assigned totally at random as my suitemates in the reunion housing on campus. All of them turned out to be completely awesome and the best thing about my weekend. On Saturday night, after the class dinner, we all sat up until about 2am drinking bourbon and singing a cappella harmonies to the Indigo Girls and Cat Stevens and Simon & Garfunkel, and finally Phil turned to me and said “Hey! You are awesome and should join my band! I need a female vocalist! We rehearse on Monday nights!”

… Now it happened that, within just the past few weeks, I had started having the thought, “Hey, I would really like to look for an a cappella/vocal group to join again. I bet I could find one of those somewhere in NYC that would take me.” (As longtime acquaintances know, in Boston I was a member of Jewish a cappella group Honorable Menschen from 2003 to 2011, and only quit when I moved to NYC. So it was a huge part of my life for 8 years.)

Also, Monday is one of the few nights in the week I had totally free.

While this obviously isn’t a cappella, the opportunity is close enough that it is going on my archival list of “things that have fallen into my lap precisely when I needed and asked the Universe for them”.

Sunday night I returned to NYC; Monday night I sat in on a rehearsal, and I was thoroughly delighted. The rest is history. I will (tentatively) be making my debut with the band on Thursday, July 18, at Tobacco Road in midtown Manhattan.

Talk about bliss: While the BJs’ list of musical influences includes Bruce Springsteen, The Animals, Phish, the Indigo Girls, Cat Stevens, Etta James, KT Tunstall, and musical theater, their “non-musical influences” are specified as Joseph Campbell and Carl Jung. Case in point: We’re booked to play the Center for Symbolic StudiesMidSummer Festival—Ancient Mysteries, Modern Psyche. The CSS, located just outside New Paltz, NY, is “a healing and performing arts center exploring the psyche through the window of myth.” When I realized that this was the "Midsummer Festival" on our gig list, I about fell over and died; I had blithely assumed it was a music festival. COOLEST. VENUE. EVER. [Edited to add: Sadly, this appearance was later cancelled; the festival has chosen to feature performances more directly theme-related, so, ancient Greek music and the Rap Odyssey. Can’t argue there. But the BJ’s are nonetheless still considered the “house band”.]

I am incredibly excited and energized to be a part of this project. Join the email list or follow on Facebook!

I’ve also updated my performance page accordingly. Obligatory geek side note: The brand-new accordion tabs under “Past Appearances” were created with some nifty Javascript from Elated.com. The MP3 embed utility is, I’m almost sorry to say, Yahoo’s WebPlayer, but it’s actually quite slick; a single line of script, and it will auto-embed YouTube links as well as local MP3 and video files.

#upgoer5: Putting Things On The Face Book

Some friends were doing an #upgoer5 meme, explaining one’s profession using only the “ten hundred” most-used English words (inspired by xkcd). So I did too.

“I work for a school, putting things that parents and teachers need to know up on the computer so they can find it out. I also take pictures and moving pictures to show parents what fun things their kids do in school, or sometimes I write about things that are going on in the school. Then I share those stories and pictures on the computer, such as on the Face Book. And sometimes I help make pretty paper things that we send out to the houses of parents and friends of the school, so that they will like us and send us money.”

Crossposted from Dreamwidth.