Structured Content First

Stephen Hay
Stephen HaySenior UX Design Lead at Catawiki
STRUCTURED
  CONTENT
                         FIRST
  Stephen Hay . Mirabeau Mobile Event, Amsterdam . 20110609
Structured Content First
Structured Content First
WHAT IS

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




PEOPLE ON THE DESKTOP WANT


     THIS
Structured Content First
the assumption is



PEOPLE ON “MOBILE” WANT


   THIS
Structured Content First
Structured Content First
Structured Content First
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
Structured Content First
The device landscape is constantly
changing. Capabilities are constantly
changing. Properly structured content
is portable to future platforms.
Structured Content First
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
Structured Content First
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.
Structured Content First
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
1 of 45

Recommended

Meta layout: a closer look at media queries by
Meta layout: a closer look at media queriesMeta layout: a closer look at media queries
Meta layout: a closer look at media queriesStephen Hay
32.5K views100 slides
Beyond Media Queries: Anatomy of an Adaptive Web Design by
Beyond Media Queries: Anatomy of an Adaptive Web DesignBeyond Media Queries: Anatomy of an Adaptive Web Design
Beyond Media Queries: Anatomy of an Adaptive Web DesignBrad Frost
18.8K views133 slides
Real-world Responsive Design @ Breaking Development 2011 by
Real-world Responsive Design @ Breaking Development 2011Real-world Responsive Design @ Breaking Development 2011
Real-world Responsive Design @ Breaking Development 2011Stephen Hay
5.3K views77 slides
For a Future-Friendly Web by
For a Future-Friendly WebFor a Future-Friendly Web
For a Future-Friendly WebBrad Frost
32.7K views72 slides
Beyond Squishy: The Principles of Adaptive Design by
Beyond Squishy: The Principles of Adaptive DesignBeyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive DesignBrad Frost
116.7K views249 slides

More Related Content

Viewers also liked

Intelligent Content: A Case Study by
Intelligent Content: A Case StudyIntelligent Content: A Case Study
Intelligent Content: A Case StudyLisa Goldberg
2.4K views38 slides
Content / Discourse Analysis by
Content / Discourse AnalysisContent / Discourse Analysis
Content / Discourse AnalysisWai-Kwok Wong
2.7K views25 slides
Hero Shot Images: 7 Secrets to Visuals That Drive Sales by
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 SalesAngie Schottmuller
2.9K views94 slides
Semantic by
Semantic Semantic
Semantic Dayra Madeline Yanangómez Calero
3.8K views21 slides
Rehearse for Real Time (SMWi-Austin 2017) by
Rehearse for Real Time (SMWi-Austin 2017)Rehearse for Real Time (SMWi-Austin 2017)
Rehearse for Real Time (SMWi-Austin 2017)Lauren Teague
511 views52 slides
China: Creators and Consumers of the Future by
China: Creators and Consumers of the FutureChina: Creators and Consumers of the Future
China: Creators and Consumers of the Futurefrog
20.8K views45 slides

Viewers also liked(15)

Intelligent Content: A Case Study by Lisa Goldberg
Intelligent Content: A Case StudyIntelligent Content: A Case Study
Intelligent Content: A Case Study
Lisa Goldberg2.4K views
Content / Discourse Analysis by Wai-Kwok Wong
Content / Discourse AnalysisContent / Discourse Analysis
Content / Discourse Analysis
Wai-Kwok Wong2.7K views
Hero Shot Images: 7 Secrets to Visuals That Drive Sales by Angie Schottmuller
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
Angie Schottmuller2.9K views
Rehearse for Real Time (SMWi-Austin 2017) by Lauren Teague
Rehearse for Real Time (SMWi-Austin 2017)Rehearse for Real Time (SMWi-Austin 2017)
Rehearse for Real Time (SMWi-Austin 2017)
Lauren Teague511 views
China: Creators and Consumers of the Future by frog
China: Creators and Consumers of the FutureChina: Creators and Consumers of the Future
China: Creators and Consumers of the Future
frog 20.8K views
Make Your Content Nimble - Confab by Rachel Lovinger
Make Your Content Nimble - ConfabMake Your Content Nimble - Confab
Make Your Content Nimble - Confab
Rachel Lovinger17K views
RESS: An Evolution of Responsive Web Design by Dave Olsen
RESS: An Evolution of Responsive Web DesignRESS: An Evolution of Responsive Web Design
RESS: An Evolution of Responsive Web Design
Dave Olsen25.3K views
Structuring Content, Restructuring Organizations - CS Forum 2012 by Sara Wachter-Boettcher
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 by Stephen Hay
Responsive Design Workflow: Mobilism 2012Responsive Design Workflow: Mobilism 2012
Responsive Design Workflow: Mobilism 2012
Stephen Hay86.8K views
The CMO's Guide to Hiring for Content Marketing by contently
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
contently1.4K views
Categorical Propositions- Logic by Kent Sunglao
Categorical Propositions- LogicCategorical Propositions- Logic
Categorical Propositions- Logic
Kent Sunglao35.5K views

More from Stephen Hay

From Deception to Clarity by
From Deception to ClarityFrom Deception to Clarity
From Deception to ClarityStephen Hay
3.6K views77 slides
The Backside of the Class (CSS Day 2015) by
The Backside of the Class (CSS Day 2015)The Backside of the Class (CSS Day 2015)
The Backside of the Class (CSS Day 2015)Stephen Hay
3.6K views66 slides
The Art of Deception by
The Art of DeceptionThe Art of Deception
The Art of DeceptionStephen Hay
17.3K views65 slides
Sculpting Text: Easing the Pain of Designing in the Browser by
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 BrowserStephen Hay
6.8K views45 slides
Power Tools For Browser-Based Design by
Power Tools For Browser-Based DesignPower Tools For Browser-Based Design
Power Tools For Browser-Based DesignStephen Hay
3.3K views119 slides
UIE Virtual Seminar: Responsive Web Design Workflow by
UIE Virtual Seminar: Responsive Web Design WorkflowUIE Virtual Seminar: Responsive Web Design Workflow
UIE Virtual Seminar: Responsive Web Design WorkflowStephen Hay
5.9K views8 slides

More from Stephen Hay(20)

From Deception to Clarity by Stephen Hay
From Deception to ClarityFrom Deception to Clarity
From Deception to Clarity
Stephen Hay3.6K views
The Backside of the Class (CSS Day 2015) by Stephen Hay
The Backside of the Class (CSS Day 2015)The Backside of the Class (CSS Day 2015)
The Backside of the Class (CSS Day 2015)
Stephen Hay3.6K views
The Art of Deception by Stephen Hay
The Art of DeceptionThe Art of Deception
The Art of Deception
Stephen Hay17.3K views
Sculpting Text: Easing the Pain of Designing in the Browser by Stephen Hay
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
Stephen Hay6.8K views
Power Tools For Browser-Based Design by Stephen Hay
Power Tools For Browser-Based DesignPower Tools For Browser-Based Design
Power Tools For Browser-Based Design
Stephen Hay3.3K views
UIE Virtual Seminar: Responsive Web Design Workflow by Stephen Hay
UIE Virtual Seminar: Responsive Web Design WorkflowUIE Virtual Seminar: Responsive Web Design Workflow
UIE Virtual Seminar: Responsive Web Design Workflow
Stephen Hay5.9K views
Flexbox: One Giant Leap for Web Layout (Breaking Development 2013) by Stephen Hay
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)
Stephen Hay5.7K views
Flexbox: One Giant Leap for Web Layout (GenerateConf 2013) by Stephen Hay
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)
Stephen Hay3.9K views
The New Photoshop, Part 2: The Revenge of the Web (FEC13) by Stephen Hay
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)
Stephen Hay11.5K views
Flexbox: One Giant Leap for Web Layout (CSS Day 2013) by Stephen Hay
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)
Stephen Hay2.8K views
The New Photoshop, Part 2: The Revenge of the Web by Stephen Hay
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
Stephen Hay3.6K views
Style Guides Are The New Photoshop (Smashing Conference 2012) by Stephen Hay
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)
Stephen Hay3.9K views
Style Guides Are The New Photoshop (Fronteers 2012) by Stephen Hay
Style Guides Are The New Photoshop (Fronteers 2012)Style Guides Are The New Photoshop (Fronteers 2012)
Style Guides Are The New Photoshop (Fronteers 2012)
Stephen Hay44.5K views
Responsive Design Workflow: Webshaped 2012 by Stephen Hay
Responsive Design Workflow: Webshaped 2012Responsive Design Workflow: Webshaped 2012
Responsive Design Workflow: Webshaped 2012
Stephen Hay2.3K views
Responsive Design Workflow (Breaking Development Conference 2012 Orlando) by Stephen Hay
Responsive Design Workflow (Breaking Development Conference 2012 Orlando)Responsive Design Workflow (Breaking Development Conference 2012 Orlando)
Responsive Design Workflow (Breaking Development Conference 2012 Orlando)
Stephen Hay42.2K views
Go With The Flow by Stephen Hay
Go With The FlowGo With The Flow
Go With The Flow
Stephen Hay13.7K views
Fronteers Workshop: Rabid Prototyping by Stephen Hay
Fronteers Workshop: Rabid PrototypingFronteers Workshop: Rabid Prototyping
Fronteers Workshop: Rabid Prototyping
Stephen Hay3K views
HTML5 & Webrichtlijnen 2 by Stephen Hay
HTML5 & Webrichtlijnen 2HTML5 & Webrichtlijnen 2
HTML5 & Webrichtlijnen 2
Stephen Hay986 views
Real-world Responsive Design by Stephen Hay
Real-world Responsive DesignReal-world Responsive Design
Real-world Responsive Design
Stephen Hay2.1K views
De aanvrager wint by Stephen Hay
De aanvrager wintDe aanvrager wint
De aanvrager wint
Stephen Hay918 views

Recently uploaded

Setting Up Your First CloudStack Environment with Beginners Challenges - MD R... by
Setting Up Your First CloudStack Environment with Beginners Challenges - MD R...Setting Up Your First CloudStack Environment with Beginners Challenges - MD R...
Setting Up Your First CloudStack Environment with Beginners Challenges - MD R...ShapeBlue
173 views15 slides
Transitioning from VMware vCloud to Apache CloudStack: A Path to Profitabilit... by
Transitioning from VMware vCloud to Apache CloudStack: A Path to Profitabilit...Transitioning from VMware vCloud to Apache CloudStack: A Path to Profitabilit...
Transitioning from VMware vCloud to Apache CloudStack: A Path to Profitabilit...ShapeBlue
159 views25 slides
Enabling DPU Hardware Accelerators in XCP-ng Cloud Platform Environment - And... by
Enabling DPU Hardware Accelerators in XCP-ng Cloud Platform Environment - And...Enabling DPU Hardware Accelerators in XCP-ng Cloud Platform Environment - And...
Enabling DPU Hardware Accelerators in XCP-ng Cloud Platform Environment - And...ShapeBlue
106 views12 slides
Confidence in CloudStack - Aron Wagner, Nathan Gleason - Americ by
Confidence in CloudStack - Aron Wagner, Nathan Gleason - AmericConfidence in CloudStack - Aron Wagner, Nathan Gleason - Americ
Confidence in CloudStack - Aron Wagner, Nathan Gleason - AmericShapeBlue
130 views9 slides
KVM Security Groups Under the Hood - Wido den Hollander - Your.Online by
KVM Security Groups Under the Hood - Wido den Hollander - Your.OnlineKVM Security Groups Under the Hood - Wido den Hollander - Your.Online
KVM Security Groups Under the Hood - Wido den Hollander - Your.OnlineShapeBlue
221 views19 slides
"Surviving highload with Node.js", Andrii Shumada by
"Surviving highload with Node.js", Andrii Shumada "Surviving highload with Node.js", Andrii Shumada
"Surviving highload with Node.js", Andrii Shumada Fwdays
56 views29 slides

Recently uploaded(20)

Setting Up Your First CloudStack Environment with Beginners Challenges - MD R... by ShapeBlue
Setting Up Your First CloudStack Environment with Beginners Challenges - MD R...Setting Up Your First CloudStack Environment with Beginners Challenges - MD R...
Setting Up Your First CloudStack Environment with Beginners Challenges - MD R...
ShapeBlue173 views
Transitioning from VMware vCloud to Apache CloudStack: A Path to Profitabilit... by ShapeBlue
Transitioning from VMware vCloud to Apache CloudStack: A Path to Profitabilit...Transitioning from VMware vCloud to Apache CloudStack: A Path to Profitabilit...
Transitioning from VMware vCloud to Apache CloudStack: A Path to Profitabilit...
ShapeBlue159 views
Enabling DPU Hardware Accelerators in XCP-ng Cloud Platform Environment - And... by ShapeBlue
Enabling DPU Hardware Accelerators in XCP-ng Cloud Platform Environment - And...Enabling DPU Hardware Accelerators in XCP-ng Cloud Platform Environment - And...
Enabling DPU Hardware Accelerators in XCP-ng Cloud Platform Environment - And...
ShapeBlue106 views
Confidence in CloudStack - Aron Wagner, Nathan Gleason - Americ by ShapeBlue
Confidence in CloudStack - Aron Wagner, Nathan Gleason - AmericConfidence in CloudStack - Aron Wagner, Nathan Gleason - Americ
Confidence in CloudStack - Aron Wagner, Nathan Gleason - Americ
ShapeBlue130 views
KVM Security Groups Under the Hood - Wido den Hollander - Your.Online by ShapeBlue
KVM Security Groups Under the Hood - Wido den Hollander - Your.OnlineKVM Security Groups Under the Hood - Wido den Hollander - Your.Online
KVM Security Groups Under the Hood - Wido den Hollander - Your.Online
ShapeBlue221 views
"Surviving highload with Node.js", Andrii Shumada by Fwdays
"Surviving highload with Node.js", Andrii Shumada "Surviving highload with Node.js", Andrii Shumada
"Surviving highload with Node.js", Andrii Shumada
Fwdays56 views
CloudStack Object Storage - An Introduction - Vladimir Petrov - ShapeBlue by ShapeBlue
CloudStack Object Storage - An Introduction - Vladimir Petrov - ShapeBlueCloudStack Object Storage - An Introduction - Vladimir Petrov - ShapeBlue
CloudStack Object Storage - An Introduction - Vladimir Petrov - ShapeBlue
ShapeBlue138 views
Elevating Privacy and Security in CloudStack - Boris Stoyanov - ShapeBlue by ShapeBlue
Elevating Privacy and Security in CloudStack - Boris Stoyanov - ShapeBlueElevating Privacy and Security in CloudStack - Boris Stoyanov - ShapeBlue
Elevating Privacy and Security in CloudStack - Boris Stoyanov - ShapeBlue
ShapeBlue222 views
Declarative Kubernetes Cluster Deployment with Cloudstack and Cluster API - O... by ShapeBlue
Declarative Kubernetes Cluster Deployment with Cloudstack and Cluster API - O...Declarative Kubernetes Cluster Deployment with Cloudstack and Cluster API - O...
Declarative Kubernetes Cluster Deployment with Cloudstack and Cluster API - O...
ShapeBlue132 views
The Role of Patterns in the Era of Large Language Models by Yunyao Li
The Role of Patterns in the Era of Large Language ModelsThe Role of Patterns in the Era of Large Language Models
The Role of Patterns in the Era of Large Language Models
Yunyao Li85 views
CloudStack Managed User Data and Demo - Harikrishna Patnala - ShapeBlue by ShapeBlue
CloudStack Managed User Data and Demo - Harikrishna Patnala - ShapeBlueCloudStack Managed User Data and Demo - Harikrishna Patnala - ShapeBlue
CloudStack Managed User Data and Demo - Harikrishna Patnala - ShapeBlue
ShapeBlue135 views
Updates on the LINSTOR Driver for CloudStack - Rene Peinthor - LINBIT by ShapeBlue
Updates on the LINSTOR Driver for CloudStack - Rene Peinthor - LINBITUpdates on the LINSTOR Driver for CloudStack - Rene Peinthor - LINBIT
Updates on the LINSTOR Driver for CloudStack - Rene Peinthor - LINBIT
ShapeBlue206 views
Webinar : Desperately Seeking Transformation - Part 2: Insights from leading... by The Digital Insurer
Webinar : Desperately Seeking Transformation - Part 2:  Insights from leading...Webinar : Desperately Seeking Transformation - Part 2:  Insights from leading...
Webinar : Desperately Seeking Transformation - Part 2: Insights from leading...
What’s New in CloudStack 4.19 - Abhishek Kumar - ShapeBlue by ShapeBlue
What’s New in CloudStack 4.19 - Abhishek Kumar - ShapeBlueWhat’s New in CloudStack 4.19 - Abhishek Kumar - ShapeBlue
What’s New in CloudStack 4.19 - Abhishek Kumar - ShapeBlue
ShapeBlue263 views
GDG Cloud Southlake 28 Brad Taylor and Shawn Augenstein Old Problems in the N... by James Anderson
GDG Cloud Southlake 28 Brad Taylor and Shawn Augenstein Old Problems in the N...GDG Cloud Southlake 28 Brad Taylor and Shawn Augenstein Old Problems in the N...
GDG Cloud Southlake 28 Brad Taylor and Shawn Augenstein Old Problems in the N...
James Anderson160 views
Why and How CloudStack at weSystems - Stephan Bienek - weSystems by ShapeBlue
Why and How CloudStack at weSystems - Stephan Bienek - weSystemsWhy and How CloudStack at weSystems - Stephan Bienek - weSystems
Why and How CloudStack at weSystems - Stephan Bienek - weSystems
ShapeBlue238 views
NTGapps NTG LowCode Platform by Mustafa Kuğu
NTGapps NTG LowCode Platform NTGapps NTG LowCode Platform
NTGapps NTG LowCode Platform
Mustafa Kuğu423 views

Structured Content First