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

Advertisements

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!)