Tag: kranthi

Translation is UX

There is a world where Harry Potter’s arch enemy is “Du-weißt-schon-wer,� Facebook users click the “Me gusta� button, and the Dude is named “le Duc.� This world is a translated world.

We—the people who make websites—now study almost every aspect of our trade, from content and usability to art direction and typography. Our attention to detail has never been greater as we strive to provide the best possible experience. Yet many users still experience products that lack personality or are difficult to understand.

They are users of a translated version.

When we pledge to embrace the adaptable nature of the web—to make our websites responsive and even future-ready—we’re typically talking about diversity of devices. But the web’s diversity also comes in the form of different languages and cultures.

Translation affects users’ experiences—and our organizations’ success. It’s time we consider translation part of our jobs, too.

Waiting for C-3PO

“Do you want your forum clean like this?�

I had just set up a user forum in French when I stumbled upon this rather bizarre banner. “What makes the forum so clean?� I wondered. “Do they tidy the code every day?� I had to change the language back to English to understand it: “Do you want your own forum like this?�

In French, “propre� means either “own� or “clean,� depending on how it’s used. The rule is simple; any translator would know it. More precisely, any human translator. Google Translate, the system behind the French version of the forum, obviously wasn’t so sure.

It’s not just Google Translate, either. In the 1950s, Alan Turing, the father of computer science, devised a test to evaluate machine intelligence through conversations. The biggest Turing test ever was held last June to celebrate what would have been Turing’s hundredth birthday. The winner was probably the most advanced chatbot ever created, yet Eugene Goostman—as this bot is named—failed to fool the judges 70 percent of the time. When will machines pass the test? In the year 2029—maybe.

This should come as no surprise. Languages are amongst the richest and most complex systems humankind has ever produced. When machines gain the ability to really speak (and therefore translate), it will be possible to use Google Translate in a professional context—and no doubt we’ll also have Google Design and Google Copywriting by then. But today, Google Translate is to translation what the auto mode is to photography: a quick-and-dirty solution. It comes in handy when you need to get an idea of what’s being said about your project on Weibo (China’s version of Twitter), but it isn’t a good option when you need to translate your website into Spanish.

While we’re waiting for C-3PO, we need professional translators. We must also acknowledge their creativity and recognize them as peers.

Great design deserves great translation

Translating is a respectable, valuable, creative and worthwhile use of a human brain.
David Bellos, Is That a Fish in Your Ear?

Le Big Lebowski is a masterpiece. I would even argue that it surpasses the original. Everything is just perfect: the dubbing, the humor, the dialogue. The translators retained the essence of the film while adapting it for an audience that has no idea what a “dude� is. They managed to translate not just the words, but the Coen brothers’ genius as well.

E-mail service provider MailChimp is a masterpiece, too. Aarron Walter’s UX team has succeeded in creating a unique personality. Much of this personality manifests itself through copy: the greetings from Freddie, the company’s joke-cracking mascot; the always-relevant error and help messages; and—above all—the “funny but not goofy, informal but not sloppy� voice and tone used throughout the application.

Now, if MailChimp were to be translated into Spanish, Russian, or Chinese, what would become of this personality? What does it mean to be “informal but not sloppy� in Japanese? Should the mascot’s name still be “Freddie Von Chimpenheimer IV� in German, or could that be misinterpreted? Can you greet an Indian user with “Hi. You could be a part-time model�?

There are no easy answers to these questions. Translating is walking a tightrope. The challenge is to remain faithful to the original design while adapting it for a new audience, for a different culture.

If you think a machine can do this, take a look at this Google translation of MailChimp’s success message, “High fives! Your list has been imported�:

Cinco años de alta! Su lista ha sido importado.

Show that to a Spanish-speaking friend and you’re sure to get a bewildered look.

The road ahead

The web is home to plenty of innovation. But when it comes to translation, other industries are far ahead.

If we want to reap the benefits of translation, we must learn what it takes to do it well—and why it matters. Let me give you two examples.

Linguistic validation

The pharmaceutical business may not seem to share much with web design, but it has one best practice that could inspire us: linguistic validation.

Introducing a new drug into the market is a complex and controlled process that includes a long series of trials and reviews. Some of these tests involve the patients themselves, such as Patient-Reported Outcomes questionnaires, which assess whether a drug has actually improved a patient’s quality of life. These questionnaires are written in English by clinicians and then translated into hundreds of languages.

Ordinary translation is usually a two-step process: translation then proofreading (some even skip the proofreading). The linguistic validation of patient questionnaires has a few more steps, such as doing both forward and backward translations and pilot testing.

Why such a complicated and costly process? Two reasons: First, the original version is a precise research instrument. Nothing has been left to chance. Second, it is essential for patients to perfectly understand the questions, because what they report will serve as scientific data. The questionnaire must therefore be intuitive and patient-friendly.

Thoughtfully designed products, user-friendly interfaces—aren’t these what we aim for? If we care equally about all our users, it’s time we start thinking of translation as something slightly more complex than a word-to-word job.

Cultural expertise

Raving Rabbids is a humorous party game designed in Ubisoft’s Paris studio. The development team includes a localization specialist in charge of the game’s eight localized versions. She works hand in hand with designers to ensure their jokes, references, and altogether craziness are translatable. For the U.S., Rabbids’ biggest market, a duo of Americans from Nickelodeon even gave the team a little extra cultural insight.

It costs millions of dollars to produce a major video game, and even more to target international audiences. Because playing a game is such an immersive experience, the teams behind Rabbids and many other games have found that localization specialists are critical. They are not given a finished product to adapt—they take part early in the project, as their feedback on cultural matters may profoundly change the game’s design.

The game industry prefers the term “localization� to “translation� because the latter is too often restricted to text. This says a lot about how seriously game studios take cultural expertise. Because they know a cultural misfit can stall a game’s chances of success—and they know for every dollar invested in localization, there’s a $25 return.

Because they know that translation—sorry, localization—is UX.

Translate early, translate often

Most startups employ what could be called the lemonade tycoon approach: Start in your neighborhood, amongst the people you know; this is your best bet. Get it right at home before expanding into far-off lands.

I’m not saying you shouldn’t start in your own country. Local knowledge is priceless. But why wait to internationalize? Unlike lemonade selling, the web is international by nature. From day one, your website will be accessible to any person on this planet.

What’s more, procrastination has a cost. According to Smartling, a translation software company, “it can take companies 12-18 months to internationalize their code and launch their first foreign language site, absorbing much of the company’s engineering resources.�

Companies face the same problem when they develop a mobile version of their site afterward. Good thing many now adopt a “mobile first� process.

Perhaps they should consider “foreign first,� too.

It’s a big world out there

When you come from a non-English-speaking country, as I do, a “foreign first� approach is very likely to mean “English first.� But what if you’re based in New York, Manchester, or Auckland? Which language should you go for?

The answer is actually not to think “language,� but rather “opportunity� and “culture�—as these three companies have:

  • Wufoo is a popular form builder from Tampa, Florida. At the beginning of 2012, it launched Wufoo Español, its first foreign version. You won’t find the Spanish version at wufoo.es, but at wufoo.com.mx—because it saw an opportunity in a neighboring market, and language was a means to reach that market. Besides, Wufoo doesn’t mix up language and local culture: It plans to roll out additional localized versions for Spain and Argentina.
  • CanaDream is a Canadian RV rental company whose website is available in three languages. English and French are obvious choices, but the third one is trickier: German. Again, the company saw an opportunity—Germans love RV travel. But German people generally speak good English, don’t they? Yes, many do—but they will still prefer a company that attends to them in their own language.
  • Bla Bla Car is a car-sharing service born in France. Here we can see that “English firstâ€� isn’t always the rule. Bla Bla Car’s first foreign version was in Spanish. The car-sharing market was less competitive in Spain than in other European countries, which gave Bla Bla Car the opportunity to test-run its internationalization before moving on to other markets—which it eventually did. Car sharing is getting more and more popular in Europe, and Bla Bla Car aims for leadership in the region—and in a multilingual area, this has required translation to seven languages and counting.

Bargain-basement market research

Most startups can’t afford international market research. That’s why they focus on their home market. But just as Paul Boag taught us about bargain basement usability testing, we can find affordable market research techniques, too.

Once you’ve settled on a country to target, go to ProZ and look for a translator or agency based there. Brief her about your project and send your prototype or an access to your beta. Ask her to translate the key screens. Even at this stage, you can get lots of feedback: “Are you aware your app name can hardly be pronounced—let alone remembered—by Brazilians?� “I’m sure having Acme Inc. as a client is a great reference in the U.S., but nobody knows them here.� “This photo of a blond-haired, blue-eyed guy probably won’t resonate with a Turkish market.�

Then ask your translator to run a user test using her network of proofreaders. You don’t need hundreds of people—with only ten participants, you’ll uncover any major cultural faux pas. You’ll also gain a general understanding of whether people are interested in the project, what their main questions are, and whether they like the visual design.

Finally, discuss your personas with the translator: Maybe Harriet should be renamed María and relocated to Valparaiso. And what about adding Hugo, the typical backpacker from the Netherlands? With localized personas, all your users will be given equal consideration throughout the design process.

Of course, you’ll need more precise data eventually. But this quick-and-dirty research is enough to get you started. You’ll iterate from there.

Your new teammate

When you start translating early, you make the translator part of your team. Chances are this will be a very rewarding experience. At Novius, my company, it’s changed the way we work.

For major projects, we now create and feed a glossary—or as I like to call it, a “style spreadsheet.� CSS stylesheets are understood by both designers and developers and guarantee style consistency across an entire website. Similarly, glossaries are by and for the whole team and ensure the consistency of content. Just like you want a color scheme that’s thoroughly followed, you also want to make sure “module,� “plugin,� and “extension� aren’t all used to refer to the same concept. Le fond et la forme.

We have also learned that a quality translation begins with the code. Developers strive for reusable code, and strings are no exception. Depending on how a developer handles them, he could make the translator’s job straightforward, or virtually impossible.

When dealing with sentences like, “1 person has this question� and “X people have this problem, including you,� translators are often asked to translate strings like: “person has,� “people have,� “this,� “question,� “problem,� and “including you.�

Even with context, deconstructing these sentences is a translator’s nightmare. For languages with gender, the string “this� is untranslatable (e.g., esta pregunta and este problema in Spanish). In many languages, like Russian, plurals take several forms (e.g., for the plural “persons,� you would say four челове�ка, but five челове�к). And the list goes on.

Since language isn’t code, developers and translators have a lot to learn from each other. Translators will tell them the software they use has translation memory, so there’s no need to avoid repetition. They will discuss how to handle variables in text. They will also decide together which internationalization system (such as gettext) and text file format (like XML or PO) to use.

Not a one-off thing

I won’t lie to you. Once you’ve translated your website, you’re in for good. People don’t care that they’re using a translated version. For them this is the only version. So you’ll have to keep translating.

They will hate being considered “second-rate� users. Once you’re out of beta, 90 percent translated is not OK. How would your users feel if every website update resulted in a buggy mobile version? Users of translated versions experience this all the time, with English text suddenly popping up out of nowhere. To make it worse, the newest features—proudly announced and long-awaited—are usually the ones left partially translated. Users do get the message: You’re not important enough for us to prioritize translation quality.

While good localization boosts conversion rates, bad or partial translation may ruin a user experience, giving users an uneasy feeling about the whole company: If they can’t even get their website right, how bad will the customer support be?

In fact, I recently chose not to purchase a service because of a pricing page that proclaimed, “Give a price to these ladders with your growing company.�

Guess what it was selling? Translation software.

A multilingual web

If I am selling to you, I speak your language. If I am buying, dann müssen Sie Deutsch sprechen.
Willy Brandt, West German political leader

The language of the web is English as much as HTML. If the web had a capital, it would be somewhere around San Francisco Bay. Web professionals worldwide use English expressions in almost every sentence: Like, browser, responsive, Tweet, SEO, etc.

However, 73 percent of internet users don’t speak English, and their numbers are growing. We now enter the age of glocalisation.

In our move toward universal design, we must not forget languages and the people who master them. “Translating is writing,� said French writer Marguerite Yourcenar.

Today we can also say, translating is designing.


Designing Contracts for the XXI Century

A design contract is like a business card—it comes from the same desk, and bears the same creative mark. But it’s also the business card you hate handing out: a folder of legal gibberish with terrible formatting that reminds the client of everything that could possibly go wrong before the work has even started.

Is this just a necessary evil? Why can’t contracts evolve like everything else?

Actually, they can—and should. Modernizing your contract will not only make it match your carefully crafted brand, but it can also help you reach an agreement faster, and even strengthen your position when negotiating. This is not an easy task. Legal content is a delicate matter, and you definitely can’t start tweaking your contract like it’s a blog post.

Before we start modernizing contracts, we first have to understand their purpose, and how and why they got the way they are. It’s a long journey back.

Five Roman principles of contracts still valid today

The Romans developed a sophisticated system of commercial law that has become the foundation for pretty much all of the Western world’s legal systems. A design contract was probably signed to make the incredible decorations of Ara Pacis. Such a contract would have been created to accomplish something not that different from today’s products of design: defining what must be done, the deadline, the client’s approval, and the price. The concept of copyright did not exist yet, but unauthorized and fraudulent copies of literary works were socially unacceptable. (As for non-literary works, good luck copying those marble statues.)

While our work has evolved, contracts have essentially stayed the same—for a number of good reasons. In fact, several principles are just as important in today’s contracts as they were in Roman times.

1. Verba volant, scripta manent

Spoken words fly away, written words stay.

In a world where few people could read or write, a written contract was much more difficult to obtain—and therefore much more valuable than a handshake. Romans were the first to establish a now-universal principle of civil procedure: The burden of proof is on the plaintiff (onus probandi incumbit ei qui dicit). Therefore, a written contract protects the wronged party. This is still true today, so don’t only use a written contract before work begins; make sure every modification is documented in writing.

That’s a much easier task today than in Roman times. You don’t have to run to a scribe, or even a notary. E-mail has been proved legally binding multiple times, so to amend a contract, you can just drop a line like, “As discussed in today’s meeting, we mutually agree to modify the statement of work as follows…�

Some contracts even have a clause that requires all amendments to be in writing. If that’s the case, you’ll want to make certain you follow it; otherwise, the client can make excuses for not paying you for extra work.

AIGA’s standard agreement for design services uses a nifty solution to make sure all modifications are in writing and that there’s a limit to the number of modifications that can be requested:

4.2 Substantive Changes. If Client requests or instructs Changes that amount to a revision of at least 15% of the time required to produce the Deliverables, and or the value or scope of the Services, Designer shall be entitled to submit a new and separate Proposal to Client for written approval. Work shall not begin on the revised services until a fully signed revised Proposal and, if required, any additional retainer fees are received by Designer.

As you can see, it’s the same old verba volant, scripta manent still in use.

2. Aliquid dare, aliquid retinere

Give something, keep something.

The value of a project depends not only on what you put in a contract, but also what you leave out. This is particularly true for design, which is not strictly a product, nor strictly a service. It’s a hybrid set of “deliverables,� and the contract (not the e-mail with the design attached) is the place where you give them to your client.

Be wary of what you give and keep. If possible, hold onto copyright: Delay the assignment, or the effective date of the license, until the money is in the bank. This is the best leverage you have.

Clients will try to do the same with payment, of course. Welcome to contract negotiation.

On this inevitable battlefield, details make a difference. For example, imagine you are an illustrator who creates a set of characters for a story. Your client picks the ones they like, and those are the deliverables they buy. Why shouldn’t you keep the rest, and “recycle� them for future projects? If you don’t specify this in the contract, the client will be assigned all the work in connection with the project, including unused sketches.

Same thing if you are delivering code. It’s common to incorporate snippets of code into multiple projects, but just because that code ends up in that project doesn’t mean that client owns it. These are usually called “design tools� in a contract—which means instead of giving something away, you’re simply giving your client permission to continue using the tools.

3. Leges sine moribus vanae

Laws are useless without customs.

Just as graphical and technical standards are essential to designing, standards and industry practices play a crucial role in negotiating contracts. Following best practices not only lowers transaction costs and streamlines the process, but also fosters more balanced deals.

What are the contractual standards of design? The AIGA agreement mentioned earlier is a great start, but standards can also live in single clauses. Eric Adler, a lawyer who works with creative professionals, knows which clauses of his contract are more likely to be negotiated, and takes care to explain those to his clients.

An excerpt from Eric Adler’s contract annnotations.

When it comes to liability, Adler suggests that it’s standard to cover your asse(t)s up to the overall net value of the project. You could try to ask for more, but no one wants to make a client nervous over a legal boilerplate, and standards make sure this doesn’t happen.

Standards don’t just come from lawyers or unions. Andy Clarke’s Contract Killer is extremely popular among freelance designers—in fact, a version of his contract is one of the most viewed and downloaded items at my company, Docracy, which provides an open collection of legal documents. This is likely due to Clarke’s strict no-legalese policy. He even dropped the classic impersonal language, transforming it into a natural dialogue with the client: “What both parties agree to do.�

The result is a set of informal yet clear rules that cover essential legal provisions, like assigning copyright only upon full payment and reserving portfolio rights.

But where is all the horrible small print?

There is none. This contract shows that it’s possible to enter a binding agreement using everyday English. Your lawyer may not like it, because he may fear not being taken seriously enough, or feel uneasy not following his standard. Fortunately, this is something that has actually changed since the Romans. They had to use formulae and magic words to make sure the contract would be upheld in court, while we typically enjoy shared language and literacy skills.

4. Clausulae insolitae indicunt suspicionem

Unusual clauses will raise flags.

We all like standards, but let’s face it: Everything is negotiable, and people will always try to sneak advantageous clauses into the contract. You need to make sure you don’t sign anything you’ll regret, and spotting bad provisions is not a lawyers-only job. Scanning contracts is a necessity sometimes, so always look closely at the following parts:

  • Parties, particularly when companies are involved: Make sure the people you’re dealing with have the power to bind their companies.
  • IP provisions: Who owns copyright and when, and what the licensing limitations are.
  • Your representation and warranties—the fewer, the better: underpromise and overdeliver!
  • Termination: What happens if someone wants to get out of the deal early?
  • Dispute resolution: The clause no lawyer ever wants to give up. Watch this one, because you don’t want to let a client drag you to a court a thousand miles away. If you can agree to arbitration or mediation, even better.

The more contracts you read, the better you’ll get at spotting weird provisions. Trust your judgement: If something doesn’t seem quite right, it probably isn’t.

At minimum, you should ask for an explanation. This is never a waste of time. If you have a lawyer do this, just find someone who doesn’t bill by the hour, or this negotiation will take forever.

5. Pacta sunt servanda

A deal is a deal.

Both in Roman times and today, if you don’t deliver, it’s on you. Keeping promises is fundamental for a professional reputation. That’s why you have to be clear and consistent in the promises you make.

How do inconsistencies arise? One common way is having a statement of work (SOW) that’s not compatible with a master service agreement (MSA). This happens more often than you might think, particularly if no one has ever read that thirty-page agreement. If it’s not clear which one prevails (yes, you have to write it down), you can find yourself in a legal mess.

For example, capping your hours in the MSA is a great way to mitigate the fixed-fee or milestone-based pricing you agreed to in the SOW, but only if the cap prevails! Vice-versa, if you know you’ll only be looking at the SOW and all the special payment provisions are in there, then it should probably override any older pricing rule buried in that thirty pages of small print.

Even better, an MSA doesn’t really need to include thirty nasty pages of small print.

Making a modern contract

I bet you didn’t read iTunes’ latest Terms and Conditions before clicking “I Agree.� We try to read contracts when we think it’s important, but it’s not easy, for several reasons:

  • Contracts are optimized for print, but today we read mostly on screen.
  • They are often poorly formatted and typographically awful.
  • Many elements are difficult to read, like definitions and ALL CAPS PARAGRAPHS.
  • They’re full of legal jargon, not plain language.

The good news is, these problems can be fixed.

Typography

Let’s start with font. Designers and clients alike now mostly read on screens. Electronic signing is a reality, so there are few arguments for optimizing a contract for print.

If you’ve studied typography, you know how to use contrast, proximity, and alignment to create emotional and persuasive effects, and you can apply these same principles to legal text.

Matthew Butterick, author of Typography for Lawyers, has even developed a font optimized for legal text: Equity, a serif font that also looks good on screen—a nice compromise. Whatever you choose, ensure you give your contract balance and contrast.

Typesetting

Contracts are a very peculiar subset of legal documents. How can you use typesetting skills to improve their layout?

  • Structure them in nested lists. HTML does such a great job handling nested lists and headings, so why use a crappy text editor? You often see reckless tabbing and manual line breaks made by frustrated people desperately trying to keep order. Using tools of the trade like Markdown, LaTeX, and Illustrator, you can do better in no time.
  • Divide the boilerplate from the custom terms. Highlight relevant content like party names, important numbers, and percentages so they stand out from the boilerplates and can be easily skimmed.
  • Make important clauses stand out, but never use all caps. The law only asks the drafter, in specific situations, to highlight certain provisions—and there are ways to do that without sacrificing readability. If your lawyer thinks differently, she’s wrong.
  • Allow longer paragraphs. Words need to “breathe,â€� but contracts also need to cluster like clauses for readers. For this reason, line length is a delicate choice that depends both on the length of the clauses in your contract and on the font you choose to use. If you opt for a sans serif, you might get away with longer lines, but be sure to keep generous margins and line spacing (ideally, 120 to 145 percent of the point size, according to Typography for Lawyers).

You’ll also need to decide whether to justify or left-align text. The general rule is that justified text only works with proper hyphenation. This means you’ll have to manually input non-hyphenated breaks for the words you want to keep on the same line. Unless you’re drafting the contract yourself from start to finish, this is a daunting task. And, if your contract manages to have short paragraphs, ragged-right looks more natural, particularly on screen.

When we redesigned Docracy’s PDF typography, we opted for a longer line with lots of white space on the sides. This lets even the longest contract breathe, yet creates a compact final look:

Plain language

Now for the million-dollar question: Why are contracts written in legal jargon? Sadly, it’s because lawyers are too lazy and change-averse to rewrite their forms. The good news is, this is changing. And you can contribute; most formulaic “legalese,� like herein, thereof, or hereby, can just be replaced with “this.� You might even be able to remove entire lines, but better check with a lawyer to make sure.

Here’s an example of traditional contract language rewritten in plain English. Not only is the new version half the length, but it’s much easier to understand:

Before

After

Timing. Designer will prioritize performance of the Services as may be necessary or as identified in the Proposal, and will undertake commercially reasonable efforts to perform the Services within the time(s) identified in the Proposal. Client agrees to review Deliverables within the time identified for such reviews and to promptly either, (i) approve the Deliverables in writing or (ii) provide written comments and/or corrections sufficient to identify the Client’s concerns, objections or corrections to Designer. The Designer shall be entitled to request written clarification of any concern, objection or correction. Client acknowledges and agrees that Designer’s ability to meet any and all schedules is entirely dependent upon Client’s prompt performance of its obligations to provide materials and written approvals and/or instructions pursuant to the Proposal and that any delays in Client’s performance or Changes in the Services or Deliverables requested by Client may delay delivery of the Deliverables. Any such delay caused by Client shall not constitute a breach of any term, condition or Designer’s obligations under this Agreement.

Timing. Designer will prioritize the Services as may be necessary, or as identified in the Proposal, and will take reasonable efforts to perform the Services in a timely manner. Client agrees to review Deliverables within the time identified in Schedule A and to either (i) approve the Deliverables in writing or (ii) provide exhaustive written feedback. Designer may request written clarification of any of Client’s comments. Delays in the performance of the Services due to Client’s late feedback or requested Changes will not constitute a breach of Designer’s obligations.

Classical roots, contemporary documents

There are many reasons the core rules of contracts are still in place two millennia after the fall of Rome. But there are other elements that we can, and should, take to the twenty-first century.

If we want to address the readability problems unique to our era—and improve communication with our clients—then it’s time we fix the language, layout, and typesetting of our contracts. And who better than designers to do it?


Workflow Optimization: Design Cutting Edge iOS Apps With Adobe Fireworks


  

Since the release of iPhone 4 and the iPad 3 (known as “The new iPad”), Apple has doubled the resolution of the displays, which are now 640 x 960 pixels (iPhone 4 and 4s), 1536 x 2048 pixels (iPad 3), and 640 x 1136 pixels (iPhone 5). To keep a good-looking user interface for both the old as well as the “Retina” resolution, Apple decided not to resize all graphics or make use of scalable image formats (such as SVG), but instead it now requires two sets of graphics for each device.

When building an app for iOS, you have to provide the normal-sized and double-sized images for each graphic. This is where the strongest Adobe Fireworks feature comes in — the capability to create sharp vector elements which scale up and down without any quality loss (including all effects and filters). This article describes how to design an iOS app with Adobe Fireworks for the iPhone and shows a few techniques which allow you to design faster, achieving the best possible results.

High Resolution First, Scale Down Later

When creating your new document, choose the @2x-resolution (2x) as your canvas size (for example, this means 640 x 960 px for iPhone 4/4s in portrait orientation) and keep the PPI at the default of 72. iOS ignores the PPI setting stored in PNG files — the only thing we need to care about is to double the resolution (in pixels) of our images when working on Retina display designs.

New Document in Adobe Fireworks
Creating a new document for designing an iPhone 4/4s app in Retina resolution (portrait orientation).

Starting with the higher resolution is my preferred way to design apps for Apple devices, as it allows me to set the appearance of each single pixel, and add details which won‘t be visible on the scaled-down version. In the worst case, if you have to use bitmap textures for some reason, the scaled-down version will look a lot better than a scaled-up one (which will have blurry textures).

When designing in 2x resolution, you have to think a bit more about what you’re doing. For example, you have to avoid sizes like 3 or 5 pixels for border widths, and the same applies to effects like drop shadows — a scaled-down blur ratio of 5 pixels would result in 2 or 3 px blur, and neither would be the result you want to achieve when aiming for real perfection.

I have seen other designers doing it the other way: starting with the normal size, and scaling the whole design up when it is done. Either way is absolutely fine — I think it always depends on the designer’s personal preference. However, in this article I will only describe the way to start with the 2x resolution graphics first.

Vectors Whenever Possible

When creating elements for your app, always use vector shapes, and never rasterize them (since Fireworks has very powerful vector editing abilities, it is advice that’s easy to follow). It’s also a good idea not to use any Photoshop live effects unless you absolutely have to. Why?

Use Fireworks Live Filters (They Scale Better)

The reason why you should only use Fireworks live filters is because Photoshop live effects will not scale as they keep their attributes (unless you change the size of the whole image or the separate shape). On the other hand, Fireworks will scale any attributes of your live filters (except in intensity-based filters, like the amount of noise), and this is something you should keep in mind when you are working a lot with drop shadows or glows.

Useful tip: Fireworks is very flexible. If you don’t want to scale effects or strokes when changing your document size, you can turn this option “off” in Preferences (Menu Edit ? Preferences ? General ? Scale Strokes and Effects). Turning it back “on” is just as easy.

Turn Scaling for Strokes and Effects On or Off
The Preferences dialog in Fireworks, when you can turn on or off the scaling of strokes and effects (live filters).

In the few very rare cases when the result of a scaled-down (or scaled-up) live filter does not really fit your needs, you can easily fine-tune the filter attributes manually after scaling.

Here’s a quick example of this feature — two buttons were resized, one had live filters applied to it, and the other Ps live effects.

Buttons Built with Different Techniques, Demonstrating the Advantages of Fireworks Filters
Both buttons are looking the same when rendered in the resolution that they have been created in (Retina). Once we resize the image, though, you will clearly notice that only the effects of the button that uses Fireworks live filters were resized correctly.

Note: Fireworks will scale attributes of your live filters, applied to both vector and bitmap objects. However, there is one exception to this rule: Fireworks will not scale live filters applied to text objects. For example, a Drop Shadow live filter (applied to a vector object), will scale along with the object. But a Drop Shadow applied to a text object will not — the text block will get smaller (or larger, depending on the direction of scaling) while the drop Shadow will retain its original attributes (Distance, Softness). This behavior of Fireworks is designed as such, and is something to keep in mind when text objects and live filters are involved.

Use Divisible Values for the Height/Width of Your Shapes

Be sure to always use divisible values (that is, able to be divided into a whole number) for the height and width of your shapes. Sizes that do not divide evenly will result in half-transparent pixels when scaled down, which often looks blurry and imprecise.

Resized 3px border
A 3px border will result in a blurry 2px border when resized. Since a width of 1.5 pixels is impossible, Fireworks is trying to achieve the logical result by adding half-transparent pixels — unfortunately the result doesn’t look so good.

When you are drawing icons, always keep them vectorized so you can scale them down later without the blurring that occurs from bitmap resizing (we will also cover icon resizing later in this article).

Dealing With Bitmaps (When You Have To)

When using bitmap textures, there are a few possibilities for how to get the most out of them:

Repeatable Patterns

You can build a repeatable pattern from nearly any texture — this means a bit of extra work, but is often worth it. When you are looking for textures, it’s often hard to find seamless, repeatable textures for your app. But in most cases, you just need to do a few color corrections for a “regular” texture before you can use it as a repeatable pattern.

Building Repeatable Patterns
This is an example when a non-repeatable detailed leather texture can be transformed into a repeatable one, by just applying a few color corrections. I usually switch to Photoshop for this type of work, then import the pattern into Fireworks. You can also make the color corrections within Fireworks (if you prefer).

Useful tip: Download and try the Modify Commands pack, by Aaron Beall. It includes “Seamless Tile” — a very useful command for seamless textures. It does not work equally well for all types of textures, but for the most types it can help you create a seamless pattern in Fireworks really easy. The command creates seamless textures from selected objects on the canvas, by blending their edges automatically (based on a specified percentage).

When you’ve built a repeatable pattern, you can apply it as background for any vector shape. To do this, just save your pattern as a normal PNG32 file somewhere (personally I prefer to have a “Materials” folder in my project folder, where I store any patterns I’ve used during a specific project). Then select the shape you want to apply the pattern to and set the fill mode to “Pattern Fill”. Fireworks has a few basic patterns pre-installed, but if you want to use your own pattern, just select Pattern → Other…, and then choose the pattern you have saved on your computer first.

Applying a Pattern in Adobe Fireworks
By setting the shape’s fill mode to “Pattern Fill”, you can easily apply either a pre-installed or a custom pattern.

When it comes to iOS design in Adobe Fireworks, the important thing is: patterns do not scale while their shapes do. This means the pattern will look the same on both resolutions. This can be very handy when you are using a few textures in your design — for example, a leather texture for the title bar. If you want to keep all the details of the texture in both resolutions, use a repeatable background pattern.

Useful tip: If you are looking for seamless repeatable patterns, take a look at Subtle Patterns. As of today, it offers 305 excellent free patterns… and counting!

Masked High-Resolution Bitmaps

When you want to scale down textures or other bitmap graphics, I suggest you use high-resolution graphics masked with sharp vector masks (for the 2x-resolution images).

A Vector Mask in Fireworks
A vector mask in Fireworks.

When scaled down, the vector masks ensure that the masked graphics will keep their edges sharp while the graphic itself will be scaled down to its half-size. The normal version will look like an exact (yet smaller) version of the 2x image.

If you are using a bitmap graphic with small or fine details, you might want to use a masked graphic that has not been scaled down for the the normal version. In this case, you will need to manually replace the masked bitmap after the 2x version has been scaled down. Here’s how I’d recommend proceeding:

  1. Create the 2x-resolution image first and scale it down to half-size.
  2. Select the masked bitmap and ungroup it (Ctrl/Cmd + Shift + G), then delete the scaled-down bitmap.
  3. Add or import a new copy of the original, unscaled graphic, then create a new masked image with the scaled-down vector mask and the original graphic.

Masked Bitmaps in Adobe Fireworks
A simple vector mask in Fireworks, used to create a rounded rectangle filled with a wooden texture: while the first shape masks the @2x-texture (1), you can see how to modify the result for the scaled-down masks by using the scaled-down texture (2), or the texture re-applied to the scaled-down mask (3).

In general, bitmaps are your enemy when designing iOS apps. So instead, try to work more with vector shapes and live filters. The above mentioned techniques can be used in the cases where you can’t proceed without bitmaps.

Scaling Down

When you are ready with the 2x-resolution design for your app, it’s time to scale down everything. I suggest that you start by copying all pages into a new Fireworks document.

Note: Alternatively, you could also select all pages, right-click in the Pages panel, and choose the option “Duplicate Page” — pages will be duplicated, the duplicates will be placed immediately after the originals and each will have “Copy” appended at the end of its name. By using this method, you’ll be able to manage all of your 2x and 1x graphics inside the same document. The drawback is that once you’ve duplicated the original pages, you’ll need to scale down each 1x copy individually, since the Fw PNG document will now contain both the 2x and the 1x designs. Hence, I recommend going with the other approach and moving all page copies into a separate document, and then scaling the whole document down to 1x resolution.

Manage Different Resolutions in Different Documents
This is how you can manage both resolutions in separate Fireworks PNG documents: copy all 2x pages (left) into a new Fireworks document (right), then scale the new document down to 1x resolution.

Once you copied all your pages into a new document, you can scale it down by changing the image size (use menu Modify ? Canvas ? Image size). If you started with 640 x 960 px Retina design (iPhone 4 or iPhone 4s, portrait orientation), scale down to 320 x 480 pixels. Be sure to choose bicubic interpolation for resizing and uncheck “Current page only” (but keep “Resample image” checked). Fireworks will now scale down every page in your document and automatically redraw any contained vector shapes.

Scaling Down your Design
Scaling down the current page using these options will optimize all included elements for normal resolution.

Fix Blurry Pixels

Since Fireworks is primarily a screen design tool, it almost always snaps objects (both vectors and bitmaps) to a precise pixel grid. But sometimes after scaling down your pages, even if you used only even values for the sizes of your vector shapes, Fireworks might render a few pixels as half-transparent. This is because after the transformation, it is possible that some of them might have fallen between whole pixels (and rendered blurry). The good news is that you can easily fix this by selecting all layers (all objects) with blurry edges and apply Snap to Pixel (use menu Modify → Snap to Pixel, or press Ctrl/Cmd + K). This Snap to Pixel command will realign all objects to the pixel grid, restoring their sharpness.

Using Snap to Pixel to Sharpen Blurry Pixels in Fireworks
By using “Snap to Pixel” you can easily fix blurry pixels in scaled-down designs. You can also apply “Snap to Pixel” to multiple elements by selecting all of them first.

Useful tip: Note that “Snap to Pixel” is available in Fireworks CS5 and later. However, if you still didn’t upgrade to CS5 or CS6, you can use the Transform panel by Trevor McCauley, Custom Nudge extension by John Dunning, or Super Nudge extension by Linus Lim. All of these can help you fix any blurry pixels by manually adjusting vector paths (using sub-pixel values).

Fine-Tune Rendering of Icons

Some icons (especially when they are very small) might look too “bold” after resizing. Applying the Snap to Pixel command won’t change this if these icons are built from either circles or rounded bordered shapes. In addition, I can’t recommend using Snap to Pixel for icons since this command often moves pixels in the wrong direction and may destroy the icon’s proportions.

Instead, my suggestion is to use the legacy vector rendering option in Fireworks (it can be found in Commands ? Selection ? Use Legacy Vector Rendering). In this way, Fireworks makes use of an older rendering algorithm for the selected objects. In most cases, both the “Improved” and the “Legacy” vector renderings produce equal visual results. But when it comes to very detailed and small vector objects like icons, the old vector rendering algorithm renders them a lot sharper than the new one.

Using Legacy Vector Rendering to sharpen icons in Fireworks
The “Legacy Vector Rendering” option allows to sharpen really small icons with a lot of details.

You can switch between the two rendering modes, depending on the task at hand.

Different Vector Rendering Options in Fireworks
You can easily apply the “Legacy Vector Rendering” to any vector objects (or switch back to the default “Improved Vector Rendering”).

Fix Border Radii

When your design is scaled down, even the radius of rounded borders will be reduced in half. Some shapes in your design might have a very small border radius (under 4 px in the 2x-resolution), and these shapes may look like a square after they have been scaled-down. To fix this little issue, manually increase the vector radius by just one or two pixels.

Scaled Border Radii
Even if it might not be mathematically correct, it sometimes makes sense to increase the border radius for scaled-down elements. As you can see in this example, a scaled-down version on a 4 px border radius is so small that we wouldn’t be able to recognize it.

Export Process

When it comes to the graphics export stage, I suggest that you use Fireworks’s slice tool. It can be used to quickly create intertactive prototypes (together with the Hotspot tool), but we can also make use of it for exporting graphics in a more efficient way.

Limitations of the Slice Tool

Unfortunately, we can’t directly use the Slice tool in our Fireworks document because the slices to be exported won’t have a transparent background if any other graphics are positioned in the background of the slice. For example, if you want to export a button which is arranged in front of a bitmap background and you don’t isolate the button graphic on a transparent background first, the exported slice will include both graphics — the button, and parts of the bitmap background behind it. Also, it’s important not to create overlapping slices — each slice should be isolated and cover only the graphics you wish to export.

Comparison Between Exporting of Slices with Background and Without Background
In this example, you can see the difference between exporting slices with a non-transparent background, and isolated slices without a background.

Useful tip: Before I speak about my exporting method of preference in more detail, I’d like to briefly mention a very useful extension by John DunningExport Selection. This extension allows you to select an object (or group of objects) on the canvas and then export it without any backgrounds that may appear behind it. This method may come handy in scenarios when you need to quickly export one or two objects with a transparent background and you don’t want to first copy and paste them into a new document for this specific purpose.

Using the Slice Tool (in a Separate Document)

To overcome all of these limitations, I’ve developed my own preferred exporting method:

First, create a new document with a really big size, let’s say 2000 x 4000 pixels (maybe you will have to increase the size of this document later if your app includes a lot of custom graphics). Next, create an export preset (this can be done inside the Optimize panel) with PNG32 as the selected file format and with a transparent background. When done, save the preset and name it however you want.

Optimize Panel
Create an export preset in the Optimize panel — I’ve called mine “iOS PNG32″ (note that the preset you have created will be available anywhere in Fireworks where there is an optimization choice available: Optimize panel, Export Image Preview window, etc).

After these little preparations, it’s time to copy all the graphics you want to export from your original document to the newly created document. Arrange all of the graphics on a simple grid, keeping in mind that they should not overlap. Then set your document’s background color temporarily to grey to make sure you can see if any live filters (such as a subtle glow) are overlapping with others. Now you can use the Slice tool to create all the slices you want to export.

Useful tip: When you need to create a lot of slices, creating them manually can become a time-intensive process. To generate all slices in a single pass, select all elements in your design, right-click and use the “Insert Rectangular Slice” option — Fireworks will ask you if you want to create a single slice or multiple slices for the selected elements. Just select “Multiple” and enjoy the time you are saving!

Make use of your created export preset for each slice and name your slices properly, since these will be the file names after export is completed. You can rename each of your slices in the Layers panel or in the Property Inspector panel. After you’ve prepared your 2x document, save it. You should also scale it down using the techniques as described above, and save it as a normal resolution (1x) document.

Export time! For both image files (2x and 1x), go to File → Export, and choose “Images Only” here. Because we only want to export all of the created slices, select “Export Slices” and uncheck both of the other options (“Selected Slices Only” and “Include Areas without Slices”).

Exporting in Adobe Fireworks
Export all your slices with one click!

These steps describing how to resize your designs should be applied to your new (down-scaled) document as well. In the end, you should have two separate image files: one with all 2x slices (included) and one with the normal resolution slices (1x).

Export All Graphics at Once by Using Slices
This document will export all included slices into a folder. (Hint: name your slices if you want specific filenames for the exported images.)

A Few Words About File Types and Image Compression

Apple recommends that you use the PNG file format for any images used in iOS applications. PNGs are lossless, and I would recommend them for nearly any implementation into apps (or websites). However, when you’re going to display huge images (such as high-resolution photos) it might be a good idea to use JPG files instead.

When working on website designs, it’s really important to reduce the file size of your exported images. In general, designers use tools such as ImageOptim or Web services like punypng to radically reduce the size of images. However, in the case of iOS Apps, image compression is not important since Xcode will modify PNGs (by swapping the red, green and blue bytes) and will undo any previous compression applied.

Examples of iOS Designs Made with Adobe Fireworks

Finally, I would like to share a few examples of iOS designs, made with Fireworks. Some are mine, and some are by other designers who use Fireworks extensively. I hope that they can inspire you!

Bränslesmart iOS App by Ivo Mynttinen
Bränslesmart iPhone App, by Ivo Mynttinen

Graph design
Graph design by David Perel

Huh 2
Huh 2 by Pete Lacey

iPhone Button Polish
iPhone Button Polish by Anthony Lagoon

iOS Trend Chart
iOS Trend Chart by Anthony Lagoon

UI Touch CDJ Pro
UI Touch CDJ Pro by Gianluca Divisi

Nikon iOS icon by Gianluca Divisi
Nikon iOS icon by Gianluca Divisi

Conclusion

Hopefully my personal experience with designing iOS apps with Adobe Fireworks (as well as the tips and tricks that I shared) may help you with future projects, as well.

If you have any more useful hints about how to improve the iOS design workflow, please let me know in the comments!

Further Reading

(mb)


© Ivo Mynttinen for Smashing Magazine, 2012.


Desktop Wallpaper Calendar: December 2012 (Christmas Edition)


  

We always try our best to challenge your artistic abilities and produce some interesting, beautiful and creative artwork. And as designers we usually turn to different sources of inspiration. As a matter of fact, we’ve discovered the best one—desktop wallpapers that are a little more distinctive than the usual crowd. This creativity mission has been going on for over four years now, and we are very thankful to all designers who have contributed and are still diligently contributing each month.

This post features free desktop wallpapers created by artists across the globe for December 2012. Both versions with a calendar and without a calendar can be downloaded for free. It’s time to freshen up your wallpaper!

Please note that:

  • All images can be clicked on and lead to the preview of the wallpaper,
  • You can feature your work in our magazine by taking part in our Desktop Wallpaper Calendar series. We are regularly looking for creative designers and artists to be featured on Smashing Magazine. Are you one of them?

Delivery

Designed by Vlad Gerasimov from Russia.

Smashing Wallpaper - December 2012

Holiday Hand-lettering

“A hand-drawn snowflake to get you in the holiday spirit!” Designed by Stephen Kistner from USA.

Smashing Wallpaper - December 2012

Christmas Snake Surprise

Designed by Cheloveche.ru from Russia.

Smashing Wallpaper - December 2012

New Year Is Near

Designed by Ljubinka Fuzinato from Bosnia and Herzegovina.

Smashing Wallpaper - December 2012

Christmas Wishes

“Ever since my childhood I have always imagined santa and snowman dancing & celebrating for christmas. Here’s an illustration of that. Merry Christmas to one and all :).” Designed by Bharat Kv from India.

Smashing Wallpaper - December 2012

December

Designed by Vlad Gerasimov from Russia.

Smashing Wallpaper - December 2012

Tree Of Lights

Designed by Vlad Gerasimov from Russia.

Smashing Wallpaper - December 2012

Merry Christmas

“Christmas greetings from Santa and his reindeer.” Designed by Eddie Wong from Ireland.

Smashing Wallpaper - December 2012

Illustration (Underwater Paradise)

“Depending on our location on the globe, winter is lived differently. What about the underwater world?” Designed by Roxane Fiore from Canada.

Smashing Wallpaper - December 2012

Trailer Santa

“A mid-century modern christmas scene outside the norm of snowflakes and winter landscapes.” Designed by Houndstooth from USA.

Smashing Wallpaper - December 2012

Frosty Globe

Designed by Adrian Limbasan from Romania.

Smashing Wallpaper - December 2012

Snowforest

“For those who love snowy days.” Designed by Bas Fellerhoff from Netherlands.

Smashing Wallpaper - December 2012

Leaf Margins

Designed by Benga from Israel.

Smashing Wallpaper - December 2012

Winter City

Designed by Sarfaraz Ansari from India.

Smashing Wallpaper - December 2012

Fire Potion

“Fire Potion for sweet kisses and warm hugs.” Designed by Lin Chervenkova from United Kingdom.

Smashing Wallpaper - December 2012

House Of The Birds

Designed by Pietje Precies from The Netherlands.

Smashing Wallpaper - December 2012

White Playground

Designed by Kate Jones from Brighton, UK.

Smashing Wallpaper - December 2012

Santa Claus Is Coming…

“Santa Claus is coming with lots of happiness and blessings for you and wish you Merry Christmas!” Designed by Debobrata Debnath from India.

Smashing Wallpaper - December 2012

Ready For Christmas

“Frederique is a satiric webcomic series about the day-to-day adventures of three friends: going to school, getting rejected by hot chicks and enjoying life with full blown optimism.” Designed by Richard Dancsi from Hungary/Germany.

Smashing Wallpaper - December 2012

Kemono Ninja

“Kemono Ninja is the title of our new game and the kemonos are the characters of our game, we are launching soon and here you can see the kemonos been ready for the next Christmas Day.” Designed by Hector J. Sanz, Virtualmind from Spain.

Smashing Wallpaper - December 2012

Christmas In Advance

Designed by Elise Vanoorbeek from Belgium.

Smashing Wallpaper - December 2012

Decemberist

“December is plowing yet. When the smoke-clouds break,High in the sky shines a field as wide as the world.There he toils for the Kingdom of Heaven’s sake.Ah, he is taller than clouds of the little earth.Only the congress of planets is over him,And the arching path where new sweet stars have birth.Wearing his peasant dress, his head bent low,December, that angel of Peace, is plowing yet;Forward, across the field, his horses go.(Based on Chinese Nightingale, 1917).” Designed by Dynomite from Germany.

Smashing Wallpaper - December 2012

Xmas Time

“I wish you a Merry Xmas and a Happy New Year 2013 full of joy, happiness and prosperity ! :).” Designed by Tatyana Alexandrova from Russia.

Smashing Wallpaper - December 2012

Best Friends

“Best friends posing for a photo.” Designed by Nenad S. Lazich from Serbia.

Smashing Wallpaper - December 2012

Happy Holidays

“It’s that time of the year, when we forget our tears, rejoice, love and cheer!” Designed by Webinnova from India.

Smashing Wallpaper - December 2012

Surprise

“Happy Holidays!” Designed by Zgm from Canada.

Smashing Wallpaper - December 2012

Maya

Designed by Katerina Bobkova from Ukraine.

Smashing Wallpaper - December 2012

Happy Holidays

Designed by Christina Mokry from Germany.

Smashing Wallpaper - December 2012

Crazy Elf

“We’ve had a lot of fun creating designs based on the paintings of our good friend Cathy Senitt. This is from one of her fantastic 70s portraits.” Designed by Shirley Al from Canada.

Smashing Wallpaper - December 2012

Show Some Guts

“Sometimes you just have to show some guts; even if it’s not what other people have in mind!” Designed by Kristjan Ait from Estonia.

Smashing Wallpaper - December 2012

Sweet December

“Wish you a nice and sweet december 2012 :).” Designed by Claudio Lione from Germany.

Smashing Wallpaper - December 2012

Christmas Snowflakes

“Everything has its own magic during the Christmas.” Designed by Magdalena Vinterova from Slovakia.

Smashing Wallpaper - December 2012

Happy Holidays

“The wondrous Christmas celebrations and the immense genuine excitement fulfill our souls every single year, as soon as December begins. The magic spirit, brought up by the holiday can’t ever be compared to anything, likewise as the expectations for presents from Santa can’t ever be beaten with any other possible presents.” Designed by Maria S. from USA.

Smashing Wallpaper - December 2012

Winter Garphee

“Garphee’s flufiness glowing in the snow.” Designed by Razvan Garofeanu from Romania.

Smashing Wallpaper - December 2012

Join In Next Month!

Please note that we respect and carefully consider the ideas and motivation behind each and every artist’s work. This is why we give all artists the full freedom to explore their creativity and express emotions and experience throughout their works. This is also why the themes of the wallpapers weren’t anyhow influenced by us, but rather designed from scratch by the artists themselves.

A big thank you to all designers for their participation. Join in next month!

What’s Your Favorite?

What’s your favorite theme or wallpaper for this month? Please let us know in the comment section below.

Stay creative and keep on smashing!

(vf) (il)


© Smashing Editorial for Smashing Magazine, 2012.


Tutorial: Introducing The Magento Layout


  

In this tutorial, we introduce the Magento layout by creating a simple module that will add some custom HTML content to the bottom of every customer-facing page, in a non-intrusive manner. In other words, we will do so without actually modifying any Magento templates or core files. This kind of functionality is a common requirement for many things such as affiliate referral programs, customer tracking analytics, adding custom JavaScript functionality, etc.

We will be covering a number of interesting topics, including:

  • Magento layout handles
  • Layout XML files
  • Blocks and templates
  • An alternative to Widgets

Once you have understood this article, you will have all the information you need to integrate popular third-party tools such as:

  • Google Analytics
  • Reinvigorate
  • CrazyEgg

Third-Party Tools Google Analytics, Reinvigorate and CrazyEgg

Before We Start

This tutorial assumes that you are already familiar with creating your own Magento module, so if you haven’t already done so, I recommend reading our previous article on Creating a Magento Module.

Okay, lets get started. The file structure of our new module should look like this:

app
  - code
      - local
          - SmashingMagazine
              - Layout
                  - etc
                      - config.xml

  - etc
      - modules
          - SmashingMagazine_Layout.xml

We can leave config.xml empty for now, as we will be populating it later on in the tutorial, but we can already complete the content of SmashingMagazine_Layout.xml, with:

<?xml version="1.0" encoding="UTF-8"?>
<config>
    <modules>
        <SmashingMagazine_Layout>
            <active>true</active>
            <codePool>local</codePool>
        </SmashingMagazine_Layout>
    </modules>
</config>

Introducing The Magento Layout

The content that is displayed on each Magento page is largely determined by the layout XML files, which can be found in app/design/frontend/base/default/layout. In these XML files, you will see a number of snippets of XML enclosed in layout handle parent nodes, which are used to determine the type of page being displayed. For example, the handle catalog_product_view is used to add content to the product detail page, and checkout_cart_index the basket page.

Child nodes are then created inside these layout handles to determine which content should appear on any particular page. These child nodes are called blocks, which may in turn contain child blocks of their own. For example, in a layout XML file for the product page (see app/design/frontend/base/default/layout/catalog.xml), under the catalog_product_view layout handle, we might find a block for displaying the product wrapper template. Then as children of that block, we would find a block for the product image template, a block for displaying the price template and another for displaying the add to basket template.

Each of these blocks has a template associated with it. In Model–View–Controller (MVC) terms, the block acts as a mini controller and the template acts as the view. All of the logic for displaying dynamic content is found in the block, which is requested by the template and displayed in HTML form.

The Magento layout is quite a complex, yet very powerful, beast, and as a result we will only cover the parts that are relevant to this tutorial. There is a layout handle named default which is included on every page, and since we want our module’s HTML content to appear at the bottom of every page, this is the layout handle we will use.

Adding A New Layout File

We need to define a new layout file to contain our updates, so first we need to modify our module’s config.xml to cater to layout updates:

<?xml version="1.0" encoding="UTF-8"?>
<config>
    <modules>
        <SmashingMagazine_Layout>
            <version>0.0.1</version>
        </SmashingMagazine_Layout>
    </modules>
    
    <!-- we are making changes to the frontend -->
    <frontend>
        
        <!-- we are making changes to the layout -->
        <layout>
            
            <!-- we are adding a new update file -->
            <updates>
                
                <!-- 
                    this child node name must be
                    unique throughout Magento
                -->
                <smashingmagazine_layout 
                         module="SmashingMagazine_Layout">
                    
                    <!-- the name of the layout file we are adding -->
                    <file>smashingmagazine_layout.xml</file>
                    
                </smashingmagazine_layout>
                
            </updates>
            
        </layout>
        
    </frontend>

</config>

Now let’s create this layout XML file here:

app
  - design
      - frontend
          - base
              - default
                  - layout
                      - smashingmagazine_layout.xml

Now those of you who have a little Magento experience, or have read any more noteworthy Magento tutorials, may be gasping at the fact we are making changes in base/default since this is where Magento core files are located. However, we are not modifying any files here, we are creating new ones, and furthermore we are prefixing our file name with “smashingmagazine,” so there is very little chance of this conflicting with other modules or causing any issues with upgrading Magento in the future.

The content of our new layout file will be as follows:

<?xml version="1.0" encoding="UTF-8"?>

<!-- all layout files begin with this node -->
<layout>
    
    <!-- this is the layout handle we are interested in -->
    <default>
        
        <!-- this is the name of the block we want to add to -->
        <reference name="before_body_end">
            
            <!-- 
                here we define our new block and template 
                to be added to 'before_body_end' 
            -->
            <block type="core/template" 
                   name="smashingmagazine_layout_footer" 
                   template="smashingmagazine_layout/footer.phtml" />
            
        </reference>
        
    </default>
    
</layout>

Here we have referenced an existing block, before_body_end, in order to add our own block, smashingmagazine_layout_footer, as its child. before_body_end is the name of a block that has its content output just before the </body> tag of the page HTML. You can find the definition of this parent block by looking in app/design/frontend/base/default/layout/page.xml, and the content of this block is output in the .phtml templates within app/design/frontend/base/default/template/page.

By using reference, we are able to add content to existing blocks without needing to modify core Magento files. For example, we could achieve the same result as the above snippet by modifying app/design/frontend/base/default/layout/page.xml directly and adding our block code, but this is not good practice:

<default translate="label" module="page">
    <label>All Pages</label>
    <block type="page/html" name="root" output="toHtml" 
           template="page/3columns.phtml">

        ...

        <block type="core/text_list" name="before_body_end" 
               as="before_body_end" translate="label">
            
            <label>Page Bottom</label>
            
            <block type="core/template" 
                   name="smashingmagazine_layout_footer"
                   template="smashingmagazine_layout/footer.phtml" />
            
        </block>

        ...

    </block>
</default>

Adding A New Template File

We have now defined a new block, smashingmagazine_layout_footer, and assigned the template smashingmagazine_layout/footer.phtml to contain our HTML content. Let’s create that template file now:

app
  - design
      - frontend
          - base
              - default
                  - template
                      - smashingmagazine_layout
                          - footer.phtml

The content of footer.phtml can be whatever we like, but for this tutorial we will create a very simple template containing an image, functionality which is often required by affiliate tracking integrations:

<img 
    src="http://media.smashingmagazine.com/themes/smashingv4/images/logo.png?date=YYYY-MM-DD"
    width="459"
    height="120"
/>

Now it’s time to take a look at the front end. Upon viewing any customer-facing Magento page, you should see an image displayed at the bottom, and upon viewing the source of the page, you will see it has been included just before the <body/> tag.

Creating A New Custom Block

Now we want to tie in some simple logic to our template. The source of the image in our template includes a parameter “date” which currently contains a static value of “YYYY-MM-DD.” We want to be able to dynamically populate this parameter with the current date, for which we require some logic from our associated block.

At the moment, our template is associated with the default block type core/template, which only allows us some basic abstract block functionality. Therefore we must create our own custom block.

First let’s modify the block type definition in smashingmagazine_layout.xml:

...

<block type="smashingmagazine_layout/footer" 
       name="smashingmagazine_layout_footer"
       template="smashingmagazine_layout/footer.phtml" />

...

Next let’s update our module’s config.xml to cater to custom blocks:

<?xml version="1.0" encoding="UTF-8"?>
<config>
    <modules>
        <SmashingMagazine_Layout>
            <version>0.0.1</version>
        </SmashingMagazine_Layout>
    </modules>
    <global>

        <!-- we are adding a new block definition -->
        <blocks>
            
            <!-- a unique short name for our block files -->
            <smashingmagazine_layout>
                
                <!-- the location of our module's blocks -->
                <class>SmashingMagazine_Layout_Block</class>

            </smashingmagazine_layout>

        </blocks>

    </global>
    <frontend>
        <layout>
            <updates>
                <smashingmagazine_layout
                         module="SmashingMagazine_Layout">
                    <file>smashingmagazine_layout.xml</file>
                </smashingmagazine_layout>
            </updates>
        </layout>
    </frontend>
</config>

Now let’s create this custom block PHP file:

app
  - code
      - community
          - SmashingMagazine
              - Layout
                  - Block
                      - Footer.php

Finally, let’s define our block class and add a simple method for retrieving the current date:

<?php
class SmashingMagazine_Layout_Block_Footer
    extends Mage_Core_Block_Template
{
    public function getDate()
    {
        $date = date('Y-m-d');
        return urlencode($date);
    }
}

Retrieving Dynamic Content From A Block

Inside a Magento template, PHP’s $this keyword contains a reference to the associated block object, so we can call the method $this->getDate() directly from our template:

<img 
    src="http://media.smashingmagazine.com/themes/smashingv4/images/logo.png?date=<?php echo $this->getDate() ?>"
    width="459"
    height="120"
/>

Other Handles And Parent Blocks

Try experimenting by changing the layout handle from default to catalog_product_view or cms_index_index to see the HTML content appear only on the product page or the homepage respectively.

You can also try changing the location the content appears in our page’s HTML by modifying the parent block from body_before_end to after_body_start or content.

Summary

This is a very simple example aimed at showing you the basics of how to make use of the Magento layout without needing to modify existing templates, which would potentially cause you problems when upgrading your Magento instance.

Using the techniques outlined in this tutorial, you could easily add something like Google Analytics tracking to every page, without needing to modify a single line in Magento’s core templates. What’s more, if you no longer wanted the custom HTML content on your website, you could simply disable the module and hey presto, it’s gone!

The Magento layout is quite complex, and new developers might be tempted to simply “hack” the changes into the appropriate templates for the time being. However, the Magento layout is written in such a way that once we are familiar with it, we can unobtrusively add our custom content while not jeopardizing the ability to install community modules or to upgrade Magento without worrying, “will this work on my hacked-up Magento?”

Feel free to download the source code (ZIP).

Try It Yourself

Now that we are all experts on the Magento layout, here are some very simple examples which follow the very same pattern, but demonstrate how easy it is to integrate third party software with Magento.

Since all of the information you need is detailed in the above article, I will provide some pointers on how you should approach each integration.

Google Analytics

Magento actually ships with Google Analytics, so it is in fact as simple as entering your tracking code in the admin panel; however, this does not make it any less useful as a try-it-yourself example.

The first step is to visit the Google website to retrieve the snippet of code that you need to include on your website. You will notice the only dynamic element of the standard tracking code is the account number (e.g. UA-12345678-90), so for the purpose of this example I would suggest making this number the dynamic content to be retrieved from the block. In a future article, we will cover the topic of making this kind of content admin panel configurable, so abstracting it to the block for now makes good sense should you wish to revisit this example.

Now on to creating your module. I would suggest keeping the same namespace for all of these examples, “SmashingMagazine,” and a fitting module name would be “GoogleAnalytics” in this case. You will need all of the elements of the main article above, so make your way through the article once more, adjusting as required. Since you want your code to appear on every page, you should now know the best layout handle to choose.

If you encounter any problems, check and double check that you have followed the main article exactly, as most beginner issues with Magento are typos and syntax-related mistakes.

Reinvigorate, CrazyEgg and Everything Else…

You should now see a pattern emerging! You can simply follow exactly the same steps again to integrate other popular third-party software with your Magento website, all without modifying a single core Magento file or having to copy and paste content directly into the admin panel, where somebody could accidentally delete it one day.

I welcome any questions and would love to hear any feedback in the comments area below.

(cp)


© Joseph McDermott for Smashing Magazine, 2012.


  •   
  • Copyright © 1996-2010 BlogmyQuery - BMQ. All rights reserved.
    iDream theme by Templates Next | Powered by WordPress