Recommended
More Related Content
Similar to Publish Once, Brand Everywhere
Similar to Publish Once, Brand Everywhere (20)
Recently uploaded
Recently uploaded (20)
Publish Once, Brand Everywhere
- 1. Publish Once, Brand Everywhere. DEVELOPING TOOLS FOR RESPONSIVEDESIGN
- 3. YEARS
- 4. DISTINGUISH YOUR BRAND ONLINE IMPROVE SCREEN READABILITY 2YEARS
- 5. thedailybeast.combostonglobe.com Miller Headline Bold Benton Sans TitlingGothicCompressed TITLING GOTHIC CONDENSED
- 6. hollywoodreporter.comsalon.com VONNESS COMPRESSED - MEDIUM BENTONSANSEXTRACOMPRESSED Rocky Vonness Compressed - Bold
- 8. complexfields.orgediblevineyard.com Ibis RE, Benton Sans RE, Bureau Grot Benton Sans Poynter Serif RE
- 10. WHY CARE ABOUT ON-SCREEN READING?
- 11. “Most printed daily newspapers will be gone in about five years.” JEFFERY COLE, Director, USC School for Communication and Journalism, Jan. 2012
- 12. 70% US households with broadband access: (and we're ranked #14 in the world!) OECD, Broadband Portal Press Release, Dec. 2011
- 13. Mobile traffic now accounts for of all global Internet traffic By 2016, almost of connected devices will be a smartphone or a tablet 12% 75% CISCO VISUAL NETWORKING INDEX, Global Mobile Data Traffic Forecast: 2011 to 2016, Feb. 2012
- 14. PEW RESEARCH, Future of Mobile News, Oct. 2012 of all mobile device owners spend an average of five hours per week reading news electronically 63% of tablet users and of smartphone owners prefer reading news on their devices over printed newspapers 60% 50%
- 15. LET’SBUILDAPPS!
- 16. Where are readers really coming from?
- 17. SOCIAL MEDIA REFERRALS WEB TRAFFIC 9% PEW RESEARCH, State of the News Media 2012
- 18. “People do like CDs. They continue to buy about 900 million CDs every year in this country ... They’re going to continue to do what they’ve done.” PAUL VIDICH, EVP, Warner Music, June 2000
- 19. Vinyl 8-Track Cassettes CDs Videos $63 $26 $71 1975 1985 1995 2005 Digital US RECORDED MUSIC REVENUE: Dollars Per Capita RIAA, Analysis by Michael DeGusta, Business Insider, Feb. 2011
- 22. MYNEWS
- 24. THE STORY PAGE IS THE NEW HOMEPAGE
- 25. IT’S A PROBLEM WHEN YOUR STORY PAGES LOOK LIKE SHIT ON MOBILE
- 26. FROM FLIPBOARD TO TABLET...
- 27. FROM FACEBOOK TO SMARTPHONE...
- 28. FROM TABLET TO SMARTPHONE...
- 30. WHAT DO NEWSPAPERS NEED? BRAND EVERYWHERE 1. 2.
- 31. (TEMPLATES)
- 32. Brand • colors • logo • type and styling Content • published content • web features Human Resources, skills • CMS, workflow • budget • ad sales UNIQUE GENERIC General Design • legibility Responsive Patterns • nav patterns • layout patterns Must-haves • ad-serving techniques • social media integration • optimized loading time • range supported platorms SPECTRUM OF VARIABILITY
- 35. THINK RESPONSIVE
- 36. MODULAR Visual hierarchy Flexible, customizable Triglyphs = 1 module Metopes = 1.5 modules
- 39. PARAMETRIC
- 40. PARAMETRIC DESIGN AS A MODEL FOR THE DESIGN PROCESS
- 41. DO IT WITH SASS THE DAILY TIMES Static 1 Static 2 Static 3 SECTION Last updated: Month, 00 0:00 pm Search LinkedIn Performance Impresses Investors, Despite Hiccups Local Region Global OpinionBusiness Lifestyle MoreNation Subsection Subsection Subsection Subsection Subsection The résumé/job site has never really been cool. But the disastrous Facebook IPO has Silicon Valley reappraising the smaller social network—even after this week’s missteps. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In quis leo risus, sit amet eleifend libero. Nullam bibendum est at velit rhoncus in blandit nisl fermen- tum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam a erat quis libero dignissim cursus. Vestibu- lum nec nibh metus. Etiam ac ligula at urna feugiat lobortis vel nec nisl. Phasellus non orci diam, ac fringilla augue. Maecenas magna nunc, pulvinar vel porta ac, rhoncus a nisi. Donec in odio metus. Proin sit amet enim felis, eget facilisis mi. Proin elit eros, pulvinar nec placerat id, varius sed leo. Nulla ullamcorper lacinia nibh et bibendum. Nam sed metus porttitor quam venenatis faucibus non nec velit. Suspendisse dictum sagittis ipsum, in tempor leo ultricies vel. Integer eu conse- quat dolor. Ut tincidunt dapibus nisl, ultrices fermentum neque pellentesque posuere. In hendrerit, quam pulvinar molestie suscipit, tortor lacus Option 1 Option 2 Option 3 Option 4 AD SIDEBAR $blue: rgb(57,89,102); $lightBlue: lighten($blue, 80%); $gray: lighten(black, 50%); .dek { @include serif(default); color: $gray; } @mixin serif($style) { @if $style == default { font-family: “Escrow Text”; } @else if $style == display { font-family == “Escrow”; } }
- 42. IAKOV CHERNIKHOV, The Construction of Machine Forms, 1931. “In order to recognize, study and understand our examples more easily we need to classify them.”
- 43. GENERIC DATA LISTINGS Calendar... Classifieds... Local guides... STORIES Category Hed Dek Summary Byline Body Pullquote Related content Images Quote Charge CONTRIBUTORS Name Bio Headshot Links MULTIMEDIA Title of series Summary Byline Images Image Credit Caption Image Credit Caption
- 44. GENERIC PAGES STORY Xxxxx Xxxxxx STATIC Xxxxx Xxxxxx SUBSECTION Xxxxx Xxxxxx > Xxxxx SECTION Xxxxx Xxxxxx INDEX MASTER ELEMENTS: LOGO SEARCH NAV STATIC LINKS FOOTER ADS
- 45. GENERIC CONTENT MODULES Most read Ads • banner • column Site map • by section • by topic GLOBAL Opinion/Blogs • featured • list Listings Multimedia Stocks Email list By section • featured 1 • featured 2 • list Featured • must-reads • most read • most emailed By subsection • featured 1 • featured 2 • list MULTI-ENTRY Story • horiz. lede image • ver. lede image • slideshow, video • byline, date, comments # • dek • body • pullquote • comments • related More in section SINGLE-ENTRY More by author Related
- 46. SECTION#PAGEHEADER One-level w/ dropdown Sub menu w/o dropdown Mega menu • full-width • partial-width • Various layouts Sidebar nav Sidebar sub nav NAVIGATION Index (full-size) other (condensed) PAGE Logo Search Weather Traffic Breaking news Teasers w/ images Ads INTEGRATE WITH...
- 47. The possiblilties are many but not infinite
- 48. non-linear path “It’s a problem when Your story pages look like shit on mobile” BUSINESS DESIGN IMPLEMENTATION
- 49. WHAT DO NEWSPAPERS NEED? BRAND EVERYWHERE 1. 2.
- 50. THANK YOU! Paley Dreier: paley@webtype.com Lauren Dreier: lauren@pandlmedia.com
Editor's Notes
- Hi everyone\nmy name is paley dreier, this is lauren dreier (and yes, we are related)\nwe’re here to talk to you about our journey through developing responsive websites for newspapers\n
- ...but first, who the hell are we?\nmaybe you don’t know us, but you’re probably familiar with where we’re from:\nfont bureau and webtype\n
- many of you have relied on font bureau typography for over 20 years to make your papers awesome.\nour typography and custom typefaces are used by publications, brands, advertisers\nand designers large and small all over the world.\nso that’s the font bureau... what about webtype?\n
- a couple years ago sam berlow talked to you about Webtype\nand how it would change the way the web looked and read.\nwell, as the name implies, it brings type... to the web!\nso, what does Webtype actually help you do?\nit allows you to distinguish your brand online by bringing your analog identity to the web\nand it dramatically improves readability on screens.\nso, let’s take a quick look at some examples of Webtype in use\n\n
- \n
- you may have noticed in these examples Webtype being used mostly as a display font.\nthis is a huge improvement for the web as it is--these are only a few examples\nfrom the thousands of live sites using Webtype.\nbut, there’s more to Webtype than just providing great-looking display fonts...\n\n
- Just like in print, we need on-screen fonts to look great large and work well small.\nFont Bureau has specialized in doing this for print but designing typefaces\nfor on-screen readability at small sizes presented a new set of challenges.\nA couple months ago Webtype released the Reading Edge or RE series of fonts.\nThe RE series was designed from the ground up to meet these challenges.\nFor example,\n- the glyph features have been exaggerated\n- the apertures have been enlarged\n- the contrast has been lowered\n- the forms have been widened\n- the x heights have been increased\n- and the ascenders and descenders have been shortened\nSo let’s take a look at the RE series in action...\n
- \n
- \n
- this begs the question... why do we care about on-screen reading?\nwell, this horse has already been beaten to a bloody pulp, but i think it’s worth beating again,especially in the context of what lauren is going to talk about, so....\n
- we’ve all seen the doomsday statistics and quotes about print.\nand I doubt there are any newspapers publishers that haven’t stayed\nawake at night thinking about this or wondering if their solution\nis adequate.\n\n
- broadband access is as basic a need as water, electricity and heat...\n
- yet here’s where it gets really interesting...\nwhat we’re seeing is a fundamental shift with how people access content.\n\n
- clearly, there are a ton of people who love their phones and pads, but what are \nthey using them for?\nwell... according to PEW\n-63 % of all mobile device owners spend an average of five hours every week keeping up with the news electronically.\nand 60 % of tablet users and 50 percent of smartphone owners consider their experience consuming news on their mobile device to be better than compared to a printed newspaper.\n\n\n
- so if i’m a newspaper publisher, what should i do?\ni know that...\n- newspapers in their printed format are dying\n- more and more people are online\n- mobile internet traffic will dwarf desktop internet traffic\n- people love reading news on their phones and tablets\n...so gonna build an some app, right????\nbut... \nbefore i start coding, let’s think about this\n
- where are the readers really coming from??\nhere’s what i think: they’re coming from social networks\n25% of all online time is spent on social media.\nthe first thing many of us do in the morning is\nreach for our phone or tablet to check facebook or twitter...\nsay one of our friends has posted a link to an interesting story\nwe tap that link...what happens then?\nyour phone or tablet opens the story in a BROWSER WINDOW -- NOT A DEDICATED APP!\n\n
- sound like a familiar story?\nbut, the stats actually say that type of traffic is just a blip on the radar\n[STAT]\nso, should we just go back to our plan of building apps?\n
- not so fast...\nthis disruptive shift has happened before in other media industries.\ntake the music industry; this EVP wasn’t the only music exec who\nbrushed off digital media distribution\n\n
- well, in 2000 thanks primarily to CD sales, the US music industry peaked at $71 spent per capita,\ntoday, they’re not selling much of anything and per capita spending has tanked to $26\nthey refused to believe that people wanted singles or digital copies of their music.\nthe companies were tied to an antiquated distribution model to survive and thought consumers\ngenuinely valued the full-album listening experience.\n\n
- have seen this youtube video? a dad gives his 1 year old daughter a magazine to look at...\nlet’s watch what happens http://www.youtube.com/watch?v=G9RIXzYSkoo&feature=related\nwhat does this tell us? babies are still really cute...\nbut, more importantly, it shows how fundamentally different\ntheir conception of being online will be from ours.\nmany will never own a PC.\ntheir version of the internet will be primarily experienced through social media on\nmobile devices.\nthis isn’t to say that some won’t buy full albums or seek out professionally\ncurated content or be influenced by their parent’s nostalgia, but most will be driven\nby social.\n\n\n
- the way that people get to and read content has changed forever.\nFacebook friends and Twitter lists are the new aggregators and curators of news.\nwe are making our own newspapers by virtue of our social network\n\n
- but others have already thought about this.\nthere are a bunch of social news reader apps out there.\nyou can pull in news based on your facebook friends and twitter feeds and incorporate your own tastes and interests.\nsome of them are doing pretty well...\n[stat]\n\n
- but let’s circle back to why we’re here. \nwhat are the implications for these shifting consumption patterns for designers?\nthey’re telling us that the story page is the new homepage\nwhen your readers come in sideways, their first interaction with your brand is on the story page\nso, we can boil this down to a single, key takeaway.\nhere it is...\nhttp://www.niemanlab.org/2012/08/coming-in-the-side-door-the-value-of-homepages-is-shifting-from-traffic-driver-to-brand/\n
- ‘it’s a problem when your story pages look like shit on a tablet’\nnow, if you only remember one thing from today, i want you to remember this.\nwe know more people are reading on mobile devices.\nwe know various forms of social media are driving sideways traffic to story pages,\nso what’s the most important thing to remember from today?\n‘it’s a problem when your story pages look like shit on a tablet’\nhere are some examples of story pages that leave something to be desired.\n
- what constitutes looking like shit?\n
- \n
- what constitutes looking like shit?\n
- what constitutes looking like shit?\n
- so, this got us thinking:\nwhat is it that newspapers need to address these shifts and trends?\nwell, they need: \n1) consistent branding across all media, both print and digital, in this transition phase\n2) an optimized content presentation that’s both readable and well-designed no matter the platform\n\nreally what it comes down to is making your shit look good in weird and unexpected places.\nso, lauren is going to talk to you about making your shit look good\n\nLAUREN\nTwo-years ago I started researching RWD as a means to address the ‘everywhere’ part of this problem\n\nRWD had just emerged, offering a technique for web designers to design for multiple platforms using one set of familiar code.\n\nat about the same time, WebType launched, aiming to address the first part of the problem: \nhow can we bring publications print-quality branding to the web and beyond?\n\n
- enter: Voldemort... and the design tool that shall not be named\n\nDesigners these days are sometimes scared of these kinds of tools because\nthey imply that design can come from a can -- not only are they slightly\ndemoralizing but they could jeopardize your design job.\n\nWell, not all templates are created equal. \n\nThere are many aspects of editorial design\nthat are not unique -- and actually quite laborious. \nTemplates can alleviate some of the more mundane and complicated tasks involved in \nsetting up a robust framework for design -- both print and digital.\n\nIn newspaper design, a brand, whether gorgeously conceptualized\nand executed or not, is a unique entity. The brand, along with the\ncontent that the brand stands for, is the fingerprint of the publication.\n
- so what emerges when we consider the real role of a template\nfor a publication is what I’ll call a spectrum of variability. \n\neach publication has a set of unique identifying characteristics\nthat make up it’s brand. \n\nAt the other end of the spectrum there are what us\nprogrammers call generic qualities. These are shared\namong all publications. \n
- So what some might call an evil template\nwe are calling a modular, parametric framework that intends to lighten the load\nof the task at hand and make it easier for designers to do their jobs\n\nFor the web, we’ll add a word: responsive --\nwhich all together, makes it easier for newspapers to have their stuff look good on \nmobile devices\n\nso, what does responsive modular, parametric framework mean?\n
- Many of you are already familiar with RWD and what it means in terms of \ndesigning websites for multiple platforms and devices. \n\nThere’s a lot of discussion about Responsive approaches vs. \ndeveloping a dedicated mobile site plus a desktop site\n\nWe feel that there ARE some advantages and uses for dedicated mobile sites -- and maybe even some techniques to borrow and integrate into RWD as the world (and web standards) adjust to the fluid web\n\nbut For Newspapers, specifically, we feel that RWD is necessary to address the gray areas \nin tablet land -- where there’s a new device coming out every week with a new screen size \nand resolution. We’re not too far away from the time when we’ll need to use @media glasses \nto style headlines that blink across those stylish google glasses.\n
- so next in our framework definition:\n\nmodular.\n\nModularity should not be a new term for any designer as this stuff has \nbeen around for a long time:\n\nhere’s a classic Vitruvian example of a frieze on the Parthenon. you’ll see that There’s\nan agreement in size and proportion to the parts of a design relative to the whole,\nusing a standard element in the design as a unit of measure\nfor these proportions.\n\nAnother example here is the Japanese Tatami mat, which \nillustrates how modular systems not only imply a visual\nhierarchy but also make the system flexible and interchangeable \n
- so how does this translate to a responsive website?\n\na modular web template enables a designer to move parts around \nand add and subtract parts in a way that won’t\ndisrupt the placement of the rest of the elements on the page -- this\nis dealing mostly with physical size -- fitting elements into other elements\nand adjusting the order and hierarchy. Modular or grid systems always\nhelp bring order to what can often become busy layouts, esp. for\nnewspapers, but it’s difficult to guarantee that the page is going to look\ngood once it’s customized -- but I’ll get to that in a second.\n\nagain, none of this stuff is new to web design - the 950px grid has \nbeen huge and continues to dominate most of what we see today.\nOur idea is to set column widths and assign blocks of content to those\ncolumns and design how they respond in changing screen widths\n
- you’ll see here how that happens. \n\nblocks F and G have moved below the main content in the tablet width\n\nand on the smartphone, the ad has changed and the rest of the right sidebar, B & C,\nhas moved below F and G.\n
- so back to modular parametric framework\n\nwhat is parametric?\n\nthis example is from D’arcy Thompson’s work, On growth and Form from\npublished in 1917 \n\nHere he shows that the form of some fish can be \nderived via simple mathematical translations\n\nParametric systems work the same way: \none defines certain set of parameters in a system and also defines relationships between the parameters.\nthen you can assign and reassign values to select params and watch the system change based on the\nlimitations defined in the relationships\n\n\n
- There are a lot of ideas about the design process out there..\nhere’s one that’s stuck with me\nIt’s that designing is a non-linear activity. \nWhat parametric design allows us to do is to consider all of the variables of the design as a \nconstellation of issues with certain limitations. \n\nso ‘designing’ becomes the act of going around and adjusting variables, seeing things change,\nadjusting the system, adjusting variables, and so on, in a circular manner,\neventually working towards a successful prototype.\n\nthe 3d design world (maybe because there is a whole other dimension to deal\nwith) has caught on to this concept and over the last few years have developed some really amazing parametric software\nwhich have all made a huge impact in the Arch., engineering & product design worlds.\n
- Thankfully, in the front-end\nweb dev. world, we now have \nsomething called SASS.\nAnd I promised Sam Berlow\nthat I wouldn’t talk about code but\ni really can’t help it here because this\nis kind of key to what we’ve been \nworking on. \n\nSass is a language like CSS\nbut adds the ability to create \nvariables and define parametric\n relationships, among many other\nawesome things.\n\n{show slide}\ncluster of styles with a control directive\neither give you a display serif font or text serif font\n\nSo without getting too technical,\nSASS is the engine that ultimately\nmakes the templates easy to change\n(accommodating the ‘unique’ end of the spectrum of variability)\ninstead of filtering thru thousands of lines of\nCSS and making tedious, error-prone changes\nall over the place, now you can change\none variable and effectively have a completely \ndifferent-looking page\n
- So, we know that we our solution needs to be modular\nand it needs to be parametric, but how do we begin designing?\n\nlooked at 100’s of newspaper websites,\nlarge and small, with the intention that by looking\nspecifically at the qualities and patterns\npresent in exiting sites on all platforms, as they \nhave developed organically, \nand classify them that we can better understand the task\nat hand\n
- after researching existing sites,\n\nwe knew that we needed to assume some sort of data structure that would \ntell us what kind of content are we dealing with and how to design for it.\n
- next,\n\nassuming that the website is operating with some sort of data-driven CMS,\nwhat are the generic pages that would need to be designed?\n\nalso,\n\nwhat elements appear on those pages over and over again\n\n{point}\n
- and then, how is content from the CMS\ndisplayed on those pages? \n\nHere is a map of the typical types of content shown on newspaper sites\n\nIn development, each instance of the content is a database query and each query becomes\nwhat we’re calling a module, which can then be clustered in various \narrangements, with results looping in different ways.\n\nwhen you start to group those modules\nyou get sections or clusters of content\n
- an example of a cluster of modules is the page header.\nthis is probably the most important part of any page \n\n-- yes, as paley told us, the story is important. but we also need to be\nable to keep readers on the site after they access the story\nand we need to provide a strong but not intrusive\nbrand image with a logo and navigation. \n\nit’s also the trickiest to design for Responsive because this is the website’s UI -- \nand the use is changing across the various media.what might be easy to click in a browser\ncould be impossible to touch on a kindle. then there’s\nJS, and no-JS environments ... story page vs. index page, \nnot to mention the valuable banner ad space that ad departments cannot let go of. \n\n
- So I’ve shown how the templates address the spectrum of variability of newspapers’ needs, \nrecognizing that design -- template or no template -- is a non-linear process. \n\nThis goes back to the idea\nof a parametric working model.\nThere’s a constellation of issues that can’t be resolved independently\n\nwe’ve spent two years adjusting the params and\nrefining the structure...\n\nwhat we’ve found is that is hard -- there’s a limit to what we should offer as a legitimate tool. \nfor example: Some navigation patterns work with some grids, not others. Some logos work with some navs not others. Tuna doesn’t go with Chocolate syrup. \n
- Given the growing interest and need for RWD, there are an increasing\namount of resources available for newspapers and other publications\nto venture out and make their own sandwiches\n\nI mean, we could spend a whole conference talking about the business implications\nof going responsive, or debate the best way to implement how we actually\nend up making the switch. but we’re at SND so we wanted to focus on design\n\nwhat once was a vast desert of RWD sandwich-making cowboys is now a sea teeming with exotic ingredients from the aisles of whole foods -- there’s a lot out there. \n\nOur intention with all of this has been from the start \nto provide tools that help make it easier to solve {point} this problem. \n\nnot only is RWD hard,\nnot only is developing a modular, parametric framework hard\nbut all of this other stuff affects the range of possible outcomes.\n
- the goal of these outcomes\nare both unique and generic --\n\nbrands will be brands - the type, the colors,\nthe look & feel and the content\n\nRWD and the way people\nconsume their news will\ncontinue to change\n\nand the way that newspapers are able\nto adapt to the change and carry on in a sustainable\nway is something that every publisher will need to deal with\n\nIts our hope that newspapers get there \nand we’re working hard to help make that happen.\n
- \n