BlogmyQuery – BMQ

Yesterday we published the article “Why Won’t Helvetica Go Away” in which Alastair Johnston discussed the evolution of Helvetica, the reasons for its popularity as well as his thoughts on why designers should start questioning the usefulness of Helvetica in their projects. Hours later Indra Kupferschmid published an article in which she corrected some of the facts presented in the original article. We republish Indra’s article to correct the factual errors, with her permission of course.—Ed.

This isn’t a “blue pencil� (I could never challenge master Shaw); just a lazy, quick rant. Alastair Johnston wrote an article on Helvetica posted on Smashing Magazine yesterday. I don’t want to comment on his strong opinion and cut out most of his subjective ranting. But some facts seem to have gotten a bit wonky.

He writes:

The other day someone sent me a link to a website with the preposterous title of “The 100 Best Typefaces of All Time.� Topping the chart was Helvetica, and that stirred my ire. I dismissed the list because it was based on marketing figures from one source, FontShop, coupled with the opinions of half a dozen Berlin-based typographers, but I was still incensed.

This was a survey done by FontShop in Germany in 2006, and it included more than just Berlin-based typographers. Said FontShop’s website has more precise info on the jury and criteria:

• Roger Black, Danilo Black, Inc., US
• Stephen Coles, Typographica, US
• Jan Middendorp, Publicist, Berlin
• Veronika Elsner, Elsner + Flake, Hamburg
• Bertram Schmidt-Friderichs, TDC / Hermann Schmidt, Mainz
• Ralf Herrmann, TypoForum, Weimar
• Claudia Guminski, FontShop, Marketing, Berlin

Criteria of the ranking:

• Sales figures: 40%
• Historical significance: 30%
• Aesthetic quality: 30%

The ranking does not include free fonts or components from operating systems or software (Arial, Verdana, etc.), but focuses exclusively on licensable printers’ typefaces. Types that, over the centuries, have been interpreted individually by several different foundries (Bodoni, Garamond, Futura and so on) were judged collectively and included as a single entry.

For Helvetica, an explanation of its history helps to explain its longevity. Most typeface designs are the result of fashion or changes in taste; some are technologically driven. When iron printing presses were introduced around 1800, sharper, crisper types such as Bodoni and Didot were created. When laser printers came along in the mid-1980s, with their bitmapped fonts, students in Holland began producing typefaces that reflected the quality of the poor printing. Letters in Studio [sic] (Eindhoven, Lecturis, 1983) shows examples by Jelle Bosma and Petr van Blokland designed on a 40-pixel grid. Emigré, an early digital type foundry, produced Oakland (1985) and other lo-res types for the market.

Laser printers use outline fonts; bitmap fonts were used for screen representation or matrix printers. The name of the Dutch booklet he refers to is “Letters in studie,� meaning “typefaces in the making,� or “in study� or “experiment.�

At that time, two sans-serif types introduced in the late 1920s dominated the market for advertising. These were Monotype Gill Sans and Futura, of the German Stempel foundry.

Futura is a typeface by the Bauer type foundry.

Suddenly there was a rush to create, imitate or revive sans-serif types. The Berthold foundry of Berlin dusted off the matrices for its Akzidenz Grotesk (1898), while their rivals, the Haas Type Foundry of Basel, decided to rework Schelter Grotesk, which had been issued by the Leipziger Schelter & Giesecke foundry in 1880. This became Neue Haas Grotesk in 1957, which was then picked up by the Stempel foundry in Frankfurt. It wanted to identify the type with the emerging popularity of Swiss graphic design and chose the ancient Roman name of Switzerland, Helvetia, and so Helvetica was reborn in 1961.

This is an incredibly brief summary of 30 years. Or what time is the author talking about when he says “suddenlyâ€�? Berthold did not rework Akzidenz-Grotesk until after Helvetica was issued (and became threateningly successful) — it had been available ever since 1898; it just became very popular in the 1950s. Neue Haas-Grotesk was based on Haas’ Französische Grotesk (which was based on Breite halbfette Grotesk by Schelter & Giesecke) and Haas’ Normal-Grotesk (which was based on Neue Moderne Grotesk by Wagner & Schmidt), with an eye on competing typefaces such as AG and Monotype Grotesque. NHG was not “picked upâ€� by Stempel but insistently offered to it by Haas against its initial skepticism.

The reason for the popularity of Gill Sans and Futura was that they turned their back on these Grotesks of the 19th century, which were worn out. Eric Gill took a new approach: pen-made humanist calligraphy was the basis for his type (he had also worked on the drawings for the London Underground alphabet with his mentor, Edward Johnston). These letters made more coherent word shapes and were easier to read than Grotesks. But Gill’s type standardized the distinct curled-tail “l� and shed-roofed figure “1� of Johnston’s design, which led to confusion with the capital “I� (a problem in many sans serifs).

Paul Renner’s Futura was designed to reflect the new machine age, with simple geometric shapes, straight lines and circles that gave it a cool Art Deco elegance. Both types are now imbued with a lot of cultural baggage, so Gill suggests the British Broadcasting Corporation and Futura has become nostalgic shorthand for the era of streamlining.

But in the 1930s, these two types were immensely popular in Europe and North America, and the other founders had to respond quickly. Returning to the 19th century should have been out of the question for the competition, except that the German foundries had been flattened in the Second World War and were slow to retool.

I don’t understand what the author is trying to say in that last paragraph. Geometric sans-serifs were popular in the 1930s, yes, and all foundries “had toâ€� issue their own, yes — almost all did, but well before German foundries cut down type production from 1942 on. Also, it never seized completely. Some foundries were destroyed in the war (Klingspor, for instance), but others (such as Stempel) not at all. The surge in the use of grotesques such as Akzidenz-Grotesk and — not to forget — Monotype Grotesque is rooted in the 1950s in Switzerland, and arose later in the design of the so-called “neo-groteskâ€� faces. The taste in typefaces was rather different in Germany, with Futura, Erbar and Neuzeit still widely used after Word War II. Also, the more calligraphy-inspired style of Schneidler, Trump and Zapf was very popular.

Helvetica became a national brand, an identity for the popular “Swiss style� of typography of Emil Ruder and Armin Hofmann, which quickly spread as their well-indoctrinated students took the new look back to Yale and other American schools.

As Paul Barnes points out rightly, “As Ruder & Hofmann were of the Basle school they used Univers/Akzidenz Grotesk not Helvetica�. Fuelling the rivalry between the Swiss “schools,� Zürichers like Hans Neuburg and Josef Müller-Brockmann were advocating Helvetica. The latter designed promotional material for NHG and Helvetica, such as the famous Satzklebebuch binder. Only Basel-based designer Albert Gromm once designed one of the initial marketing flyers for Helvetica in 1959.

From BMW, Bayer and Lufthansa in Germany, the Helvetica look spread to Bank of America, Knoll, Panasonic, Target, Crate&Barrel, JC Penney, Mattel, American Airlines, Sears, Microsoft and other corporations.

Graffiti protesting Bank of America in Berkeley, California, is chalked in a convincing Helvetica form.

Bank of America does not use Helvetica. Its corporate typeface is Franklin Gothic. The chalk artist doesn’t even try to mimic Helvetica, but rather mimics the bank’s actual typeface.

In the late ’90s Microsoft was selling a million copies of Word each month and gave away 14 fonts with its program. Its knock-off of Helvetica is called Arial. Linotype had taken over Stempel, and then Haas, and so consolidated its ownership of Helvetica and many of the clones.

Stempel had held Haas shares since 1927, first 45%, then 51% from 1954 on. Stempel’s majorities of shares were owned by Linotype. Haas bought Deberny & Peignot (and thus Univers) in 1972. When Stempel closed in 1985, its Haas shares went to Linotype, which purchased all rights to the Haas foundry in 1989.

After the adoption of the Swiss style internationally, another event caused the persistence of Helvetica: the arrival of the personal computer. Apple could fit only a few types into the memory of its LaserWriter printer driver. Times and Helvetica were decided by executive fiat (based on their popularity at the time); Symbol and Courier were required by the operating system. Then, a team of experts was called in to choose more types: Palatino, Zapf Chancery, Avant Garde, Bookman and Century Schoolbook were picked by committee. One of the committee, Sumner Stone, told me, “In retrospect they seem pretty strange and random. … Times and Helvetica were redrawn, and with Helvetica the narrow and oblique came free because it was just an algorithm.� With only garbage to pick from, there was a visual blight of Times, Helvetica and Palatino in the early days of “desktop publishing,� which lasted well beyond their sell-by date.

My impression is that people who hate Helvetica never really looked at the original, but detest — rightfully — the lousy version that comes with computer operating systems, digitized in a hurry in the early days of PostScript. For a detailed comparison and for more information on Helvetica’s history, see the Neue Haas Grotesk feature website.

The original design of Neue Haas-Grotesk was not as square as Neue Helvetica. Also, I wouldn’t say that the “a,� “s� and “e� in Helvetica “resemble one another,� as he suggests in the following paragraphs, but rather that the “I� and “l� and the “rn� and “m� could be confused.

Of course, most lay people can’t tell one sans serif from another. When people say they prefer Helvetica to Arial because the latter is a bad copy, I ask if there’s a difference between a Big Mac and a Whopper, and, more to the point, would you honestly feed either to your kids?

Adrian Frutiger, “Mister Univers� himself, tried to improve on Helvetica with the Univer [sic] series, begun in 1954 (and he succeeded, causing the Helvetians to expand their family of weights in response), but then, in his maturer years, he turned his back on Univers to design the family that bears his own name (Frutiger, 1976).

Frutiger did not try “to improve on Helvetica.� Maybe he tried to improve the grotesque model/genre. Frutiger had begun work on Univers much earlier than Haas did with Neue Haas-Grotesk. Both typefaces were released at the same time, with all foundries knowing about the work of the others (also Bauer with Folio, released the same year, 1957). The expansion of Helvetica was not “caused� by Univers.

Comparison of four sans serifs from MyFonts

Everything about Helvetica is repellant: from its uptight aura to its smug, splendid isolation. How it persists in the face of such brilliant alternatives as Frutiger and Syntax defies logic.

It would help if the samples of each typeface showed the same text and characters, which is very easy to do on MyFonts. What a weak image to prove debatable points.

I can’t bring myself to quote the rest of the article. Read on over on Smashing Magazine.

(al)

© Indra Kupferschmid for Smashing Magazine, 2012.

In September 2012 we ran the very first Smashing Conference — friendly, valuable and inspiring community event — in a beautiful medieval building in our home town Freiburg, Germany. The conference was a huge success, and we haven’t anticipated the fantastic feedback we’ve received during and after the event.

All conference tickets and workshop tickets were sold out within weeks, and to bring the event closer to everybody we blogged live from the venue, and captured all talks on video. We had the pleasure of welcoming and interviewing many top-class speakers and well-respected experts from the Web design industry.

Opening credits for the Smashing Conference, created by the No-Domain design studio from Barcelona, Spain.

With the Holidays being so close we are happy to release videos of the talks along with exclusive interviews with speakers that we conducted during the conference. We are starting off with the first 3 talks – by Jeremy Keith, Rachel Andrew and Stephen Hay. More videos will be released in the next days, and we’ll feature them here, on Smashing Magazine as well.

The videos were taken by Frank Sippach, cut by Marc Thiele, the co-organizer of the event, and the interviews were conducted by Esther Arends and Melanie Lang from the Smashing Editorial Team. Subscribe to our events mailing list to stay updated about the next Smashing Conference and other upcoming Smashing events!

Jeremy Keith: The Spirit of the Web

Jeremy Keith makes websites. He is responsible for the death of the trees used to print the books DOM Scripting, Bulletproof Ajax and, most recently, HTML5 for Web Designers. He also shot a man in Reno just to watch him die. Originally from Ireland, Jeremy now lives in Brighton, England, where he pretends to work with Clearleft. Peas grow there.

The Spirit Of The Web, a talk by Jeremy Keith at the SmashingConf 2012.

The Interview

Question: Hey Jeremy, thanks for taking the time for an interview. You lived here in Freiburg early in your career. What brought you here?

Jeremy Keith: Before I went to Freiburg, I was playing music on the street, and I also went to art college for a bit back in Ireland, but I dropped out.

I came to Freiburg because a friend of mine studied here and told me that I should visit. So, I did and eventually moved here. That was around the early to mid ’90s. I was working in a German bakery selling bread, Brezels and all that good stuff. I really miss German baked goods. When I learned German, all of my vocabulary was bread-based. I knew German words for things which I couldn’t even name in English.

Question: Where was your flat?

Jeremy: It was just by the Stadtgarten. The address was Stadtstraße 1. It was a basement flat, which wasn’t pretty but very central.

Question: You also met your wife, Jessica, here, who is not originally from Freiburg either. How long did you live in Freiburg?

Jeremy: Jessica is American and came to Freiburg because she studied German and wanted to do her year abroad. We played in a band together. She extended for another year but then had to go back and finish her degree in the States for another year. I also went over to visit her, and when she was finished we moved back. So, I lived here around six years, but I also lived in the USA in between that.

Jeremy Keith at the Smashing Conference. A photo by John Davey.

Question: You also played music in Freiburg? What kind of music did you do?

Jeremy: The band was more rock but with a bit of folk influence. People didn’t really know what to make of it. Later, the band went with us to England, and we were much better there.

I was also playing bass in the best surf band of the Schwarzwald (Black Forest), called Leopold Kraus Wellenkapelle. They’re actually still going and got a lot better when I left. But it was a lot of fun playing with them.

Question: Where was the most inspiring place for you in Freiburg?

Jeremy: The Freiburger Münster. I think I’m still a member of the Münsterbauverein, an association to fund the upkeep of the building. There is a lot of cool stuff in it. Have you seen the carvings in the stones in the front? It shows the shapes of circles, bread loaves and stuff like that. They’re measures of certain things so that people would know how big those things had to be. Those where the standards back in the day. You can even see the wealth of certain times. In poor times you had smaller measures than in better ones.

I also think about hanging out at the Augustiner Platz, having a beer, playing guitar, singing along. This is so different from England. In England, there would be a fight at some point, because it’s such a different drinking culture. The English get rowdy and want to let you know that they are really drunk. Here, people just have a few drinks and relax.

It was a shame that Ganter was the beer of Freiburg because it’s not the best. Tannenzäpfle was really nice. Back in the day, Tannenzäpfle used to be the secret of the Schwarzwald (Black Forest); now it’s actually become a trend beer. On the plus side, we might start seeing it in England. I had withdrawal from good beer when I moved to England.

And there is another fun thing in Germany. Why do you have just one flavor of crisps? It’s always paprika, paprika, paprika.

Question: Um, but now we have whole range of flavors. I like the plain salted ones, for example.

Jeremy: Yeah, but it’s always paprika. Even the salted ones taste like somebody licked a paprika.

Question: Hmm, I wouldn’t know the answer to this. What was your impression of Freiburg in general?

Grilled German sausage from the farmer’s market at the Münsterplatz. Yummy!

Jeremy: Freiburg is pretty for the most part. I love the Münster and the market around it. I didn’t really appreciate it when I was living here. Now I look around and think this is really amazing. It’s a student town, and back then there was a really good music scene here. I remember how it was in the old Vauban. [Vauban is a part of Freiburg known for its alternative character. It was rebuilt as a sustainable model district starting in the mid-’90s –Ed.]

I also miss the wine because it doesn’t get exported. I definitely will be stocking up on some Spätburgunder. The white wine is very nice here, even though I normally prefer reds.

Question: You started doing Web design here. How did you start?

Jeremy: Around the mid to end of the ’90s, we decided that our band should have a website because everyone had one. We already had an email address, and we were very proud of that, but no website. I said I would look into making it, because Jessica had a computer and I had been on the Web.

An old friend of mine who had been to art college with me was in the States, and I knew he was doing something with computers and probably with the Web. I knew that you needed Photoshop to design, so I thought that if you wanted to do Web design you’d need some other flashy expensive software, and I asked him about what I should use.

He said that I should open up a text editor and type in some HTML, save the file, and it will open in a browser. I tried and it actually worked! It was amazing—I couldn’t believe it. It was like when I was a kid just using the computer. You play around, something happens, and you feel so powerful. Considering that our band website was my first one and that it was the ’90s, it wasn’t too bad. It was 640 × 480 pixels.

I was never interested in Irish music when I was in Ireland, but I got into it when I came here. After finishing the band’s website, I didn’t know what else to do with my fresh HTML knowledge, so I decided to share Irish music. I started a site called The Session. Initially, it was just me posting one tune a week. This was actually better than posting everything at once. And I was able to add comments. This was a big deal back then, because before you had PHP, you had to write Pearl scripts. But it actually taught me how to program. Later, I learned how to create databases and so on. That project is actually still going. It’s changed, but it’s still going. It needs a redesign, which I’m working on right now.

I like having a long-term project going on. The Session has been going on for 10 years now, and it’s great because, in Web terms, this is forever. A lot of times, things on the Web go very fast. They are here today, gone tomorrow. And people forget this. People talk about Facebook like it’s always going to be there. But they also thought that Friendster would be there forever.

After my first website, people started asking me if I could do their website, so I started freelancing. I got more work and quit working at the bakery. Not long after that, we moved to Brighton, and until today I hadn’t been back to Freiburg in 12 years.

I only came to Freiburg by accident. When I look back, it was like it all came together when I started Web design. I didn’t know what to do otherwise. I played music, but I wasn’t very good, and I wasn’t really good at art college. It was like I was waiting around until the Web was invented.

Jeremy Keith is coming up next. A photo by John Davey.

Question: Why did you decide to move to Brighton?

Jeremy: As I mentioned before, Jessica and I played in this band. Our singer decided that he should finish uni because he never graduated. But he didn’t want to do it in Germany because back then it took much longer than in the UK. So, he went back to England and studied in Brighton. I thought that would be it with the band. He asked us to visit, which we did, and thought that it was a very nice place. At that point, we also got a bit tired of Germany, so we checked out Brighton. And then a flat became available in the same building where our singer lived, so we decided to move there.

We actually didn’t move because of the Web scene or anything. But once we got there, we found a lot of good stuff going on. I found people who were blogging, and I met people in real life who were doing the same stuff as I did.

Now, Brighton is — as Andy Clarke puts it — the center of the universe. There are many smart people and a lot of great stuff — for example, the Brighton Digital Festival, which consists of many events. If you consider the size of the city, it’s amazing how much is going on.

Question: How did Brighton become so special?

Jeremy: I don’t think there is any special reason for it. It’s more like this self-perpetuation circle. Now, people come down here because of the scene. Kevin Kelly made up this term, “scenius.� There is no particular reason why a scene manifests in one place. It just starts at some point; then it gets this positive feedback and develops. But that could be anywhere. A lot of factors play into it, like the fact that it’s a student town with many young people. It’s a good place now, but I don’t think you could guess those things and reproduce it.

Question: Do you see a difference between Freiburg and Brighton?

Jeremy: There definitely is. Freiburg is really lovely, and Brighton I wouldn’t describe as lovely at all. There are towns in England which are very picturesque and lovely — towns where you would bring your mother and have a lovely time. And Brighton is not one of those. It’s actually a bit seedy, sleazy, scuzzy and dirty. But because of that, it’s also active, and a lot of stuff is going on.

Freiburg doesn’t have a sleazy side to it. It’s amazing how little has changed in 12 years. When I’m two weeks away from Brighton, there will be new stuff everywhere when I get back. Freiburg is much more steady and calm in this respect.

Brighton is hectic, but way less than, for example, London, which is far too extreme. Sometimes I tend to feel that Brighton is hectic. But then I come back from a day in London, and when I get off the train, I see Brighton as such a sleepy seaside town. So, it always depends on what you compare it to.

Question: What are some must-do’s in Freiburg? And in Brighton?

Jeremy: The Freiburger Münster, and the farmer’s market which takes place in front of it every morning. Another great thing is to sit at the Haus der Badischen Weine (House of the Baden Wines), eat fruit from the market and drink a glass of Neue Süße (a German speciality –Ed.).

When you visit Brighton, you have to see the Royal Pavilion. It’s such a tacky building. It looks like the Taj Mahal and makes you think, “What is this doing in an English town?� It was originally build for sex, feasts and things like that. The interior design completely looks Chinese, except that the guy who came up with it had never been to China. There is also the pier, which is a bit overrated, but you probably should go there once. You can also stroll around the North Laine and find a lot of great coffee shops around there. It’s also great to go to the beach and just hang out there when the weather is nice.

As a geek, you should time your visit right, because the chances are good that some event or meetup will be taking place during your stay. There is always something on, and you should meet the local guys and hang out with them.

Smashing Flags outside the conference venue. A photo by John Davey.

Question: In your speaker’s biography at the Smashing Conference, you included the sentence, “He also shot a man in Reno just to watch him die.� What is this about?

Jeremy: It’s just a line from the song Folsom Prison Blues. When you speak at conferences, you’re supposed to make up your own bio — and even then in the third person. So, I say stuff like that, which I make up. I also kind of have an ongoing thing with job titles. I come up with a new one every two weeks. On the Clearleft website, there is a list of all of the staff members and their titles, such as UX director and lead creative strategist. I just put in names like King of Brighton or Long-Time Super Genius. It looks ridiculous, and it sort of makes the other titles look ridiculous, too, which is my point because I’m not a fan of job titles. Senior Lead Creative Manager — that’s another one. What does that even mean?

Question: How are you enjoying the conference so far?

Jeremy: I feel a bit behind because I’ve been sneaking out a lot to enjoy the market. But I haven’t been here in so long, so I just had to do that.

I like that it’s a single-track conference and that design and development are mingled. I really dislike multi-track conferences, especially when design and development are separated. What happens is that both groups just go to the topic they already know about, whereas in a single-track conference you have this shared experience. Designers and developers can learn from each other and will understand each other way better when collaborating on a project.

I like that you can go to the market and just have local food. I know how much catering adds to the ticket price, so I think that is a lot better.

The Wi-Fi was up and down, but I wouldn’t judge a conference on its Wi-Fi. Vitaly and Marc encouraged people to tweet, but I just don’t see the point of it, to be honest. You have to be here; you don’t get any real impression of it from 160 characters. Blog posts instead are great because the author can state what they learned or what bits inspired them. So, I’m more a fan of that.

The line-up is great, the talks are good, and the speakers great. There is no shortage of smart people in this industry. A lot of them really know their stuff, but it’s tricky to be on stage. Not many people are able to speak on stage and express their technical skills — this is a wonderful skill. It doesn’t matter how smart you are: you have to be good at making it entertaining and interesting for the audience. So, here we have those people.

A Smashing audience, attentively listening.

Rachel Andrew: The Future of Content Management

Rachel Andrew is a front- and back-end Web developer, author and speaker. Her books include the bestselling CSS Anthology for SitePoint, and she is a regular contributor to a number of publications both online and off, including Smashing Magazine. She writes about business and technology on her own website.

The Future of Content Management, a talk by Rachel Andrew at the SmashingConf 2012.

Question: You seemed pretty nervous before you went on stage, how was it to be part of the first Smashing Conference?

Rachel: I’ve written for Smashing Magazine before and I was really pleased to be asked, especially along with the other people who are real stars. I’ve done a new presentation here, so it’s always a bit scary to see how the slides will go and what people think. But I think it’s gone pretty well.

Question: Have you been on many conferences this year? Is there anything special about the Smashing Conference?

Rachel: Yes, I have been all over the place this year. The venue here is amazing. It’s real cool to be at someplace so exciting, and it’s warm and very friendly. It’s been like coming and meeting up with a lot of friends.

Question: In your talk you talked about content management system and CMS nightmares. What was your biggest CMS nightmare?

Rachel: It was one where the client insisted on doing something which we knew was going to damage that content and we told him that. But in the end we gave up. To actually give someone something which we we don’t think is right — I just hate that. I want to give clients great solutions. But if you can’t explain why something is a better solution, there is nothing you can do about it.

Rachel is speaking at Smashing Conference.

Question: You developed your own CMS, called Perch. For what sort of projects is Perch great?

Rachel: We designed Perch for smaller sites. We assumed it would be used for websites with five to six pages. Launching Perch 2.0 was really a response to the fact that people who were using it used it for much bigger sites. It’s still fairly simple but we made changes to support people who want to use it on bigger sites.

Question: Is Perch only good for regular websites, or can you also use it for blogging?

Rachel: We’ve got a blog add-on. One of the improvements we’re looking at is an import function for importing WordPress content if people want to move over. We’ve got add-ons for various things like for a blog or events. We create more plugins and add-ons as we go along.

Question: Beside Perch, do you have a favorite CMS?

Rachel: Before we coded Perch we did a lot of custom work for clients because there was often nothing which really fit for the projects. For me everything is great as long as it works for the job you’re doing. But if you insist on only using a certain CMS and try to force everything into it — that’s when you run into problems.

Question: What is one of the main future challenges which CMSs are facing?

Rachel: In my opinion things like the responsive images problem is a challenge for the future. It’s something which every CMS developer should look into. It’s going to be interesting to find solutions for this problem and media content in general.

Stephen Hay: Style Guides Are The New Photoshop

Stephen hay on stage. Image by Littlemad.

Stephen has been designing and developing for the Web since 1995. He currently helps clients with front-end design and development, multi-platform strategy and accessibility through his consultancy, Zero Interface. He is co-organizer of Mobilism, one of the world’s leading mobile Web development conferences and co-creator of Grip Workshops, a series of two-day intensive workshops for Web project managers on the client side.

Stephen has written for publications including A List Apart and .net Magazine. He also contributed a chapter to the Smashing Book 3 with a host of super-talented folks. When he makes the time for it, he publishes his thoughts on The Haystack.

At the Smashing Conference we were able to ask humble Stephen a few questions about his work and his personal insights at the first Smashing Conference.

Style guides are the new Photoshop, a talk by Stephen Hay at the SmashingConf 2012.

Question: Originally you studied and worked in print media. Why and how did you start doing Web design?

Stephen: I started doing Web design in 1995, so I kind of brought Web design into the company I was working for at that time. And then I just wanted to focus on doing Web design so I stopped doing print work.

Question: What makes Web design more exciting than print design?

Stephen: I like the fact that it keeps changing. I tend to get tired of things pretty quickly, so when things keep on changing, there is always something new to learn. And I love learning new things even though I may not use all of them. I like the speed of it all, it brings a lot of opportunities.

Question: You mentioned in your talk that unlike many designers, you don’t use Photoshop for creating Web design mock-ups. What do you use instead?

Stephen: It’s not that I don’t like Photoshop, I just don’t need it. I don’t own Photoshop. If I need image editing I use GIMP or Inkscape, but I only use them for image assets generally. I’m one of those who sketch on paper and I have a Bamboo tablet, so I sketch on a blank pad on the screen. But it’s still only sketching.

I also don’t use Illustrator or Fireworks. However, I do use Adobe Edge Inspect, which allows you to display your page on several devices while testing it, as well as taking screenshots on all these devices. Great stuff.

Question: What is your favorite tool or editor to create your mockups?

Stephen: The editor I work with is vim. I learned about it from a former employee. That was about eight years ago, and I hardly know anything about this editor because it’s so powerful and there is so much you can do with it. I’m faster than I used to be, but I still consider myself a beginner. I’ve seen people who are really, really fast in vim. What I like is that it is so powerful but you don’t see any of that power on the screen. It is just like a blank screen. There are no buttons, no menus, nothing. The commands are there, but you have to type them in, so they’re only there when you need them. Everything is done with the keyboard.

Question: Which keys or keyboard shortcuts in vim do you use mostly?

Stephen: Probably the movement keys. The H, J, K, L are used to move up and down and sideways. And also jumping from word to word with the W key.

Question: So is your work more about design or more about development?

Stephen: It depends on the project. There are plenty of projects where I do some of both. Sometimes, especially since I became an independent contractor, I’m just hired to advise clients on how they can approach specific Web-related problems. I ask them lots of questions and help them figure out what approaches they might consider regarding design and front-end development issues.

Question: Which coding or markup languages do you use for your projects?

Stephen: I use a little bit of JavaScript but I’m not a JavaScript hero by any means. I use mainly CSS and HTML.

Question: What is your favorite HTML element and what is your favorite feature in CSS?

Stephen: In HTML5, I really like the track element which will allow for adding things like subtitles to video. In CSS, I like everything that has to do with layout. Right now, I like what they are doing with flexbox. I love it, because it will change the way we lay out components on a page.

Question: How was it for you to be part of the first Smashing Conference?

Stephen: I feel honored and humbled. A lot of these speakers are people whose work I’ve admired and read about for the last eight to ten years. People like Andy Clarke whose thinking I’ve always respected. Almost everyone here (except from myself; I really feel like the odd one). But I really feel honored that Marc and Vitaly asked me to speak at their conference. It’s well organized, the location is beautiful and the city is gorgeous.

Question: Are you speaking at many conferences?

Stephen: I have done some conferences but not many. The Fronteers Conference in Amsterdam, Breaking Development in the United States and Mobilism, which I co-organize. I do a lot of speaking for clients. I’ve done several workshops and things like that. Much of that is related to Web accessibility; I’ve done a lot of accessibility-related work. There’s not much more on the agenda for now but I hope to do more speaking because I like doing it even though it is a lot of work and I get really nervous. But it is great fun to do (especially when you’re finished).

Question: Was there anything special for you at the Smashing Conference?

Stephen: It is still early, but what comes to mind immediately is the line-up of speakers. It’s almost the who-is-who of Web design and development brought to one place. This group of talent in one place… it’s just incredible. And the location… Freiburg is a beautiful, beautiful place.

Stay Tuned!

More videos and interviews will be presented on Smashing Magazine next weeks. Subscribe to our events mailing list to stay updated about the next Smashing Conference and other upcoming Smashing events.

(cp) (al)

© Smashing Editorial for Smashing Magazine, 2012.

Update: Hours after the publication of this article Indra Kupferschmid published an article in which she corrected some of the facts presented in the original article and provided an opposite view on the issue. We republished Indra’s article to correct the factual errors, with her permission of course. Make sure to check the corrections before reading this article.—Ed.

The other day someone sent me a link to a website with the preposterous title of “The 100 Best Typefaces of All Time�. Topping the chart was Helvetica, and that stirred my ire. I dismissed the list because it was based on marketing figures from one source, FontShop, coupled with the opinions of half a dozen mostly Berlin-based typographers, but I was still incensed.

When it comes to, say, boxers, you can handicap the various athletes in the ring and predict that Muhammad Ali would beat Jack Johnson or Jim Corbett and that, therefore, he is number one, but a lot of other factors come to bear on your decision: sentimentality, the fact that Ali is acknowledged (by people like me, with no real knowledge of the sport) to be “The Greatest�; he has name recognition, and so on. But how do you evaluate a typeface? Is it just based on its widespread use? Or its suitability to the subject at hand? Ease of reading? Familiarity?

Bust portrait of Muhammad Ali by Ira Rosenberg, from the World Journal Tribune. (Image: Library of Congress)

For Helvetica, an explanation of its history helps to explain its longevity. Most typeface designs are the result of fashion or changes in taste; some are technologically driven. When iron printing presses were introduced around 1800, sharper, crisper types such as Bodoni and Didot were created. When laser printers came along in the mid-1980s, with their bitmapped fonts, students in Holland began producing typefaces that reflected the quality of the poor printing. Letters in Studie (Eindhoven, Lecturis, 1983) shows examples by Jelle Bosma and Petr van Blokland designed on a 40-pixel grid. Emigré, an early digital type foundry, produced Oakland (1985) and other lo-res types for the market.

So, fashion and technology, which are ever evolving as they become obsolete, are as influential on type design and typography as on any other medium, from dressmaking to car design. When printing technology became so good that uniformly smooth, crisp faces were the norm, designers longed for the grit and noise found in old letterpress posters and started a fad for trashed and distressed faces. But like everything else that is fashionable, typefaces retire to await a future recall.

The art of reviving typefaces began in the Victorian era, and among the choices of contemporaries, the original Caslon is a model that has endured. In the 20th century, typeface revivals seemed to outstrip new designs. Production accelerated as two big companies, Linotype and Monotype, tussled in the field. The head of typeface development at the British Monotype Company, Stanley Morison, said, “Type today does not require inspiration so much as investigation.� He led the charge into the past with modern versions of the types Aldus (Bembo), Fournier, Bell, Walbaum and others. Linotype (under George W. Jones) countered with superior versions of Granjon (ironically named as it is the best Garamond copy of the metal era), Baskerville and Janson.

At that time, two sans-serif types introduced in the late 1920s dominated the market for advertising. These were Monotype Gill Sans and Futura, of the German Bauer foundry. Suddenly there was a rush to create, imitate or revive sans-serif types. The Berthold foundry of Berlin dusted off the matrices for its Akzidenz Grotesk (1898), while their rivals, the Haas Type Foundry of Basel, decided to rework Schelter Grotesk, which had been issued by the Leipziger Schelter & Giesecke foundry in 1880. This became Neue Haas Grotesk in 1957, which was then picked up by the Stempel foundry in Frankfurt. It wanted to identify the type with the emerging popularity of Swiss graphic design and chose the ancient Roman name of Switzerland, Helvetia, and so Helvetica was reborn in 1961.

Max Meidinger’s original 1957 design of Helvetica (from the Haas Typefoundry brochure “From Helvetica to Haas Unica,� Münchenstein, ca 1979).

The reason for the popularity of Gill Sans and Futura was that they turned their back on these Grotesks of the 19th century, which were worn out. Eric Gill took a new approach: pen-made humanist calligraphy was the basis for his type (he had also worked on the drawings for the London Underground alphabet with his mentor, Edward Johnston). These letters made more coherent word shapes and were easier to read than Grotesks. But Gill’s type standardized the distinct curled-tail “l� and shed-roofed figure “1� of Johnston’s design, which led to confusion with the capital “I� (a problem in many sans serifs).

The third (digital) version of Edward Johnston’s proprietary London Underground typeface, photographed on the Piccadilly Line in 1983.

Paul Renner’s Futura was designed to reflect the new machine age, with simple geometric shapes, straight lines and circles that gave it a cool Art Deco elegance. Both types are now imbued with a lot of cultural baggage, so Gill suggests the British Broadcasting Corporation and Futura has become nostalgic shorthand for the era of streamlining.

Paul Renner’s Futura Light, 1928, from a Bauer type foundry brochure (New York, ca 1930)

But in the 1930s, these two types were immensely popular in Europe and North America, and the other founders had to respond quickly. Returning to the 19th century should have been out of the question for the competition, except that the German foundries had been flattened in the Second World War and were slow to retool.

Helvetica became a national brand, an identity for the popular “Swiss style� of typography of Emil Ruder and Armin Hofmann, which quickly spread as their well-indoctrinated students took the new look back to Yale and other American schools. From BMW, Bayer and Lufthansa in Germany, the Helvetica look spread to Bank of America, Knoll, Panasonic, Target, Crate&Barrel, JC Penney, Mattel, American Airlines, Sears, Microsoft and other corporations.

In the late ’90s Microsoft was selling a million copies of Word each month and gave away 14 fonts with its program. Its knock-off of Helvetica is called Arial. Linotype had taken over Stempel, and then Haas, and so consolidated its ownership of Helvetica and many of the clones. The stark sans-serif look that had first symbolized revolution in the hands of Russian typographers in 1917 became institutionalized as the bland face of corporate smugness.

Swiss-style poster for the Pratt Institute, Brooklyn, New York, 1972. (Courtesy of Frances Butler)

As it spread over the graphic landscape like melted runny processed cheese, I suggested renaming it Velveetica. Its blandness and general horridness oozed out on all sides. It was neutral, but also tasteless and was taking over typography. Nothing could stop it as designers unquestioningly copied one another in adopting it. The idea that it was more modern than Gill Sans or Futura has more holes in it than Swiss cheese.

A card advertising Helvetica filmsetting (Bauer Alphabets, New York, no date)

After the adoption of the Swiss style internationally, another event caused the persistence of Helvetica: the arrival of the personal computer. Apple could fit only a few types into the memory of its LaserWriter printer driver. Times and Helvetica were decided by executive fiat (based on their popularity at the time); Symbol and Courier were required by the operating system. Then, a team of experts was called in to choose more types: Palatino, Zapf Chancery, Avant Garde, Bookman and Century Schoolbook were picked by committee. One of the committee, Sumner Stone, told me, “In retrospect they seem pretty strange and random. … Times and Helvetica were redrawn, and with Helvetica the narrow and oblique came free because it was just an algorithm.� With only garbage to pick from, there was a visual blight of Times, Helvetica and Palatino in the early days of “desktop publishing,� which lasted well beyond their sell-by date.

Helvetica brochure Frankfurt (D Stempel AG, no date)

Speaking of which, the US government (which uses Helvetica for tax forms and other official printed matter) specified it for “generic packaging� in (wouldn’t you guess?) 1984 (see top of page). Everyone blindly accepts Helvetica, most of them we assume because they follow leaders like lemmings, but why do they extoll its worth? Is it a great international hoodwinking conspiracy, like the Emperor’s New Clothes?

In 1993, Robert Norton, who was a Microsoft bagman, invited prominent people in the field of typography to contribute to a book entitled Types Best Remembered / Types Best Forgotten (London & Kirkland, Washington, Parsimony Press) and write about their favorite and least favorite typefaces.

Peter Karow (who created the Ikarus program for type digitization) wrote about Helvetica: how he had digitized it in various clones throughout the 1970s and 1980s as competing companies put out their own similar versions. It was his favorite, it seems, but with reservations. In 1993, he relates, Stefan Rögener told him that “90% of creative directors use Helvetica, Futura, Garamond and Baskerville. Give me a pistol!�

The Ikarus program allowed designers to alter their Bembo clone into a Helvetica clone, although why would they? (From “Ikarus for Typefaces in Digital Form� by Peter Karow, URW Unternehmensberatung Karow Rubow Weber GHBH, Hamburg, 1983)

I took the opportunity to name Helvetica my least favorite type and wrote a reasoned (I thought) explanation of why it is not a good typeface: “The letters are square and squat and don’t communicate with their neighbors. … There is more internal space in the counters than around the words, creating ugly and standoffish silhouettes.� The point I was making is that, to operate legibly, words have to have a visual balance between internal and external white space, a kind of aerodynamic flow. It’s a physical fact, and types like Syntax or Frutiger work far better than Helvetica, which remains self-enclosed and constipated-looking.

Legibility operates not at the level of characters but of ideational units. Adults read clusters of letters, such as “the,� as a single unit, or their brains group clusters of characters to speed comprehension. The better these units cohere, the more legible they will be (assuming that speed and comprehension are goals). Typefaces that have many characters that resemble one another (such as “a� “s� and “e� in Helvetica) impede the reader, as does the fact that the enclosed letter shapes prevent them from fusing to make more cohesive units. These are scientifically established aspects of letterform design and should take Helvetica out of the equation for anyone looking to create a legible message. Communication is a science and doesn’t really have much to do with aesthetics, other than the reader’s comfort via familiarity.

Static versus dynamic letterforms

In this illustration from “Syntax-Antiqua, eine serifenlose Linearschrift auf neuer Basis (Syntax, a Sans Serif on a New Basis)� (Gebrauchsgraphik, 1970), Erich Schulz-Anker (Manager of Typographic Development at D Stempel AG) contrasts the mechanical Didone-Helvetica development with a humanist line running from Garaldes (i.e. Sabon) to Syntax, designed by Hans Eduard Meier and released by Stempel in 1969. He contrasts them as “static� versus “dynamic� forms. I would further characterize them as illegible versus legible forms. See how the letters on the left stand apart and isolated from one another, while those in the dynamic group relate to their neighbors.

Of course, most lay people can’t tell one sans serif from another. When people say they prefer Helvetica to Arial because the latter is a bad copy, I ask if there’s a difference between a Big Mac and a Whopper, and, more to the point, would you honestly feed either to your kids?

Adrian Frutiger, “Mister Univers� himself, tried to improve on Helvetica with the Univer series, begun in 1954 (and he succeeded, causing the Helvetians to expand their family of weights in response), but then, in his maturer years, he turned his back on Univers to design the family that bears his own name (Frutiger, 1976). With the Internet, Helvetica has retrenched and, despite the Arial clone that mimics it (see “The Scourge of Arial� by Mark Simonson), gotten new legs as a font that stays the same cross-platform. If you use any Adobe product, you cannot avoid Helvetica.

Comparison of four sans serifs from “My Fonts�

Everything about Helvetica is repellant: from its uptight aura to its smug, splendid isolation. How it persists in the face of such brilliant alternatives as Frutiger and Syntax defies logic.

Mike Parker, who oversaw production of Helvetica at Linotype, wrote, “In the sixties by cutting it for the Linotype we made Helvetica the Swiss sans serif of choice across most of the world.� But, he adds ruefully (in Types Best Forgotten), “Never again should we have to endure quite such dulling repetition of any single design.�

First showing of American Helvetica (Mergenthaler Linotype, New York, no date)

I sincerely believe that people (even designers) who say Helvetica is legible are simply confused. It’s pervasive, certainly. We see it everywhere — that’s why we think we can read Helvetica — but it is not nearly as legible as, say, Frutiger or Syntax, for the reasons I have stated above. Syntax is not merely a legible typeface: Syntax is beautiful, it’s sublime, it sings. Well, you argue, Helvetica is neutral. Yes, Helvetica is neutral, but it also symbolizes blandness and conformity and… well, sorry Swiss people, boredom.

Helvetica-Kursiv flyer from D Stempel advertising Linotype-Matrizen in 6 to 10 point (Frankfurt, no date)

In 2007, Gary Hustwit made a documentary film about the typeface in which various talking heads exuded enthusiasm for the wretched mess that is Helvetica. The corporations have agreed, and the bland new world feared by Huxley, Orwell and other writers of the last century is one step nearer.

(al)

© Alastair Johnston for Smashing Magazine, 2012.

“First, let’s set a few things straight: becoming a top WordPress [developer professional] is hard work — very hard work. It’s going to take a lot of time, energy and determination. If you’re looking for an easy checklist or some “fast passâ€� to the top, you’re going to waste your time. Being one of the best is hard, and statistically speaking, the odds are stacked against you.”

If you’re a regular reader of Smashing Magazine, that will no doubt sound familiar to you. A few weeks back, Jonathan Wold wrote a post on how to be a top WordPress developer. But development isn’t the only way to get ahead in WordPress, because one of the great things about it is that you don’t need to be a developer or an expert. You just need a passion for WordPress, for open-source software and for being part of a community.

Image Credit: @cdharrison

In this article, I’m going to take a look at how you can be a top WordPress professional — this advice could apply to developers, but equally to bloggers, support reps, designers and everyone in between.

But why bother with WordPress in the first place? Cory Miller is the co-founder of iThemes, which offers professional WordPress themes, plugins and Web design training. He’s also the co-author of the latest edition of WordPress for Dummies. Miller started a blog with WordPress in 2006, as a total newbie with no WordPress experience, who started to learn by releasing free themes to the community. I asked him why people should get involved with WordPress.

“With WordPress you’re not sleeping on someone else’s couch. It’s open-source software that you control. You can do whatever you want with it, whenever you want. You’re not reliant on someone else’s stupid terms of services changes, or that you can’t touch the code because it’s locked away on someone else’s servers. I think we take for granted that freedom too often, or maybe forget it when the next [insert hot social media platform] rises up.

But the biggest reason for being involved with WordPress is it just makes Web publishing easy. Virtually anyone can have a blog or website on the Web with WordPress. And that opens up some amazing opportunities for everyone involved.”

WordPress makes it easy for people to publish a blog or website; it democratizes Web publishing. And its ease of use also makes it possible for people who aren’t PHP geniuses to make it to the top.

Why Be A Top WordPress Professional?

The sky is the limit with WordPress. (Image: stefanorugolo)

Being average and normal is underrated. You can’t be the best at everything, and if you spend your life trying to be, you could end up with a horrible neurosis. Besides, it can be nice to be just okay at something and accept that you’re okay at it — those things tend to have less stress associated with them. That said, it can be satisfying to strive to be better at the things that you’re passionate about, and whether that’s WordPress itself or the idea of taking control of your own destiny and running your own business, aiming for the top has a bunch of fringe benefits. For instance, the top WordPress professionals:

• Make the most money
  If you want to make the most money, you need to be the best at what you do, whether that’s writing, training, supporting, launching startups or project management. If you’re good, your reputation will grow and you’ll be able to get higher rates. Check out this eBook from Code Poet with advice from top WordPress professionals on getting your pricing right.
• Get the best clients
  As Wold pointed out in his article, once you get to the top you have a lot more freedom about what you say “yes” to. I’d like to add that as your rates start increasing, you’ll find that clients are increasingly easy to deal with. Charging more = better clients.
• Have the most influence
  If you’re passionate about open-source software and WordPress itself, building your reputation means more opportunity to have influence.
• Be part of a community
  The WordPress community is huge and growing. By taking part in that community and building a reputation for what you do, you’ll make connections with other people who are passionate about WordPress and who are at the top of their game. You don’t need to be the best developer to make it in WordPress, but it helps to make connections with them.
• Make the right connections
  If you build your reputation in the WordPress community by contributing back, going to WordCamps and Meetups and generally getting involved, people will start to take notice of who you are. Once you’re on a person’s radar, work will be sent your way.

I’m Not A Developer! What Can I Do?

You do not need to know how to write code to get ahead in WordPress. If the only people involved in WordPress were developers, then WordPress wouldn’t be the software that it is today. Here are some of the things you can do:

• Designer
• Project Manager
• Entrepreneur
• Support Pro
• Consultant
• Blogger
• Documentation Writer
• Teaching & Training

If you aren’t convinced that you can make it doing these things, check out my post on the WordPress Economy to scope out some of the people who are already doing it.

A great example of this is Mika Epstein (more commonly known as Ipstenu). For her, WordPress started out as a hobby but it quickly became more rewarding than her IT job at a bank where she did everything from application installs on desktops to deployment automation and monitoring for servers. Recently, though, she’s started a job as a support specialist for DreamHost.

Epstein is also the support representative for WordPress, leading up the support and documentation teams on WordPress.org. This has involved talking to hosting companies and theme/plugin shops about what is expected from them on the support forums. She’s responsible for the Supporting Everything WordPress blog, wrangling people into editing, helping out and supporting other supporters.

Epstein is just one of the people who I’ll be talking to who are at the top of the WordPress game but who wouldn’t be simply categorized as a developer.

Starting Out

To be a top WordPress professional, you don’t need to be able to write PHP, know how to query a MySQL database or know how to schedule a cron job. The WordPress ecosystem is vast, and there is room for lots of different specialties. However, if you are going to be a top WordPress professional, you should at least know how WordPress works, have a good imagination and become an expert in some area of it.

Use WordPress

It may seem self-evident, but using WordPress for yourself is a great place to start. This could be publishing your own personal blog or building a website for a friend or family member. Find a way to use WordPress. It’s a little crazy to start out deciding you want to get to the top of something when you’ve never experienced that product from perspective of the user.

“You’re involved with WordPress the minute you use it for yourself. That’s the beauty of open-source software and community. Your initiation into it is your ‘Hello World!’ or your first website and blog post with it.

So just start blogging and fall in love with it like I did 7 years ago.”

- Cory Miller

Install WordPress Locally

Use MAMP to install WordPress on your computer.

You don’t need to be a developer to set up a development environment on your computer. It may seem daunting. I remember that the first time I set up Xampp with WordPress, I was totally confused and had no idea what I was doing. I muddled through it eventually and was amazed that it was something I could do. Now I have more local WordPress installations than I can keep track of. Installing WordPress on your computer means you can do whatever you want with it, without having to worry about a live server. You can break it, hack themes and plugins, install whatever you want and you don’t need to worry about domain names, production websites, etc. I run local installations for specific plugins such as bbPress and BuddyPress, which allows me to explore working on websites in different contexts. Once you’ve installed WordPress a few times on your computer, you’ll realize how remarkably simple it is. Tutorials: install WordPress using Xampp (Windows) or MAMP (Mac)

Follow the Blogs

There are a plethora of WordPress blogs out there that you can learn from. Add them to your RSS reader and stay up-to-date. With so many blogs that have “WP” as a prefix, it may seem like they all have the same thing to offer, but the best are distinctive and each offers something unique. Here are some of my favorites:

• Smashing Magazine (WordPress Category)
  Long form articles, tutorials and editorials
• WP Realm
  International WordPress news, opinion and articles from experts across the community (and edited by me!)
• WPCandy
  WordPress news and podcasts. There’s also a Pros section which you can sign up for once you’re a Pro!
• WPBeginner
  WordPress tutorials, how-tos, videos and reviews, along with a nice coupon section for getting discounts on WordPress-related products and services.
• WPMU.org
  Daily tips, tutorials and WordPress news.
• WPLift
  Regular round-ups of WordPress plugins and themes, as well as the occasional tutorial.
• Code Poet
  Interviews with prominent WordPress experts, short and useful eBooks and links to useful resources.

It’s also worth signing up for wpMail.me which is a weekly email with WordPress articles from across the community.

Be Enthusiastic

A little bit of enthusiasm goes a long way. Mason James started out applying for a job as a WordPress developer at WPMU DEV, but he did a terrible job at the plugin modification task they gave him, and he was turned down for the job. However, they so appreciated his communication skills and positive attitude that they took him on as a supporter.

“Regardless of the industry, people want to work with someone they enjoy being around. Having a positive attitude and being willing to tackle challenges are both qualities any company is going to be looking for. I’m also passionate about supporting websites and seeing any problems resolved. I’m a natural problems solver — it’s like a game to me, so that fits in quite nicely.”

His enthusiasm has taken him a long way, and now Mason is CEO of his own WordPress support, management and project management agency, WP Valet.

Listen

It’s approaching 10 years since WordPress was born. That means that there are a lot of people in the WordPress community with lots of experience. There are people with experience running startups, managing support forums, building plugins or theme shops or contributing to WordPress itself. Find these people and listen to what they have to say. Dougal Campbell curates a Twitter list called WPLeaders, which is a great place to find people with WordPress experience.

Don’t just rush in with your awesome idea, making yourself look a little dumb in the process (though even that can be a good learning experience). Take the time to learn how the community works and functions, along with the etiquette, before you dive in.

Get Involved

People gathered at WordCamp Netherlands 2012. (Image: Erno Hannick)

Now that you have learned the basics of WordPress, it’s time to start getting involved. Of course, you could go it alone, and there are plenty of people running successful WordPress businesses who have nothing to do with the community. But there are so many reasons to get involved that you should jump straight in. Here’s why.

• The community provides a free training ground where experts will give you feedback and help you to make WordPress better.
• If you’re freelancing or running your own business, the WordPress community can provide support and human connections in what can be an isolating situation.
• By getting involved with WordPress, you’re helping to create a better product which everyone can benefit from.

Follow Make WordPress.org

Make WordPress.org is where you can find blogs for all the contributor groups.

Where there used to be mailing lists, now there are blogs. All of the different contributor groups are gathered together at Make WordPress.org. You can follow all of them or check out the ones that are relevant to you. The Make WordPress.org blogs are:

• Core
• Plugins
• Accessibility
• Support (including support forums and docs)
• UI
• Themes
• Polyglots
• Events
• Systems

There is something for everyone, and each blog has a vibrant community working in their area to make WordPress better. Each group has its own lead who is responsible for shepherding, wrangling and leading the team.

Support Others

The WordPress support forums are an excellent resource for WordPress users, but they’re also a great place for you to hone your WordPress skills. We learn best by teaching things to other people. I have learned 95% of what I know about WordPress from writing articles about it. Equally, answering questions in the support forums will help to clarify your own knowledge of WordPress. When you an explain a concept clearly to someone else, you know that you’ve got it — answering support questions is a great tool for that.

And not only will it help to clarify your own thinking, but it introduces you to different perspectives. Here’s Epstein:

“If you want to learn about WordPress, there is no faster way to figure out the nitty gritty than to try to help people. You can only imagine what you can dream up, but the millions of users out there come to this from a totally different place, and they have myriad different ideas. Bar none, I learned more about WordPress by helping than I did by ‘researching.’ Being asked a question and not knowing the answer means you have a goal you never would have given yourself, and it’s inspiring.”

Check out Epstein at the recent WordCamp San Francisco talking about getting involved in the WordPress support forums.

Write About WordPress

You could start off writing about WordPress by heading to the WordPress Codex, finding a random page that needs to be edited and editing it. The Codex is run on MediaWiki, and anyone with a WordPress.org username can edit it. The Codex is always in need of updating and editing, and contributing your own articles will help to hone your WordPress skills. You could also help out with the WordPress user handbook, which is currently in the process of being edited at the Supporting Everything WordPress blog.

WordPress.org isn’t the only place to write about WordPress. If you find a solution to a WordPress problem, write it up on your personal blog. People will find it via Google, and it’ll help them with their own problems. You could also submit a post to a WordPress blog. Many blogs are often looking for guest posts, and some of them are even paid writing gigs! Like providing support, the process of writing things up will make processes and solutions even clearer in your own mind.

Translate WordPress

Around 40% of WordPress downloads are not in the English language — that is a whole lot of non-English language copies of WordPress in the wild. Translating WordPress is a great way to help out and make connections in your local community. Here’s what Zé Fontainhas, the WordPress Polyglots lead, had to say about it:

“Translating WordPress has loads of benefits for you as a WordPress Professional: not only do you increase your karma in both the global and your local community, but in the process you get to look at the code more closely than most. You may pick up bugs or improvements that no one else sees, and this unique perspective will teach you far more about WordPress than the average WordPress user will ever pick up.”

Meet the Community

Working online is great, but there’s nothing like meeting your peers face-to-face to create stronger and deeper relationships. The WordPress Foundation supports two types of WordPress events: WordCamps and Meetups. WordCamps are large annual conferences, usually two days long, at which WordPress experts and enthusiasts gather to share their experience of WordPress. Meetups are more regular, often once a month, and are short informal gatherings that might involve hacking or presentations. Attend events, and, once you feel confident enough, speak at them. Don’t feel that you have to be a WordPress genius to give a presentation. If you’ve done something useful that is worth sharing, then share it. Having been to three WordCamps this year already, I can’t stress how important they are in terms of building relationships, friendships and your profile. You can check out my write-up of WordCamp Netherlands to learn more about them.

Form Relationships

Collaboration, not competition. This is the WordPress way.

— Jane Wells (@janeforshort) August 21, 2012

There are times in the WordPress community when arguments erupt between personalities, and people are yelling at each other on Twitter or flaming in comment threads. But this is the exception, not the norm. While that is going on, there are hundreds of people working on WordPress itself, and thousands of people all over the world building WordPress businesses, who are working at improving WordPress.

From my own experience, I wouldn’t have built my own business if I didn’t have developers to ask dumb questions of, designers to make things look good for me, other WordPress experts to offer advice and help me to improve. At the same time, I offer advice on writing, proofreading and editing where I can. The diverse group of people whom I consider to be my closest WordPress peers have been invaluable in getting me to where I am today, and will no doubt take a role in shaping my future. These relationships are important. Seek out people you can work with and hold on to them.

Get Ahead

Get ahead of the race. (Image: Tambako the Jaguar)

Know Who to Ask

By forming relationships with the right people, you’re on the first step to getting ahead. These don’t need to be the most prominent people, but rather people with knowledge and expertise, people who you can trust. You don’t need to be the best developer to make it in WordPress, sometimes it’s just a matter of knowing the right people to answer your questions. This does not mean (and this is important) that you find out who the best people are and bug them on Twitter, nor should you call people at 4 a.m. to ask them for help finding WordPress themes (true story). By building relationships and interacting with the community, you’ll have a whole collection of people who can help you with issues whether it’s caching or media queries or finding a good developer or finding the right hosting company. Getting ahead isn’t always about being the best at something yourself; it’s just knowing the right people and asking the right questions.

Know What’s Happening

If you want to get ahead, you need to know more than just WordPress as it is in the current release. You should stay up-to-date with what will be appearing in WordPress, and not just in Core but in the wider community. If you’re working with clients in any capacity, you should know what’s in store for them in upcoming WordPress releases. There are plenty of ways to do this.

• Run the nightly builds
  Keep the nightly builds installed on a local WordPress installation. This will keep you up-to-date with any changes as they happen.
• Keep up with Core development
  You can follow what’s going on in Core in a number of ways: following Make WordPress Core, keeping up with the recent development chats and following WordPress Trac. You can also follow @wordpresstrac on Twitter for live updates in your feed.
• Follow user interface (UI) changes
  Major changes to the UI can be confusing for unprepared WordPress users. Keep your clients and customers informed of any updates by watching the Make WordPress UI blog.

Call Things Out (Without Trolling)

Once you’ve gotten to know WordPress well, are engaged with the community and are aware of all of the nuances around it, you’ve gotten yourself into a great position for calling things out when you see a problem. Some problems don’t warrant a public airing, others do. Here are some great examples of criticisms of WordPress or the community that have led to extensive debate and discussion in the comments:

• Brian Krogsgard takes a look at why it’s so hard to love JetPack
• Tony Perez comments on the level of sponsorship for WordCamp San Francisco
• Shane Pearlman talks plugin usability
• Rarst has a rant about the GNU General Public License (GPL)
• Justin Tadlock on the capital_P_dangit() function

Know When to Take a Break

Don’t get rid of your TV, and definitely don’t throw away your computer games, or your books or any of the other things you love to do. For the first few years I worked on WordPress, I was working all day and all night. Even now, I regularly clock off after midnight. Working with WordPress, running your own business and getting involved with the community can be intense. There are a lot of personalities; there are clashes and arguments and upsets that will get to you. This could be anything from a rude person on a support forum, to a flashpoint on Twitter, to just feeling overworked and tired. You need to have things that you can do to switch off and take a break.

Andrea Rennick is part of the support team at StudioPress, co-author of WordPress All-in-One for Dummies and runs WordPress eBooks. She’s an avid quilter.

“I have my sewing table set up right next to my desk. I can swivel from one to the other. Quilting gives my brain something else to work on, whatever problem I may be focused on. It’s hard to be distracted when there is a sharp needle running up & down at top speeds right next to your fingers. It also gets me up and moving, out of my chair. Selecting fabric, cutting the pieces and especially the basting process give me another reason to not sit for yet another hour.”

Whether it’s quilting, opening a bakery, doing yoga, driving fast cars or whatever, it is essential to step back from the WordPress world, switch off your brain and get a little perspective from time to time.

Keep Listening

Once you’ve got to the top, you still need to listen. Other people continue to have different perspectives from you and no matter how right you think you are, there are cases where you are going to be wrong. It may be that you’re so wrapped in WordPress that it takes an absolute beginner to point out something that you’re missing, or you’re lacking the knowledge in a specific area. Getting to the top doesn’t mean you know all things about everything, just that you’re really good about something. Keep listening to those who are also really good, and even those who aren’t.

Miller highlights another great reason to keep listening.

“Look for people’s pain points and frustrations. Those are opportunities to serve people AND make money doing it. The best products and services fill gaps in where WordPress can’t or stops short. Innovate and make something better, which often means saving people time, energy, headaches and money.”

Conclusion

In his article, Wold suggests that the top 20% of developers earn more than $50 an hour. That’s not entirely true. The WordPress survey didn’t only gather info from developers, but from people like me, other WordPress professionals who have built businesses around writing, project management, design, support, blogging, training, consulting or any of the myriad things that you can do with WordPress. And there are plenty of WordPress professionals who are earning far in excess of $50 per hour.

There are other rewards too, beyond the financial. Our world is increasingly fragmentary, especially for those of us who make our livelihoods online. Being part of a community means having people to communicate with, to share ideas and collaborate, to form business partnerships and friendships. If you want to take the easiest route to the top, and have fun while you’re doing it, then it’s by listening, learning, sharing, collaborating and contributing.

(cp)

© Siobhan McKeown for Smashing Magazine, 2012.

Using templates in the browser is becoming more and more widespread. Moving application logic from the server to the client, and the increasing usage of MVC-like patterns (model–view–controller) inspired templates to embrace the browser. This used to be a server-side only affair, but templates are actually very powerful and expressive in client-side development as well.

Image Credit: Viktor Hertz

Why Would You Use It?

In general, leveraging templates is a great way to separate markup and logic in views, and to maximize code reusability and maintainability. With a syntax close to the desired output (i.e. HTML), you have a clear and fast way to get things done. Although templates can be used to output any kind of text, in this article we provide examples using HTML, since that is what we want in client-side development.

In today’s dynamic applications, the client frequently needs to update the user interface (UI). This might be done by fetching an HTML fragment from the server that can be readily inserted into the document. Yet this requires the server to support delivering such fragments (as opposed to complete pages). Moreover, as a client-side developer who is responsible for the markup, you want to have full control over your templates. No need to know anything about Smarty, Velocity, ASP, some other obscure server-side syntax or even worse: dealing with spaghetti code such as HTML containing those infamous <? or <% tags all over the place.

So let’s take a fresh look at a viable alternative: client-side templating.

First Impressions

For starters, I’d like to give a definition of the term “template”. Here is a good definition from foldoc:

“A document that contains parameters, identified by some special syntax, that are replaced by actual arguments by the template processing system.”

Let’s observe an example, and see what a basic template might look like:

<h1>{{title}}</h1>
<ul>
    {{#names}}
        <li>{{name}}</li>
    {{/names}}
</ul>

This probably looks pretty familiar if you know HTML. It contains HTML tags with some placeholders. We will replace them with some actual data. For instance with this simple object:

var data = {
    "title": "Story",
    "names": [
        {"name": "Tarzan"},
        {"name": "Jane"}
    ]
}

Combining the template and data should result in the following HTML:

<h1>Story</h1>
<ul>
    <li>Tarzan</li>
    <li>Jane</ul>
</ul>

With the template and data separated, it becomes easy to maintain the HTML. For example, changing tags or adding classes will only need changes in the template. Additionally, adding an attribute to repeating elements such as the <li> element only needs to be done once.

Template Engine

The syntax of the template (i.e. the format of the placeholders such as {{title}}) depends on the template engine you want to use. This engine takes care of parsing the templates, and replacing the placeholders (variables, functions, loops, etc.) with the actual data it is provided.

Some template engines are logic-less. This doesn’t mean you can only have simple placeholders in a template, but the features are pretty limited to some intelligent tags (i.e. array iteration, conditional rendering, etc.). Other engines are more feature-rich and extensible. Without going into details here, a question to ask yourself is whether and how much logic you allow in your templates.

Although each template engine has its own API, usually you will find methods such as render() and compile(). The render process is the creation of the end result by putting the actual data in the template. In other words, the placeholders are replaced with the actual data. And if there is any templating logic, it is executed. To compile a template means to parse it, and translate it into a JavaScript function. Any templating logic is translated into plain JavaScript, and data can be fed to the function, which concatenates all the bits and pieces together in an optimized way.

A Mustache Example

The production of the example above can be performed by using a template engine, e.g. mustache.js. This uses the popular Mustache templating syntax. More about them, and alternatives, later. Let’s take a look at a little JavaScript to produce some results:

var template = '<h1>{{title}}</h1><ul>{{#names}}<li>{{name}}</li>{{/names}}</ul>';
var data = {"title": "Story", "names": [{"name": "Tarzan"}, {"name": "Jane"}]};

var result = Mustache.render(template, data);

Now we want to show this in the page. In plain JavaScript this could be done like this:

document.body.innerHTML = result;

That’s all! You can try the above in your browser by placing the Mustache script before your own code:

<script src="https://raw.github.com/janl/mustache.js/master/mustache.js"></script>

Or, you can try this example at jsFiddle.

Organizing Templates

If you’re like me, you probably don’t like to have the HTML in one long string. This is hard to read, and hard to maintain. Ideally, we can put our templates in separate files so we still have all the benefits of syntax highlighting, and the ability to properly indent the lines of HTML for readability.

But this leads to another issue. If our project contains a lot of templates, we don’t want to load all of those files separately, since this issues a lot of (Ajax) requests. This would be bad for performance.

Scenario 1: Script Tags

An often seen solution is to put all the templates within <script> tags with an alternative type attribute, e.g. type="text/template" (which is ignored for rendering or parsing by the browser):

<script id="myTemplate" type="text/x-handlebars-template">
    <h1>{{title}}</h1>
    <ul>
        {{#names}}
            <li>{{name}}</li>
        {{/names}}
    </ul>
</script>

This way, you can put all of your templates in the HTML document and prevent all the extra Ajax requests to those templates.

The content of such a script tag can then be used later in your JavaScript as a template. The following code example, this time using the Handlebars templating engine and a bit of jQuery, uses the previous <script> tag:

var template = $('#myTemplate').html();
var compiledTemplate = Handlebars.compile(template);
var result = compiledTemplate(data);

You can try this example as well at jsFiddle.

The result here is the same as in our Mustache example. Handlebars can use Mustache templates as well, so we use the same template here. There is one (important) difference though, which is that Handlebars is using an intermediate step to get the HTML result. It first compiles the template into a JavaScript function (we named it compiledTemplate here). This function is then executed using the data as its only argument, returning the final output.

Scenario 2: Precompiled Templates

While only one function to perform the template rendering may seem convenient, there are significant advantages to splitting up the compilation and rendering process. Most importantly, this allows for the compilation part to happen on the server-side. We can execute JavaScript on the server (e.g. using Node), and some of the templating engines support this precompilation of templates.

Putting it all together, we can organize and serve a single JavaScript file (say, compiled.js) that contains multiple, precompiled templates. This could roughly look like this:

var myTemplates = {
    temlateA: function() { ….},
    temlateB: function() { ….};
    temlateC: function() { ….};
};

Then, in the application code we only need to populate the precompiled template with data:

var result = myTemplates.templateB(data);

This is generally a far better-performing approach than putting templates within <script> tags as discussed before, since the client can skip the compilation part. Depending on your application stack, this approach is not necessarily harder to accomplish, as we’ll see next.

Node.js example

Any template precompilation script should at least do the following:

• read the template files,
• compile the templates,
• combine the resulting JavaScript functions in one or more files.

The next basic Node.js script does all that (using the Hogan.js templating engine):

var fs = require('fs'),
    hogan = require('hogan.js');

var templateDir = './templates/',
    template,
    templateKey,
    result = 'var myTemplates = {};';

fs.readdirSync(templateDir).forEach(function(templateFile) {

    template = fs.readFileSync(templateDir + templateFile, 'utf8');
    templateKey = templateFile.substr(0, templateFile.lastIndexOf('.'));

    result += 'myTemplates["'+templateKey+'"] = ';
    result += 'new Hogan.Template(' + hogan.compile(template, {asString: true}) + ');'

});

fs.writeFile('compiled.js', result, 'utf8');

This reads all files in the templates/ folder, compiles the templates and writes them to compiled.js.

Note that this is highly unoptimized code, and does not include any error handling. Still, it does the job, and shows that it doesn’t require a lot of code to precompile templates.

Scenario 3: AMD & RequireJS

The Asynchronous Module Definition (AMD) is gaining more and more traction. Decoupled modules are often a great way to organize an application. One of the most popular module loaders is RequireJS. In a module definition, dependencies can be specified, which will be resolved and made available to the actual module (factory).

In the context of templates, RequireJS has a “text” plugin that allows you to specify text-based dependencies. AMD dependencies are treated as JavaScript by default, but templates are just text (e.g. HTML), so we use the plugin for that. For example:

define(['handlebars', 'text!templates/myTemplate.html'], function(Handlebars, template) {

    var myModule = {

        render: function() {

            var data = {"title": "Story", "names": [{"name": "Tarzan"}, {"name": "Jane"}]};
            var compiledTemplate = Handlebars.compile(template);
            return compiledTemplate(data);

        };
    };                

    return myModule;
}

This way, the advantage lies (only) in the ability to organize the templates in separate files. This is nice, but it needs an extra Ajax request to get the template, and it still needs to compile the template client-side. However, the extra request can be removed by using the r.js optimizer that comes with RequireJS. This resolves dependencies, and will “inline” the templates (or any dependency) into this module definition, vastly reducing the number of requests.

The absence of a precompilation step can be solved in a couple of ways. It may come to mind to have the optimizer also precompile the templates (e.g. we could write a plugin for r.js). But that would require a change in the module definition as well, since we would be using a template string before optimization, and a template function afterwards. Yet this would not be terribly hard to deal with, either by checking for this variable type, or by abstracting away this logic (in either the plugin or the application).

Watching Templates

In both scenarios #2 and #3, we can do even better by treating our templates as uncompiled source files. Just like CoffeeScript, or Less or SCSS files. We can have our template files watched for changes during development, and recompile them automatically when a file is changed, i.e. just like you would compile CoffeeScript into JavaScript. This way, we’re always dealing with precompiled templates in our code, and the optimizer effortlessly inlines the precompiled templates in the build process.

define(['templates/myTemplate.js'], function(compiledTemplate) {

    var myModule = {

        render: function() {

            var data = {"title": "Story", "names": [{"name": "Tarzan"}, {"name": "Jane"}]};
            return compiledTemplate(data);

        };
    };                

    return myModule;
}

Performance Considerations

Rendering UI updates by using client-side templates is often the way to go. Still, the best performance for the initial full page load is achieved by serving that page as a whole. This allows the browser to render the HTML as is without requiring any JavaScript parsing or extra requests for data. This might be a challenge, especially for pages that are both dynamic and require the best initial loading times possible. Then, ideally, templates are being developed and reused on the client and the server to both support the best performance and still be maintainable.

Two questions to consider here are:

• What part of my application is mostly dynamic, and what part requires the best possible initial loading times?
• Do you want to move the processing to the client, or should the server do the heavy lifting?

The answer can only be given by actually measuring different approaches. Yet by using precompiled templates, the client usually doesn’t have a very hard time rendering them on the fly. And in case you want to reuse templates on the client and server, you will find a logic-less template syntax to be the most versatile.

Conclusion

We have seen many strengths of client-side templating, including:

• Application servers and APIs are best at serving just the data (i.e. JSON); client-side templates fit in perfectly.
• HTML and JavaScript naturally match the skills of client-side developers.
• Using templates enforces a good practice of separating presentation and logic.
• The templates can be fully precompiled and cached, this leaves only the actual data to be refreshed from server.
• Moving the rendering phase from server to client may positively affect performance.

We have been looking at quite some aspects of (client-side) templating. Hopefully by now you have a better understanding of the concept, and why you would use it.

(cp)

© Lars Kappert for Smashing Magazine, 2012.