week 7 - interactive news editing and producing
TRANSCRIPT
Interactive News Editing and Production Thursday, Feb. 19
• Layout homework revisited• CSS III• SEO• Trends• Timeline JS (homework)
Today’s agenda
• It’s a big step going from manipulating existing markup to writing your own
• Let’s walk through the whole display, clear, float, class and ID selectors process one more time
• Grab lesson1.zip and we’ll test a few things
Positioning revisited
There are several tools that allow you to inspect and edit HTML/CSS and display the changes live on a page.Great for understanding styles and verifying margins, padding etc• Firebug plugin for Firefox• Inspect Elements for Chrome
Debugging
CSS III
What is responsive web design?Creating a layout that scales to the dimensions and orientation of the browser, making your site respond to the user’s device.• Advantages: You control the UX, whether
your content is viewed on a phone or a 55-inch monitor.
• Disadvantages: None, but it takes more time, both in planning and style execution.
Responsive web design
Concept was pioneered by Ethan Marcotte in 2010, so it’s not really that new. But it reached critical mass in 2012, and you would not build a non-responsive site today.
Marcotte’s article that started it all: http://bit.ly/1G5YLmFHis cool book: http://bit.ly/17tsCZO
Responsive web design
Concept pioneered by Aaron Gustafson in 2011.Rather than a fluid version of the site, AWD allows performs a check to determine how to optimally render pages based on the user’s platform and only delivers necessary elements.Images are resized and elements like JavaScript or Flash may be discarded entirely.Gustafson’s book: http://bit.ly/19zQrRq
Adaptive web design
The general premise of RWD is that nothing is set to a fixed value.
Everything is a flexible setting or a ratio of a flexible setting, allowing images, text and layouts to scale as needed.
Responsive web design
• Set max-width (not just width) on main container, like <body>
• Set width as % on secondary containers• Is min-height needed?• Often set height to auto• Set font-size to ems or %• Set padding and margin to % or em• All <img> tags set to max-width: %• Media queries
RWD basics
Download the file lesson2.zip and unzip. View the document fire.html in your browser, then open in your text editor.Together, let’s make it responsive.
Workshop II: Responsive story page
Download the file lesson3.zip and unzip. View the document chifire.html in your browser, then open it and chifire.css your text editor.Your task: Make it fully responsiveNote: It will look squished at phone-sized break points. We’ll address that next week with media queries
Workshop III: RWD home page
Need more of a challenge? There’s more photos in extraphotos folder. Add a fourth row of 2 or 3 articles below the full-width story #fullLayer.
Workshop III: RWD home page
SEO
How do I get here?
• Yes, but not at all costs. You’re creating content for people, not bots. The fine line you walk is to a) cater to both or b) determine if one outweighs the other in each case.
• It’s frankly even more important to encourage social sharing over search success.
• But isn’t SEO just a cheap trick to get traffic you don’t deserve from all over the world?
And do I want to? The SEO preamble
• First and foremost, it is in Google’s interest to keep its search and ranking algorithms secret. Google developers only detail big changes.
• Second, many of the most influential factors in Google search and Google News are baked into the website on which your content is published.
SEO 101
• In search, factors like your site’s PageRank or a page’s markup. For Google News, your site’s Breaking News Score, are determined before you hit save.
• In fact, Google News takes into consideration “the size of the staff associated with the news source, the number of news bureaus associated with the news source” and “the number of articles produced by the news source during a given time period.”
SEO 101
A. Story selectionB. Slug (part of the URL)Keep slugs between two and five words, targeting only primary keywords. Should be readable with a clear topic. Use hyphens to separate words. Date and section designator are OK at the end. Keep them flexible to allow for story growthchi-dan-ryan-fatal-crash is better than chi-1-dead-3-hurt-in-dan-ryan-crash
What can I control in SEO?
chi-philip-seymour-hoffman-deadchi-wisconsin-baby-kidnappingchi-purdue-university-shootingchi-chris-christie-bridge-scandalchi-mega-millions-jackpotchi-new-york-train-derailmentchi-paul-walker-deadchi-illinois-tornadoeschi-philippines-typhoonchi-obama-healthcare-websitechi-connecticut-school-shooting
What can I control in SEO?
chi-cleveland-kidnappingschi-boston-marathon-bombingchi-powerball-winnerschi-nfl-concussion-settlementchi-miley-cyrus-vmachi-hurricane-sandychi-colorado-theater-shootingchi-texas-college-shootingchi-jesse-jackson-jr-sentencechi-diana-nyad-cuba-florida-swimchi-jerry-sandusky-penn-statechi-cory-montieth-dead
C. HeadlineCreate a very literal headline using your keywords like names and places. Try to front-load your keywords. Keep under 77 characters, including spaces. D. SEO headline (or SEO title)Google doesn’t like a lot of variation between the article-level headline and the SEO headline. Can be shorter but should be the same in structure.
What can I control in SEO?
E. SEO descriptionThis is the summary that appears beneath the headline on the search engine results page (SERP). Use literal language and include relevant keywords clearly and succinctly, critical because keyword matches to the search appear in bold. While this doesn’t directly affect search, this text allows potential readers to quickly understand the story and thus encourages them to click through. Keep below 156 characters so it’s not truncated.
What can I control in SEO?
F. SEO keyphrase (or keywords)Use a maximum of 10 keyword phrases, separated by commas. You can repeat keywords from the SEO title and headline, or you can target keywords you didn’t have room to include in the title. This field is only considered by Google News -- not search. Capitalization does not matter. Order does not matter.• Yes: Joe Maddon fired, Chicago Cubs, MLB• No: Sports, baseball, professional baseball, mlb,
mlb baseball, wrigley field, wrigleyville, cubs general manager Joe Maddon, cubs gm, Joseph Maddon
What can I control in SEO?
G. Content factorsGoogle favors unique content. Google News and search explicitly state style is a factor, meaning the algorithm benefits a straight-news approach, right or wrong.Google favors diversity of sources.Also right or wrong, Google News equates length with quality. This also rewards quickly adding background to a new update of a long-standing story.
What can I control in SEO?
H. Timeliness/frequency of updates Speed of publishing is very important in Google News and important to Google search. The Google News patent filing suggests the algorithm specifically measures “the ability of the news source to publish a story soon after an important event has occurred” and ranks them by publish time after the event occurred. Both Google News and Google search also clearly favor frequent updates, of which the item’s timestamp may or may not play a role.
What can I control in SEO?
I. Clean semantic markupIs your body copy wrapped in <p> tags? Is <h1> used for your main headlines?J. Links and socialCreate as many inbound links to you story as possible, including email alerts, SMS alerts, push alerts and social channels. Google strongly appears favor to Google+.
What can I control in SEO?
K. PlacementWhile somewhat difficult to quantify, there appears to be a correlation between placement on a website and SEO performance.L. Google AuthorshipM. Google Standout tag
What can I control in SEO?
Slug: chi-nelson-mandela-dead-DATEHeadline: Nelson Mandela, former South African president, dead at 95SEO title: Nelson Mandela dead at 95SEO description: Nelson Mandela, former South African president and anti-apartheid revolutionary, has died at 95 in Johannesburg, South Africa.SEO keywords: Nelson Mandela dead, Nelson Mandela, South Africa, Apartheid
SEO example
If search is a factor, write clear and focused. Don’t be the last to file and update a lot. Share a lot. Use lots of sources and go long. Make sure your headlines and SEO fields are keyword rich and sharp. Get on the home page.
What does all that mean?
Google Keyword Planner guide on CanvasGoogle News patent:http://www.google.com/patents/US20120158711http://www.faqs.org/patents/app/20120158711Moz keyword research: http://moz.com/beginners-guide-to-seo/keyword-researchMoz domain authority: http://moz.com/learn/seo/domain-authority
Further SEO exploration
Trend tools
• Storyful (paid)• Newswhip (paid)• Trendspottr (paid)• Twitter lists• Twitter and Facebook personal pages• Social Mention
Trend tools
• Trendsmap• Google Hot Trends• YouTube trends• Bing homepage• Chartbeat Rising• Subreddits (Chicago)• IFTTT
Trend tools
TimelineJS
• Easy timeline tool created by the Knight Lab folks.
• Site: http://timeline.knightlab.com/• Example - Chief Keef: http://trib.in/
1COuzvj• Your task will be to create a short Drew
Peterson timeline based on the file: drewpeterson-timeline.txt.
• If you get lost, there’s a video on the Canvas site.
Homework: Timeline JS
• State of RWD: http://bit.ly/1JrTzyO• NYT’s SEO strategy: http://bit.ly/1CO6SmP• NYT vs. Buzzfeed: http://bit.ly/1EXHXx9
Good reading
• Deadline: Tuesday, 11:59 p.m.• TimelineJS on Drew Peterson• Don’t Make Me Think, Revisited: chapters
1-5
Homework
• CSS IV• Metrics• Design
Next up