Unlinking Text Boxes in InDesign CS5.5

The Split Story Script among other hidden gems.

This is how you find the Scripts Panel

During one of my recent projects for Creating WE I set up a document with linking text boxes. Well, as the project progressed, the text in the boxes changed from body text to headline text and then into image captions. At that point, it no longer made sense to have all the text boxes linked together, because as I was editing the text it was needlessly jumping from one text box to the next across pages. I needed a way to break all the text box links apart without disturbing the layout or having to recreate the boxes.

 

 

The solution was simple, a pre-installed script:

  1. Open your Scripts panel (Window> Utilities >Scripts)
  2. Look down the folder tree until you find Split Story (Application > Samples > SplitStory.jsx)
  3. Place your cursor in one frame of the linked story that you want to unlink
  4. Double-click the script name in the panel.
  5. InDesign will run the script and all the frames of the story will be "unlinked" without disturbing the layout of the content.

Norwalk Oyster Festival Logo

I am so glad to see that the Norwalk Oyster Festival is still using the logo that I designed for them in 2004!  Being that I was born and raised in Norwalk, it's nice to know that I contributed to one of the City's long-time traditions (since 1978).  It's been around for almost as long as I have.

Norwalk Oyster Festival Logo

I designed this logo for the Norwalk Seaport Association in 2004 while working at Giaccone Storytellers

 

 

They're using my photo! Inconceivable!

Inconceivable! Wallace Shawn as Vizzini in The Princess Bride

Inconceivable!

I know you licensed that image, but I don't think it means what you think it means.

Have you ever seen an advertisement and done a double-take because you KNOW you've seen that image somewhere before?  Well, you probably have.  With the advent of low-cost royalty-free stock photography, this phenomenon is happening more and more. One day I use a photo for a client website, and the next day, the same exact photo appears in my inbox from an unrelated company. Hopefully you steer clear from using the same photos as your competitors, but that is the risk you take when you use stock photography.

The two ways to guarantee that no one else is going to use the same image as you is to either purchase the complete rights to an image (which can often cost exorbitant amounts) or hire a model and a photographer and do your own photo shoot.  Make sure you have an arrangement with the photographer that at the end of the day you will own all rights to the photos and they won't be reused or re-sold. Custom licenses and contracts are always negotiable, but make sure you figure it all out ahead of time.

Unfortunately, the cheaper a photo is, the more likely people will license and use it.

How do photo licenses work?

The Biltmore Email newsletter used the same royalty-free photo that we used for White Collar Investigations

The Biltmore Email newsletter used the same royalty-free photo that we used for White Collar Investigations

Royalty-Free Images

No, these aren't FREE, they are royalty-free. These images are usually the least expensive to purchase, and the quality tends to be on the low end (but not always). This means that you license an image at a certain size, usually determined by the pixel dimensions of the digital image, and you can use it wherever and whenever you want and as many times as you want.  License particulars vary from vendor to vendor, but the general idea behind royalty-free images is the same.  NO ROYALTIES!

Websites like iStockPhoto.com, 123rf.com and many others license images like these starting at $1 (for a small web-size).

Rights-Managed Images

A rights-managed image means that you have to purchase an image for a specific use and time frame.  You can license it for a day, a week, a month, etc. You normally have to also disclose to the vendor where and how it is going to be used.  Web, print, commercial, editorial, the list can go on and on.  Many factors are calculated into the final price.  At the end of your image license time-frame, if you want to keep using the image, you have to renew the license.

These types of images usually tend to be of a higher quality and are more desirable than royalty free images, which is why the vendors can often get away with charging higher prices.  These images usually start at $500 for a single use at a small size, and go up from there.  The final price can end in the thousands.

Beware, you are responsible to renew your own image license.  When the license runs out, the image files do not self-destruct like the mission tapes in an old episode of Mission Impossible.  Although you may still hold the digital file for the image, you can not use it in a public piece without renewing the license.  Yes, Big Brother is watching, and you may find yourself in a legal matter when the image vendor calls on you with a letter to cease and desist and to collect $5000 of past royalties for using an unlicensed image.

The Discovery Channel used the same royalty-free image that we used for Amit Arava, a Counselor and Sex Therapist in Westport, CT.

The Discovery Channel used the same royalty-free image that we used for Amit Arava, a Counselor and Sex Therapist in Westport, CT.

Custom Photography

This is always a great option when the image you are looking for is specific and realistic.  (If you need an image of a model in the Caribbean, and you are located in the mountains of Colorado, you probably should consider other options) however, the cost of a model and a photographer for a day can often be MUCH CHEAPER than licensing a Rights Managed image for a year of unlimited use.

Free Images

There are select websites like www.sxc.hu that offer FREE photos for commercial or editorial use.  Be sure to read the image details carefully.  Different people have different license requirements and some request to be notified of use and/or credited. Overall these images are of a much lower quality than you would find anywhere else, but I have been able to find rare gems among them. And as my Father says, "It's hard to beat free."

Good luck on your image endeavors and let me know if you have any questions!

Top Ten Typography Tips

No matter if you are formatting your resume, designing a website, writing some copy to be handed off to an art director, or just writing a note to grandma, good typography is an art that can help you communicate more effectively to your reader.  Below is a list of 10 typography tips that are a good starting point for laying out your own "Crystal Goblet".

  1. Widows – Avoid leaving a single word alone at the end of a line. Try to either bring it up to the previous line, or force an extra word down to the last line to keep it company. You can do this either by playing with your character spacing settings or even simply editing the text to fit the canvas. Beware of your paragraph spacing when you are doing this!
  2. Orphans – Second to the widow, the orphan is a single line of a paragraph all alone at the top of a column of text. If at all possible you should try to stop paragraphs from breaking across columns or pages, but if it is absolutely necessary, you should keep at least 2-3 lines of text together on each side of the page/column break.
  3. Consistent Bullets – Check your bullet lists. The general formatting and indenting of a bullet list is debatable and relative to the individual, but always check that either ALL or NONE of them end in a period. Also make sure that they use consistent capitalization (see #5). Consistency is key to a clean and uniform design.
  4. Leading – Make sure that your leading (the space between your lines of type) is not too tight that the text looks like it is on top of itself, but not to loose so that you can drive a truck through it.
  5. Capitalization – When laying out page headlines, subheads, bullet lists, category topics, etc., make sure you have a consistency among your capitalization structure.  Generally, there are 4 ways to go:
    • Sentence Capitalization: Only capitalize the FIRST word. (e.g. "The story of my life")
    • Title Capitalization: Capitalize the first and the last word; Capitalize all nouns, pronouns, adjectives, verbs, adverbs, and subordinate conjunctions ("as", "because", "although"); Lowercase all articles, coordinate conjunctions ("and", "or", "nor"), and prepositions regardless of length, when they are other than the first or last word. Lastly, lowercase the "to" in an infinitive. (e.g. "The Story of My Life")
    • All Lowercase: Capitalize everything. (e.g. "THE STORY OF MY LIFE")
    • All Uppercase: Capitalize nothing. (e.g. "the story of my life")
  6. 2 Font Maximum – Try to keep your font usage down to as few as possible.  Quite often using 2 fonts that compliment each other is tastefully acceptable.  For example, newspapers often use a sans serif font like "Univers Ultra Condensed" for headlines and a serif font like "Garamond" for the main text body. It is also a good idea to stick with a font family for all additional variations. For example, use "Arial" for text and "Arial Bold"  for sub-heads.  This will make the typesetting tie itself together nicely since the font-family are related, hence the name, "family." Too many errant typefaces can make your piece look like a ransom note (If that is the look you are going for, then please ignore this rule).
  7. 3 Color Maximum – If you are working on a piece that is going to be displayed online or printed in color, it is a good idea to stick with 3 colors at a maximum.  You don't want your page to look like someone dumped a bag of skittles on it. It is often useful to use tints of a color to offer some visual variety without going overboard on the rainbow and pulling in too many colors.
    • Main Text Color: This should be an easily legible color and should offer as much contrast between the text and the background color as possible.
    • Primary Accent Color: The primary accent color is used to compliment the main design theme, graphics and/or company logo. For example, if your company logo is mostly green, use green or a complimentary color for the headlines.
    • Secondary Accent Color: The secondary color should be used minimally. It often becomes useful when working with charts and graphs and you need a third color to separate key data. The secondary color should compliment the primary color and/or the text color.
  8. Spell Check & Proof Read – The first part of this is a no-brainer, but the second part (proof reading) is often forgotten.  Just because your document passed the spell check with zero errors, doesn't mean you spelled everything correctly. My father always told me "Measure twice, cut once." In this case, I would say "Read twice (or three or four times), publish once." Don't just skim over your piece, REALLY read it. If you want your reader to take you seriously when they read it, you should take it seriously when you write it.
  9. Abbreviations – If at all possible, you should try to avoid these.  In the digital world, you can always make room for the "reet" in "Street" and for all those other letters that we leave off out of habit.
  10. White Space – I couldn't end a list without circling back to my favorite design element. Make sure you don't clutter your page with content. Leave plenty of breathing space for the letters. Allow your headlines and visuals to stand out without being crowded. Remember that too little white space can really frustrate your reader, but too much can be bad also.  You must be able to find a harmonious balance.

I have merely scratched the surface of typography with these ten quick tips. I hope, if nothing else, it inspires you to look a little deeper at those funny things we call letters dancing on the page.

Double check your font and spacing

MEGAFLICKS

Always take a step back to preview your work. Sometimes squinting at it helps.

This is just another friendly reminder to ALWAYS double check your FONT and WORD SPACING before you go into production with any major sign or project.

I believe the Megaflicks building sign speaks for itself. Perhaps lowercase letters would have been a better choice.

The Crystal Goblet

I originally read this piece by Beatrice Warde in 1998 when I was studying typography. It struck a strong chord with me and still resonates today. Time and time again I am reminded of what a great analogy this is and how even today - over 40 years after its original printing – it still has meaning.  The theory and concepts described, not only apply to print, but to web publishing as well.  With all the billions of web pages on the internet today, the one thing that we are lacking is white space.

The concept of  "Less is more" which applies just as much to the internet and print design as it does to any other form of design, was originally stated by Robert Browning in 1855 in his poem "Men and Women," although it is often attributed to architects Buckminster Fuller or Ludwig Mies van der Rohe. Many people make the mistake of over designing, taking a concept too far, or doing what I refer to as "Logo À Go-Go" – where you use a logo as a design element and stamp it all over the page.

Remember: your design is finished, not when there is nothing left to add, but when there is nothing left to take away.

With any further ado, please take a moment to read "The Crystal Goblet" by Beatrice Warde.

The Crystal Goblet, or Printing Should Be Invisible
by Beatrice Warde (1900 -- 196
9)

Imagine that you have before you a flagon of wine. You may choose your own favourite vintage for this imaginary demonstration, so that it be a deep shimmering crimson in colour. You have two goblets before you. One is of solid gold, wrought in the most exquisite patterns. The other is of crystal-clear glass, thin as a bubble, and as transparent. Pour and drink; and according to your choice of goblet, I shall know whether or not you are a connoisseur of wine. For if you have no feelings about wine one way or the other, you will want the sensation of drinking the stuff out of a vessel that may have cost thousands of pounds; but if you are a member of that vanishing tribe, the amateurs of fine vintages, you will choose the crystal, because everything about it is calculated to reveal rather than hide the beautiful thing which it was meant to contain.

Bear with me in this long-winded and fragrant metaphor; for you will find that almost all the virtues of the perfect wine-glass have a parallel in typography. There is the long, thin stem that obviates fingerprints on the bowl. Why? Because no cloud must come between your eyes and the fiery heart of the liquid. Are not the margins on book pages similarly meant to obviate the necessity of fingering the type-page? Again: the glass is colourless or at the most only faintly tinged in the bowl, because the connoisseur judges wine partly by its colour and is impatient of anything that alters it. There are a thousand mannerisms in typography that are as impudent and arbitrary as putting port in tumblers of red or green glass! When a goblet has a base that looks too small for security, it does not matter how cleverly it is weighted; you feel nervous lest it should tip over. There are ways of setting lines of type which may work well enough, and yet keep the reader subconsciously worried by the fear of 'doubling' lines, reading three words as one, and so forth.

Now the man who first chose glass instead of clay or metal to hold his wine was a 'modernist' in the sense in which I am going to use that term. That is, the first thing he asked of his particular object was not 'How should it look?' but 'What must it do?' and to that extent all good typography is modernist.

Wine is so strange and potent a thing that it has been used in the central ritual of religion in one place and time, and attacked by a virago with a hatchet in another. There is only one thing in the world that is capable of stirring and altering men's minds to the same extent, and that is the coherent expression of thought. That is man's chief miracle, unique to man. There is no 'explanation' whatever of the fact that I can make arbitrary sounds which will lead a total stranger to think my own thought. It is sheer magic that I should be able to hold a one-sided conversation by means of black marks on paper with an unknown person half-way across the world. Talking, broadcasting, writing, and printing are all quite literally forms of thought transference, and it is the ability and eagerness to transfer and receive the contents of the mind that is almost alone responsible for human civilization.

If you agree with this, you will agree with my one main idea, i.e. that the most important thing about printing is that it conveys thought, ideas, images, from one mind to other minds. This statement is what you might call the front door of the science of typography. Within lie hundreds of rooms; but unless you start by assuming that printing is meant to convey specific and coherent ideas, it is very easy to find yourself in the wrong house altogether.

Before asking what this statement leads to, let us see what it does not necessarily lead to. If books are printed in order to be read, we must distinguish readability from what the optician would call legibility. A page set in 14-pt Bold Sans is, according to the laboratory tests, more 'legible' than one set in 11-pt Baskerville. A public speaker is more 'audible' in that sense when he bellows. But a good speaking voice is one which is inaudible as a voice. It is the transparent goblet again! I need not warn you that if you begin listening to the inflections and speaking rhythms of a voice from a platform, you are falling asleep. When you listen to a song in a language you do not understand, part of your mind actually does fall asleep, leaving your quite separate aesthetic sensibilities to enjoy themselves unimpeded by your reasoning faculties. The fine arts do that; but that is not the purpose of printing. Type well used is invisible as type, just as the perfect talking voice is the unnoticed vehicle for the transmission of words, ideas.

We may say, therefore, that printing may be delightful for many reasons, but that it is important, first and foremost, as a means of doing something. That is why it is mischievous to call any printed piece a work of art, especially fine art: because that would imply that its first purpose was to exist as an expression of beauty for its own sake and for the delectation of the senses. Calligraphy can almost be considered a fine art nowadays, because its primary economic and educational purpose has been taken away; but printing in English will not qualify as an art until the present English language no longer conveys ideas to future generations, and until printing itself hands its usefulness to some yet unimagined successor.

There is no end to the maze of practices in typography, and this idea of printing as a conveyor is, at least in the minds of all the great typographers with whom I have had the privilege of talking, the one clue that can guide you through the maze. Without this essential humility of mind, I have seen ardent designers go more hopelessly wrong, make more ludicrous mistakes out of an excessive enthusiasm, than I could have thought possible. And with this clue, this purposiveness in the back of your mind, it is possible to do the most unheard-of things, and find that they justify you triumphantly. It is not a waste of time to go to the simple fundamentals and reason from them. In the flurry of your individual problems, I think you will not mind spending half an hour on one broad and simple set of ideas involving abstract principles.

I once was talking to a man who designed a very pleasing advertising type which undoubtedly all of you have used. I said something about what artists think about a certain problem, and he replied with a beautiful gesture: 'Ah, madam, we artists do not think---we feel!' That same day I quoted that remark to another designer of my acquaintance, and he, being less poetically inclined, murmured: 'I'm not feeling very well today, I think!' He was right, he did think; he was the thinking sort; and that is why he is not so good a painter, and to my mind ten times better as a typographer and type designer than the man who instinctively avoided anything as coherent as a reason. I always suspect the typographic enthusiast who takes a printed page from a book and frames it to hang on the wall, for I believe that in order to gratify a sensory delight he has mutilated something infinitely more important. I remember that T.M. Cleland, the famous American typographer, once showed me a very beautiful layout for a Cadillac booklet involving decorations in colour. He did not have the actual text to work with in drawing up his specimen pages, so he had set the lines in Latin. This was not only for the reason that you will all think of; if you have seen the old typefoundries' famous Quousque Tandem copy (i.e. that Latin has few descenders and thus gives a remarkably even line). No, he told me that originally he had set up the dullest 'wording' that he could find (I dare say it was from Hansard), and yet he discovered that the man to whom he submitted it would start reading and making comments on the text. I made some remark on the mentality of Boards of Directors, but Mr Cleland said, 'No: you're wrong; if the reader had not been practically forced to read---if he had not seen those words suddenly imbued with glamour and significance---then the layout would have been a failure. Setting it in Italian or Latin is only an easy way of saying "This is not the text as it will appear".'

Let me start my specific conclusions with book typography, because that contains all the fundamentals, and then go on to a few points about advertising.

The book typographer has the job of erecting a window between the reader inside the room and that landscape which is the author's words. He may put up a stained-glass window of marvellous beauty, but a failure as a window; that is, he may use some rich superb type like text gothic that is something to be looked at, not through. Or he may work in what I call transparent or invisible typography. I have a book at home, of which I have no visual recollection whatever as far as its typography goes; when I think of it, all I see is the Three Musketeers and their comrades swaggering up and down the streets of Paris. The third type of window is one in which the glass is broken into relatively small leaded panes; and this corresponds to what is called 'fine printing' today, in that you are at least conscious that there is a window there, and that someone has enjoyed building it. That is not objectionable, because of a very important fact which has to do with the psychology of the subconscious mind. That is that the mental eye focuses through type and not upon it. The type which, through any arbitrary warping of design or excess of 'colour', gets in the way of the mental picture to be conveyed, is a bad type. Our subconsciousness is always afraid of blunders (which illogical setting, tight spacing and too-wide unleaded lines can trick us into), of boredom, and of officiousness. The running headline that keeps shouting at us, the line that looks like one long word, the capitals jammed together without hair-spaces---these mean subconscious squinting and loss of mental focus.

And if what I have said is true of book printing, even of the most exquisite limited editions, it is fifty times more obvious in advertising, where the one and only justification for the purchase of space is that you are conveying a message---that you are implanting a desire, straight into the mind of the reader. It is tragically easy to throw away half the reader-interest of an advertisement by setting the simple and compelling argument in a face which is uncomfortably alien to the classic reasonableness of the book-face. Get attention as you will by your headline, and make any pretty type pictures you like if you are sure that the copy is useless as a means of selling goods; but if you are happy enough to have really good copy to work with, I beg you to remember that thousands of people pay hard-earned money for the privilege of reading quietly set book-pages, and that only your wildest ingenuity can stop people from reading a really interesting text.

Printing demands a humility of mind, for the lack of which many of the fine arts are even now floundering in self-conscious and maudlin experiments. There is nothing simple or dull in achieving the transparent page. Vulgar ostentation is twice as easy as discipline. When you realise that ugly typography never effaces itself; you will be able to capture beauty as the wise men capture happiness by aiming at something else. The 'stunt typographer' learns the fickleness of rich men who hate to read. Not for them are long breaths held over serif and kern, they will not appreciate your splitting of hair-spaces. Nobody (save the other craftsmen) will appreciate half your skill. But you may spend endless years of happy experiment in devising that crystalline goblet which is worthy to hold the vintage of the human mind.

London 1955.

My email doesn't display right? Inconceivable!

I have spent many, many hours over the past several days trying to get an HTML email to display correctly when sent from Outlook 2007. This does not seem like that hard of a task. It also does not seem unreasonable for me to ask that email editors follow the same rendering rules as an internet browser.

Take a look at the disaster that awaits unsuspecting email designers:

Outlook 2007 disaster

This is how an email using W3C compliant markup may display in Outlook 2007 or 2010

Normal Email Display

This is how the email appears in 95% of all other browsers and email clients, and how it appears in Outlook 2007 AFTER the workarounds I implemented to compensate for Outlook's careless lack of support for internet standards.



Well, Microsoft has decided that Outlook 2007 and Outlook 2010 will use Word's HTML rendering engine to read HTML emails instead of the Internet Explorer engine that it has relied on in past software versions.

Some key things you should note:

You can read these articles from Microsoft outlining the HTML and CSS support offered in their "new and improved" Outlook.

There is also a great article on Sitepoint summarizing a lot of these issues: Microsoft Breaks HTML Email Rendering in Outlook

One thing that Sitepoint does not cover is the fact that you have to designate your image height and width on the img tag itself, either in plain html or both html and css. If you do not add this to your images outlook 2007 will generate them for you at a less than optimal setting. In addition NEVER put "px" after your widths and heights or any other HTML setting (CSS style settings are okay), as like <img width="100" height="100" /> instead of <img width="100px" height="100px" />.  Using the latter format will result in unexpected sizes and totally threw me for a loop since I was sizing transparent spacer-holder images with it and couldn't see what was going astray!

If you are one of those unlucky PC users, Microsoft also offers software utility to test for valid HTML and CSS for Outlook 2007.   It is a plug in that works with Microsoft Office SharePoint Designer 2007, Microsoft Expression Web Designer 2007, and Microsoft Visual Studio 2005.  There is also a second plug in that works with Dreamweaver MX 2004 or Dreamweaver 8. Of course it is not offered for the MAC, so if you are struggling to design an HTML email from the apple you are pretty much working blind and S.O.L.

HTML issues directly relate to 3 out of the 67 Reasons that Outlook Sucks as written by wanderingstan. In case things aren't clear by now, you can read Why Outlook Sucks by Marcy Sutton.  Thanks Marcy for this great link with a Guide to CSS support in email clients!

Microsoft is at least consistent with their products offering non compliance with the World Wide Web Consortium's XHTML and CSS standards. Microsoft Word is known to generate excessive, irrelevant and non standard markup. Even Microsoft FrontPage often generates non-standard HTML by default.

What is the point in the World Wide Web Consortium establishing and promoting standards if Microsoft chooses to blatantly ignore them?!

Advertising that really sucks!

This ad really sucks!

This billboard really sucks!

There is nothing worse than crappy, boring advertising. Especially for a product that sucks. I mean this is BRILLIANT! I don't speak German, but Guerilla-Marketing is valid in any language. This billboard, without using even one word, aside from the name of the product, effectively communicated the power of a Miele vacuum.

This is the type of quality advertising people actually ENJOY to see.  I hate to be cliché, because we all know that a picture says a thousand words. When you are designing a billboard, where people are often driving by them at 55+ miles per hour, with their attention on the road, traffic, and a million other things, the less words the better.  Quick, clear, effective communication.  That should be the priority for any outdoor advertising campaign.

Not only did they use extensions on the billboard to make the balloon shape cut out, they visually imply that the post the billboard actually stands on is the tube of the vacuum. Cheers to Miele! This is one of the best billboards I have seen in a while, and now we know that their vacuums REALLY SUCK!

What’s all this blank space on either side of my website?!

A lot of clients ask me why there is so much blank space on both sides of their website, and I often get requests to make the site “fill the screen”

This is something that is easier said than done, especially when you want to maintain a certain look or design.

Monitor resolutions are based on a set # of pixels. 640x480, 800x600, 1024x768, etc…different website visitors are going to be using different resolutions depending on a their screen size, if they have a standard or a widescreen monitor.

In order to optimize a website to be viewable on the largest possible number of monitors (without a horizontal scrollbar), you have to make the website small enough to be viewed by someone who’s screen resolution is 800x600 – as this is the setting used by more than 50% of people today (this number changes as time progresses)

So although us lucky people (with large and/or widescreen monitors) see the website with LOTS of blank “wasted” space on either side of the site, many people see the site as exactly filling their screen.

Now the question often comes up, “Why can’t the site scale to the browser like the other ones I have seen?”

If you allow your text and graphics to float around the page, your site’s final appearance is almost unpredictable.

When your text flows from one side of your screen, all the way to the other side, you could end up with lines of text hundreds of characters long on a larger monitor.  Ideally, you want your text lines to be about 80 characters long.  That is the reason that a standard “letter’ sheet is 8.5 x 11.  With a standard sized type, the lines are long enough to be legible, without having to worry about your eye “losing it’s place” when it returns to the beginning of the next line.

At the end of the day, when I design a website for a client, the #1 priority is that the website looks GREAT on the CEO’s monitor, since he’s the one paying the bill. But, we do need to consider the other visitors and their experience.  When we limit the width of the site, we are not wasting space, but allowing for a more elegant design and functionality.