Digdesign Playbook

8/3/2019 Digdesign Playbook

1/42

Publishers Playbook

DIGITAL DESIGN

Connecting the elements for outstanding

Nx


2/42

Publishers Playbook: Digital Design

2 / 42Sign up for our newsletters at www.emediavitals.com/register

coNteNts

tools & techNologies

7An HTML5 FAQ for publishers

11Are you ready for HTML5?

20New Web fonts promise cross-platform support

24How to get an iPhone favicon

26Four CSS3 features that will makeyour designer happy

Taking the redesign plunge can

be time consuming, costly and

confusingbut done properly, it can

also be overwhelmingly rewarding.

These helpful tricks and tips will

guide you towards a design

worthy of your content.

sales PersPectives

4Death of the page view? Howabout the rise of the sponsorship

case studies/best Practices

29Inside the Seventeen.com makeover

33Resources for email design

35Gawkers media image-driven redesign

37Editorial, IT and Design: Cant they all

just get along?

42Digital design Web resources
http://emediavitals.com./http://emediavitals.com./


3/42



Designing digital projects, especially websites, has come a long way from the early

days of changing fonts or adding a few rich-media components. Todays redesigns

emphasize search engine optimization, personalized content delivery, access from

smart phones and other mobile devices, and a host of other issues that publishing

teams need to take into account when planning a site upgrade. Needless to say, it can

be a very complicated process without the right tools and a strong understanding of

how design influences audiences and advertisers.

For instance, most publishers are aware of the battle between HTML5 and Flash, but

what they are and how their capabilities affect publishing may not be so clear. Thats

why we created the Publishers Playbook to Digital Design. This playbook connects

the dots between the technology, aesthetic and sales aspects of digital design, while

offering best practices and case studies as solid examples of its applications.

Every publisher needs a standout design that elevates content, spotlights the

publications brand and meets readers needs so well it feels like serendipity. Getting

there is a long road, but one made easier with the resources found in this playbook.

If you have comments or questions or if you have recently completed a redesign,

please share your experience here.

ceos message

Prescott Shibles

CEO
http://emediavitals.com./http://www.facebook.com/pages/New-York-NY/eMedia-Vitals/247848457510?http://www.facebook.com/pages/New-York-NY/eMedia-Vitals/247848457510?http://www.facebook.com/pages/New-York-NY/eMedia-Vitals/247848457510?http://www.facebook.com/pages/New-York-NY/eMedia-Vitals/247848457510?http://emediavitals.com./


4/42



MSNBC.coms single-view article page, part of a June 2010 site redesign, is being heralded

as a milestone in the long-awaited death of the page view. But the strategy is less

about whats dying than what MSNBC hopes to give life to: a sales model fueled by multi-unit sponsorships.

The changes come as MSNBC.com faces a challenge that all publishers can relate to: the

commoditization of online advertising, driven in large part by ad networks.

Weve always been a premium brand, but over the past ve years we have become more

and more sponsorship-driven in order to differentiate ourselves, said Kyoo Kim,

MSNBC.coms Vice President of Sales. Were under pressure to create better experiences.

Page views are great, volume is great, but we need to be able to tell a better story from an

advertisers perspective.

Just as MSNBC.com is aggregating related editorial content text, video, slide shows and

interactive tools into a single page experience, the sales team is pitching the ability to

aggregate all of an advertisers campaign elements onto that story page.

sales PersPectives

death of the Page vie?ho about the rise of thesPoNsorshiP

b rob oregaN


5/42



Were offering the ability for advertisers to tell their story in a richer way, said Kim.

Kim compares the strategy to a purchase funnel. Near the top of the page is a large-format

ad to drive awareness. As the user scrolls down the page indicating deeper engagement

with the article the creative may include more engaging rich media. At the bottom of

the story page, when the user is exposed to related articles, videos, commenting and other

interactive tools, the creative also can become more interactive.

Viewable impressions and ad templates

There are two key elements to this approach.

First, the ads that are lower on the page are not served until the user actually scrolls to

that portion of the page virtually guaranteeing exposure and increasing the potential for

engagement. The enabling technology, from a company called RealVu, tracks viewable

impressions dened as when the ad content is loaded, rendered and at least 60% of

the ad surface area is within the visible area of a viewers browser window on an in focus

Web page for at least one second.

Second, MSNBC.com is offering ad templates based on the same tools the Web team uses to

create interactive editorial content.

We spend so much money running all this interactive content for editorial, we thought, why

dont we make those tools available to our advertisers for their creative? Kim explained.

sales PersPectives:

death of the Page vie? ho about

the rise of the sPoNsorshiP n


6/42



The templates enable advertisers to integrate their creative and offers more seamlessly

with editorial pages.

The idea is to create an easy way to start pulling in real-time content from advertisers, he

said We have the expertise for producing content, so we can help them do that.

Kim said various levels of sponsorships are available, with campaign pricing ranging

from $20,000 to $500,000 a month. Pricing, he said, will still come down to some sort

of CPM. But were trying to build around engagement. The story really is, how do we

enable better storytelling?

Ahead of the curve

Kim admitted that it will take awhile for the market to catch up with this approach.

Theres a complex network of brands, media buyers, and agencies that have built a

supply chain around CPMs and page views. Very few of MSNBC.coms advertisers are

thinking holistically, he said. Clients always want, want, want, but sometimes

theyre not ready, he added. That would explain why theres still plenty of run-of-site

inventory on article pages from the likes of lowermybills.com, Progressive and, yes, ad

networks such as Pulse360.

MSNBC.com may need to make some internal adjustments as well. Kim acknowledged

that sales managers will be looking at ways to adjust incentive and compensation plans to

better reect the new sales approach.

t

n y wy

pn n

- nn

.

sales PersPectives:

death of the Page vie? ho about

the rise of the sPoNsorshiP n


7/42



Theres been a lot of news to absorb about HTML5, the emerging standard for website

creation and, increasingly, Web application development. Weve boiled it down here into a

quick FAQ, with plenty of links for anyone thirsting for more detail.

What is HTML5?

HTML5 is the next generation of HTML and XHTML, the industry standard technologies for

website design. HTML5 incorporates many features that Web browsers have supported for

many years but have never been formally standardized or have been available only through

plug-in technologies such as Flash or Shockwave.

Mark Pilgrims Dive into HTML e-book offers one of the more comprehensive overviews

of HTML5.

What are the key features of HTML5 for Web publishers?

HTML5 offers many new features that previously required plug-ins (or hacks), or were not

available at all. Here are ve that website publishers should nd particularly useful:

1. New semantic elements that will give developers more exibility in dening various

parts of a document


aN html5 faQ for Publishersb rob oregaN


8/42



2. Canvas, a two-dimensional drawing surface for creating graphs, photo compositions,

and animations using JavaScript

3. A video element for embedding video on a Web page without a plug-in requirement

4. A geolocation API that will enable users to share their location (tracked through their

access device)

5. Ofine Web applications, which will enable users to access Web apps and documents

from their browser even if a network connection is unavailable.

Sources: IBM, Dive Into HTML, WebAIM, html5doctor, WHATWG

Who supports HTML5?

As an emerging Web standard, HTML5 has garnered support from all the major browser

vendors, which are adding HTML5 features at varying rates. Google (Chrome) and Apple

(Safari) are the two most aggressive adopters of HTML5 features, followed by Opera and

Firefox. Microsoft previewed HTML5 in Internet Explorer 9, an upgrade of its browser.

Keep in mind that while HTML5 is a quote-unquote standard, each browser developer

will add its own tweaks to distinguish from competitive offerings. Apple and, to a

lesser extent, Google are already taking some heat for launching HTML5 showcase

sites that demonstrate HTML5 functionality that is optimized for their individual


aN html5 faQ for Publishers n
http://emediavitals.com./http://www.ibm.com/developerworks/library/x-html5/http://diveintohtml5.org/http://webaim.org/blog/future-web-accessibility-html5-semantic-tags/http://html5doctor.com/the-video-element/http://www.whatwg.org/specs/web-apps/current-work/multipage/offline.htmlhttp://www.whatwg.org/specs/web-apps/current-work/multipage/offline.htmlhttp://html5doctor.com/the-video-element/http://webaim.org/blog/future-web-accessibility-html5-semantic-tags/http://diveintohtml5.org/http://www.ibm.com/developerworks/library/x-html5/http://emediavitals.com./


9/42



browsers. As Ars Technica points out, this raises issues about the difference between

truly open standards and value-added features that dont work across different

devices or operating systems.

The Web Hypertext Application Technology Working Group (WHATWG) is keeping a

running tally of which features are supported in which browsers.

What technical skills do we need to support HTML5?

Web designers and developers who know HTML, XHTML, CSS and JavaScript are wellpositioned to transition to HTML5. If you dont have these skills in-house, you may want to

think about adding them. Increasingly, Web development will become a core requirement

for publishers looking to extend their content across multiple platforms. The skills of

developers experienced in Flash and other plug-in technologies may be less transferable

to an HTML5 environment, though as HTML expert Eric Meyer notes, its not a bad idea

to add Flash to the tool belt. If you have Flash developers on staff, keep them theyll

still have plenty of work to do for the foreseeable future. If you outsource Web design and

development, make sure your agency is ramping up its HTML5 expertise.

Whats the deal with HTML5 vs. Flash?

HTML5 proponents believe the future of Web development should revolve around

standards-based technologies such as HTML as opposed to proprietary platforms and

plug-in technologies. Technologies such as Flash were developed to add functionality where

older versions of HTML were lacking, such as rich media support. The problem with this



pn

w qn

p

kn xn

nn

p p.


10/42



plug-in approach is that Flash and other proprietary technologies are not guaranteed to

work across different platforms or different browsers. Apple, of course, is the most vocal

critic of Flash and has pledged not to support plug-ins in its iPhone and iPad devices.

As mobile computing takes off, cross-platform/cross-browser support is critical for

publishers who want their content to be accessible from PCs, smart phones, tablets, and

other devices. Publishers who are investing in mobile app development or have a high

percentage of visitors accessing their website from mobile devices will want to consider

ramping up HTML5 efforts sooner rather than later.

HTML5 does not herald immediate obsolescence for Flash and other plug-in technologies,

however. Forrester, for one, says that inconsistent implementations of HTML5 and the lack

of maturity around HTML5 specs and development tools give rich Internet application (RIA)

platforms a good ve-year runway, at a minimum.

For the time being, there will be tradeoffs. Anthony Franco, president and co-founder

of the consulting rm Effective UI, told SD Times that developers can either build [the

application] twice, or build it less, meaning they will have to sacrice some functionality ifthey abandon Flash for HTML5.




11/42



Whether you are an experienced Web designer or a publisher just trying to keep up with new

technology, the next version of HTML will have an impact on the way you manage your website.

HTML, the language that Web designers use when creating Web pages, hasnt been

updated since 1999, but technology vendors are working to update HTML to streamline

website creation, impacting any publisher with a digital presence. Ofcially the standardwont become recommended until 2022. To be recommended, at least two browsers

have to completely meet HTML5 standards.

The whole 2022 thing is a myth, really, says Richard Clark, co-author of the blog HTML5 Doctor.

To add some perspective, CSS 2.1, the language that controls the way Web pages are

displayed, has been widely used for nearly ten years. Yet the language only just reached its

recommendation phase in 2009.

Currently, HTML5 is in last call phase. Which means, baring any large unforeseen bugs in

the code, the language is in nal form, ready to be implemented as fast as browser makers

are willing to update their software.

For publishers and their designers, this means that HTML5 including all of its features that

help streamline work and add new multimedia handling capabilities is just around the corner.


are ou read for html5?b seaN blaNda


12/42



We want to make it easier for developers so

they dont have to reinvent the wheel every time

they want to do something, says Lachlan Hunt,

developer for Opera and contributor to the

HTML5 specication.

For example, the upgrade will make it easier

to embed a video onto a Web page, a process

that currently requires cumbersome scripts

and large files. HTML5 also will add newfeatures such as geolocation (allowing users

to voluntarily give their location to receive

customized content) and offline storage

(enabling users to run Web applications like

Gmail without an Internet connection).

Its all about the browser

How much impact HTML has on your publication, however, depends on which browsers

your audience uses. Each browser has its own rules and quirks that differ between versions

and brands, and each is adopting HTML5 at its own rate.

If HTML5 adoption were a footrace, Google Chrome would be leading the pack

(Google is one of the specs co-authors.) Shortly behind would be Mozilla Firefox 3.5

and Safari. Microsofts Internet Explorer 8 would be lagging behind.


are ou read for html5? n

e w

wn n qk

wn

n n n,

n pn

html5 wn .

When can I use HTML5?

According to the ofcial FAQ:

It is estimated by the editor

that HTML5 will reach the W3C

Candidate Recommendation

stage during 2012. That doesnt

mean you cant start using it yet,though.

Read more from the FAQ
http://emediavitals.com./http://wiki.whatwg.org/wiki/FAQ#When_will_HTML5_be_finished.3Fhttp://wiki.whatwg.org/wiki/FAQ#When_will_HTML5_be_finished.3Fhttp://emediavitals.com./


13/42



Id be surprised that if even in Internet

Explorer 9 they had any support for [HTML5],

says Tim Wright, author of CSS Karma, a design

blog that advocates Web standards.

But even if your audience doesnt run the latest

browsers, several HTML5 features degrade

meaning that even if your readers arent using

the latest browser, the content will automatically

translate into HTML 4. As browsers implementthe new standard, publishers can use certain HTML5 features today while future-proong

for tomorrow.

Below are some of the features of HTML5 worth keeping an eye on, including what tags

can be used today and which ones are better left for your 2012 redesign plans.

Semantic structure tags:

The feature that should have publishers most excited is the introduction of more

semantic tags.

Nearly every website has elements such as navigation, sections, articles, headers and

footers. In HTML 4, designers were forced to repeatedly use the tag to dene these

elements. Now, common components of a Web page like section, aside, article,

header, and footer are all baked into HTML5 and given their own tags.


are ou read for html5? n Scripts to the rescue

If a feature doesnt downgrade

automatically, Modernizer will

force browsers to display HTML5

elements, even in IE.
http://emediavitals.com./http://www.modernizr.com/http://www.modernizr.com/http://emediavitals.com./


14/42



For example, most designers currently structure article page elements as seen below:

Im a headline

Im content

Im a sidebar

Im more content

Im the author bio

Now, designers can simplify with HTML5:

Im a headline

Im content

Im a sidebar

Im more content

Im the author bio




15/42



It may not seem groundbreaking, but by wrapping elements in their own tags, the

website becomes machine readable and thus accessible to those with disabilities. It

also allows search engines to become smarter to better identify the purpose of each

block of content.

Demo:http://dim4o.einet.bg/index.php (note:you must view the source code)

Is it ready?: With one line of CSS all of the modern browsers except for Internet Explorer

support the new tags. IE requires a bit of JavaScript as demonstrated here. However because

the majority of Internet users are running Internet Explorer, semantic tags may not beworth the headache for sites that dont cater to early adopters.

I would do this on my personal website, but if I were doing this for a large organization I

would still use div tags, says Clark.

Geolocation:

If you have ever used an iPhone you have seen geolocation in action.

Your Web browser will also prompt and ask for permission to use your current location

when serving content. Using your computers IP address, WiFi network address, and

cell phone tower triangulation (for mobile devices) HTML5 can return your longitude

and latitude.


http://emediavitals.com./http://dim4o.einet.bg/index.phphttp://boblet.tumblr.com/post/141239118/html5-structure4#browser-supporthttp://boblet.tumblr.com/post/141239118/html5-structure4#browser-supporthttp://dim4o.einet.bg/index.phphttp://emediavitals.com./


16/42



Developers can then plug those numbers into a service like Google Maps and determine

your exact address. This could mean news sites serving content and advertising on a block-

by-block basis.

Demo:http://maxheapsize.com/static/html5geolocationdemo.html

Is it ready?: For mobile devices, Geolocation is already supported by the iPhone and

Android 2.0. For desktop browsers, only Firefox 3.5 and above support the feature.

Video and audio:

When designers want to insert multimedia on a page they must use the proprietary

technology made available by vendors like Adobe Flash. HTML5 simplies the process by

making video and audio as easy to post as an image, shortening the code from roughly ten

lines to just one.

Its not a closed garden anymore, says Clark, referring to Adobes monopoly on displaying

online video.

Designers can add and remove playback controls, autobuffer, autoplay and more.

Demo:http://html5demos.com/video

Is it ready?: Kind of.


http://emediavitals.com./http://maxheapsize.com/static/html5geolocationdemo.htmlhttp://html5demos.com/videohttp://html5demos.com/videohttp://maxheapsize.com/static/html5geolocationdemo.htmlhttp://emediavitals.com./


17/42



If you put [the code] in a certain order, it degrades, says Clark.

Firefox and Safari support the tags. However ambitious designers can make their

multimedia content HTML5 ready today and still use Adobe Flash as backup. For a guide on

how to implement the video tag, click here.

Forms:

Forms, as they exist now, are fairly simplistic. HTML 4 mostly determines the display of a

form element but not its function. For example, HTML 4 has separate tags for text are and

submit buttons.

HTML5 takes it a step further adding common form types such as email, date, and

more. HTML5 will automatically check that the content in an email form is, in fact, an email

address, something that was previously only possible with large JavaScript les.

Demo:http://brucelawson.co.uk/tests/html5-forms-demo.html

Is it ready?: Nope. Only Opera 9.5 and above support the new form styles. However, the

feature degrades perfectly, meaning designers can get into the habit of creating new forms

without any drawbacks for users still using an older browser.


http://emediavitals.com./http://diveintohtml5.org/detect.htmlhttp://brucelawson.co.uk/tests/html5-forms-demo.htmlhttp://brucelawson.co.uk/tests/html5-forms-demo.htmlhttp://diveintohtml5.org/detect.htmlhttp://emediavitals.com./


18/42



Whats next?

Unless your audience is made up of entirely of Web developers and designers, your readers

are likely not using modern browsers. However, that doesnt mean you cant start future-

proong your website today.

The experts we talked to recommended taking a few small steps rst to be ready for the

changing technology:

Properly name your classes: Elements such as footer and aside arent widely supported,but designers can start using the tags in their div names (i.e. ). When

your audience adopts HTML5, a simple nd and replace will update your site in seconds.

Use HTML5 forms: The form specications mentioned above are the most bulletproof

feature of HTML5: It works in new browsers and degrades without additional code in older

browsers. Implement these today to save yourself a headache tomorrow.

Keep track of new development: If you are responsible for a handful of site redesigns in

the coming years, keep tabs of all of the latest HTML5 developments on the specications

ofcial mailing list.

Start learning it now, says Clark, it wont be that long before it becomes much

more mainstream.




19/42



Additional Resources:

HTML5 Gallery - A collection of sites written in HTML5.

Browser support chart - Confused over what browser supports which tag? Dont be. Print out

this chart and end the frustration.

HTML5 Book - Author Mark Pilgram is posting the chapters to his new book, Dive Into

HTML5, as he completes them. An extraordinary resource that changes as fast as the

HTML5 specication.

HTML5 FAQ - A useful HTML5 FAQ that answers 12 common questions from developers.


http://emediavitals.com./http://html5gallery.com/http://www.findmebyip.com/litmushttp://diveintohtml5.org/http://boblet.tumblr.com/post/147230293/html5-faqhttp://boblet.tumblr.com/post/147230293/html5-faqhttp://diveintohtml5.org/http://www.findmebyip.com/litmushttp://html5gallery.com/http://emediavitals.com./


20/42



Roger Black and David Berlow are hoping to bring some order to the untamed worlds

of Web and mobile typography with a new set of fonts that are designed to scale

across different screen sizes and browser types.

The Font Bureau is releasing seven families of new Web fonts, which are designed from

the ground up to work on smaller screen sizes. The new fonts will move across devices

independently, recompiling content from one container to the next.

They will withstand what the user does, what the Web designer does, and what the

OS/browser does to scale and rendering, said Berlow, co-founder of the Font Bureau.

The new Web fonts are related to existing print libraries so that publishers can

maintain their print branding across platforms, Berlow added.

The fonts are distributed through a new company, Webtype, which Berlow said will

provide a model for how the different fonts work for different screen sizes. The

coming soon homepage for the Webtype website promised consistent typographic

fidelity that will enable designers to customize the typography of their sites quickly,

reliably, and economically without sacrificing quality and readability.


Ne eb foNts Promisecross-Platform suPPort

b rob oregaN


21/42



tools & techNologies:

Ne eb foNts Promise

cross-Platform suPPort n

t nn

pn n

n

n y

w p

nzn.

Finding suitable Web fonts for mobile devices and different Web browsers has been an

ongoing challenge for Web designers. Most fonts used in digital design are print fonts

that have been adapted (with varying levels of success) to the Web.

Berlow compares the process of developing Web fonts to a Russian nesting doll.

Every time you make progress and open up one doll, theres another doll inside

posing a new challenge, he said. In other words, there are a lot of complex layers to

Web typography, encompassing browsers and operating systems and, as mobile takes

off, a broad range of screen sizes. All of which pose unique challenges to publicationdesigners and font developers.

The transition from print to Web fonts has been further challenged by the slow pace

of Web standardization, Berlow added. The consortium guiding the Web believes in

moving in baby steps, he said. Typography is complex to begin with. If you try to

implement slowly, its kind of awkward.

Small screens put a strain on type

The primary challenge with Web typography particularly in mobile devices is the

low resolution of many displays, which put a strain on small type. Another hurdle is

the scalability required on devices that include zoom functions or can switch from

portrait to landscape mode all at the users discretion.


22/42




Ne eb foNts Promise


Most of the offerings on [mobile platforms] are great for display, but they dont work

too well for text, said Black, a longtime media designer who heads up Roger Black

Studio and is a partner in both the Font Bureau and Web design firm Danilo Black.

We still have Verdana, Georgia, and Arial as the default for all Web design.

In addition to the new fonts, Black is working with two other initiatives to help

publishers extend their publications across multiple platforms. His Treesaver

technology will automatically adjust the layout and navigational features of digital

editions based on the browser/operating system in which it is running.

Were trying to make a good reading environment that works across all screen

sizes,Black explained. We expect it will catch on very well.

Black is also a partner in Ready Media, which offers a set of publishing templates for

newspapers, magazines and their websites.

Will Apple take the lead?

Web typography issues are rising in importance as smartphones and tablet devices

become popular distribution vehicles for magazine and newspaper publishers.

Despite the praise Apple has received for the high-resolution screens in its iPad and

new iPhone, it has also been criticized for some of its typography decisions. Black, for

one, said Apples decision to use SVG fonts instead of TrueType Webfonts is a step in

the wrong direction.


23/42




Ne eb foNts Promise


The main thing they can do is take the lead and allow TrueType Webfonts as @font-

face embedded fonts, he said. They owe it to the design community to allow us to

have Webfonts on the iPhone platform.

SVG doesnt have the hints you can have in TrueType, Black added. They do a good

job of their own hinting in the iPad and the new iPhone, but how much nicer it would

be to be blown away by Bembo on the iPhone?

Stephen Coles, type director at the Font Shop, has also taken Apple to task for the

subpar typography support in its mobile devices. In a recent blog post, Coles saidApples approach to typography on the iPad flops.

In an interview, Coles said the fonts selected for the iBooks format, while suitable for

print, dont adapt well to long-form reading on screen. He also was critical of features

such as forced justification without native hyphenation support, which can cause

unsightly spacing issues in body text.

Coles acknowledged that Apple is making some progress in this area. He also agreesthat the iPad may be a game-changer in terms of typography on mobile devices.

There are not any readers that will give you as much flexibility for embedding fonts

and supporting photographs, he said. It is essentially the platform for a mobile

release of a magazine. Despite the complaints, it probably is the future.


24/42



If you dont have the budget to hire an iPhone developer, you can at

least acknowledge the devices existence by making an aesthetically

pleasing iPhone favicon for when readers bookmark your website.

On the iPhone, Safari enables users to bookmark websites to the

home screen (in fact Apple initially wanted developers to create appsas websites):

Websites that dont have an iPhone

favicon are rendered as a screenshot of the

webpage, not very pleasing to the eye:

However with ve minutes of work you can

get your very own slick icon that looks justlike something from the app store. To the

right see the icon for nytimes.com:


ho to get aN iPhoNe favicoNb seaN blaNda


25/42




ho to get aN iPhoNe favicoN n

To get an icon you have two options:

1. Place an image titled apple-touch-icon.png in your sites root. Dont worry about

giving it the trademark glossy look, the iPhone will do that automatically.

2. In your sites header place the following line of code:

Using this method you can name the le whatever youd like and place it in any directory.Or, if you dont feel like tweaking an image to be iPhone friendly you can always use this

handy generator.


26/42



HTML5 is rightfully getting a lot of buzz these days, but there is another Web language

that is getting primed for its next upgrade.

CSS, the system of les that styles Web pages has been in version 2.1 since 1999. Since

then, Web designers have been forced to get creative in order to introduce new designtechniques. For example, a now common technique to create a simple box with rounded

corners depends on lots of code and four background images. CSS3 bakes these old

techniques into the language, simplifying the design process and freeing designers to waste

less time hacking CSS and more time creating beautiful websites.

Here are four new features of CSS3 that should make the life of your designer a bit easier:

Font-face

Typography has been a frustration of Web designers for years. Previous to CSS3, a designer

could only use a font if it was already on a users machine. Because of the wide variety of

operating systems the web was essentially limited to ve fonts (Arial, Times New Roman,

Comic Sans Serif, Georgia and Verdana). This led designers to resort to tactics such as sIFD, a

workaround that uses Flash to replace fonts.


four css3 features that illmae our desigNer haPP

b seaN blaNda


27/42



Thankfully, CSS3 allows designers to import fonts so designers can use any font they

want, massively increasing the typographic possibilities and freeing users from font

monotony while decreasing the need for Flash.

Can I use it? Yep, only Firefox 3 for Windows cant handle Font-face.

Border Radius

Rounded corners took the web by storm at the dawn of Web 2.0. However, under

the hood, designers often had to utilize a complicated method of background imagereplacement to give the illusion of a rounded corner. Some people even relied on code

generators to make life easier.

CSS3 has removed the need for complicated workarounds by baking rounded corners right

into CSS3.

Can I use it? Yes, with help. IE 6 through 8 cant handle the border-radius property and you

may need some help with Firefox and Safari.

CMYK

Any designer who is tasked with print and online designs will breathe a sigh of relief with

CSS3s new CMYK support.


four css3 features that ill

mae our desigNer haPP n


28/42



Previously color on the web could only be described using RGB or a special hexcode.

For example, red in RGB is 256,0,0. In hexcode its #ff0000. When print designers

wanted to translate print colors to the web, it required a bit of translation between

color systems.

The good news is that CSS3 eliminates the need to such translation. The bad news is that

not even the most current browsers support the new feature.

Can I use it? Not yet. No browser supports this feature.

Page depth

Web designers often utilize two design effects, shadows and opacity, to help add depth

to a page. Previously, designers had to rely on background images and .png support,

respectively. Now, however, both features are included in CSS3.

(example via css3.info)

Can I use it? Shadows wont work in IE or Opera, though the feature should degrade for

users with older browsers. Opacity works on every browser save IE.

The W3C has been hard at work upgrading the CSS specication and there are many more

features worth exploring. See a complete chart of HTML5 and CSS3 adoption here.


four css3 features that ill

mae our desigNer haPP n
http://emediavitals.com./http://www.css3.info/preview/box-shadow/http://www.findmebyip.com/litmus#target-selectorhttp://www.findmebyip.com/litmus#target-selectorhttp://www.css3.info/preview/box-shadow/http://emediavitals.com./


29/42



When your brand values are crazy, delicious, insane and fun, you have a license to push

the design envelope a bit.

Thats what Hearsts Seventeen magazine has done with its redesigned website. With a

heavy emphasis on social integration and video, the sites makeover is designed to extendthe magazines Seventeen everywhere strategy. Wherever our girls our, they should be

able to access Seventeen, editor-in-chief Ann Shoket said in an interview.

Social media tools on the site include support for Facebook Open Graph, which enables

visitors to share content with their Facebook friends. The site also integrates technology

from Meebo that allows visitors to connect and share content with friends on any instant-

messaging platform.

Not surprisingly considering its teen-focused content, Seventeen already has an established

presence on social networks. With 200,000+ Facebook fans and 80,000 and counting

Twitter followers, Seventeens readers are very much into not just taking one of the sites

seemingly endless supply of quizzes, but openly sharing the results. In other words, acting

like teenage girls.


iNside the seveNteeN.commaeover

b rob oregaN


30/42



Its the next iteration of social activity: girls interacting with the brand and sharing that

activity with their friends, said Shoket.

Promoting the redesign through Twitter

Seventeen is leveraging its own social presence to promote the redesign. The magazine

launched a scavenger hunt on Twitter, comprising 10 questions that readers can nd the answers

to on Seventeen.com. The rst user who nds the answer to each question and posts on Twitter

will be retweeted by Seventeens editors a huge OMG! moment for a teenager.

In addition, editors posted an hourly reveal on Twitter to highlight new elements of the

site, such as the celebrity news hub and featured videos, in order to drive more trafc back

to the site.

The site itself has been re-architected to be more scannable, with more white space

contributing to a cleaner, less busy design. The architecture emphasizes the single-click

theory in which most of the content should be just one click away, said Ashley Parrish,

content director for Hearsts Women and Teen Networks.

For example, the quiz tool one of the sites most popular sections has been rebuilt

so that as soon as a visitor nishes a quiz, the rst question of the next quiz appears on-

screen. The single-click theory also pertains to the sites large cache of original video, which

has been integrated more contextually with other content.


iNside the seveNteeN.com

maeover n

t

pz n-k y

n w

nn

j n k wy.


31/42



New design elements include handwritten fonts and scratchy graphics that make the

design more spontaneous and fun, Parrish said. The team also borrowed many graphic

elements from the magazine in an effort to better unify the magazine and digital brands.

Keeping an eye on the metrics

Its not all fun and games in Seventeenland. The Web team will keep a close eye on the

metrics to make sure the new design elements are gaining traction. Parrish, who says she

spends the better part of her day poring through Omniture analytics, said the team is

relying heavily on clickmaps to see how users are interacting with the new navigation.

Were nding that because the site is new, visitors are in discovery mode, scrolling through

menus, clicking the dropdowns, she said. What were seeing is good, because we spent so

much time on the architecture to make the content accessible.

Parrish noted several metrics the team will focus on going forward:

Page views Unique visitors

Time spent

Video views those will be huge for us to make sure the new video templates are

working, Parrish said.

Facebook Connect signups

Signups for the Get Advice section (based on Hearsts Answerology platform)



maeover n


32/42



New fans and followers on Facebook and Twitter

Referrals from Facebook and Twitter

The post-launch metrics support the testing the team did during the redesign stage, which

included a series of in-ofce focus groups. I asked Parrish what they could have possibly

learned from showing mockups to a gaggle of high school girls.

Teens wont say, I like the site architecture, said Parrish. But they will tell you, Oh, I

know where to nd quizzes now, thats easy.

Seventeen.coms old homepage:

Seventeen.coms new homepage:



maeover n


33/42




resources for email desigNDesigning an email newsletter is a lot like designing a Web page in 1996: lots of different

browsers and no real standards.

Which, as any Web designer can tell you, makes it difficult to produce consistent

and visually appealing results. Luckily, when it comes to the Internet, the practice of

marketing through email is a well-established industry with many people making their

best practices available.

Here is a collection of our favorite email design tips that should turn any marketer into an

email designer in no time.

Best practices for bulletproof e-mail delivery

Smashing Magazines tips for assuring your email arrives in the inbox and not in the

spam lter. There are a lot of general tips here, but a few design tips, as well, includingwhen to use CSS and which HTML elements are safe.

How to code HTML newsletters

A four-step guide to coding an email template from the ground up. HTML, CSS and best

practices are all covered here.

b seaN blaNda
http://emediavitals.com./http://www.smashingmagazine.com/2007/10/16/best-practices-for-bulletproof-e-mail-delivery/http://www.reachcustomersonline.com/2010/01/23/09.27.00/http://www.reachcustomersonline.com/2010/01/23/09.27.00/http://www.smashingmagazine.com/2007/10/16/best-practices-for-bulletproof-e-mail-delivery/http://emediavitals.com./


34/42



The principles of beautiful HTML email

Make sure you dont forget any important elements with this overview of the building

blocks of an email design such as: the footer, the unsubscribe section, and a plain text

link are all described in detail.

A guide to CSS properties

CSS support for email newsletters is janky at best, but the good folks at Campaign

Monitor have already tested nearly every CSS element in all of the popular email clients

so you dont have to.

The 24-point creative checklist

Before you hit send, run your email through this checklist containing such reminders as

a request to forward to a friend and de-emphasizing the terms and conditions.

If you dont feel like dealing with any of this design stuff, here are some template

collections to borrow from:

30+ free templates from Campaign Monitor

Over 101 HTML email templates from MailChimp


resources for email desigN n
http://emediavitals.com./http://articles.sitepoint.com/article/principles-beautiful-html-emailhttp://www.campaignmonitor.com/css/http://www.smartinsights.com/blog/email-marketing//24-point-creative-checklist-for-b2c-and-b2b-enewsletters/http://www.campaignmonitor.com/templates/http://www.mailchimp.com/resources/html_email_templates/http://www.mailchimp.com/resources/html_email_templates/http://www.campaignmonitor.com/templates/http://www.smartinsights.com/blog/email-marketing//24-point-creative-checklist-for-b2c-and-b2b-enewsletters/http://www.campaignmonitor.com/css/http://articles.sitepoint.com/article/principles-beautiful-html-emailhttp://emediavitals.com./


35/42



Gawker Media sites are in the beta version of a significant redesign. Each redesign

in beta which at present only involves Gawker and Jalopnik features a prominent

headline over a single, dominant image while directly underneath lie three less

prominent stories and a menu to the side. The image-driven placement of a feature

story is a something of a major change from the prevailing philosophy across theGawker Media empire, though in retrospect the Big Board may have been a portent of

things to come. Web media needs to move to TV metaphorwith full-screen imagery

and other content interrupted with full-screen ads, Nick Denton told MediaMemos

Peter Kafka via email. Everything right now is so, um, bitty.

And thats prime online ad real estate. Denton survived his own extraordinarily pessimistic

2009 Internet plan relatively unscathed, though Gawker medias page view bonus system

was, for a bit, temporarily suspended. Executives should be planning now on a decline of

up to 40% in advertising spending during this cycle, Nick said at the time.

The pendulum swings. Gawker Medias rst half revenues in 2010 were up 45%. Still, the

constellation of sites was not entirely immune to the vagaries of the recession. Gawker

Media has slimmed down considerably, down to nine properties from a high of fteen.


gaers media image-driveNredesigN

b roN maNgaguhuNga

bli h l b k i i l i


36/42



But we did manage to focus our energies on our fastest-growing and most

commercially promising properties which is one of the reasons weve managed to

buck the advertising downturn, Denton blogged last month. And weve resumed

hiring one of the very few media companies to do so this year. Gawker Media is

presently seeking a full-time TV booker.

Even more than the TV metaphor, however, it appears that Gawker Media is looking

to mobile device optimization. When asked by eMedia Vitals via email to what

degree that Gawker Medias redesign was influenced by the iPad, Denton replied,

interestingly, Oh, quite a lot, I think. Have you looked at Reeder on the iPad?

Reeder, which has features image caching, is one of the best feed reading options

available for the iPad and iPhone. The Google Reader client has an intuitive interface,

a remarkably fast subscription syncing process and enjoys good word of mouth

fromthe tech blogs and Apple fan sites alike. Design-wise Reeder, where you slide to

right to toggle read/unread items and slide to left to toggle starred/unstarred items,

could conceivably work well with Gawkers Medias new redesign. Reeder also just

added image zooming for the iPad. Finally, Reeders social sharing options Twitter,Instapaper, Google Reader Share, Delicious are also clearly attractive to a place like

Gawker Media.


gaers media image-driveN

redesigN n

P bli h Pl b k Di i l D i


37/42



As magazine and newspaper publishers put more emphasis on their Web properties,

cooperation between editorial and IT has become as important as that between

editorial and design. When a site redesign or Web development project looms, this

alliance can create an entirely different set of expectations in terms of lead time,

capabilities and execution for each team.

From an editorial perspective, a successful project requires an abundance of

collaboration and communication. The best-laid project plan will crumble without the

cooperation and insight of all parties involved, says Jamie Pallot, editorial director at

Cond Nast Digital.

Whether we are entirely rebuilding a site, like Style.com in 2009, or just adding a newpiece of functionality, like an interactive shopping list on Epicurious.com, the process

involves every stakeholder weighing in, says Pallot. [Digital] is the most collaborative

of all media, and you need to get input from everyone editorial, design, project

management, marketing, tech, sales for an initiative to fly.


editorial, it aNd desigN:caNt the all ust get aloNg?

b Naomi reiter

P bli h Pl b k Di it l D i


38/42



Everyone in the same room

Kevin McKeefery, Web editor of marketing trade site DMNews, agrees that the path

to a successful project begins with getting everyone in the same room at the projects

inception and developing a plan that affords the right lead time to accommodate all

teams. If the IT team needs three months to do the development work, for example,

a one-month deadline wont succeed. Reasonable expectations about timing are the

foundation of good cross-team collaboration.

Being transparent about requirements and limitations from the start is also essential,according to Pallot.

The more specific the information, the easier it is to design something that really

works, he says. Thats why when Pallot asks a designer to create the shell of a possible

website, he also asks editorial to contribute.

Instead of just using dummy copy in a sample story, have editorial come up with an

actual story that might run in this section once it was live, he advises. Knowing howlong real headlines and decks will be, and how many words a typical story will run, is

hugely helpful in getting the details right.

Another factor to consider: frequency of content. How often a page turns over is a

major factor when considering the layout and the level of maintenance required,

Pallot says.


editorial, it aNd desigN:

caNt the all ust get aloNg? n



39/42



Talk is cheap, but important

Collaboration without consensus is little more than organized chaos. Thats why good

communication is also critical in order to take everyones ideas, prioritize them and

ensure that all teams remain on track with a clear common vision of the end goal: the

success of the website.

Make sure everyone on the team buys into the goals, says Nancy Griffin, director

of content for the Questex Beauty Group, whose brands include American Salon,

American Spa, and the International Esthetics, Cosmetics and Spa Conferences. Forexample, if organic search is important, dont let your designer design a Flash splash

page that will not be indexed by the search engines.

Pallot adds that effective communication comes from good project management. An

idea can come from anywhere, but executing well on that idea means extracting a

lot of information from a lot of different parties, and communicating it briskly and

accurately, he says. Do we think readers would engage with it? What is the level of

effort to build it? How easy is it to market? How SEO-friendly is it? Can we piggy-backon existing in-house technology, or buy third-party software off the shelf? Does the

sales team think they could sell it?

Asking members of different departments to check in directly with each other and

keep lines of communication open as a project develops may seem a given, but

ensuring that this communication is happening can be the difference between a

successful, on-time project and one that goes off the rails.




...

nn

pj nn.



40/42



One step short of telepathy

When Cond Nast Digital begins a project to build a new iPhone app, for example,

the edit, design, project management and tech teams will meet regularly to review

wireframes and discuss issues such as how intuitive various features are, the level of

effort required to build certain kinds of functionality, or Apples preferred standards,

says Pallot. The more a designer can understand these issues from a developers point

of view, and vice versa, the better the final product will be, he says. So you could say

our ultimate goal is telepathy.

DMNews executive editor Carol Krol includes the magazines art director at weekly

editorial meetings so she can hear the ideas being pitched and develop design ideas

accordingly in order to be prepared with mockups. With multimedia, its important to

put processes into motion that enable communication to take place since such a variety

of talent must collaborate, she says.

Because the teams are physically spread out across three floors, its easy to let a day

go by without checking a shared document, says McKeefery. Between meetings, emailscopying anyone involved in a project and chat services like Google Talk keep all teams

on the same page.

While open collaboration and clear communication are the goal in any cross-team

project, disagreements are inevitable. Any redesign project must have clearly defined

decision-making authority while leaving the door open for discourse among teams.






41/42

Publisher s Playbook: Digital Design


In the end, I almost always have a desk-side chat with our editor-in-chief, art director

or events manager to sort out exactly whats needed for a particular project, says

McKeefery. Group-think meetings with action items are great to keep everyone on

the same page, but theres no substitute for in-person, one-on-one conversations to

sort out any ambiguities or potential roadblocks.

The final critical factor for a successful redesign is articulating a clear objective and

sticking to it throughout the project.

Great Web design is not just about aesthetic inspirationit also involves a lot of

detailed, painstaking planning in the initial, architectural phase, says Pallot. No

matter how great a designer is, its hard for them to do great work if you keep moving

the goalposts on them.






42/42

Publisher s Playbook: Digital Design

MyFontsThe largest collection of fonts ever assembled for on-line delivery

http://new.myfonts.com/

History of desktop publishing and digital designhttp://www.designtalkboard.com/design-articles/desktoppublishing.php

5 Useful Photoshop Effectshttp://www.graphic-design.com/photoshop/tutorial/5-useful-photoshop-effects

Pattern Taphttp://patterntap.com/collections/

Web Design Concepts for Non-Web Designershttp://choppingblock.com/presentations/201006_HOW_WebDesign/#slide1

digital desigN eb resources
http://new.myfonts.com/http://www.designtalkboard.com/design-articles/desktoppublishing.phphttp://www.graphic-design.com/photoshop/tutorial/5-useful-photoshop-effectshttp://patterntap.com/collections/http://choppingblock.com/presentations/201006_HOW_WebDesign/#slide1http://guides.seomoz.org/beginners-guide-to-search-engine-optimizationhttp://choppingblock.com/presentations/201006_HOW_WebDesign/#slide1http://patterntap.com/collections/http://www.graphic-design.com/photoshop/tutorial/5-useful-photoshop-effectshttp://www.designtalkboard.com/design-articles/desktoppublishing.phphttp://new.myfonts.com/

Date post:	06-Apr-2018
Category:	Documents
Upload:	emediavitalseditors
View:	228 times
Download:	0 times

Digdesign Playbook

Documents