Next Generation Site Architecture

New York | March 25–28 #SESNY

Next Generation Site Architecture

Patrick Branigan Overit

Art Director

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)


Site Architecture is NOT…

• A list of pages.

• Static information.

• Defined by one person.

• …simply telling a story.

@pbranigan


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


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



• Now…

• We might want to reassess placement, organization and function.

• Consider human tendencies like categorization.

• Focus on further naturalizing the conversation experience.

@pbranigan



@pbranigan

COMMENT

SHARE

http://nyti.ms/10Y8g4 - New York Times, Renda Morton



@pbranigan

COMMENT & SHARE




@pbranigan

IN CONTEXT &

ON DEMAND



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


Consider Your Content.

• Without rich and highly engaging content, no one will really care.

• Being made clear by Google!

• Author Rank!

@pbranigan


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.


Author Rank

• Link your content to your Google profile:

• Link from your Google profile to your content:

@pbranigan


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


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


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



• Add stylesheet link to call on the desired font from Google’s library of webfonts and then style with CSS.

@pbranigan



• Result:

• (An amazing example when partnered with other technologies HTML5, CSS3, Java, jQuery, etc: http://jjr2012.srf.ch/)

@pbranigan


Other Content Considerations

@pbranigan

• People love images.

• Optimizing imagery.

• Use your alt text.

• File name.

• Image size.

http://instasham.me



@pbranigan

• People also love video.

• Optimizing video?

• YouTube: Titles and descriptions.

• Hosted video: delivery and ease of sharing.



@pbranigan http://www.nytimes.com/projects/2012/snow-fall/#/?part=tunnel-creek


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


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


Benefits of RWD

• Accessibility.

• Single URL.

• No redirection.

• Saving resources for the site and the crawlers.

@pbranigan


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


So Get Responsive or Get Lost?

Nope!

@pbranigan


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

Business

Next Generation Site Architecture