An iFrame lets you embed a website inside of another HTML document. It’s often used to add online content to otherwise offline publications. When a viewer is offline, the iframe fails completely, and the author doesn’t have control of what is displayed.

So how do we go about fixing that?

(more…)

There are several great tools for testing mobile layouts.

The iOS and Android Simulators can test almost every aspect necessary, without actually needing a device.

Browserstack is a subscription service that lets you test all kinds of devices, browsers, and operating systems.

However, sometimes the power that these systems offer is overkill, and I just need a quick way to test a mobile layout.

The Quickest Way to Test a Mobile Layout

Enter Chrome Device emulation.

Device emulation is part of the Chrome Developer Tools. All you need is the Google Chrome web browser.

You can learn more about the Developer Tools, including how to use them as a designer in this free email course.

There are 2 important parts to testing mobile layout.

1. The viewport meta tag—this controls document scaling on mobile devices.
2. The CSS media queries—these are rules that control how the design changes on different screens.

The emulator also simulates touch events, touch scrolling, and device orientation.

(more…)

What if you were missing out on web content just because your Mac wasn’t telling you that you could scroll?

It turns out that this is the default on the current version of OS X. So there’s a good chance you are missing content.

Here’s the short and sweet steps to a solution.

How do I show scroll bars on a mac?

1. System Preferences (from the Apple Menu) > General.
2. Change the Show scroll bars setting to Always.

(more…)

Queasy (Quick and Easy) Tools takes a whole bunch of the most common actions that you make as a designer or an animator and groups them into a single panel.

More than that, Queasy tools lets you take multi-step actions with a single click.

Did I mention it’s free?

Get the latest installer to start using Queasy Tools with Adobe Animate CC.

Update: For the latest version of Adobe Animate, you may need this extension installer.

Lip syncing is one of the most tedious jobs in animation, because it means listening (and re-listening) to the audio on every frame and matching that sound to the right mouth shape.

The SmartMouth extension runs through your audio and automatically places your mouth shapes on the timeline.

Artwork by Paul Trani

Best of all, SmartMouth now works with the new Adobe Animate.

Get SmartMouth here.