SlideShare a Scribd company logo
1 of 45
Download to read offline
STRUCTURED
  CONTENT
                         FIRST
  Stephen Hay . Mirabeau Mobile Event, Amsterdam . 20110609
WHAT IS

MOBILE?
usatoday.com in Android browser,
      Samsung Galaxy S
WTF?
twitter.com in Opera browser
twitter.com in Android browser,
      Samsung Galaxy S
twitter.com in Opera Mini
the assumption is




PEOPLE ON THE DESKTOP WANT


     THIS
the assumption is



PEOPLE ON “MOBILE” WANT


   THIS
Hey, there’s that thing
 I wanted to read.
“I WANT IT TO

WORK            ON AN

 iPAD”
THE WORLD’S FIRST WEBSITE IS ALMOST MOBILE READY.




                              Opera browser


  http://www.w3.org/History/19921103-hypertext/hypertext/WWW/TheProject.html
THE WORLD’S FIRST WEBSITE IS ALMOST MOBILE READY.




                Opera Mobile, Samsung Galaxy Tab

  http://www.w3.org/History/19921103-hypertext/hypertext/WWW/TheProject.html
The device landscape is constantly
changing. Capabilities are constantly
changing. Properly structured content
is portable to future platforms.
PLATFORM-AGNOSTIC   for




CONTENT
Don’t assume users want di!erent content simply because
of the platform they’re using.

Do cater to device capabilities if you want, but don’t
assume that users want other capabilities on other devices.



PLATFORM-AGNOSTIC                                             for




CONTENT
PLATFORM-AWARE   for

USER EXPERIENCE
Do try and create an e!ectively usable
environment for people to easily accomplish tasks.




PLATFORM-AWARE                                       for

USER EXPERIENCE
THERE IS NO
             MOBILE WEB.
http://www.the-haystack.com/2011/01/07/there-is-no-mobile-web/
RESPONSIVE DESIGN&
 ADAPTIVE LAYOUT
Real responsive design will be hard to do.
Adaptive layout is a good "rst step, and is often
what people mean with the term “responsive design”.

Because layout is only a part of design.




RESPONSIVE DESIGN&
  ADAPTIVE LAYOUT
http://mediaqueri.es
Thinking about, creating and
designing structured content "rst
caters to the lowest common layout
denominator, whether this be a small
screen or a text browser.

In fact, this content should be able to
go anywhere.
CONTENT STRATEGY,
STRUCTURED CONTENT
          (FIRST).
No mind-reading!


CONTENT STRATEGY,
STRUCTURED CONTENT
          (FIRST).
No mind-reading!


CONTENT STRATEGY,
STRUCTURED CONTENT
The baseline for responsive design.


                                      (FIRST).
No mind-reading!


CONTENT STRATEGY,
STRUCTURED CONTENT
The baseline for responsive design.


                                      (FIRST).
                                       = “mobile” "rst.
THANK YOU!
twitter.com/stephenhay

slideshare.net/stephenhay/structured-content-"rst

More Related Content

Viewers also liked

Content / Discourse Analysis
Content / Discourse AnalysisContent / Discourse Analysis
Content / Discourse Analysis
Wai-Kwok Wong
 

Viewers also liked (15)

Intelligent Content: A Case Study
Intelligent Content: A Case StudyIntelligent Content: A Case Study
Intelligent Content: A Case Study
 
Content / Discourse Analysis
Content / Discourse AnalysisContent / Discourse Analysis
Content / Discourse Analysis
 
Hero Shot Images: 7 Secrets to Visuals That Drive Sales
Hero Shot Images: 7 Secrets to Visuals That Drive SalesHero Shot Images: 7 Secrets to Visuals That Drive Sales
Hero Shot Images: 7 Secrets to Visuals That Drive Sales
 
Semantic
Semantic Semantic
Semantic
 
Rehearse for Real Time (SMWi-Austin 2017)
Rehearse for Real Time (SMWi-Austin 2017)Rehearse for Real Time (SMWi-Austin 2017)
Rehearse for Real Time (SMWi-Austin 2017)
 
China: Creators and Consumers of the Future
China: Creators and Consumers of the FutureChina: Creators and Consumers of the Future
China: Creators and Consumers of the Future
 
Make Your Content Nimble - Confab
Make Your Content Nimble - ConfabMake Your Content Nimble - Confab
Make Your Content Nimble - Confab
 
Discourse analysis
Discourse analysisDiscourse analysis
Discourse analysis
 
Sentence semantics
Sentence semanticsSentence semantics
Sentence semantics
 
RESS: An Evolution of Responsive Web Design
RESS: An Evolution of Responsive Web DesignRESS: An Evolution of Responsive Web Design
RESS: An Evolution of Responsive Web Design
 
Social Proof Persuasive Content Framework
Social Proof Persuasive Content FrameworkSocial Proof Persuasive Content Framework
Social Proof Persuasive Content Framework
 
Structuring Content, Restructuring Organizations - CS Forum 2012
Structuring Content, Restructuring Organizations - CS Forum 2012Structuring Content, Restructuring Organizations - CS Forum 2012
Structuring Content, Restructuring Organizations - CS Forum 2012
 
Responsive Design Workflow: Mobilism 2012
Responsive Design Workflow: Mobilism 2012Responsive Design Workflow: Mobilism 2012
Responsive Design Workflow: Mobilism 2012
 
The CMO's Guide to Hiring for Content Marketing
The CMO's Guide to Hiring for Content MarketingThe CMO's Guide to Hiring for Content Marketing
The CMO's Guide to Hiring for Content Marketing
 
Categorical Propositions- Logic
Categorical Propositions- LogicCategorical Propositions- Logic
Categorical Propositions- Logic
 

More from Stephen Hay

Fronteers Workshop: Rabid Prototyping
Fronteers Workshop: Rabid PrototypingFronteers Workshop: Rabid Prototyping
Fronteers Workshop: Rabid Prototyping
Stephen Hay
 
HTML5 & Webrichtlijnen 2
HTML5 & Webrichtlijnen 2HTML5 & Webrichtlijnen 2
HTML5 & Webrichtlijnen 2
Stephen Hay
 

More from Stephen Hay (20)

From Deception to Clarity
From Deception to ClarityFrom Deception to Clarity
From Deception to Clarity
 
The Backside of the Class (CSS Day 2015)
The Backside of the Class (CSS Day 2015)The Backside of the Class (CSS Day 2015)
The Backside of the Class (CSS Day 2015)
 
The Art of Deception
The Art of DeceptionThe Art of Deception
The Art of Deception
 
Sculpting Text: Easing the Pain of Designing in the Browser
Sculpting Text: Easing the Pain of Designing in the BrowserSculpting Text: Easing the Pain of Designing in the Browser
Sculpting Text: Easing the Pain of Designing in the Browser
 
Power Tools For Browser-Based Design
Power Tools For Browser-Based DesignPower Tools For Browser-Based Design
Power Tools For Browser-Based Design
 
UIE Virtual Seminar: Responsive Web Design Workflow
UIE Virtual Seminar: Responsive Web Design WorkflowUIE Virtual Seminar: Responsive Web Design Workflow
UIE Virtual Seminar: Responsive Web Design Workflow
 
Flexbox: One Giant Leap for Web Layout (Breaking Development 2013)
Flexbox: One Giant Leap for Web Layout (Breaking Development 2013)Flexbox: One Giant Leap for Web Layout (Breaking Development 2013)
Flexbox: One Giant Leap for Web Layout (Breaking Development 2013)
 
Flexbox: One Giant Leap for Web Layout (GenerateConf 2013)
Flexbox: One Giant Leap for Web Layout (GenerateConf 2013)Flexbox: One Giant Leap for Web Layout (GenerateConf 2013)
Flexbox: One Giant Leap for Web Layout (GenerateConf 2013)
 
The New Photoshop, Part 2: The Revenge of the Web (FEC13)
The New Photoshop, Part 2: The Revenge of the Web (FEC13)The New Photoshop, Part 2: The Revenge of the Web (FEC13)
The New Photoshop, Part 2: The Revenge of the Web (FEC13)
 
Flexbox: One Giant Leap for Web Layout (CSS Day 2013)
Flexbox: One Giant Leap for Web Layout (CSS Day 2013)Flexbox: One Giant Leap for Web Layout (CSS Day 2013)
Flexbox: One Giant Leap for Web Layout (CSS Day 2013)
 
The New Photoshop, Part 2: The Revenge of the Web
The New Photoshop, Part 2: The Revenge of the WebThe New Photoshop, Part 2: The Revenge of the Web
The New Photoshop, Part 2: The Revenge of the Web
 
Style Guides Are The New Photoshop (Smashing Conference 2012)
Style Guides Are The New Photoshop (Smashing Conference 2012)Style Guides Are The New Photoshop (Smashing Conference 2012)
Style Guides Are The New Photoshop (Smashing Conference 2012)
 
Style Guides Are The New Photoshop (Fronteers 2012)
Style Guides Are The New Photoshop (Fronteers 2012)Style Guides Are The New Photoshop (Fronteers 2012)
Style Guides Are The New Photoshop (Fronteers 2012)
 
Responsive Design Workflow: Webshaped 2012
Responsive Design Workflow: Webshaped 2012Responsive Design Workflow: Webshaped 2012
Responsive Design Workflow: Webshaped 2012
 
Responsive Design Workflow (Breaking Development Conference 2012 Orlando)
Responsive Design Workflow (Breaking Development Conference 2012 Orlando)Responsive Design Workflow (Breaking Development Conference 2012 Orlando)
Responsive Design Workflow (Breaking Development Conference 2012 Orlando)
 
Go With The Flow
Go With The FlowGo With The Flow
Go With The Flow
 
Fronteers Workshop: Rabid Prototyping
Fronteers Workshop: Rabid PrototypingFronteers Workshop: Rabid Prototyping
Fronteers Workshop: Rabid Prototyping
 
HTML5 & Webrichtlijnen 2
HTML5 & Webrichtlijnen 2HTML5 & Webrichtlijnen 2
HTML5 & Webrichtlijnen 2
 
Real-world Responsive Design
Real-world Responsive DesignReal-world Responsive Design
Real-world Responsive Design
 
De aanvrager wint
De aanvrager wintDe aanvrager wint
De aanvrager wint
 

Recently uploaded

Architecting Cloud Native Applications
Architecting Cloud Native ApplicationsArchitecting Cloud Native Applications
Architecting Cloud Native Applications
WSO2
 
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Safe Software
 

Recently uploaded (20)

Architecting Cloud Native Applications
Architecting Cloud Native ApplicationsArchitecting Cloud Native Applications
Architecting Cloud Native Applications
 
ICT role in 21st century education and its challenges
ICT role in 21st century education and its challengesICT role in 21st century education and its challenges
ICT role in 21st century education and its challenges
 
Strategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a FresherStrategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a Fresher
 
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, AdobeApidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
 
Mcleodganj Call Girls 🥰 8617370543 Service Offer VIP Hot Model
Mcleodganj Call Girls 🥰 8617370543 Service Offer VIP Hot ModelMcleodganj Call Girls 🥰 8617370543 Service Offer VIP Hot Model
Mcleodganj Call Girls 🥰 8617370543 Service Offer VIP Hot Model
 
Apidays New York 2024 - APIs in 2030: The Risk of Technological Sleepwalk by ...
Apidays New York 2024 - APIs in 2030: The Risk of Technological Sleepwalk by ...Apidays New York 2024 - APIs in 2030: The Risk of Technological Sleepwalk by ...
Apidays New York 2024 - APIs in 2030: The Risk of Technological Sleepwalk by ...
 
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
 
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot TakeoffStrategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
 
"I see eyes in my soup": How Delivery Hero implemented the safety system for ...
"I see eyes in my soup": How Delivery Hero implemented the safety system for ..."I see eyes in my soup": How Delivery Hero implemented the safety system for ...
"I see eyes in my soup": How Delivery Hero implemented the safety system for ...
 
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
 
Vector Search -An Introduction in Oracle Database 23ai.pptx
Vector Search -An Introduction in Oracle Database 23ai.pptxVector Search -An Introduction in Oracle Database 23ai.pptx
Vector Search -An Introduction in Oracle Database 23ai.pptx
 
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data DiscoveryTrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
 
Six Myths about Ontologies: The Basics of Formal Ontology
Six Myths about Ontologies: The Basics of Formal OntologySix Myths about Ontologies: The Basics of Formal Ontology
Six Myths about Ontologies: The Basics of Formal Ontology
 
Polkadot JAM Slides - Token2049 - By Dr. Gavin Wood
Polkadot JAM Slides - Token2049 - By Dr. Gavin WoodPolkadot JAM Slides - Token2049 - By Dr. Gavin Wood
Polkadot JAM Slides - Token2049 - By Dr. Gavin Wood
 
CNIC Information System with Pakdata Cf In Pakistan
CNIC Information System with Pakdata Cf In PakistanCNIC Information System with Pakdata Cf In Pakistan
CNIC Information System with Pakdata Cf In Pakistan
 
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
 
AWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of TerraformAWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of Terraform
 
presentation ICT roal in 21st century education
presentation ICT roal in 21st century educationpresentation ICT roal in 21st century education
presentation ICT roal in 21st century education
 
Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...
Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...
Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...
 
MS Copilot expands with MS Graph connectors
MS Copilot expands with MS Graph connectorsMS Copilot expands with MS Graph connectors
MS Copilot expands with MS Graph connectors
 

Structured Content First