Learn web design and development skills at crē8 conference

This year at the crē8 conference in Miami the majority of my sessions will be focused on skills for web design and development. I’d like to think I’ve got all bases covered: the past, present and future of the web.

The Past
I’m stretching the definition of “the past” a bit , but in my session Styling Text for the Web Using CSS, I will talk about how you can take the traditional typographic techniques you might be very familiar with in print (such as leading and kerning) and translate them to the Web using Cascading Style Sheets. I’ll also take a quick look at Web Fonts, which are a new and exciting development allowing web designers to use more and higher quality fonts than ever before.

The Present
Dreamweaver is the world’s most popular WSYWIG web editor and Adobe seems committed to updating it as quickly as possible in order to keep up with the rapidly changing world of the web. In my session What’s New in Dreamweaver CS 5.5, I discuss and demonstrate new features largely relating to mobile design. I’ll spend a fair amount of time talking about the Multiscreen Preview which helps you design pages for mobile phone and tablet devices.

The Future
Take a thrilling look into where the Web is headed. HTML5 and CSS3 are where you’ll be spending some time with me in my session Future of the Web:HTML5. Here, you’ll take a look at features that can be used today to make websites and web applications more useful and visually interesting such as Geolocation and Web Fonts. You’ll also see the more experimental and evolving features that aren’t ready to be used today, but might be a part of your web future!

Posted in Adobe, Mobile, Uncategorized, html5, technology, web design | Leave a comment

eBooks Evolve: Support for HTML5 and CSS3 Growing

Amazon has announced forthcoming support for HTML5, CSS3 and more graphically rich-documents that will display on their color Kindle Fire e-reader. Support for these new capabilities on the Kindle will come as part of a new Kindle Format 8 (KF8) that should catch the Kindle Fire up to the iPad for children’s picture books, technical books, cookbooks and other graphically rich books. Sidebars, fixed layouts, nested tables, and text over background images are some of the key capabilities. The iPad has supported many of these HTML5 and CSS3 capabilities for some time, and with this announcement the e-book community moves a step closer to parity and having more robust electronic books on all devices. The Kindle format remains separate from ePub, and if you’re interested in learning how to create e-book documents for iPad, Kindle, nook, and other devices consider our classes that cover how to create an e-book, or if you already know about e-book creation, consider our HTML5 class or HTML5 book.

Posted in Adobe, e-readers, eBook, html5 | Tagged , , , , , , , , , | Leave a comment

Convert QuarkXPress Templates to InDesign: Steps 9 + 10

Continued…

Step Nine: Import Graphics

Graphics can be placed into your InDesign template using the Place command. If the image you’re importing contains layers (as in a .PSD or .AI file), you can choose which layers are visible on import.

Importing native graphic files enables you to choose layer visibility.

  1. In your new InDesign template, and using your Master Page guides for reference, create new picture frames using the Rectangular Frame tool.
  2. Select one of your new frames.
  3. Choose File > Place.
  4. In the Place dialog box, navigate to the graphic’s location on your hard drive.
  5. Check the Show Import Options checkbox, and then click the Open button.
  6. In the Image Import Options dialog box, click on the Layers button, and select the layers you want to be visible by clicking in the column to the left of each one.
  7. Click OK to place the graphic, and size as necessary using the Control panel or Fitting options.

Step Ten: Save an InDesign Template

The ultimate goal of the template conversion process is to take existing QuarkXPress content and repurpose it into the more workable InDesign format for future catalog creation. InDesign’s template format makes this even more practical by creating a file that can be opened and changed without altering the original template.

Saving as an InDesign template will prevent overwriting of template files.

  1. When you’ve finished placing content in the new InDesigntemplate, choose Save As… from the file menu.
  2. In the Save As dialog that appears, add Template to the file name.
  3. Choose the InDesign CS5.5 template setting from the Format menu. This will change the file extension to .indt.
  4. Make sure that the Always Save Preview Images with Documents option is checked to ensure accurate previews of your text and graphics.
  5. Save the new template to your hard drive, and test it by double-clicking on it at the Finder level. The file should open as Untitled, demonstrating that the original template file will remain untouched, despite any changes made.
Posted in Quark to InDesign | Tagged , , , | Leave a comment

Convert QuarkXPress Templates to InDesign: Steps 7 + 8

Continued..

Step Seven: Create New Master Pages

Central to the template conversion process is the rebuilding of InDesign Master Pages to match those in the existing Quark template. Like Colors and Styles, InDesign can load Master Pages from other InDesign documents, so this will only need to be done once for shared Masters.

Quark allows you to easily access Master Guide location data.

  1. In the unconverted QuarkXPress template, choose Guides from the Window menu to access the Guides panel.
  2. Double-click each Master Page and record the positioning of all ruler guides from the Location column.
  3. Using the X/Y fields in Quark’s Measurements palette, record the positioning of all header and footer boxes.
  4. In your new InDesign template, create new Master Pages using the New Master command from the Pages panel menu.
  5. Make sure that rulers are currently showing in InDesign by choosing View > Show Rulers.
  6. Drag ruler guides from the horizontal and vertical rulers to match the settings recorded in Quark.
  7. Use the Frame tools in InDesign to create header and footer frames in approximately the same positions as in Quark.
  8. Select the header and footer frames, and use the X and Y coordinates in InDesign’s Control panel to match their Quark positioning.

Step Eight: Import Text

Now that the Master Pages, Styles, Colors and Dictionary have been converted over to your new InDesign template, you can begin to add content in the form of text. Thankfully, text can be copied and pasted from QuarkXPress (without its styles) into InDesign. Then it can be formatted using the InDesign Styles you created earlier.

Text can be copied from Quark and pasted into InDesign (without its styles).

  1. In your new InDesign template, and using your Master Page guides for reference, create a new text frame using the Rectangular Frame tool (or, alternatively, the Type tool).
  2. In the unconverted Quark template, click-drag to select the text from an individual text box with the Text Content Tool.
  3. Choose Edit > Copy (or use the keyboard shortcut Cmd-C).
  4. Back in InDesign, click in the corresponding text frame with the Type tool. You should see a blinking insertion cursor inside the frame.
  5. Choose Edit > Paste (or use the keyboard shortcut Cmd-V).
  6. If necessary, open the Character and Paragraph Styles panels from the Type menu, and apply the appropriate Styles to your placed text.
  7. Repeat steps 1-6 to import text from each text box in your uncoverted Quark template into your new InDesign template.

Stay tuned. In the next post, you will learn how to import graphics and save an InDesign template.

Posted in Quark to InDesign | Tagged , | Leave a comment

Converting QuarkXPress Templates to InDesign: Steps 5 + 6

Continued..

Step Five: Build Colors

Since you cannot import color palettes from a Quark document into an InDesign file, you’ll need to rebuild all CMYK and Pantone colors used with InDesign’s Swatches panel. Thankfully, you’ll only have to do this once for templates that share a common palette.

Quark color palettes will need to be rebuilt in InDesign... at least once.

  1. With the unconverted template file open in Quark, choose Edit > Colors and record the CMYK percentages (and/or Pantone numbers) of each color used in the template.
  2. Switch to your new InDesign file, and choose New Color Swatch in the Swatches panel menu.
  3. For Color Type, choose Process for CMYK colors and Spot for Pantone colors.
  4. If you chose Process as the color type deselect Name With Color Value under Swatch Name, and enter the CMYK name exactly as it appeared in Quark.
  5. If you chose Spot, the PMS number of the Pantone color will be added automatically.
  6. For Color Mode, choose either CMYK or a Pantone library to define the mode.
  7. For process builds, enter the numeric CMYK values from Quark in the text boxes next to the color sliders.
  8. For spot colors, choose from the Pantone libraries in the Color Mode menu.
  9. Click Add to add the swatch and define another one. Click Done when finished.

Note: To add swatches from anther InDesign template (with a common color palette), choose Load Swatches from the Swatches panel menu.

Step Six: Recreate Styles

In InDesign, Style Sheets are simply called Styles, and because they will be indispensable to the formatting of type in your new InDesign template, they must be translated from Quark. Again, this manual process will only need to be completed once for templates that use common Styles.

Style Sheets must also be recreated in InDesign (as Styles).

  1. With the unconverted template open in Quark, choose Edit > Style Sheets.
  2. For each Style Sheet in Quark, click on the Edit button and record all settings from the General, Formats, Tabs and Rules sections. Be sure to include whether they are Character or Paragraph Style Sheets to make the translation to InDesign go more smoothly.
  3. In InDesign, choose Type > Character Styles to access both the Character and Paragraph Style panels.
  4. Choose New Paragraph Style from the Paragraph Styles panel menu, or choose New Character Style from the Character Styles panel menu.
  5. For Style Name, type exactly the same name as it had in Quark for your new style.
  6. Enter all settings gathered from the Quark Style Sheets by choosing the corresponding categories from the left side of the New Style dialog.
  7. If necessary, convert existing template fonts to new template fonts, paying close attention to styles and weights as you do so.

In our next post, we will explain how to create new Master Pages in InDesign and importing text from QuarkXPress.

Posted in Quark to InDesign | Tagged , | Leave a comment

Converting QuarkXPress Templates to InDesign: Steps 3 + 4

Continued..

Step Three: Create a New Document in Adobe InDesign

To convert your templates from Quark to InDesign, you’ll have to essentially recreate the template pages in InDesign. Page creation begins with the basics: starting a new document, setting up pages, and positioning guides for margin and/or column alignment.

Start your new InDesign template by setting up a New Document.

  1. Open Adobe InDesign, and choose File > New > Document. The New Document dialog box combines the Document Setup and the Margins And Columns dialog boxes, so that you can set up the page size, margins, and page columns all in one place. You can change these settings at any time.
  2. Leave the Document Preset and Intent settings at their defaults, and make sure Number of Pages and Start Page are both set to 1.
  3. Uncheck both Facing Pages (as you’ll be creating your own spreads) and Master Text Frame.
  4. Enter the custom Width and Height settings you recorded in Quark earlier.
  5. Enter the Column Number and Gutter settings you recorded in Quark earlier..
  6. If they’re not set already, enter your Top, Bottom, Inside and Outside margins from Quark.
  7. Click OK to open a new document with the settings you’ve specified.

Note: To set default layout settings for all new documents, choose File > Document Setup or Layout > Margins And Columns, and set options when no documents are open.

Step Four: Import the Auxiliary Dictionary

By default, InDesign uses Proximity dictionaries to verify spelling and to hyphenate words. Because you can’t directly import the QuarkXPress dictionaries which were used with your existing templates into InDesign, it’s important to know how to import word lists saved in a plain text file.

A Quark Auxiliary Dictionary can be imported into InDesign.

  1. If necessary, hide InDesign and Quark so you can see your Desktop at the Finder level.
  2. The Auxiliary Dictionary used in your previous Quark template has the extension .qud. Locate it in the Finder, and make a copy of this file.
  3. Click on the copy’s file name and change its file extension to .txt.
  4. Hit Return, and if a warning box appears, click the Use .txt button.
  5. Back in InDesign, choose Edit > Spelling > User Dictionary.
  6. In the Import User Dictionary dialog, navigate to the converted .txt file, and click on the Add to Dictionary radio button.
  7. Click Open to add the Auxiliary Dictionary to your InDesign file.
  8. Click Done when the dictionary is finished loading.

In the next post, you’ll discover how to rebuild colors and recreate styles.

Posted in Quark to InDesign | Tagged , | Leave a comment

Converting QuarkXPress Templates to InDesign

For more than 15 years we’ve been helping users convert documents into new file formats so they can take advantage of new software tools and publishing platforms. More than 10 years ago we started helping publishers adopt InDesign and convert their QuarkXpress documents and templates to InDesign. Along with helping thousands of users at hundreds of publishers convert their documents and templates, we’ve also written several InDesign books, and even though InDesign has been available for more than a decade, we still get asked all sorts of questions about the conversion process. If you are involved with adopting InDesign, we’d be happy to provide guidance, consulting, or InDesign training – we’ve helped almost every major magazine, newspaper, book publisher, and catalog publisher with this process – and our team is happy to lend our expertise to your project.

When converting QuarkXPress documents to InDesign, we prefer to completely rebuild Quark documents using InDesign. Our process is outlined as follows:

Step One: Collect for Output in QuarkXPress

In QuarkXPress, the Collect for Output feature copies an active layout and its source files, including linked pictures, printer and screen fonts, and color profiles into a single folder. It also generates a report that lists all the colors, style sheets, H&J’s, and fonts used in your layout. You can choose to include any combination of these resources using the Collect for Output window, and store the collected files in the location of your choice.

For the conversion process, you’ll only need to collect the layout and any linked pictures.

Use Quark’s Collect for Output dialog to save the layout and source files for easy access.

  1.  In QuarkXPress, open the file you want to convert.
  2. Choose File > Collect for Output.
  3. If there are any missing or modified files for pictures, click List Pictures and update them using the Missing/Modified Pictures dialog that appears, then click Collect.
  4. When prompted, save the file to a New Folder with the word Collected added to the folder name.
  5. In the Collect for Output dialog, check Layout and Linked Pictures only.
  6. Click Save to begin collecting files.

Step Two: Gather Layout Information in Quark

Before you can begin building a new template in InDesign, you’ll need to gather information about page size, column placement, and margin alignment in QuarkXPress. This will enable you to create Master Pages in Adobe InDesign that match those included in the Quark templates.

Page size, column placement, and margin information can be gathered in Quark’s Layout Properties dialog.

  1.  With the unconverted template still open in QuarkXPress, choose Layout > Layout Properties. This will give you the information you’ll need to begin to recreate the template in InDesign.
  2. Record the custom page Width and Height so that you can re-enter this information in InDesign later.
  3. Note that the Facing Pages option is checked. If you will be creating your own spreads from Master Pages, leave this option unchecked.
  4. Record the Margin Guides for Top, Bottom, Inside and Outside margins.
  5. Note the number of Columns and Gutter Width for guide placement in the new template.

We’ll continue describing the document conversion process for converting Quark to InDesign in the next post.

Posted in Quark to InDesign | Tagged , , | Leave a comment

Using HTML5 wisely

The attention given to HTML5 in the last year is well-deserved. Despite the jockeying for a competitive advantage in the marketplace, the major players (Google, Apple, Microsoft, Mozilla and Adobe among others) have committed to the road map of HTML5 support. As important as this support is, if you are preparing to jump headfirst into developing HTML5 websites and/or applications there are some important considerations to keep in mind. HTML5 is still an evolving language and until the specification is finalized there may be some surprises still in store, and not necessarily the “good” kind of surprise.

The web community was reminded of this in the beginning of November when news began to emerge that the new HTML5 <time> element was being pulled from the HTML5 specification. This element was among many new elements that have been introduced since development of HTML5 began in 2004. The news came as a surprise to many designers and developers (particularly those who had used the element in completed projects).

The essence of the matter is this: the <time> element was intended to tag HTML content that included the date and time for any reason: a blog post, or the time an article was posted or any other scenario where the time was important enough to warrant being tagged. I’m not going to explore why this happened here (although if you are interested in learning more, there are many places to look), I’m more interested in the fact that it happened at all.

The fact is, the language of HTML5 is still being defined. Although the majority of the new elements are here to stay and there will unlikely be many new elements being added, the dropping of the <time> element is a good reminder that the use of HTML5 requires some caution and attention to detail. It is a delicate balance to walk: builders of next generation websites want new tools in order to create new experiences for users, but these tools don’t just get dropped into our laps. They emerge slowly and come into focus over time, hopefully based on community consensus. Ultimately, I believe this will make the foundation of HTML5 stronger than anything we have seen up to this point, but until the day the specification is finalized, keep a close eye on what’s happening!

Posted in Uncategorized, html5, technology, web design | Leave a comment

Adobe discontinues development of mobile Flash

On November 9, Adobe announced that it was discontinuing development of the mobile version of the Flash Player for smartphones and tablets. What does this mean for the web in general and more importantly what does this mean for web designers and developers?

Let’s take a step back and review the primary role of Flash in the year 2011, primarily we see Flash on the web being used for: a.) Web video, b.) Multimedia content such as web banners, games, interactive charts/graphs and c.) Rich Internet Applications embedded within web pages (examples include anything from music players to financial applications.) On the desktop, Flash requires a browser plugin to deliver all of this content and the plugin has had incredible success over the years, with the vast majority of web browsers having some version of the plugin installed.

Translating desktop success to mobile proved to be much more difficult for Adobe. Apple’s Steve Jobs famously spoke out against Flash in 2010, claiming that tests of the technology resulted in poorer performance on the iPhone (among other things) and made it publicly clear that Flash would likely never be supported on Apple iOS devices. Although mobile versions of Flash are supported on the latest Android devices, the widespread popularity of Apple devices must have contributed to Adobe’s  decision to discontinue development of mobile Flash (although they will continue to support existing versions).

Another factor in Adobe’s decision is the rise of HTML5, a collection of new features and technology for the Web. Many of the features that Flash has come to stand for (see above) can be accomplished with HTML5, which does not require a browser plugin and is not a proprietary technology but one based on web standards and not owned by anybody. So web video and audio, animation (using both the new Canvas API as well as CSS),  and many other features can now be built with a combination of HTML, CSS and JavaScript and work just as well on a mobile device as it does on the desktop.

For designers and developers, the path now could not be more clear: if you are interested in creating content for mobile devices then HTML5 is one of the main roads to take. Another main road is the development of native applications for mobile devices, which  Adobe also has a stake in with Adobe Air and their popular applications Flash Professional and Dreamweaver.

Adobe’s decision to focus on HTML5 for mobile is a good thing for all of us in this continually evolving industry. The major players on the Web including Google, Microsoft, Apple and many others, have all put their support behind HTML5 and this means designers and developers can get down to the important business of creating great content without having to worry about which technology they are choosing.

Posted in Adobe, Mobile, html5, iPhone, smartphones, technology, web design | Leave a comment

How does HTML5 fit in the mobile device landscape?

Native apps for mobile devices such as the iPhone, iPad, Windows Phone 7 and Android devices have received a great deal of attention recently, and for good reason, they represent a new way to interact online and the best apps use device features such as cameras and GPS in ways that you can’t easily duplicate on your desktop or laptops. So where does HTML5 fit in the picture? Should companies and designers create native applications or web applications? Do they need to create both? The answers to these questions can get complex and there is no easy answer, however these are some benefits to building web applications in HTML5:

  • The capabilities and performance of HTML5 applications is quickly catching up to native applications. The ability to create animations, animated CSS transitions and delver multimedia content in HTML5 is a huge benefit . Although native applications have the edge at the moment, the state of the art in HTML5 web applications is being advanced daily by designers and developers worldwide.
  • HTML5  leverages the fundamental simplicity of the web browser. Chances are most users do not have a fraction of the apps created by Fortune 500 companies on their phones and/or tablets. Yet with a web browser, every Fortune 500 company is immediately accessible. Apps are of no use if they are never installed and as apps (and companies) begin to compete with each other for space on the user’s device, the simplicity of the browser is appealing.
  • Developing for multiple platforms/devices. Although ensuring that HTML5 applications look and work the same across muitple devices is by no means a piece of cake, it is much easier (and less expensive) to do than trying to develop native apps across the major mobile platforms.

These are just a few of the reasons why HTML5 applications will become increasingly more popular for delivering web content in the months and years to come.

Posted in Mobile, Windows Phone, html5, iPhone, smartphones, web design | Tagged , , | Leave a comment