Writing and Producing for Mobile Platforms

The Tablet as the 4th Screen

- Wisdom from Your Mobile APP Presentations- Writing for Mobile (Rules of the Road from YAHOO Style Guide)- Current Thinking about Designing content for Mobile

TV’s “3-screen” STRATEGY• Screen 1: The TV

• Screen 2: The Web

• Screen 3: Mobile -- Fewer people are watching SCHEDULED over-the-airnewscasts--- Advertisers are buying less commercial time

--- TV has competition from WEB, other outlets with news & information

--- Solution: Provide as much CONTENT where viewers are (online, on phone, on the go)

2009-2010 SLIDE

4th screen?

• Television operations, just like their counterparts at newspapers and magazines are trying to figure how to program for tablet PCs

2009-2010 SLIDE

What we know NOW about tablet readers1. Editors have to rethink how the audience

consumes content2. Plan/Produce for “pop-up” moments (“If

all you do is turn the pages, your readers are not going to be happy”)

3. Element of discovery is one of the joys of the tablet

4. People read at greater length on tablets than on other devices (70% more pages)

5. Look for more “editioning (the creation of mini-newspapers and mini-magazines on smartphone”

2013 Source: “Lean Forward, Lean Back: Tablet News Experience” (Presented at South by Southwest March 2013)

Mobile Web pages

“UA Mobile Web delivers content, services, and features that allow you to access and interact with The University of Alabama on the go using your iPhone, Blackberry, PDA, or other Smartphone.”

UA Mobile Web site(for Smartphones) rolled out in Nov. 2009

UA launched its mobileapp in April 2011

“The Mobile First” Philosophy

“More often than not, the mobile experience for a Web application or site is designed and built after the PC version is complete. Here's three reasons why Web applications should be designed for mobile first instead:

1. Mobile is Exploding2. Mobile Forces You to Focus3. Mobile extends your capabilities

Luke Wroblewski“LukeW”

RESPONSIVE WEB DESIGN• Responsive Web Design- philosophy built on

flexible grid-based layout; building Web sites that can adapt to the constraints of the browser Window, responding to users needs

• Fluid images- modern browsers have evolved to the point where they resize the images proportionally (as our flexible container resizes itself, shrinking or enlarging our image, the image’s aspect ratio remains intact)

• Resolution breakpoints- horizontal widths needed to accommodate, based on devices most commonly used by the audience

Regardless of how wide or small its flexible container becomes, the image resizesproportionally. Magic? Who can say.

What’s a Fluid Image?

320 pixels For small screen devices, like phones, held in portrait mode.

480 pixels For small screen devices, like phones, held in landscape mode.

600 pixels Smaller tablets, like the Amazon Kindle (600 x800) and Barnes and Noble Nook (600 x 1024) held in portrait mode.

768 pixels Ten-inch tablets like the iPad (768x1024) held in portrait mode

1024 pixels Tablets like the iPad (1024x768) in landscape mode, as well as certain laptop, netbook, and desktop displays.

1200 pixels For widescreen displays, primarily laptop and desktop browsers

Examples of Resolution Breakpoints

GEORGE’S TAKEAWAYS--

The smaller the device, the lower the resolution

The larger the device, the higher the resolution

Whether or not one is using the device in portrait or landscape mode MAKES A DIFFERENCE

This table appears in RESPONSIVE WEB DESIGN by Ethan Marcotte

Coming up on WednesdayLatest numbers of

iPad/Tablet purchases

New study on College students & content on tablets

WHY tablet magazines have been declared a FAILURE