Next Generation Site Architecture
description
Transcript of Next Generation Site Architecture
![Page 1: Next Generation Site Architecture](https://reader034.fdocuments.us/reader034/viewer/2022051512/5405dde18d7f72a6768b4f45/html5/thumbnails/1.jpg)
New York | March 25–28 #SESNY
Next Generation Site Architecture
Patrick Branigan Overit
Art Director
![Page 2: Next Generation Site Architecture](https://reader034.fdocuments.us/reader034/viewer/2022051512/5405dde18d7f72a6768b4f45/html5/thumbnails/2.jpg)
New York| March 25–28, 2013 | #SESNY
Architecture is…
• “The art and science of designing and erecting physical structures.”
• “The activity of designing a system.”
• “An approach to planning, designing and developing a web site presence.”
@pbranigan www.wikipedia.org; Blueprint of Bishopsfield to Hazel (geography.org.uk)
![Page 3: Next Generation Site Architecture](https://reader034.fdocuments.us/reader034/viewer/2022051512/5405dde18d7f72a6768b4f45/html5/thumbnails/3.jpg)
New York| March 25–28, 2013 | #SESNY
Site Architecture is NOT…
• A list of pages.
• Static information.
• Defined by one person.
• …simply telling a story.
@pbranigan
![Page 4: Next Generation Site Architecture](https://reader034.fdocuments.us/reader034/viewer/2022051512/5405dde18d7f72a6768b4f45/html5/thumbnails/4.jpg)
New York| March 25–28, 2013 | #SESNY
People!
• Next generation website architecture is an approach in creating an online ecosystem that can be driven and evolved by its users.
• Social media, content and accessibility are what drives engagement.
• Create an ecosystem for exploration and expansion.
@pbranigan
![Page 5: Next Generation Site Architecture](https://reader034.fdocuments.us/reader034/viewer/2022051512/5405dde18d7f72a6768b4f45/html5/thumbnails/5.jpg)
New York| March 25–28, 2013 | #SESNY
Consider the Social Aspect
• Driving factors: “sharing” & “commenting” because this is about the people.
• People enjoy conversations.
• Traditionally…
@pbranigan
TOP BOTTOM SIDE
www.cnn.com
![Page 6: Next Generation Site Architecture](https://reader034.fdocuments.us/reader034/viewer/2022051512/5405dde18d7f72a6768b4f45/html5/thumbnails/6.jpg)
New York| March 25–28, 2013 | #SESNY
Consider the Social Aspect
• Now…
• We might want to reassess placement, organization and function.
• Consider human tendencies like categorization.
• Focus on further naturalizing the conversation experience.
@pbranigan
![Page 7: Next Generation Site Architecture](https://reader034.fdocuments.us/reader034/viewer/2022051512/5405dde18d7f72a6768b4f45/html5/thumbnails/7.jpg)
New York| March 25–28, 2013 | #SESNY
Consider the Social Aspect
@pbranigan
COMMENT
SHARE
http://nyti.ms/10Y8g4 - New York Times, Renda Morton
![Page 8: Next Generation Site Architecture](https://reader034.fdocuments.us/reader034/viewer/2022051512/5405dde18d7f72a6768b4f45/html5/thumbnails/8.jpg)
New York| March 25–28, 2013 | #SESNY
Consider the Social Aspect
@pbranigan
COMMENT & SHARE
http://nyti.ms/10Y8g4 - New York Times, Renda Morton
![Page 9: Next Generation Site Architecture](https://reader034.fdocuments.us/reader034/viewer/2022051512/5405dde18d7f72a6768b4f45/html5/thumbnails/9.jpg)
New York| March 25–28, 2013 | #SESNY
Consider the Social Aspect
@pbranigan
IN CONTEXT &
ON DEMAND
http://nyti.ms/10Y8g4 - New York Times, Renda Morton
![Page 10: Next Generation Site Architecture](https://reader034.fdocuments.us/reader034/viewer/2022051512/5405dde18d7f72a6768b4f45/html5/thumbnails/10.jpg)
New York| March 25–28, 2013 | #SESNY
So…
• Encourage users to interact and engage with your content via placement, organization and function of elements.
• Increase in:
• URL sharing.
• User views and impulse views.
• Higher probability in viral impact.
• More sharing means better rankings and higher clickthrough rates.
• Takeaway – The “architecture” the user is going to engage in is as important as the actual linking and sharing. One encourages the other.
@pbranigan
![Page 11: Next Generation Site Architecture](https://reader034.fdocuments.us/reader034/viewer/2022051512/5405dde18d7f72a6768b4f45/html5/thumbnails/11.jpg)
New York| March 25–28, 2013 | #SESNY
Consider Your Content.
• Without rich and highly engaging content, no one will really care.
• Being made clear by Google!
• Author Rank!
@pbranigan
![Page 12: Next Generation Site Architecture](https://reader034.fdocuments.us/reader034/viewer/2022051512/5405dde18d7f72a6768b4f45/html5/thumbnails/12.jpg)
New York| March 25–28, 2013 | #SESNY
Author Rank
@pbranigan
• Connect a website’s writers’ accounts with Google+ accounts.
• People like other credible people!
• An emphasis on not only what’s on the page but who provided it.
![Page 13: Next Generation Site Architecture](https://reader034.fdocuments.us/reader034/viewer/2022051512/5405dde18d7f72a6768b4f45/html5/thumbnails/13.jpg)
New York| March 25–28, 2013 | #SESNY
Author Rank
• Link your content to your Google profile:
• Link from your Google profile to your content:
@pbranigan
![Page 14: Next Generation Site Architecture](https://reader034.fdocuments.us/reader034/viewer/2022051512/5405dde18d7f72a6768b4f45/html5/thumbnails/14.jpg)
New York| March 25–28, 2013 | #SESNY
Relevance and Credibility
• Markham Nolan – “How to Separate Fact and Fiction Online”
• Quality out of quantity.
• Evolution from the pursuit of finding facts to the act of verifying them.
@pbranigan http://ted.com- Markham Nolan; TED
![Page 15: Next Generation Site Architecture](https://reader034.fdocuments.us/reader034/viewer/2022051512/5405dde18d7f72a6768b4f45/html5/thumbnails/15.jpg)
New York| March 25–28, 2013 | #SESNY
So…
• Google, the king of search, is no longer relying on algorithms.
• Authorship and credibility creates “thought leadership”.
• Takeaway – Use systems such as Author Rank to help users engage and trust in you, which inevitably helps you in being searchable and accessible.
@pbranigan
![Page 16: Next Generation Site Architecture](https://reader034.fdocuments.us/reader034/viewer/2022051512/5405dde18d7f72a6768b4f45/html5/thumbnails/16.jpg)
New York| March 25–28, 2013 | #SESNY
Other Content Consideration
• Text is obviously important.
• If you don’t use webfonts you’re doing it wrong.
• First we had:
• Now we have:
@pbranigan http://typkit.com; http://fontspring.com; http://google.com/webfonts
![Page 17: Next Generation Site Architecture](https://reader034.fdocuments.us/reader034/viewer/2022051512/5405dde18d7f72a6768b4f45/html5/thumbnails/17.jpg)
New York| March 25–28, 2013 | #SESNY
Other Content Consideration
• Add stylesheet link to call on the desired font from Google’s library of webfonts and then style with CSS.
@pbranigan
![Page 18: Next Generation Site Architecture](https://reader034.fdocuments.us/reader034/viewer/2022051512/5405dde18d7f72a6768b4f45/html5/thumbnails/18.jpg)
New York| March 25–28, 2013 | #SESNY
Other Content Consideration
• Result:
• (An amazing example when partnered with other technologies HTML5, CSS3, Java, jQuery, etc: http://jjr2012.srf.ch/)
@pbranigan
![Page 19: Next Generation Site Architecture](https://reader034.fdocuments.us/reader034/viewer/2022051512/5405dde18d7f72a6768b4f45/html5/thumbnails/19.jpg)
New York| March 25–28, 2013 | #SESNY
Other Content Considerations
@pbranigan
• People love images.
• Optimizing imagery.
• Use your alt text.
• File name.
• Image size.
http://instasham.me
![Page 20: Next Generation Site Architecture](https://reader034.fdocuments.us/reader034/viewer/2022051512/5405dde18d7f72a6768b4f45/html5/thumbnails/20.jpg)
New York| March 25–28, 2013 | #SESNY
Other Content Considerations
@pbranigan
• People also love video.
• Optimizing video?
• YouTube: Titles and descriptions.
• Hosted video: delivery and ease of sharing.
![Page 21: Next Generation Site Architecture](https://reader034.fdocuments.us/reader034/viewer/2022051512/5405dde18d7f72a6768b4f45/html5/thumbnails/21.jpg)
New York| March 25–28, 2013 | #SESNY
Other Content Considerations
@pbranigan http://www.nytimes.com/projects/2012/snow-fall/#/?part=tunnel-creek
![Page 22: Next Generation Site Architecture](https://reader034.fdocuments.us/reader034/viewer/2022051512/5405dde18d7f72a6768b4f45/html5/thumbnails/22.jpg)
New York| March 25–28, 2013 | #SESNY
So…
• Text is still king, but all content is continuously evolving.
• Providing impressive content encourages conversation.
• Takeaway – Emphasize user facing visual stimulation that can be crawled, indexed and shared where possible.
@pbranigan
![Page 23: Next Generation Site Architecture](https://reader034.fdocuments.us/reader034/viewer/2022051512/5405dde18d7f72a6768b4f45/html5/thumbnails/23.jpg)
New York| March 25–28, 2013 | #SESNY
Giving It All Somewhere To Live
• Responsive design… (Yeah, about that…)
• “Creating a single source for code that we can optimize to a device so that the device can ask how to display things.” – Jason Cranford Teague
• How: Same HTML > Same URL > CSS media queries
@pbranigan
![Page 24: Next Generation Site Architecture](https://reader034.fdocuments.us/reader034/viewer/2022051512/5405dde18d7f72a6768b4f45/html5/thumbnails/24.jpg)
New York| March 25–28, 2013 | #SESNY
Benefits of RWD
• Accessibility.
• Single URL.
• No redirection.
• Saving resources for the site and the crawlers.
@pbranigan
![Page 25: Next Generation Site Architecture](https://reader034.fdocuments.us/reader034/viewer/2022051512/5405dde18d7f72a6768b4f45/html5/thumbnails/25.jpg)
New York| March 25–28, 2013 | #SESNY
Some questions You Should Ask Yourself
• What percent of traffic is mobile?
• Does your current mobile presence translate well to other sizes?
• How do your bounce rates compare?
• Are you forgetting your purpose? It’s about the people! People generally want specific content depending upon their situation & device.
@pbranigan
![Page 26: Next Generation Site Architecture](https://reader034.fdocuments.us/reader034/viewer/2022051512/5405dde18d7f72a6768b4f45/html5/thumbnails/26.jpg)
New York| March 25–28, 2013 | #SESNY
So Get Responsive or Get Lost?
Nope!
@pbranigan
![Page 27: Next Generation Site Architecture](https://reader034.fdocuments.us/reader034/viewer/2022051512/5405dde18d7f72a6768b4f45/html5/thumbnails/27.jpg)
New York| March 25–28, 2013 | #SESNY
Bringing It All Together
• Three key components to architecture:
• Social Media.
• Content.
• Accessibility.
• It’s about people as much as it is about robots.
Thank you!
@pbranigan