SlideShare uma empresa Scribd logo
1 de 30
Baixar para ler offline
School of something
FACULTY OF OTHER
Responsive design in ten minutes
Mobile Learning Network
Rich Ashby
19 June 2013
Background
Multi-device world
Background
Exponential growth of mobile
Background
Poor user experience
Background
Responsive design began in 2010
Benefits of responsive design
Helps us reach the widest audience
Benefits of responsive design
Radically enhances user experience
Benefits of responsive design
Competitive parity
Benefits of responsive design
Platform agnostic
Benefits of responsive design
Flexible and future-proof
Benefits of responsive design
Improved search rankings
Building blocks
HTML5 and CSS3
Building blocks
Viewports
Building blocks
Media queries
Building blocks
Fluid grids and breakpoints
Building blocks
JavaScript and jQuery
How does it all work?
Media queries detect device
How does it all work?
Fluid grid layouts served to devices
Challenges
Retro-fitting can be difficult
Challenges
Images need to work with fluid grids
Challenges
Images need to work with fluid grids
Challenges
Images need to work with fluid grids
Challenges
Images need to work with fluid grids
Challenges
High pixel density displays
Challenges
Browser support
Challenges
Planning process
Challenges
Additional testing
Challenges
Much greater focus on typography
Good news
Full support in Jadu and WordPress
Thank-you
Questions and demo

Mais conteúdo relacionado

Destaque

poverty by Armghan Arshad
poverty by Armghan Arshadpoverty by Armghan Arshad
poverty by Armghan Arshadkaka ptaka
 
Certidão de Acervo Técnico EMURB-SP
Certidão de Acervo Técnico EMURB-SPCertidão de Acervo Técnico EMURB-SP
Certidão de Acervo Técnico EMURB-SPGladston Bernardi
 
Top 5 digital trends of 2016
Top 5 digital trends of 2016Top 5 digital trends of 2016
Top 5 digital trends of 2016Gianluca Girard
 
200810 Communities&Conversations
200810 Communities&Conversations200810 Communities&Conversations
200810 Communities&ConversationsRob Inskeep
 
Lean Manufacturing Is Not Like Software Development
Lean Manufacturing Is Not Like Software DevelopmentLean Manufacturing Is Not Like Software Development
Lean Manufacturing Is Not Like Software DevelopmentDarren Duarte
 
Kent Nichols, "Downshifting Your Life to Rev Up Your Creativity"
Kent Nichols, "Downshifting Your Life to Rev Up Your Creativity"Kent Nichols, "Downshifting Your Life to Rev Up Your Creativity"
Kent Nichols, "Downshifting Your Life to Rev Up Your Creativity"WebVisions
 
Monster Loyalty presentation - annotated slides
Monster Loyalty presentation - annotated slidesMonster Loyalty presentation - annotated slides
Monster Loyalty presentation - annotated slidesJackie Huba
 
Xxxxxx karim a hamir 2015 resume
Xxxxxx karim a  hamir 2015 resumeXxxxxx karim a  hamir 2015 resume
Xxxxxx karim a hamir 2015 resumeKarim Hamir
 
The Current State of Trade Secret Law and How the New Federal Statute Will Sh...
The Current State of Trade Secret Law and How the New Federal Statute Will Sh...The Current State of Trade Secret Law and How the New Federal Statute Will Sh...
The Current State of Trade Secret Law and How the New Federal Statute Will Sh...Knobbe Martens - Intellectual Property Law
 

Destaque (12)

poverty by Armghan Arshad
poverty by Armghan Arshadpoverty by Armghan Arshad
poverty by Armghan Arshad
 
Burnette - Building a culture of trust
Burnette - Building a culture of trust Burnette - Building a culture of trust
Burnette - Building a culture of trust
 
Certidão de Acervo Técnico EMURB-SP
Certidão de Acervo Técnico EMURB-SPCertidão de Acervo Técnico EMURB-SP
Certidão de Acervo Técnico EMURB-SP
 
PerfilInnews
PerfilInnewsPerfilInnews
PerfilInnews
 
Top 5 digital trends of 2016
Top 5 digital trends of 2016Top 5 digital trends of 2016
Top 5 digital trends of 2016
 
200810 Communities&Conversations
200810 Communities&Conversations200810 Communities&Conversations
200810 Communities&Conversations
 
Lean Manufacturing Is Not Like Software Development
Lean Manufacturing Is Not Like Software DevelopmentLean Manufacturing Is Not Like Software Development
Lean Manufacturing Is Not Like Software Development
 
2015 Intellectual Property (IP) Year in Review
2015 Intellectual Property (IP) Year in Review2015 Intellectual Property (IP) Year in Review
2015 Intellectual Property (IP) Year in Review
 
Kent Nichols, "Downshifting Your Life to Rev Up Your Creativity"
Kent Nichols, "Downshifting Your Life to Rev Up Your Creativity"Kent Nichols, "Downshifting Your Life to Rev Up Your Creativity"
Kent Nichols, "Downshifting Your Life to Rev Up Your Creativity"
 
Monster Loyalty presentation - annotated slides
Monster Loyalty presentation - annotated slidesMonster Loyalty presentation - annotated slides
Monster Loyalty presentation - annotated slides
 
Xxxxxx karim a hamir 2015 resume
Xxxxxx karim a  hamir 2015 resumeXxxxxx karim a  hamir 2015 resume
Xxxxxx karim a hamir 2015 resume
 
The Current State of Trade Secret Law and How the New Federal Statute Will Sh...
The Current State of Trade Secret Law and How the New Federal Statute Will Sh...The Current State of Trade Secret Law and How the New Federal Statute Will Sh...
The Current State of Trade Secret Law and How the New Federal Statute Will Sh...
 

Semelhante a Responsive design in ten minutes

Plan For Accessibility - TODCon 2008
Plan For Accessibility - TODCon 2008Plan For Accessibility - TODCon 2008
Plan For Accessibility - TODCon 2008Denise Jacobs
 
Usability in a Multidisciplinary Team
Usability in a Multidisciplinary TeamUsability in a Multidisciplinary Team
Usability in a Multidisciplinary TeamLisa Herrod
 
Perficient PepsiCo Rich Internet Apps Seminar
Perficient PepsiCo Rich Internet Apps SeminarPerficient PepsiCo Rich Internet Apps Seminar
Perficient PepsiCo Rich Internet Apps SeminarPerficient, Inc.
 
Responsive Web Design & the Library
Responsive Web Design & the LibraryResponsive Web Design & the Library
Responsive Web Design & the Libraryariannaschlegel
 
Twitter bootstrap-101
Twitter bootstrap-101Twitter bootstrap-101
Twitter bootstrap-101Kim Hardie
 
Startup Institute NYC: Styling
Startup Institute NYC: StylingStartup Institute NYC: Styling
Startup Institute NYC: StylingMatthew Gerrior
 
Progressive Enhancement
Progressive EnhancementProgressive Enhancement
Progressive EnhancementDan Sagisser
 
RESPONSIVE WEB DESIGN
RESPONSIVE WEB DESIGNRESPONSIVE WEB DESIGN
RESPONSIVE WEB DESIGNNAWAZ KHAN
 
2014 Android and iOS Design Trends
2014 Android and iOS Design Trends2014 Android and iOS Design Trends
2014 Android and iOS Design TrendsMelvin Thambi
 
How not having a Responsive Website can be Detrimental to your business?
How not having a Responsive Website can be Detrimental to your business?How not having a Responsive Website can be Detrimental to your business?
How not having a Responsive Website can be Detrimental to your business?Helios Solutions
 
Adapt Multi-Device Learning Webinar - January 22nd 2014
Adapt Multi-Device Learning Webinar - January 22nd 2014Adapt Multi-Device Learning Webinar - January 22nd 2014
Adapt Multi-Device Learning Webinar - January 22nd 2014Kineo
 
Adapt Webinar on Responsive E-learning | Learning Pool, C&G Kineo, Sponge UK
Adapt Webinar on Responsive E-learning | Learning Pool, C&G Kineo, Sponge UKAdapt Webinar on Responsive E-learning | Learning Pool, C&G Kineo, Sponge UK
Adapt Webinar on Responsive E-learning | Learning Pool, C&G Kineo, Sponge UKLearning Pool Ltd
 
Responsive Web Design - Advantages and Best Practice for Sports Direct
Responsive Web Design - Advantages and Best Practice for Sports DirectResponsive Web Design - Advantages and Best Practice for Sports Direct
Responsive Web Design - Advantages and Best Practice for Sports DirectCantarus
 
Responsive Web Design: Advantages & Best Practice - Darrin Adams, Cantarus
Responsive Web Design: Advantages & Best Practice - Darrin Adams, CantarusResponsive Web Design: Advantages & Best Practice - Darrin Adams, Cantarus
Responsive Web Design: Advantages & Best Practice - Darrin Adams, CantarusInternet World
 
The Future of Accessibility - presented at Build the Perfect Council Website ...
The Future of Accessibility - presented at Build the Perfect Council Website ...The Future of Accessibility - presented at Build the Perfect Council Website ...
The Future of Accessibility - presented at Build the Perfect Council Website ...AbilityNet
 
Directions on microsoft_web_and_cloud_development
Directions on microsoft_web_and_cloud_developmentDirections on microsoft_web_and_cloud_development
Directions on microsoft_web_and_cloud_developmentTakeshi Shinmura
 
MAHESH NALLABOTHULA_resume (1) (1)
MAHESH NALLABOTHULA_resume (1) (1)MAHESH NALLABOTHULA_resume (1) (1)
MAHESH NALLABOTHULA_resume (1) (1)MAHESH NALLABOTHULA
 

Semelhante a Responsive design in ten minutes (20)

Plan For Accessibility - TODCon 2008
Plan For Accessibility - TODCon 2008Plan For Accessibility - TODCon 2008
Plan For Accessibility - TODCon 2008
 
Usability in a Multidisciplinary Team
Usability in a Multidisciplinary TeamUsability in a Multidisciplinary Team
Usability in a Multidisciplinary Team
 
Perficient PepsiCo Rich Internet Apps Seminar
Perficient PepsiCo Rich Internet Apps SeminarPerficient PepsiCo Rich Internet Apps Seminar
Perficient PepsiCo Rich Internet Apps Seminar
 
Aamdani.com
Aamdani.com Aamdani.com
Aamdani.com
 
Responsive Web Design & the Library
Responsive Web Design & the LibraryResponsive Web Design & the Library
Responsive Web Design & the Library
 
Twitter bootstrap-101
Twitter bootstrap-101Twitter bootstrap-101
Twitter bootstrap-101
 
Startup Institute NYC: Styling
Startup Institute NYC: StylingStartup Institute NYC: Styling
Startup Institute NYC: Styling
 
Progressive Enhancement
Progressive EnhancementProgressive Enhancement
Progressive Enhancement
 
RESPONSIVE WEB DESIGN
RESPONSIVE WEB DESIGNRESPONSIVE WEB DESIGN
RESPONSIVE WEB DESIGN
 
2014 Android and iOS Design Trends
2014 Android and iOS Design Trends2014 Android and iOS Design Trends
2014 Android and iOS Design Trends
 
How not having a Responsive Website can be Detrimental to your business?
How not having a Responsive Website can be Detrimental to your business?How not having a Responsive Website can be Detrimental to your business?
How not having a Responsive Website can be Detrimental to your business?
 
Resume-UI developer
Resume-UI developerResume-UI developer
Resume-UI developer
 
Adapt Multi-Device Learning Webinar - January 22nd 2014
Adapt Multi-Device Learning Webinar - January 22nd 2014Adapt Multi-Device Learning Webinar - January 22nd 2014
Adapt Multi-Device Learning Webinar - January 22nd 2014
 
Adapt Webinar on Responsive E-learning | Learning Pool, C&G Kineo, Sponge UK
Adapt Webinar on Responsive E-learning | Learning Pool, C&G Kineo, Sponge UKAdapt Webinar on Responsive E-learning | Learning Pool, C&G Kineo, Sponge UK
Adapt Webinar on Responsive E-learning | Learning Pool, C&G Kineo, Sponge UK
 
Ws 16
Ws 16Ws 16
Ws 16
 
Responsive Web Design - Advantages and Best Practice for Sports Direct
Responsive Web Design - Advantages and Best Practice for Sports DirectResponsive Web Design - Advantages and Best Practice for Sports Direct
Responsive Web Design - Advantages and Best Practice for Sports Direct
 
Responsive Web Design: Advantages & Best Practice - Darrin Adams, Cantarus
Responsive Web Design: Advantages & Best Practice - Darrin Adams, CantarusResponsive Web Design: Advantages & Best Practice - Darrin Adams, Cantarus
Responsive Web Design: Advantages & Best Practice - Darrin Adams, Cantarus
 
The Future of Accessibility - presented at Build the Perfect Council Website ...
The Future of Accessibility - presented at Build the Perfect Council Website ...The Future of Accessibility - presented at Build the Perfect Council Website ...
The Future of Accessibility - presented at Build the Perfect Council Website ...
 
Directions on microsoft_web_and_cloud_development
Directions on microsoft_web_and_cloud_developmentDirections on microsoft_web_and_cloud_development
Directions on microsoft_web_and_cloud_development
 
MAHESH NALLABOTHULA_resume (1) (1)
MAHESH NALLABOTHULA_resume (1) (1)MAHESH NALLABOTHULA_resume (1) (1)
MAHESH NALLABOTHULA_resume (1) (1)
 

Último

5 charts on South Africa as a source country for international student recrui...
5 charts on South Africa as a source country for international student recrui...5 charts on South Africa as a source country for international student recrui...
5 charts on South Africa as a source country for international student recrui...CaraSkikne1
 
How to Add a many2many Relational Field in Odoo 17
How to Add a many2many Relational Field in Odoo 17How to Add a many2many Relational Field in Odoo 17
How to Add a many2many Relational Field in Odoo 17Celine George
 
DUST OF SNOW_BY ROBERT FROST_EDITED BY_ TANMOY MISHRA
DUST OF SNOW_BY ROBERT FROST_EDITED BY_ TANMOY MISHRADUST OF SNOW_BY ROBERT FROST_EDITED BY_ TANMOY MISHRA
DUST OF SNOW_BY ROBERT FROST_EDITED BY_ TANMOY MISHRATanmoy Mishra
 
Easter in the USA presentation by Chloe.
Easter in the USA presentation by Chloe.Easter in the USA presentation by Chloe.
Easter in the USA presentation by Chloe.EnglishCEIPdeSigeiro
 
2024.03.23 What do successful readers do - Sandy Millin for PARK.pptx
2024.03.23 What do successful readers do - Sandy Millin for PARK.pptx2024.03.23 What do successful readers do - Sandy Millin for PARK.pptx
2024.03.23 What do successful readers do - Sandy Millin for PARK.pptxSandy Millin
 
Patterns of Written Texts Across Disciplines.pptx
Patterns of Written Texts Across Disciplines.pptxPatterns of Written Texts Across Disciplines.pptx
Patterns of Written Texts Across Disciplines.pptxMYDA ANGELICA SUAN
 
Clinical Pharmacy Introduction to Clinical Pharmacy, Concept of clinical pptx
Clinical Pharmacy  Introduction to Clinical Pharmacy, Concept of clinical pptxClinical Pharmacy  Introduction to Clinical Pharmacy, Concept of clinical pptx
Clinical Pharmacy Introduction to Clinical Pharmacy, Concept of clinical pptxraviapr7
 
Diploma in Nursing Admission Test Question Solution 2023.pdf
Diploma in Nursing Admission Test Question Solution 2023.pdfDiploma in Nursing Admission Test Question Solution 2023.pdf
Diploma in Nursing Admission Test Question Solution 2023.pdfMohonDas
 
Quality Assurance_GOOD LABORATORY PRACTICE
Quality Assurance_GOOD LABORATORY PRACTICEQuality Assurance_GOOD LABORATORY PRACTICE
Quality Assurance_GOOD LABORATORY PRACTICESayali Powar
 
How to Add a New Field in Existing Kanban View in Odoo 17
How to Add a New Field in Existing Kanban View in Odoo 17How to Add a New Field in Existing Kanban View in Odoo 17
How to Add a New Field in Existing Kanban View in Odoo 17Celine George
 
Prescribed medication order and communication skills.pptx
Prescribed medication order and communication skills.pptxPrescribed medication order and communication skills.pptx
Prescribed medication order and communication skills.pptxraviapr7
 
CAULIFLOWER BREEDING 1 Parmar pptx
CAULIFLOWER BREEDING 1 Parmar pptxCAULIFLOWER BREEDING 1 Parmar pptx
CAULIFLOWER BREEDING 1 Parmar pptxSaurabhParmar42
 
Benefits & Challenges of Inclusive Education
Benefits & Challenges of Inclusive EducationBenefits & Challenges of Inclusive Education
Benefits & Challenges of Inclusive EducationMJDuyan
 
Ultra structure and life cycle of Plasmodium.pptx
Ultra structure and life cycle of Plasmodium.pptxUltra structure and life cycle of Plasmodium.pptx
Ultra structure and life cycle of Plasmodium.pptxDr. Asif Anas
 
PISA-VET launch_El Iza Mohamedou_19 March 2024.pptx
PISA-VET launch_El Iza Mohamedou_19 March 2024.pptxPISA-VET launch_El Iza Mohamedou_19 March 2024.pptx
PISA-VET launch_El Iza Mohamedou_19 March 2024.pptxEduSkills OECD
 
M-2- General Reactions of amino acids.pptx
M-2- General Reactions of amino acids.pptxM-2- General Reactions of amino acids.pptx
M-2- General Reactions of amino acids.pptxDr. Santhosh Kumar. N
 
P4C x ELT = P4ELT: Its Theoretical Background (Kanazawa, 2024 March).pdf
P4C x ELT = P4ELT: Its Theoretical Background (Kanazawa, 2024 March).pdfP4C x ELT = P4ELT: Its Theoretical Background (Kanazawa, 2024 March).pdf
P4C x ELT = P4ELT: Its Theoretical Background (Kanazawa, 2024 March).pdfYu Kanazawa / Osaka University
 

Último (20)

5 charts on South Africa as a source country for international student recrui...
5 charts on South Africa as a source country for international student recrui...5 charts on South Africa as a source country for international student recrui...
5 charts on South Africa as a source country for international student recrui...
 
How to Add a many2many Relational Field in Odoo 17
How to Add a many2many Relational Field in Odoo 17How to Add a many2many Relational Field in Odoo 17
How to Add a many2many Relational Field in Odoo 17
 
DUST OF SNOW_BY ROBERT FROST_EDITED BY_ TANMOY MISHRA
DUST OF SNOW_BY ROBERT FROST_EDITED BY_ TANMOY MISHRADUST OF SNOW_BY ROBERT FROST_EDITED BY_ TANMOY MISHRA
DUST OF SNOW_BY ROBERT FROST_EDITED BY_ TANMOY MISHRA
 
Finals of Kant get Marx 2.0 : a general politics quiz
Finals of Kant get Marx 2.0 : a general politics quizFinals of Kant get Marx 2.0 : a general politics quiz
Finals of Kant get Marx 2.0 : a general politics quiz
 
Personal Resilience in Project Management 2 - TV Edit 1a.pdf
Personal Resilience in Project Management 2 - TV Edit 1a.pdfPersonal Resilience in Project Management 2 - TV Edit 1a.pdf
Personal Resilience in Project Management 2 - TV Edit 1a.pdf
 
Easter in the USA presentation by Chloe.
Easter in the USA presentation by Chloe.Easter in the USA presentation by Chloe.
Easter in the USA presentation by Chloe.
 
2024.03.23 What do successful readers do - Sandy Millin for PARK.pptx
2024.03.23 What do successful readers do - Sandy Millin for PARK.pptx2024.03.23 What do successful readers do - Sandy Millin for PARK.pptx
2024.03.23 What do successful readers do - Sandy Millin for PARK.pptx
 
Patterns of Written Texts Across Disciplines.pptx
Patterns of Written Texts Across Disciplines.pptxPatterns of Written Texts Across Disciplines.pptx
Patterns of Written Texts Across Disciplines.pptx
 
Clinical Pharmacy Introduction to Clinical Pharmacy, Concept of clinical pptx
Clinical Pharmacy  Introduction to Clinical Pharmacy, Concept of clinical pptxClinical Pharmacy  Introduction to Clinical Pharmacy, Concept of clinical pptx
Clinical Pharmacy Introduction to Clinical Pharmacy, Concept of clinical pptx
 
Diploma in Nursing Admission Test Question Solution 2023.pdf
Diploma in Nursing Admission Test Question Solution 2023.pdfDiploma in Nursing Admission Test Question Solution 2023.pdf
Diploma in Nursing Admission Test Question Solution 2023.pdf
 
Prelims of Kant get Marx 2.0: a general politics quiz
Prelims of Kant get Marx 2.0: a general politics quizPrelims of Kant get Marx 2.0: a general politics quiz
Prelims of Kant get Marx 2.0: a general politics quiz
 
Quality Assurance_GOOD LABORATORY PRACTICE
Quality Assurance_GOOD LABORATORY PRACTICEQuality Assurance_GOOD LABORATORY PRACTICE
Quality Assurance_GOOD LABORATORY PRACTICE
 
How to Add a New Field in Existing Kanban View in Odoo 17
How to Add a New Field in Existing Kanban View in Odoo 17How to Add a New Field in Existing Kanban View in Odoo 17
How to Add a New Field in Existing Kanban View in Odoo 17
 
Prescribed medication order and communication skills.pptx
Prescribed medication order and communication skills.pptxPrescribed medication order and communication skills.pptx
Prescribed medication order and communication skills.pptx
 
CAULIFLOWER BREEDING 1 Parmar pptx
CAULIFLOWER BREEDING 1 Parmar pptxCAULIFLOWER BREEDING 1 Parmar pptx
CAULIFLOWER BREEDING 1 Parmar pptx
 
Benefits & Challenges of Inclusive Education
Benefits & Challenges of Inclusive EducationBenefits & Challenges of Inclusive Education
Benefits & Challenges of Inclusive Education
 
Ultra structure and life cycle of Plasmodium.pptx
Ultra structure and life cycle of Plasmodium.pptxUltra structure and life cycle of Plasmodium.pptx
Ultra structure and life cycle of Plasmodium.pptx
 
PISA-VET launch_El Iza Mohamedou_19 March 2024.pptx
PISA-VET launch_El Iza Mohamedou_19 March 2024.pptxPISA-VET launch_El Iza Mohamedou_19 March 2024.pptx
PISA-VET launch_El Iza Mohamedou_19 March 2024.pptx
 
M-2- General Reactions of amino acids.pptx
M-2- General Reactions of amino acids.pptxM-2- General Reactions of amino acids.pptx
M-2- General Reactions of amino acids.pptx
 
P4C x ELT = P4ELT: Its Theoretical Background (Kanazawa, 2024 March).pdf
P4C x ELT = P4ELT: Its Theoretical Background (Kanazawa, 2024 March).pdfP4C x ELT = P4ELT: Its Theoretical Background (Kanazawa, 2024 March).pdf
P4C x ELT = P4ELT: Its Theoretical Background (Kanazawa, 2024 March).pdf
 

Responsive design in ten minutes

Notas do Editor

  1. October Version 2
  2. October Version 2
  3. October Version 2
  4. October Version 2
  5. October Version 2
  6. October Version 2
  7. October Version 2
  8. October Version 2
  9. October Version 2
  10. October Version 2
  11. October Version 2
  12. October Version 2
  13. October Version 2
  14. October Version 2
  15. October Version 2
  16. October Version 2
  17. October Version 2
  18. October Version 2
  19. October Version 2
  20. October Version 2
  21. October Version 2
  22. October Version 2
  23. October Version 2
  24. October Version 2
  25. October Version 2
  26. October Version 2
  27. October Version 2
  28. October Version 2
  29. October Version 2
  30. October Version 2