SlideShare a Scribd company logo
1 of 51
Download to read offline
John Eckman | @jeckman | #wcnyc2014
“These fragments I have shored against my ruins”:
Modernism,
Post-Modernism,
and Responsive Web Design
John Eckman | @jeckman | #wcnyc2014
About Me
John Eckman | @jeckman | #wcnyc2014
About Me
• 1998: PhD in American
Literature
John Eckman | @jeckman | #wcnyc2014
About Me
• 1998: PhD in American
Literature
• Diss: “Confronting
Modernity: Urbanization
and American Literature
1880-1930”
John Eckman | @jeckman | #wcnyc2014
About Me
• 1998: PhD in American
Literature
• Diss: “Confronting
Modernity: Urbanization
and American Literature
1880-1930”
• 1999-Present: Web
developer, CMS
consultant, UX director,
Project Manager, Agency
Director
John Eckman | @jeckman | #wcnyc2014
About Me
• 1998: PhD in American
Literature
• Diss: “Confronting
Modernity: Urbanization
and American Literature
1880-1930”
• 1999-Present: Web
developer, CMS
consultant, UX director,
Project Manager, Agency
Director
• Current: CEO at 10up
John Eckman | @jeckman | #wcnyc2014
About Me
• 1998: PhD in American
Literature
• Diss: “Confronting
Modernity: Urbanization
and American Literature
1880-1930”
• 1999-Present: Web
developer, CMS
consultant, UX director,
Project Manager, Agency
Director
• Current: CEO at 10up
• (Yes, we are hiring)
John Eckman | @jeckman | #wcnyc2014
“Now is the time for the medium of the web to outgrow its
origins in the printed page. . . . It is the nature of the web to
be flexible, and it should be our role as designers and
developers to embrace this flexibility . . . The journey begins
by letting go of control, and becoming flexible.”
John Eckman | @jeckman | #wcnyc2014
John Eckman | @jeckman | #wcnyc2014
John Eckman | @jeckman | #wcnyc2014
What happened in
between these two
publications?
John Eckman | @jeckman | #wcnyc2014
“Creating Killer Web Sites was
the first true design book for
the Web. It became the best-
selling book on the Internet in
1996 and has been translated
into ten languages. It has
taught an entire generation of
site designers how to get
control over their pages”
John Eckman | @jeckman | #wcnyc2014
John Eckman | @jeckman | #wcnyc2014
John Eckman | @jeckman | #wcnyc2014
Why do we so resist the
digital nature of the web?
John Eckman | @jeckman | #wcnyc2014
Walter Benjamin
!
!
!
!
!
!
“The Work of Art in the Age of
Mechanical Reproduction
(Reproducibility)” 1936
“that which withers in
the age of mechanical
reproduction is the aura
of the work of art . . . the
technique of reproduction
detaches the reproduced
object from the domain of
tradition”
John Eckman | @jeckman | #wcnyc2014
What is the work of
design, in the age of
digital reproduction?
John Eckman | @jeckman | #wcnyc2014
Prologue
John Eckman | @jeckman | #wcnyc2014
The White City
Chicago World’s Fair 1893
John Eckman | @jeckman | #wcnyc2014
The White City
Chicago World’s Fair 1893
John Eckman | @jeckman | #wcnyc2014
The White City
Chicago World’s Fair 1893
John Eckman | @jeckman | #wcnyc2014
The White City
Chicago World’s Fair 1893
John Eckman | @jeckman | #wcnyc2014
- Daniel Burnham, Master of Works for the Chicago World’s Fair
“Make no Little Plans . . . Make big plans . . .
remembering that a noble, logical diagram once
recorded will never die . . . Let your watchword be order
and your beacon beauty”
John Eckman | @jeckman | #wcnyc2014
Modernism
John Eckman | @jeckman | #wcnyc2014
Modernism
“All fixed, fast-frozen relations, with
their train of ancient and venerable
prejudices and opinions, are swept
away, all new-formed ones become
antiquated before they can ossify.
All that is solid melts into air, all
that is holy is profaned, and man is
at last compelled to face with sober
senses his real conditions of life, and
his relations with his kind”
Marx & Engels, Communist
Manifesto (1848)
John Eckman | @jeckman | #wcnyc2014
Modernism
Turning and turning in the widening gyre
The falcon cannot hear the falconer;
Things fall apart; the centre cannot hold;
Mere anarchy is loosed upon the world, . . .
The best lack all conviction, while the worst
Are full of passionate intensity.
. . .
And what rough beast, its hour come round at last,
Slouches towards Bethlehem to be born?
- Yeats, “The Second Coming” 1919
John Eckman | @jeckman | #wcnyc2014
- T. S. Eliot, The Waste Land 1922
I sat upon the shore
Fishing, with the arid plain behind me
Shall I at least set my lands in order?
London Bridge is falling down falling down falling down
Poi s'ascose nel foco che gli affina
Quando fiam ceu chelidon - O swallow swallow
Le Prince d'Aquitaine a la tour abolie
These fragments I have shored against my ruins
Why then Ile fit you. Hieronymo's mad againe.
Datta. Dayadhvam. Damyata.
Shantih shantih shantih
John Eckman | @jeckman | #wcnyc2014
Modernism
“To be modern is to find ourselves
in an environment that promises
us adventure, power, joy, growth,
transformation of ourselves and
the world - and at the same time
that threatens to destroy
everything we have, everything
we know, everything we are.”
Marshall Berman, All That Is
Solid Melts Into Air (1982)
John Eckman | @jeckman | #wcnyc2014
Post-Modernism
John Eckman | @jeckman | #wcnyc2014
John Eckman | @jeckman | #wcnyc2014
John Eckman | @jeckman | #wcnyc2014
John Eckman | @jeckman | #wcnyc2014
Tryin’ to keep it real (compared to what)
1969: Gene McDaniels
composition, recorded by Les
McCann & Eddie Harris, protests
Nixon and the war in Vietnam.
!
!
2003: “Real Compared to What”
stars Mya and Common selling
Coca Cola, “The Real Thing”
John Eckman | @jeckman | #wcnyc2014
Mo vs Po-mo
• Things Fall Apart / All that is
solid melts into air
• Mourning lost authenticity
• If only we could reassert a
master narrative
• Clear distinction between
“high” and “low” culture
• Aesthetic formalism
• It’s the end of the world as we
know it, and I feel fine
• Authenticity is a lie, a trap
• Distrust of master narratives
• Blurring of lines between
“high” and “low” / “art” and
“commerce”
• Pastiche, collage, parody, irony,
self-referentiality, simulacra
John Eckman | @jeckman | #wcnyc2014
John Eckman | @jeckman | #wcnyc2014
Responsive Web Design
is more than a set of
techniques: it is a push,
to force us out of the
collective hallucination
of fixed-web design
John Eckman | @jeckman | #wcnyc2014
Responsive Web Design
• RWD can’t just mean
producing three comps where
we used to do one (mobile,
tablet, desktop)
• We need to balance the clients’
desire for control with a
realistic sense of device
proliferation and the
appropriate ebb and flow
• Stop trying to make the web
back into a new print
John Eckman | @jeckman | #wcnyc2014
John Eckman | @jeckman | #wcnyc2014
John Eckman | @jeckman | #wcnyc2014
Stop controlling, start designing
John Eckman | @jeckman | #wcnyc2014
Stop controlling, start designing
• Design from content out
John Eckman | @jeckman | #wcnyc2014
Stop controlling, start designing
• Design from content out
• Design for fluidity & device independence - grid
systems, percentages, responsive typography and
imagery
John Eckman | @jeckman | #wcnyc2014
Stop controlling, start designing
• Design from content out
• Design for fluidity & device independence - grid
systems, percentages, responsive typography and
imagery
• Move to real interactions (html,css,js) as early as
possible / practical (but not before that)
John Eckman | @jeckman | #wcnyc2014
Stop controlling, start designing
• Design from content out
• Design for fluidity & device independence - grid
systems, percentages, responsive typography and
imagery
• Move to real interactions (html,css,js) as early as
possible / practical (but not before that)
• Semantic markup and progressive enhancement
FTW!
John Eckman | @jeckman | #wcnyc2014
Epilogue: Control is an
Expensive and Dangerous
Illusion
John Eckman | @jeckman | #wcnyc2014
John Eckman | @jeckman | #wcnyc2014
John Eckman | @jeckman | #wcnyc2014
The White City
• Henry Howard Holmes,
“America’s first serial killer,”
designed and built a hotel to
prey upon primarily young
women who came to visit or
work at the fair
• See Erik Larsen, The Devil in
the White City, 2003
John Eckman | @jeckman | #wcnyc2014
The White City
• Henry Howard Holmes,
“America’s first serial killer,”
designed and built a hotel to
prey upon primarily young
women who came to visit or
work at the fair
• See Erik Larsen, The Devil in
the White City, 2003
John Eckman | @jeckman | #wcnyc2014
John Eckman | @jeckman | #wcnyc2014
Questions?

More Related Content

Viewers also liked

Viewers also liked (7)

Postcolonial theory
Postcolonial theoryPostcolonial theory
Postcolonial theory
 
Postcolonialism
PostcolonialismPostcolonialism
Postcolonialism
 
Postcolonial theory
Postcolonial theoryPostcolonial theory
Postcolonial theory
 
Modernism and Postmodernism
Modernism and PostmodernismModernism and Postmodernism
Modernism and Postmodernism
 
Postcolonialism Theory
Postcolonialism TheoryPostcolonialism Theory
Postcolonialism Theory
 
Modernism In Literature
Modernism In LiteratureModernism In Literature
Modernism In Literature
 
Mood
MoodMood
Mood
 

Similar to "These Fragments I Have Shored Against My Ruins": Modernism, Post-Modernism, and Responsive Web Design

Taking Back What and From Whom?: Imagined Communities and Role of WordPress i...
Taking Back What and From Whom?: Imagined Communities and Role of WordPress i...Taking Back What and From Whom?: Imagined Communities and Role of WordPress i...
Taking Back What and From Whom?: Imagined Communities and Role of WordPress i...John Eckman
 
2013 06-06-ds-keynote-eclipse
2013 06-06-ds-keynote-eclipse2013 06-06-ds-keynote-eclipse
2013 06-06-ds-keynote-eclipseDominique Sciamma
 
Building Community, Building Software
Building Community, Building SoftwareBuilding Community, Building Software
Building Community, Building SoftwareJohn Eckman
 
#NoStalking: Advertising & User Privacy
#NoStalking: Advertising & User Privacy#NoStalking: Advertising & User Privacy
#NoStalking: Advertising & User PrivacyJohn Eckman
 
Transport & travelling presentation
Transport & travelling presentationTransport & travelling presentation
Transport & travelling presentationJon Nicholls
 
Design From the Content Out
Design From the Content OutDesign From the Content Out
Design From the Content OutJohn Eckman
 
Movies with jaw-dropping architecture
Movies with jaw-dropping architectureMovies with jaw-dropping architecture
Movies with jaw-dropping architectureJohn Eilermann
 
Sample Essay Topics For College. C. Online assignment writing service.
Sample Essay Topics For College. C. Online assignment writing service.Sample Essay Topics For College. C. Online assignment writing service.
Sample Essay Topics For College. C. Online assignment writing service.Serena Brown
 
Media in The Online Age - Outline
Media in The Online Age - OutlineMedia in The Online Age - Outline
Media in The Online Age - OutlineKim Fyson
 

Similar to "These Fragments I Have Shored Against My Ruins": Modernism, Post-Modernism, and Responsive Web Design (9)

Taking Back What and From Whom?: Imagined Communities and Role of WordPress i...
Taking Back What and From Whom?: Imagined Communities and Role of WordPress i...Taking Back What and From Whom?: Imagined Communities and Role of WordPress i...
Taking Back What and From Whom?: Imagined Communities and Role of WordPress i...
 
2013 06-06-ds-keynote-eclipse
2013 06-06-ds-keynote-eclipse2013 06-06-ds-keynote-eclipse
2013 06-06-ds-keynote-eclipse
 
Building Community, Building Software
Building Community, Building SoftwareBuilding Community, Building Software
Building Community, Building Software
 
#NoStalking: Advertising & User Privacy
#NoStalking: Advertising & User Privacy#NoStalking: Advertising & User Privacy
#NoStalking: Advertising & User Privacy
 
Transport & travelling presentation
Transport & travelling presentationTransport & travelling presentation
Transport & travelling presentation
 
Design From the Content Out
Design From the Content OutDesign From the Content Out
Design From the Content Out
 
Movies with jaw-dropping architecture
Movies with jaw-dropping architectureMovies with jaw-dropping architecture
Movies with jaw-dropping architecture
 
Sample Essay Topics For College. C. Online assignment writing service.
Sample Essay Topics For College. C. Online assignment writing service.Sample Essay Topics For College. C. Online assignment writing service.
Sample Essay Topics For College. C. Online assignment writing service.
 
Media in The Online Age - Outline
Media in The Online Age - OutlineMedia in The Online Age - Outline
Media in The Online Age - Outline
 

More from John Eckman

Don't fear the block: Gutenberg is gettin' good
Don't fear the block: Gutenberg is gettin' goodDon't fear the block: Gutenberg is gettin' good
Don't fear the block: Gutenberg is gettin' goodJohn Eckman
 
There's a Reason We Call Them Institutions: Working in Higher Education Witho...
There's a Reason We Call Them Institutions: Working in Higher Education Witho...There's a Reason We Call Them Institutions: Working in Higher Education Witho...
There's a Reason We Call Them Institutions: Working in Higher Education Witho...John Eckman
 
Working the Open: Open Source in an Agency
Working the Open: Open Source in an AgencyWorking the Open: Open Source in an Agency
Working the Open: Open Source in an AgencyJohn Eckman
 
GDPR FTW, or, How I Learned to Stop Worrying and Love Privacy By Design
GDPR FTW, or, How I Learned to Stop Worrying and Love Privacy By DesignGDPR FTW, or, How I Learned to Stop Worrying and Love Privacy By Design
GDPR FTW, or, How I Learned to Stop Worrying and Love Privacy By DesignJohn Eckman
 
The Blob, the Chunk, & the Block: Structured Content in the Age of Gutenberg
The Blob, the Chunk, & the Block: Structured Content in the Age of GutenbergThe Blob, the Chunk, & the Block: Structured Content in the Age of Gutenberg
The Blob, the Chunk, & the Block: Structured Content in the Age of GutenbergJohn Eckman
 
Gutenberg for Agencies
Gutenberg for AgenciesGutenberg for Agencies
Gutenberg for AgenciesJohn Eckman
 
Engaging in Digital: Sites for Non-Profits
Engaging in Digital: Sites for Non-ProfitsEngaging in Digital: Sites for Non-Profits
Engaging in Digital: Sites for Non-ProfitsJohn Eckman
 
Dear Firstname Lastname: Personalization & Content Targeting
Dear Firstname Lastname: Personalization & Content TargetingDear Firstname Lastname: Personalization & Content Targeting
Dear Firstname Lastname: Personalization & Content TargetingJohn Eckman
 
But Why? Use Cases for the REST API
But Why? Use Cases for the REST APIBut Why? Use Cases for the REST API
But Why? Use Cases for the REST APIJohn Eckman
 
WPDrama & The Four Agreements
WPDrama & The Four AgreementsWPDrama & The Four Agreements
WPDrama & The Four AgreementsJohn Eckman
 
Distributed, not Disconnected: Employee Engagement for Remote Companies
Distributed, not Disconnected: Employee Engagement for Remote CompaniesDistributed, not Disconnected: Employee Engagement for Remote Companies
Distributed, not Disconnected: Employee Engagement for Remote CompaniesJohn Eckman
 
Disrupting Distribution
Disrupting DistributionDisrupting Distribution
Disrupting DistributionJohn Eckman
 
Managing Clients without Going Crazy
Managing Clients without Going CrazyManaging Clients without Going Crazy
Managing Clients without Going CrazyJohn Eckman
 
Stop Gathering Requirements - Start Defining Success
Stop Gathering Requirements - Start Defining SuccessStop Gathering Requirements - Start Defining Success
Stop Gathering Requirements - Start Defining SuccessJohn Eckman
 
Client Diplomacy: From Adversaries to Allies
Client Diplomacy: From Adversaries to AlliesClient Diplomacy: From Adversaries to Allies
Client Diplomacy: From Adversaries to AlliesJohn Eckman
 
WordPress as a CMS Platform: Gilbane 2015
WordPress as a CMS Platform: Gilbane 2015WordPress as a CMS Platform: Gilbane 2015
WordPress as a CMS Platform: Gilbane 2015John Eckman
 
WordPress and the Enterprise Disconnect
WordPress and the Enterprise DisconnectWordPress and the Enterprise Disconnect
WordPress and the Enterprise DisconnectJohn Eckman
 
The Future of WordPress (and Your Role In It)
The Future of WordPress (and Your Role In It)The Future of WordPress (and Your Role In It)
The Future of WordPress (and Your Role In It)John Eckman
 
Design From the Content Out
Design From the Content OutDesign From the Content Out
Design From the Content OutJohn Eckman
 
Outside the WordPress Bubble
Outside the WordPress BubbleOutside the WordPress Bubble
Outside the WordPress BubbleJohn Eckman
 

More from John Eckman (20)

Don't fear the block: Gutenberg is gettin' good
Don't fear the block: Gutenberg is gettin' goodDon't fear the block: Gutenberg is gettin' good
Don't fear the block: Gutenberg is gettin' good
 
There's a Reason We Call Them Institutions: Working in Higher Education Witho...
There's a Reason We Call Them Institutions: Working in Higher Education Witho...There's a Reason We Call Them Institutions: Working in Higher Education Witho...
There's a Reason We Call Them Institutions: Working in Higher Education Witho...
 
Working the Open: Open Source in an Agency
Working the Open: Open Source in an AgencyWorking the Open: Open Source in an Agency
Working the Open: Open Source in an Agency
 
GDPR FTW, or, How I Learned to Stop Worrying and Love Privacy By Design
GDPR FTW, or, How I Learned to Stop Worrying and Love Privacy By DesignGDPR FTW, or, How I Learned to Stop Worrying and Love Privacy By Design
GDPR FTW, or, How I Learned to Stop Worrying and Love Privacy By Design
 
The Blob, the Chunk, & the Block: Structured Content in the Age of Gutenberg
The Blob, the Chunk, & the Block: Structured Content in the Age of GutenbergThe Blob, the Chunk, & the Block: Structured Content in the Age of Gutenberg
The Blob, the Chunk, & the Block: Structured Content in the Age of Gutenberg
 
Gutenberg for Agencies
Gutenberg for AgenciesGutenberg for Agencies
Gutenberg for Agencies
 
Engaging in Digital: Sites for Non-Profits
Engaging in Digital: Sites for Non-ProfitsEngaging in Digital: Sites for Non-Profits
Engaging in Digital: Sites for Non-Profits
 
Dear Firstname Lastname: Personalization & Content Targeting
Dear Firstname Lastname: Personalization & Content TargetingDear Firstname Lastname: Personalization & Content Targeting
Dear Firstname Lastname: Personalization & Content Targeting
 
But Why? Use Cases for the REST API
But Why? Use Cases for the REST APIBut Why? Use Cases for the REST API
But Why? Use Cases for the REST API
 
WPDrama & The Four Agreements
WPDrama & The Four AgreementsWPDrama & The Four Agreements
WPDrama & The Four Agreements
 
Distributed, not Disconnected: Employee Engagement for Remote Companies
Distributed, not Disconnected: Employee Engagement for Remote CompaniesDistributed, not Disconnected: Employee Engagement for Remote Companies
Distributed, not Disconnected: Employee Engagement for Remote Companies
 
Disrupting Distribution
Disrupting DistributionDisrupting Distribution
Disrupting Distribution
 
Managing Clients without Going Crazy
Managing Clients without Going CrazyManaging Clients without Going Crazy
Managing Clients without Going Crazy
 
Stop Gathering Requirements - Start Defining Success
Stop Gathering Requirements - Start Defining SuccessStop Gathering Requirements - Start Defining Success
Stop Gathering Requirements - Start Defining Success
 
Client Diplomacy: From Adversaries to Allies
Client Diplomacy: From Adversaries to AlliesClient Diplomacy: From Adversaries to Allies
Client Diplomacy: From Adversaries to Allies
 
WordPress as a CMS Platform: Gilbane 2015
WordPress as a CMS Platform: Gilbane 2015WordPress as a CMS Platform: Gilbane 2015
WordPress as a CMS Platform: Gilbane 2015
 
WordPress and the Enterprise Disconnect
WordPress and the Enterprise DisconnectWordPress and the Enterprise Disconnect
WordPress and the Enterprise Disconnect
 
The Future of WordPress (and Your Role In It)
The Future of WordPress (and Your Role In It)The Future of WordPress (and Your Role In It)
The Future of WordPress (and Your Role In It)
 
Design From the Content Out
Design From the Content OutDesign From the Content Out
Design From the Content Out
 
Outside the WordPress Bubble
Outside the WordPress BubbleOutside the WordPress Bubble
Outside the WordPress Bubble
 

Recently uploaded

JET Technology Labs White Paper for Virtualized Security and Encryption Techn...
JET Technology Labs White Paper for Virtualized Security and Encryption Techn...JET Technology Labs White Paper for Virtualized Security and Encryption Techn...
JET Technology Labs White Paper for Virtualized Security and Encryption Techn...amber724300
 
A Glance At The Java Performance Toolbox
A Glance At The Java Performance ToolboxA Glance At The Java Performance Toolbox
A Glance At The Java Performance ToolboxAna-Maria Mihalceanu
 
So einfach geht modernes Roaming fuer Notes und Nomad.pdf
So einfach geht modernes Roaming fuer Notes und Nomad.pdfSo einfach geht modernes Roaming fuer Notes und Nomad.pdf
So einfach geht modernes Roaming fuer Notes und Nomad.pdfpanagenda
 
React JS; all concepts. Contains React Features, JSX, functional & Class comp...
React JS; all concepts. Contains React Features, JSX, functional & Class comp...React JS; all concepts. Contains React Features, JSX, functional & Class comp...
React JS; all concepts. Contains React Features, JSX, functional & Class comp...Karmanjay Verma
 
Glenn Lazarus- Why Your Observability Strategy Needs Security Observability
Glenn Lazarus- Why Your Observability Strategy Needs Security ObservabilityGlenn Lazarus- Why Your Observability Strategy Needs Security Observability
Glenn Lazarus- Why Your Observability Strategy Needs Security Observabilityitnewsafrica
 
Kuma Meshes Part I - The basics - A tutorial
Kuma Meshes Part I - The basics - A tutorialKuma Meshes Part I - The basics - A tutorial
Kuma Meshes Part I - The basics - A tutorialJoão Esperancinha
 
MuleSoft Online Meetup Group - B2B Crash Course: Release SparkNotes
MuleSoft Online Meetup Group - B2B Crash Course: Release SparkNotesMuleSoft Online Meetup Group - B2B Crash Course: Release SparkNotes
MuleSoft Online Meetup Group - B2B Crash Course: Release SparkNotesManik S Magar
 
Generative AI - Gitex v1Generative AI - Gitex v1.pptx
Generative AI - Gitex v1Generative AI - Gitex v1.pptxGenerative AI - Gitex v1Generative AI - Gitex v1.pptx
Generative AI - Gitex v1Generative AI - Gitex v1.pptxfnnc6jmgwh
 
Emixa Mendix Meetup 11 April 2024 about Mendix Native development
Emixa Mendix Meetup 11 April 2024 about Mendix Native developmentEmixa Mendix Meetup 11 April 2024 about Mendix Native development
Emixa Mendix Meetup 11 April 2024 about Mendix Native developmentPim van der Noll
 
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyes
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyesHow to Effectively Monitor SD-WAN and SASE Environments with ThousandEyes
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyesThousandEyes
 
QMMS Lesson 2 - Using MS Excel Formula.pdf
QMMS Lesson 2 - Using MS Excel Formula.pdfQMMS Lesson 2 - Using MS Excel Formula.pdf
QMMS Lesson 2 - Using MS Excel Formula.pdfROWELL MARQUINA
 
Infrared simulation and processing on Nvidia platforms
Infrared simulation and processing on Nvidia platformsInfrared simulation and processing on Nvidia platforms
Infrared simulation and processing on Nvidia platformsYoss Cohen
 
Long journey of Ruby standard library at RubyConf AU 2024
Long journey of Ruby standard library at RubyConf AU 2024Long journey of Ruby standard library at RubyConf AU 2024
Long journey of Ruby standard library at RubyConf AU 2024Hiroshi SHIBATA
 
Genislab builds better products and faster go-to-market with Lean project man...
Genislab builds better products and faster go-to-market with Lean project man...Genislab builds better products and faster go-to-market with Lean project man...
Genislab builds better products and faster go-to-market with Lean project man...Farhan Tariq
 
Arizona Broadband Policy Past, Present, and Future Presentation 3/25/24
Arizona Broadband Policy Past, Present, and Future Presentation 3/25/24Arizona Broadband Policy Past, Present, and Future Presentation 3/25/24
Arizona Broadband Policy Past, Present, and Future Presentation 3/25/24Mark Goldstein
 
Tampa BSides - The No BS SOC (slides from April 6, 2024 talk)
Tampa BSides - The No BS SOC (slides from April 6, 2024 talk)Tampa BSides - The No BS SOC (slides from April 6, 2024 talk)
Tampa BSides - The No BS SOC (slides from April 6, 2024 talk)Mark Simos
 
Why Agile? - A handbook behind Agile Evolution
Why Agile? - A handbook behind Agile EvolutionWhy Agile? - A handbook behind Agile Evolution
Why Agile? - A handbook behind Agile EvolutionDEEPRAJ PATHAK
 
Which standard is best for your content?
Which standard is best for your content?Which standard is best for your content?
Which standard is best for your content?Rustici Software
 
Email Marketing Automation for Bonterra Impact Management (fka Social Solutio...
Email Marketing Automation for Bonterra Impact Management (fka Social Solutio...Email Marketing Automation for Bonterra Impact Management (fka Social Solutio...
Email Marketing Automation for Bonterra Impact Management (fka Social Solutio...Jeffrey Haguewood
 
Why device, WIFI, and ISP insights are crucial to supporting remote Microsoft...
Why device, WIFI, and ISP insights are crucial to supporting remote Microsoft...Why device, WIFI, and ISP insights are crucial to supporting remote Microsoft...
Why device, WIFI, and ISP insights are crucial to supporting remote Microsoft...panagenda
 

Recently uploaded (20)

JET Technology Labs White Paper for Virtualized Security and Encryption Techn...
JET Technology Labs White Paper for Virtualized Security and Encryption Techn...JET Technology Labs White Paper for Virtualized Security and Encryption Techn...
JET Technology Labs White Paper for Virtualized Security and Encryption Techn...
 
A Glance At The Java Performance Toolbox
A Glance At The Java Performance ToolboxA Glance At The Java Performance Toolbox
A Glance At The Java Performance Toolbox
 
So einfach geht modernes Roaming fuer Notes und Nomad.pdf
So einfach geht modernes Roaming fuer Notes und Nomad.pdfSo einfach geht modernes Roaming fuer Notes und Nomad.pdf
So einfach geht modernes Roaming fuer Notes und Nomad.pdf
 
React JS; all concepts. Contains React Features, JSX, functional & Class comp...
React JS; all concepts. Contains React Features, JSX, functional & Class comp...React JS; all concepts. Contains React Features, JSX, functional & Class comp...
React JS; all concepts. Contains React Features, JSX, functional & Class comp...
 
Glenn Lazarus- Why Your Observability Strategy Needs Security Observability
Glenn Lazarus- Why Your Observability Strategy Needs Security ObservabilityGlenn Lazarus- Why Your Observability Strategy Needs Security Observability
Glenn Lazarus- Why Your Observability Strategy Needs Security Observability
 
Kuma Meshes Part I - The basics - A tutorial
Kuma Meshes Part I - The basics - A tutorialKuma Meshes Part I - The basics - A tutorial
Kuma Meshes Part I - The basics - A tutorial
 
MuleSoft Online Meetup Group - B2B Crash Course: Release SparkNotes
MuleSoft Online Meetup Group - B2B Crash Course: Release SparkNotesMuleSoft Online Meetup Group - B2B Crash Course: Release SparkNotes
MuleSoft Online Meetup Group - B2B Crash Course: Release SparkNotes
 
Generative AI - Gitex v1Generative AI - Gitex v1.pptx
Generative AI - Gitex v1Generative AI - Gitex v1.pptxGenerative AI - Gitex v1Generative AI - Gitex v1.pptx
Generative AI - Gitex v1Generative AI - Gitex v1.pptx
 
Emixa Mendix Meetup 11 April 2024 about Mendix Native development
Emixa Mendix Meetup 11 April 2024 about Mendix Native developmentEmixa Mendix Meetup 11 April 2024 about Mendix Native development
Emixa Mendix Meetup 11 April 2024 about Mendix Native development
 
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyes
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyesHow to Effectively Monitor SD-WAN and SASE Environments with ThousandEyes
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyes
 
QMMS Lesson 2 - Using MS Excel Formula.pdf
QMMS Lesson 2 - Using MS Excel Formula.pdfQMMS Lesson 2 - Using MS Excel Formula.pdf
QMMS Lesson 2 - Using MS Excel Formula.pdf
 
Infrared simulation and processing on Nvidia platforms
Infrared simulation and processing on Nvidia platformsInfrared simulation and processing on Nvidia platforms
Infrared simulation and processing on Nvidia platforms
 
Long journey of Ruby standard library at RubyConf AU 2024
Long journey of Ruby standard library at RubyConf AU 2024Long journey of Ruby standard library at RubyConf AU 2024
Long journey of Ruby standard library at RubyConf AU 2024
 
Genislab builds better products and faster go-to-market with Lean project man...
Genislab builds better products and faster go-to-market with Lean project man...Genislab builds better products and faster go-to-market with Lean project man...
Genislab builds better products and faster go-to-market with Lean project man...
 
Arizona Broadband Policy Past, Present, and Future Presentation 3/25/24
Arizona Broadband Policy Past, Present, and Future Presentation 3/25/24Arizona Broadband Policy Past, Present, and Future Presentation 3/25/24
Arizona Broadband Policy Past, Present, and Future Presentation 3/25/24
 
Tampa BSides - The No BS SOC (slides from April 6, 2024 talk)
Tampa BSides - The No BS SOC (slides from April 6, 2024 talk)Tampa BSides - The No BS SOC (slides from April 6, 2024 talk)
Tampa BSides - The No BS SOC (slides from April 6, 2024 talk)
 
Why Agile? - A handbook behind Agile Evolution
Why Agile? - A handbook behind Agile EvolutionWhy Agile? - A handbook behind Agile Evolution
Why Agile? - A handbook behind Agile Evolution
 
Which standard is best for your content?
Which standard is best for your content?Which standard is best for your content?
Which standard is best for your content?
 
Email Marketing Automation for Bonterra Impact Management (fka Social Solutio...
Email Marketing Automation for Bonterra Impact Management (fka Social Solutio...Email Marketing Automation for Bonterra Impact Management (fka Social Solutio...
Email Marketing Automation for Bonterra Impact Management (fka Social Solutio...
 
Why device, WIFI, and ISP insights are crucial to supporting remote Microsoft...
Why device, WIFI, and ISP insights are crucial to supporting remote Microsoft...Why device, WIFI, and ISP insights are crucial to supporting remote Microsoft...
Why device, WIFI, and ISP insights are crucial to supporting remote Microsoft...
 

"These Fragments I Have Shored Against My Ruins": Modernism, Post-Modernism, and Responsive Web Design

  • 1. John Eckman | @jeckman | #wcnyc2014 “These fragments I have shored against my ruins”: Modernism, Post-Modernism, and Responsive Web Design
  • 2. John Eckman | @jeckman | #wcnyc2014 About Me
  • 3. John Eckman | @jeckman | #wcnyc2014 About Me • 1998: PhD in American Literature
  • 4. John Eckman | @jeckman | #wcnyc2014 About Me • 1998: PhD in American Literature • Diss: “Confronting Modernity: Urbanization and American Literature 1880-1930”
  • 5. John Eckman | @jeckman | #wcnyc2014 About Me • 1998: PhD in American Literature • Diss: “Confronting Modernity: Urbanization and American Literature 1880-1930” • 1999-Present: Web developer, CMS consultant, UX director, Project Manager, Agency Director
  • 6. John Eckman | @jeckman | #wcnyc2014 About Me • 1998: PhD in American Literature • Diss: “Confronting Modernity: Urbanization and American Literature 1880-1930” • 1999-Present: Web developer, CMS consultant, UX director, Project Manager, Agency Director • Current: CEO at 10up
  • 7. John Eckman | @jeckman | #wcnyc2014 About Me • 1998: PhD in American Literature • Diss: “Confronting Modernity: Urbanization and American Literature 1880-1930” • 1999-Present: Web developer, CMS consultant, UX director, Project Manager, Agency Director • Current: CEO at 10up • (Yes, we are hiring)
  • 8. John Eckman | @jeckman | #wcnyc2014 “Now is the time for the medium of the web to outgrow its origins in the printed page. . . . It is the nature of the web to be flexible, and it should be our role as designers and developers to embrace this flexibility . . . The journey begins by letting go of control, and becoming flexible.”
  • 9. John Eckman | @jeckman | #wcnyc2014
  • 10. John Eckman | @jeckman | #wcnyc2014
  • 11. John Eckman | @jeckman | #wcnyc2014 What happened in between these two publications?
  • 12. John Eckman | @jeckman | #wcnyc2014 “Creating Killer Web Sites was the first true design book for the Web. It became the best- selling book on the Internet in 1996 and has been translated into ten languages. It has taught an entire generation of site designers how to get control over their pages”
  • 13. John Eckman | @jeckman | #wcnyc2014
  • 14. John Eckman | @jeckman | #wcnyc2014
  • 15. John Eckman | @jeckman | #wcnyc2014 Why do we so resist the digital nature of the web?
  • 16. John Eckman | @jeckman | #wcnyc2014 Walter Benjamin ! ! ! ! ! ! “The Work of Art in the Age of Mechanical Reproduction (Reproducibility)” 1936 “that which withers in the age of mechanical reproduction is the aura of the work of art . . . the technique of reproduction detaches the reproduced object from the domain of tradition”
  • 17. John Eckman | @jeckman | #wcnyc2014 What is the work of design, in the age of digital reproduction?
  • 18. John Eckman | @jeckman | #wcnyc2014 Prologue
  • 19. John Eckman | @jeckman | #wcnyc2014 The White City Chicago World’s Fair 1893
  • 20. John Eckman | @jeckman | #wcnyc2014 The White City Chicago World’s Fair 1893
  • 21. John Eckman | @jeckman | #wcnyc2014 The White City Chicago World’s Fair 1893
  • 22. John Eckman | @jeckman | #wcnyc2014 The White City Chicago World’s Fair 1893
  • 23. John Eckman | @jeckman | #wcnyc2014 - Daniel Burnham, Master of Works for the Chicago World’s Fair “Make no Little Plans . . . Make big plans . . . remembering that a noble, logical diagram once recorded will never die . . . Let your watchword be order and your beacon beauty”
  • 24. John Eckman | @jeckman | #wcnyc2014 Modernism
  • 25. John Eckman | @jeckman | #wcnyc2014 Modernism “All fixed, fast-frozen relations, with their train of ancient and venerable prejudices and opinions, are swept away, all new-formed ones become antiquated before they can ossify. All that is solid melts into air, all that is holy is profaned, and man is at last compelled to face with sober senses his real conditions of life, and his relations with his kind” Marx & Engels, Communist Manifesto (1848)
  • 26. John Eckman | @jeckman | #wcnyc2014 Modernism Turning and turning in the widening gyre The falcon cannot hear the falconer; Things fall apart; the centre cannot hold; Mere anarchy is loosed upon the world, . . . The best lack all conviction, while the worst Are full of passionate intensity. . . . And what rough beast, its hour come round at last, Slouches towards Bethlehem to be born? - Yeats, “The Second Coming” 1919
  • 27. John Eckman | @jeckman | #wcnyc2014 - T. S. Eliot, The Waste Land 1922 I sat upon the shore Fishing, with the arid plain behind me Shall I at least set my lands in order? London Bridge is falling down falling down falling down Poi s'ascose nel foco che gli affina Quando fiam ceu chelidon - O swallow swallow Le Prince d'Aquitaine a la tour abolie These fragments I have shored against my ruins Why then Ile fit you. Hieronymo's mad againe. Datta. Dayadhvam. Damyata. Shantih shantih shantih
  • 28. John Eckman | @jeckman | #wcnyc2014 Modernism “To be modern is to find ourselves in an environment that promises us adventure, power, joy, growth, transformation of ourselves and the world - and at the same time that threatens to destroy everything we have, everything we know, everything we are.” Marshall Berman, All That Is Solid Melts Into Air (1982)
  • 29. John Eckman | @jeckman | #wcnyc2014 Post-Modernism
  • 30. John Eckman | @jeckman | #wcnyc2014
  • 31. John Eckman | @jeckman | #wcnyc2014
  • 32. John Eckman | @jeckman | #wcnyc2014
  • 33. John Eckman | @jeckman | #wcnyc2014 Tryin’ to keep it real (compared to what) 1969: Gene McDaniels composition, recorded by Les McCann & Eddie Harris, protests Nixon and the war in Vietnam. ! ! 2003: “Real Compared to What” stars Mya and Common selling Coca Cola, “The Real Thing”
  • 34. John Eckman | @jeckman | #wcnyc2014 Mo vs Po-mo • Things Fall Apart / All that is solid melts into air • Mourning lost authenticity • If only we could reassert a master narrative • Clear distinction between “high” and “low” culture • Aesthetic formalism • It’s the end of the world as we know it, and I feel fine • Authenticity is a lie, a trap • Distrust of master narratives • Blurring of lines between “high” and “low” / “art” and “commerce” • Pastiche, collage, parody, irony, self-referentiality, simulacra
  • 35. John Eckman | @jeckman | #wcnyc2014
  • 36. John Eckman | @jeckman | #wcnyc2014 Responsive Web Design is more than a set of techniques: it is a push, to force us out of the collective hallucination of fixed-web design
  • 37. John Eckman | @jeckman | #wcnyc2014 Responsive Web Design • RWD can’t just mean producing three comps where we used to do one (mobile, tablet, desktop) • We need to balance the clients’ desire for control with a realistic sense of device proliferation and the appropriate ebb and flow • Stop trying to make the web back into a new print
  • 38. John Eckman | @jeckman | #wcnyc2014
  • 39. John Eckman | @jeckman | #wcnyc2014
  • 40. John Eckman | @jeckman | #wcnyc2014 Stop controlling, start designing
  • 41. John Eckman | @jeckman | #wcnyc2014 Stop controlling, start designing • Design from content out
  • 42. John Eckman | @jeckman | #wcnyc2014 Stop controlling, start designing • Design from content out • Design for fluidity & device independence - grid systems, percentages, responsive typography and imagery
  • 43. John Eckman | @jeckman | #wcnyc2014 Stop controlling, start designing • Design from content out • Design for fluidity & device independence - grid systems, percentages, responsive typography and imagery • Move to real interactions (html,css,js) as early as possible / practical (but not before that)
  • 44. John Eckman | @jeckman | #wcnyc2014 Stop controlling, start designing • Design from content out • Design for fluidity & device independence - grid systems, percentages, responsive typography and imagery • Move to real interactions (html,css,js) as early as possible / practical (but not before that) • Semantic markup and progressive enhancement FTW!
  • 45. John Eckman | @jeckman | #wcnyc2014 Epilogue: Control is an Expensive and Dangerous Illusion
  • 46. John Eckman | @jeckman | #wcnyc2014
  • 47. John Eckman | @jeckman | #wcnyc2014
  • 48. John Eckman | @jeckman | #wcnyc2014 The White City • Henry Howard Holmes, “America’s first serial killer,” designed and built a hotel to prey upon primarily young women who came to visit or work at the fair • See Erik Larsen, The Devil in the White City, 2003
  • 49. John Eckman | @jeckman | #wcnyc2014 The White City • Henry Howard Holmes, “America’s first serial killer,” designed and built a hotel to prey upon primarily young women who came to visit or work at the fair • See Erik Larsen, The Devil in the White City, 2003
  • 50. John Eckman | @jeckman | #wcnyc2014
  • 51. John Eckman | @jeckman | #wcnyc2014 Questions?