News You Can Use in Marketing & Design

Thoughtful planning and investing in testing will yield superior results.

New smaller device! New larger screen! Android smartphone! Apple tablet! Mobile devices are rapidly evolving, and both smartphones and tablets both have a growing user base. In fact, many people own both. It is important to consider these users when designing or modifying your website. According to a report released by digital marketing technology company Monetate, 1 in every 10 dollars spent online by U.S. consumers is through a mobile device. That is a large and growing part of the market, judging by website traffic patterns over the past year. The number of visits to e-commerce websites from smartphones has more than doubled in the past year alone!
So how do you ensure you reach this audience in the most effective way possible? Think of it like condensing a flyer into a quarter page ad. There is less “real-estate” on mobile devices than on a standard laptop or desktop computer, so you want to make sure you get the most important information to the user and omit what is unnecessary, all while making it clear and easy to navigate. How you approach this depends on whether you are working with a pre-existing site, or getting ready to build a new website for the first time, and whether you are using a content-management system (CMS) or coding your own.

Mobile Websites in Content Management Systems

If you have an existing website through a CMS such as Joomla or WordPress, there are many extensions and add-ons that you can choose from and install to modify your existing layout into a condensed, smaller-screen version when viewed from a mobile device. This makes the process relatively quick for you, but can often create undesirable results. You will still likely have to customize the look of the mobile layout with CSS (cascading style sheets, which contain code that tell the browser how to visually present the information), as these add-ons will make design decisions for you.
An alternative to this would be to find a pre-existing template for your CMS that already includes a mobile version or “responsive design”. You will, again, have to apply your own CSS rules to get the custom look that you want, whether building your site from scratch or replacing your existing template. However, this method ensures that all of your users will get an optimized experience on your website, no matter the device (or screen size) they visit from. If you have the time, this is the best option for CMS-driven websites. Coding your own requires a bit different approach.

Code It Yourself

If you have a pre-existing website that you coded yourself, one way to convert your site to a mobile-friendly version is by providing a separate stylesheet for smaller resolutions. This can be done by using a media query, which is a piece of code that tells the browser to read a specific style file based on the type of device being used to access the web page. However, using this method can be tricky due to each browser’s unique interpretation of these instructions. There are hundreds of different screen sizes, which can be roughly catered to by grouping them into similar categories (mobile device, tablet, screen); but this will only give a very rough “revised version” and will not be custom to each. This is especially a problem for devices that can change the screen orientation. The width of an iPhone screen vs. the length is quite different! So how do we make sure that no matter what device or orientation, the page displays the way we intend it to?

Responsive Design

Perhaps the best solution to these issues is responsive web design, named for the ability of the design to respond to the user’s preferences, which helps scale to the variety of different devices available on the market now, whether desktop, tablet, or mobile, Apple or Android. It is not just about resizable images and adjustable screen resolutions, but an entirely different way to think about design. It is easiest to implement this at the start of a new design, rather than to edit existing code. Trying to make old code work in a liquid layout can be frustrating, messy, and time consuming, not to mention you really should, ideally, develop a new concept for how your design will display in different sizes. Don’t just hack and slash your way though!
Using “liquid” layouts, which define the sizes of elements relative to their parent element, allows the design to resize itself and rebreak text appropriate to the size of the display. Rather than coding with specific pixel sizes, we use percents. This helps the design to snap to the size of the screen rather than an arbitrary “smaller” size. Implementing media queries with specific identifiers (such as the type of device being used, the device’s maximum or minimum width, and orientation) will allow the browser to read its own personal style instructions and apply them.

Images
There are three examples of automatically adjusting images: sliding and revealing portions of images (thanks to CSS positioning), images that scale with the layout, and sliding composite images (created by layering images). An example of a sliding composite image can be seen here — try resizing your browser window to watch the flying saucer move!
One caveat to this is Apple’s browser, which automatically rescales web designs to fit the tiny screen. If a designer creates a responsive layout, Apple devices still resize images proportionally to the page even if made to fit on the screen, which also scales text and other elements to miniature. An Apple-specific meta tag, which provides the browser metadata about the document and how it is formatted, fixes this issue. This snippet of code overrides Apple’s browser default of scaling things proportionally, allowing the designer’s fluid layout to take over.

Arranging Elements
Assigning media queries based on device types and sizes allows the designer to change the layout for each screen with simple tweaks to CSS. Javascript is a good backup method for this approach, as not all devices support the CSS3 media queries mentioned previously. Floating tags (divisions) can help the layout rebreak in a way that fits the screen appropriately, rather than squishing it all in the columns it may have started with on a desktop standard 1024x768 screen. Another consideration is the amount of information you need to convey with the medium you have. On a small mobile screen, perhaps you don’t need a giant header, or all of the images scattered throughout an article. Choosing to hide some elements (again, using divs and visibility or position information), you can pare down the viewer’s experience to the essential, or to the format that makes the most sense and enhances the design in that particular experience.

Conclusion

Ultimately, it is more efficient to take the time to code a responsive layout initially, rather than trying to take a static page and make it appropriate for all devices later. Designing for web is similar to designing for print in that way. You must think of the end user and how they will receive the information you are providing, and design with the end in mind to deliver the information in a way that will communicate appropriately. Designing for (and testing!) various screen sizes and devices may require more time and effort than just coding a simple web page, but taking your users’ experiences into consideration is vital for effective visual communication.

Once the top end of color printing, four-color offset printing is now just once of many options available when choosing a print method and supplier.

Four-color process printing, also known as CMYK or 4C, is the most widely used digital and offset color printing process, in which the visible color range is replicated from four basic colors: cyan, magenta, yellow and black.

In today’s market, four-color process printing comes in many forms — and sometimes, confusingly, with more than four colors!

While many printers have offset presses with only the four basic CMYK colors, many have capacity for 2-4 additional ink positions reserved for “spot” colors (any color ink, pure or mixed, that is printed in a single pass). These spot colors can include pre-mixed inks such as Pantone inks, metallics, fluorescents — or in fact, may not be a color at all.A colorless varnish may be used as a spot "color," either printed over the other inks to add durability or to provide special visual effects on the printed piece.

And not all process color printing is created the same way!

Offset 4C printing allows for the selective use of spot colors, but can require more up-front time due to prepress preparation. But once the job goes on press, this production method is still the speediest, and delivers the lowest per-unit cost at higher quantities.

Digital 4C printing, while requiring less prep time and less ink, produces a grainier result with a smaller visible color spectrum, and ultimately is slower to produce on press. At present, it also presents format restrictions, as the most widely used digital presses are typically limited to 12x18-sized sheets.

Depending on the format of the printed piece, digital 4C printing is usually more cost efficient at quantities of 500 units and below, while offset 4C printing affords a lower unit cost at quantities of 2500 and up. When deciding between digital or offset printing, cost and speed of production would be weighed against color vibrancy and the need for spot color usage. If price is the most important concern, and the quantity is somewhere between 500 and 2500, consider pricing a print job with both digital and offset printers to be sure you’re getting the best value.

Coming next time: Beyond Process Color: Hexachrome, Stochastic, and more!

QR, or "quick response" codes, are two-dimensional barcodes. QR codes include a unique finder pattern located at three corners of the symbol, which help the reader to identify where the code is and how big it is. The patterns within the code represent alphanumeric text that can be decoded using a barcode scanner, and can store much more information than a traditional (one-dimensional) barcode of the same size. QR codes support 9 data types: Contact information, calendar event, e-mail address, phone number, geo location, SMS, plain text (sentences), wifi network key, and a link to a URL.

Originally, these codes were developed for industrial purposes, but thanks to inexpensive (or free) apps that can be downloaded to most smartphones and tablet-type mobile devices, marketers have recently seized on them to link print and digital communications. In advertising, they are most commonly used to deliver a URL, but they can also be used to display text to the user, to add a vCard contact to the user's device, display data such as a phone number or ISBN number (also known as a Uniform Resource Identfier, or URI), or to compose an e-mail or text message.

Click here to view an example of QR code structure.

What are they used for?

QR codes can be obtained for free online. The code is defined and published as an ISO standard. Denso Wave owns the patent rights on QR codes, but because the company has chosen not to exercise them, individuals can take advantage of this technology with ease. There are numerous code generators available online, many of which provide simple ways to embed the code on your own website, or a pdf to download for use on print materials. (An example of one source can be found here.)

When the user scans the code with a smartphone, the reader interprets the code and may redirect the user to a webpage or display text. When used in direct mail, the code can do more than just direct the user to a standard website. For example, a code may direct a user to a personal URL (PURL). This PURL may invite users to sign up for monthly newsletters, view a video, or request a mailed fulfillment package. Marketers can also track the geographical location in which a QR code was scanned, or obtain realtime responses from customers rather than pay for business reply mail and wait for a return. Collected user information can help to evaluate the campaign's ROI and can help improve future campaigns.

Intelligent tracking can also enable marketers to determine the progress of mailings through the USPS's CONFIRM, and alert customers via email or text message that a personalized package will be coming in the mail — a great way to intrigue your customers before your piece even arrives!

How do the "pretty" ones work? How is that possible?

QR codes are engineered to allow for misreading of up to 30% of the code — so it is possible to create artistic QR codes that still scan correctly while containing elements such as color, logos or other images that allow the QR code to make a distinctive statement all on its own. However, the higher the error correction level, and the more of the pattern removed from the code to make it visually appealing, the less coded information it can contain. Creating "designer codes" requires a bit of verification – make sure it does more than just look pretty – make sure it WORKS! (Examples of "purposeful error" can be seen here: http://blog.360i.com/emerging-media/creative-qr-codes).

QR codes open up a two-way channel of communication, where previous direct mailers were often a one-way street. For tips on getting the most out of your QR codes, visit The Scout.

For full technical specifications, see the pdf provided by ISO/IEC.

In the past, web developers had to rely on a predefined set of "web-safe" fonts: three serif, eight sans-serif, and two monospace fonts. This doesn't allow for much variety, and can suffocate online design. This can also be extremely detrimental when attempting to maintain consistency in a brand identity.

Fortunately, as browsers advance, so do standards and methods. Developers have a near-infinite array of options to choose from. In this article, we'll cover the three easiest and most common methods.

(1) Google Font API: http://www.google.com/webfonts

Google offers a range of fonts that can be referenced via CSS. What originally began as a small handful has now grown into several hundred (and will probably continue to grow).

PROS
• large selection to choose from
• no need to write your own code
• font files hosted on Google's server rather than your own
• free

CONS
• selection is large, but limited

(2) Typekit: http://typekit.com/

Typekit works in a similar manner, cooperating with foundries to provide licensed fonts and code to work properly with any system.

PROS
• simple and straightforward
• multiple weights
• fonts hosted on typeset servers, not your own

CONS
• limited fonts
• not free
• ceiling limit of page views

(3) FontSquirrel: http://www.fontsquiurrel.com

PROS
• ability to package your own fonts for web use
• some pre-selected fonts
• free

CONS
• to use the generator/packager, you must own the font
• must be aware of your own font's eligibility for web embedding

Each method has its own advantages and disadvantages, so you must choose the method most appropriate for your purposes. For the Next Year's News website, we used FontSquirrel to generate a collection of web-ready files for the font League Gothic — which works in all browsers, web and mobile. We liked the flexibility of this approach and the ability to choose our own font rather than rely on a preset collection.

Did we omit your favorite method? Let us know in the comments below!

In previous weeks, you've determined that you have a wonderful app idea to contribute, you've began exploring the world of app design/programming, and now the day is finally here. You have completed your app, and you're ready to share it with the world. Congratulations! But wait! There are a few things we have to do first.

APPLE

Verify that your app meets submission guidelines
This step is vital for submitting your app to the Apple Store. Apple is notorious for having high standards when it comes to developer-submitted content. To avoid the six-week-wait-rejection, make sure you verify the items contained in the App Store Review Guidelines. The approval process can generally take anywhere from a few days to weeks. If you make sure to carefully comb through the guidelines above, your app will be more likely to fall on the shorter end of that range.

Good to go? Send it off!
For detailed instructions on signing and packaging your app, visit edumobile.org.

ANDROID

The Android Market has its own set of rules for app submission here: Android Developer Content Policy. Their regulations are looser than Apple's, with an additional Rating Guide to appropriately rate your app for public use.

Off and away!
For detailed instructions on signing and packaging your app, visit the Android Developers' Guide. Once your app is submitted, there's virtually no processing time. Your app will be available for download almost immediately, without going through a review process.

In previous weeks we've discussed whether you need to develop app and how PhoneGap has made that process easier for the average web developer. This week, we're going to briefly discuss the differences between developing for the AndroidOS versus iOS (Apple products).

For those using PhoneGap, the process is relatively similar. You will code your page(s) using HTML, CSS, and Javascript, as you would a website. To configure your pages for mobile, you will go to the Site menu and select "Mobile Settings>Configure Application Framework" to ensure that each SDK is properly specified, then to "Site>Mobile Settings>Application Settings" to specify the job for Android or iOS output.

You'll have the option to view the app in different resolutions with Dreamweaver 5.5. Adobe has included common mobile resolutions in their previews (feature phone, smart phone, and tablet), or you can specify your own. Android devices will scale up your graphics in order to fit the varying display sizes, but will not scale down already large graphics. Thus, it is important to make sure that your app is viewable on the smallest possible resolution before finalizing for output.

Occasionally a layout may not function as desired when scaled to a larger screen. To adjust that, you can create different layouts for different screen sizes, as well as creating density-specific drawables for bitmap files, placed in the appropriate folder. From the Android Developer's Guide: "The configuration qualifiers you can use for density-specific resources are ldpi (low), mdpi (medium), hdpi (high), and xhdpi (extra high). For example, bitmaps for high-density screens should go in drawable-hdpi/." Detailed instructions can be found here.

The method is similar for iOS apps – iOS uses its own naming convention without specific folders. For example:

MyImage.png - Default version of the image resource, which is also used for iPad.
MyImage~iphone.png – Version of the image for iPhone and iPod touch.
MyImage@2x~iphone.png – High-resolution version of an image for iPhone and iPod touch devices with Retina displays.

When you're finished, click "Build and Emulate". This will build a debug version of your app for AndroidOS or iOS (whichever you selected in "Mobile Settings>Application Settings"). This is very important: you cannot distribute a "debug" version of your app for public use. In order to release the app to either market, you must follow the respective procedure for signing and naming. This is usually done for iOS with Keychain Access and XCode, and with Eclipse for AndroidOS.

This post covered only the basic differences between developing an app for iOS and AndroidOS, but it should be enough to get you started. For more detailed documentation, visit the Android Developer's Guide at http://developer.android.com/guide/index.html, and the iOS Developer Guide at http://developer.apple.com/devcenter/ios/index.action.

While direct mailer and informative brochures can still be an essential part of our marketing mix, evolving technology has given rise to new, digital ways to promote your product, organization, or brand. One inevitable result of something new available in the world of marketing: everyone suddenly wants to be a part of it. That's not necessarily a bad thing–new technology thrives and continues to grow only with support from the culture it caters to.

This holds true for most areas; marketing and design are not excluded. Mobile phones–in particular, smartphones–have become so essential in our daily lives, it is natural to seek communication with our target audience through them. The two most common operating systems, Apple's iOS and Motorola's Android, both offer "apps" for instant download by any user. For some people, creating and distributing apps is a means of income‐charge for the app itself, generate a specific dollar amount per user hooked. For others, it's a great tool for self promotion. Create a free app that delivers something to meet a user need, and they may be willing to invest in you more heavily in the future.

Some organizations provide a useful service or tool to their clients. For example, investment and banking company Charles Schwab has developed an app to allow their clients to manage their account, deposit checks, place trades, and more, and in one contained source. The app is free, but the perk of being able to use such a tool may persuade someone to manage their funds with Charles Schwab instead of a competitor who doesn't have such a feature. While Schwab doesn't make a profit directly from the app itself, it does encourage business with the company.

This may be a great method for your brand, if you have the skills (or can commission the skills) to produce it, and have a marketable idea that people want to use–even if they might not be willing to pay for it. No one likes sacrificing time and money. If your app can save the user both, you've almost surely got a winner. Entertainment is a powerful force, too, however. Just look at Angry Birds–it has a cult following and boasts over 250 million downloads! This app doesn't aid productivity or help you lose weight; it is fun for fun's sake, and highly addicting.

However, it is still important to keep in mind that just because apps may (or may not) increase your organization's visibility or success, doesn't mean that it is right for you. Do you have something of substance to contribute? App redundancy is enough of a problem that Apple has included the following in the app submission guidelines: "We have over 250,000 apps in the App Store. We don't need any more Fart apps." So, ask yourself: has it been done before? Is it appropriate for your brand's identity? All of these must be considered before jumping headfirst into development. If you've worked through all of those, have reached concrete answers, and decide that you definitely need an app, consider keeping your app closely tied to your brand identity. Particularly if your app is directly related to what your company does or values, maintaining a visual consistency will strengthen the associations users have between their experience with the program and your brand as a whole.

Next week, we'll be covering the differences in designing for iOS versus designing for Android, and the options/methods for tackling each.