8/3/2019 Digdesign Playbook
1/42
Publishers Playbook
DIGITAL DESIGN
Connecting the elements for outstanding
Nx
8/3/2019 Digdesign Playbook
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./8/3/2019 Digdesign Playbook
3/42
Publishers Playbook: Digital Design
3 / 42Sign up for our newsletters at www.emediavitals.com/register
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./8/3/2019 Digdesign Playbook
4/42
Publishers Playbook: Digital Design
4 / 42Sign up for our newsletters at www.emediavitals.com/register
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
http://emediavitals.com./http://emediavitals.com./8/3/2019 Digdesign Playbook
5/42
Publishers Playbook: Digital Design
5 / 42Sign up for our newsletters at www.emediavitals.com/register
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
http://emediavitals.com./http://emediavitals.com./8/3/2019 Digdesign Playbook
6/42
Publishers Playbook: Digital Design
6 / 42Sign up for our newsletters at www.emediavitals.com/register
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
http://emediavitals.com./http://emediavitals.com./8/3/2019 Digdesign Playbook
7/42
Publishers Playbook: Digital Design
7 / 42Sign up for our newsletters at www.emediavitals.com/register
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
tools & techNologies
aN html5 faQ for Publishersb rob oregaN
http://emediavitals.com./http://emediavitals.com./8/3/2019 Digdesign Playbook
8/42
Publishers Playbook: Digital Design
8 / 42Sign up for our newsletters at www.emediavitals.com/register
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
tools & techNologies
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./8/3/2019 Digdesign Playbook
9/42
Publishers Playbook: Digital Design
9 / 42Sign up for our newsletters at www.emediavitals.com/register
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
tools & techNologies
aN html5 faQ for Publishers n
pn
w qn
p
kn xn
nn
p p.
http://emediavitals.com./http://emediavitals.com./8/3/2019 Digdesign Playbook
10/42
Publishers Playbook: Digital Design
10 / 42Sign up for our newsletters at www.emediavitals.com/register
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.
tools & techNologies
aN html5 faQ for Publishers n
http://emediavitals.com./http://emediavitals.com./8/3/2019 Digdesign Playbook
11/42
Publishers Playbook: Digital Design
11 / 42Sign up for our newsletters at www.emediavitals.com/register
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.
tools & techNologies
are ou read for html5?b seaN blaNda
http://emediavitals.com./http://emediavitals.com./8/3/2019 Digdesign Playbook
12/42
Publishers Playbook: Digital Design
12 / 42Sign up for our newsletters at www.emediavitals.com/register
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.
tools & techNologies
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./8/3/2019 Digdesign Playbook
13/42
Publishers Playbook: Digital Design
13 / 42Sign up for our newsletters at www.emediavitals.com/register
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.
tools & techNologies
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./8/3/2019 Digdesign Playbook
14/42
Publishers Playbook: Digital Design
14 / 42Sign up for our newsletters at www.emediavitals.com/register
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
tools & techNologies
are ou read for html5? n
http://emediavitals.com./http://emediavitals.com./8/3/2019 Digdesign Playbook
15/42
Publishers Playbook: Digital Design
15 / 42Sign up for our newsletters at www.emediavitals.com/register
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.
tools & techNologies
are ou read for html5? n
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./8/3/2019 Digdesign Playbook
16/42
Publishers Playbook: Digital Design
16 / 42Sign up for our newsletters at www.emediavitals.com/register
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.
tools & techNologies
are ou read for html5? n
http://emediavitals.com./http://maxheapsize.com/static/html5geolocationdemo.htmlhttp://html5demos.com/videohttp://html5demos.com/videohttp://maxheapsize.com/static/html5geolocationdemo.htmlhttp://emediavitals.com./8/3/2019 Digdesign Playbook
17/42
Publishers Playbook: Digital Design
17 / 42Sign up for our newsletters at www.emediavitals.com/register
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.
tools & techNologies
are ou read for html5? n
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./8/3/2019 Digdesign Playbook
18/42
Publishers Playbook: Digital Design
18 / 42Sign up for our newsletters at www.emediavitals.com/register
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.
tools & techNologies
are ou read for html5? n
http://emediavitals.com./http://emediavitals.com./8/3/2019 Digdesign Playbook
19/42
Publishers Playbook: Digital Design
19 / 42Sign up for our newsletters at www.emediavitals.com/register
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.
tools & techNologies
are ou read for html5? n
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./8/3/2019 Digdesign Playbook
20/42
Publishers Playbook: Digital Design
20 / 42Sign up for our newsletters at www.emediavitals.com/register
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.
tools & techNologies
Ne eb foNts Promisecross-Platform suPPort
b rob oregaN
http://emediavitals.com./http://emediavitals.com./8/3/2019 Digdesign Playbook
21/42
Publishers Playbook: Digital Design
21 / 42Sign up for our newsletters at www.emediavitals.com/register
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.
http://emediavitals.com./http://emediavitals.com./8/3/2019 Digdesign Playbook
22/42
Publishers Playbook: Digital Design
22 / 42Sign up for our newsletters at www.emediavitals.com/register
tools & techNologies:
Ne eb foNts Promise
cross-Platform suPPort n
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.
http://emediavitals.com./http://emediavitals.com./8/3/2019 Digdesign Playbook
23/42
Publishers Playbook: Digital Design
23 / 42Sign up for our newsletters at www.emediavitals.com/register
tools & techNologies:
Ne eb foNts Promise
cross-Platform suPPort n
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.
http://emediavitals.com./http://emediavitals.com./8/3/2019 Digdesign Playbook
24/42
Publishers Playbook: Digital Design
24 / 42Sign up for our newsletters at www.emediavitals.com/register
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:
tools & techNologies
ho to get aN iPhoNe favicoNb seaN blaNda
http://emediavitals.com./http://emediavitals.com./8/3/2019 Digdesign Playbook
25/42
Publishers Playbook: Digital Design
25 / 42Sign up for our newsletters at www.emediavitals.com/register
tools & techNologies
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.
http://emediavitals.com./http://emediavitals.com./8/3/2019 Digdesign Playbook
26/42
Publishers Playbook: Digital Design
26 / 42Sign up for our newsletters at www.emediavitals.com/register
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.
tools & techNologies
four css3 features that illmae our desigNer haPP
b seaN blaNda
http://emediavitals.com./http://emediavitals.com./8/3/2019 Digdesign Playbook
27/42
Publishers Playbook: Digital Design
27 / 42Sign up for our newsletters at www.emediavitals.com/register
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.
tools & techNologies
four css3 features that ill
mae our desigNer haPP n
http://emediavitals.com./http://emediavitals.com./8/3/2019 Digdesign Playbook
28/42
Publishers Playbook: Digital Design
28 / 42Sign up for our newsletters at www.emediavitals.com/register
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.
tools & techNologies
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./8/3/2019 Digdesign Playbook
29/42
Publishers Playbook: Digital Design
29 / 42Sign up for our newsletters at www.emediavitals.com/register
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.
case studies/best Practices
iNside the seveNteeN.commaeover
b rob oregaN
http://emediavitals.com./http://emediavitals.com./8/3/2019 Digdesign Playbook
30/42
Publishers Playbook: Digital Design
30 / 42Sign up for our newsletters at www.emediavitals.com/register
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.
case studies/best Practices
iNside the seveNteeN.com
maeover n
t
pz n-k y
n w
nn
j n k wy.
http://emediavitals.com./http://emediavitals.com./8/3/2019 Digdesign Playbook
31/42
Publishers Playbook: Digital Design
31 / 42Sign up for our newsletters at www.emediavitals.com/register
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)
case studies/best Practices
iNside the seveNteeN.com
maeover n
http://emediavitals.com./http://emediavitals.com./8/3/2019 Digdesign Playbook
32/42
Publishers Playbook: Digital Design
32 / 42Sign up for our newsletters at www.emediavitals.com/register
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:
case studies/best Practices
iNside the seveNteeN.com
maeover n
http://emediavitals.com./http://emediavitals.com./8/3/2019 Digdesign Playbook
33/42
Publishers Playbook: Digital Design
33 / 42Sign up for our newsletters at www.emediavitals.com/register
case studies/best Practices
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./8/3/2019 Digdesign Playbook
34/42
Publishers Playbook: Digital Design
34 / 42Sign up for our newsletters at www.emediavitals.com/register
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
case studies/best Practices
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./8/3/2019 Digdesign Playbook
35/42
Publishers Playbook: Digital Design
35 / 42Sign up for our newsletters at www.emediavitals.com/register
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.
case studies/best Practices
gaers media image-driveNredesigN
b roN maNgaguhuNga
bli h l b k i i l i
http://emediavitals.com./http://emediavitals.com./8/3/2019 Digdesign Playbook
36/42
Publishers Playbook: Digital Design
36 / 42Sign up for our newsletters at www.emediavitals.com/register
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.
case studies/best Practices
gaers media image-driveN
redesigN n
P bli h Pl b k Di i l D i
http://emediavitals.com./http://emediavitals.com./8/3/2019 Digdesign Playbook
37/42
Publishers Playbook: Digital Design
37 / 42Sign up for our newsletters at www.emediavitals.com/register
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.
case studies/best Practices
editorial, it aNd desigN:caNt the all ust get aloNg?
b Naomi reiter
P bli h Pl b k Di it l D i
http://emediavitals.com./http://emediavitals.com./8/3/2019 Digdesign Playbook
38/42
Publishers Playbook: Digital Design
38 / 42Sign up for our newsletters at www.emediavitals.com/register
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.
case studies/best Practices
editorial, it aNd desigN:
caNt the all ust get aloNg? n
P bli h Pl b k Di it l D i
http://emediavitals.com./http://emediavitals.com./8/3/2019 Digdesign Playbook
39/42
Publishers Playbook: Digital Design
39 / 42Sign up for our newsletters at www.emediavitals.com/register
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.
case studies/best Practices
editorial, it aNd desigN:
caNt the all ust get aloNg? n
...
nn
pj nn.
P bli h Pl b k Di it l D i
http://emediavitals.com./http://emediavitals.com./8/3/2019 Digdesign Playbook
40/42
Publishers Playbook: Digital Design
40 / 42Sign up for our newsletters at www.emediavitals.com/register
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.
case studies/best Practices
editorial, it aNd desigN:
caNt the all ust get aloNg? n
Publishers Playbook: Digital Design
http://emediavitals.com./http://emediavitals.com./8/3/2019 Digdesign Playbook
41/42
Publisher s Playbook: Digital Design
41 / 42Sign up for our newsletters at www.emediavitals.com/register
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.
case studies/best Practices
editorial, it aNd desigN:
caNt the all ust get aloNg? n
Publishers Playbook: Digital Design
http://emediavitals.com./http://emediavitals.com./8/3/2019 Digdesign Playbook
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/