SlideShare ist ein Scribd-Unternehmen logo
1 von 11
RESPONSIVE WEB DESIGN
           Kim Chee Leong
  Goldmund, Wyldebeast & Wunderliebe
IN THE OLD DAYS...
MANY DEVICES / SCREEN SIZES
RESPONSIVENESS TEST PAGE
RESPONSIVENESS TEST PAGE
RESPONSIVE EXAMPLE
RESPONSIVE EXAMPLE
BE RESPONSIVE
• Flexible   grid (fluid layout)

• CSS3    media queries

• Flexible   values (fonts in ‘em’, margins etc. in percentages)

• Don’t   use server-side stuff to detect mobile devices
BE RESPONSIVE #2

• Most   of the CSS3 techniques can be used

• Older   browsers like IE7 and 8 don’t support CSS3

• Responsive   add-on: plonetheme.responsivetheme

• Responsive   stylesheet for Plone:

 • https://gist.github.com/3847700
HOW TO START?

• Responsive   websites:

 • http://mediaqueri.es/

• Responsive   web design testing tool:

 • http://mattkersley.com/responsive/

• Read   Ethan Marcotte’s book about Responsive Web Design

 •   http://www.abookapart.com/
PHOTO CREDITS



• http://www.flickr.com/photos/a-issleib/7948123558/

Weitere ähnliche Inhalte

Andere mochten auch

Activación ONT de Antel
Activación ONT de AntelActivación ONT de Antel
Activación ONT de Antel
Demian Pizzo
 

Andere mochten auch (20)

PyGrunn - Buildout presentation
PyGrunn - Buildout presentationPyGrunn - Buildout presentation
PyGrunn - Buildout presentation
 
Goldmund, Wyldebeast & Wunderliebe - Responsive Webdesign Workshop
Goldmund, Wyldebeast & Wunderliebe - Responsive Webdesign WorkshopGoldmund, Wyldebeast & Wunderliebe - Responsive Webdesign Workshop
Goldmund, Wyldebeast & Wunderliebe - Responsive Webdesign Workshop
 
Plone deployment made easy
Plone deployment made easyPlone deployment made easy
Plone deployment made easy
 
Essential Plone development tools - Plone conf 2012
Essential Plone development tools - Plone conf 2012Essential Plone development tools - Plone conf 2012
Essential Plone development tools - Plone conf 2012
 
Pitch Ecobiz du 12 avril 2011 : les entreprises
Pitch Ecobiz du 12 avril 2011 : les entreprisesPitch Ecobiz du 12 avril 2011 : les entreprises
Pitch Ecobiz du 12 avril 2011 : les entreprises
 
Numeros hemimperfectos
Numeros hemimperfectosNumeros hemimperfectos
Numeros hemimperfectos
 
Prednaska euba cnas_vadocz_2011
Prednaska euba cnas_vadocz_2011Prednaska euba cnas_vadocz_2011
Prednaska euba cnas_vadocz_2011
 
I N C H A L L A H English & German Version
I N C H  A L L A H    English &  German VersionI N C H  A L L A H    English &  German Version
I N C H A L L A H English & German Version
 
Dariusz Łukawski - ekspert szkoleń medialnych
Dariusz Łukawski - ekspert szkoleń medialnych  Dariusz Łukawski - ekspert szkoleń medialnych
Dariusz Łukawski - ekspert szkoleń medialnych
 
"OSS in Public Administrations - A short Report from the European Level" by B...
"OSS in Public Administrations - A short Report from the European Level" by B..."OSS in Public Administrations - A short Report from the European Level" by B...
"OSS in Public Administrations - A short Report from the European Level" by B...
 
Diapositivas blog
Diapositivas blogDiapositivas blog
Diapositivas blog
 
Comités Nacionales de Agricultura Familiar: Experiencia de UNAG y la importan...
Comités Nacionales de Agricultura Familiar: Experiencia de UNAG y la importan...Comités Nacionales de Agricultura Familiar: Experiencia de UNAG y la importan...
Comités Nacionales de Agricultura Familiar: Experiencia de UNAG y la importan...
 
catalogo_completo
catalogo_completocatalogo_completo
catalogo_completo
 
Sobre Hombros de Gigantes: Desarrollo de tecnología y la historia secreto de...
Sobre Hombros de Gigantes: Desarrollo de tecnología y  la historia secreto de...Sobre Hombros de Gigantes: Desarrollo de tecnología y  la historia secreto de...
Sobre Hombros de Gigantes: Desarrollo de tecnología y la historia secreto de...
 
Quiz: Welche Variante des Usability-Tests gewinnt?
Quiz: Welche Variante des Usability-Tests gewinnt?Quiz: Welche Variante des Usability-Tests gewinnt?
Quiz: Welche Variante des Usability-Tests gewinnt?
 
Awesome Social Customer Service - Social Media Night - Nürnberg Web Week 2014
Awesome Social Customer Service - Social Media Night - Nürnberg Web Week 2014Awesome Social Customer Service - Social Media Night - Nürnberg Web Week 2014
Awesome Social Customer Service - Social Media Night - Nürnberg Web Week 2014
 
Native is easy. Web is essential.
Native is easy. Web is essential.Native is easy. Web is essential.
Native is easy. Web is essential.
 
Il piacere
Il piacereIl piacere
Il piacere
 
Victoria Treyger - Ring Central - Mobility for Growing Businesses
Victoria Treyger - Ring Central - Mobility for Growing BusinessesVictoria Treyger - Ring Central - Mobility for Growing Businesses
Victoria Treyger - Ring Central - Mobility for Growing Businesses
 
Activación ONT de Antel
Activación ONT de AntelActivación ONT de Antel
Activación ONT de Antel
 

Ähnlich wie Responsive webdesign presentatie - Nederlandse Plone gebruikersdag 2012

Responsivedesign 7-3-2012
Responsivedesign 7-3-2012Responsivedesign 7-3-2012
Responsivedesign 7-3-2012
Thomas Carney
 
New Rules of The Responsive Web
New Rules of The Responsive WebNew Rules of The Responsive Web
New Rules of The Responsive Web
Matt Carver
 

Ähnlich wie Responsive webdesign presentatie - Nederlandse Plone gebruikersdag 2012 (20)

Everything Old is New Again: The State of Web Design
Everything Old is New Again: The State of Web DesignEverything Old is New Again: The State of Web Design
Everything Old is New Again: The State of Web Design
 
Responsive web design
Responsive web designResponsive web design
Responsive web design
 
Getting Down and Dirty with Accessibility and Usability workshop at TCUK12
Getting Down and Dirty with Accessibility and Usability workshop at TCUK12Getting Down and Dirty with Accessibility and Usability workshop at TCUK12
Getting Down and Dirty with Accessibility and Usability workshop at TCUK12
 
UX design for every screen
UX design for every screenUX design for every screen
UX design for every screen
 
Responsive Design: What is it? How do we do it? How much will it cost?
Responsive Design: What is it? How do we do it? How much will it cost?Responsive Design: What is it? How do we do it? How much will it cost?
Responsive Design: What is it? How do we do it? How much will it cost?
 
Web designtrends 5-29-2013
Web designtrends 5-29-2013Web designtrends 5-29-2013
Web designtrends 5-29-2013
 
Responsive Web Design: How the mobile web has changed the way we think and work
Responsive Web Design:  How the mobile web has changed the way we think and workResponsive Web Design:  How the mobile web has changed the way we think and work
Responsive Web Design: How the mobile web has changed the way we think and work
 
Responsivedesign 7-3-2012
Responsivedesign 7-3-2012Responsivedesign 7-3-2012
Responsivedesign 7-3-2012
 
Build Accessibly - Community Day 2012
Build Accessibly - Community Day 2012Build Accessibly - Community Day 2012
Build Accessibly - Community Day 2012
 
Ui and ux principles
Ui and ux principlesUi and ux principles
Ui and ux principles
 
Boot strapandresponsiveintro
Boot strapandresponsiveintroBoot strapandresponsiveintro
Boot strapandresponsiveintro
 
PSEWEB 2013 - Make it responsive - TERMINALFOUR
PSEWEB 2013 - Make it responsive - TERMINALFOURPSEWEB 2013 - Make it responsive - TERMINALFOUR
PSEWEB 2013 - Make it responsive - TERMINALFOUR
 
Responsive Web Design Primer - NAGW 2014
Responsive Web Design Primer - NAGW 2014Responsive Web Design Primer - NAGW 2014
Responsive Web Design Primer - NAGW 2014
 
Responsive Web Design_2013
Responsive Web Design_2013Responsive Web Design_2013
Responsive Web Design_2013
 
Selenium WebDriver - Test automation for web applications
Selenium WebDriver - Test automation for web applicationsSelenium WebDriver - Test automation for web applications
Selenium WebDriver - Test automation for web applications
 
Designing for Everybody Workshop
Designing for Everybody WorkshopDesigning for Everybody Workshop
Designing for Everybody Workshop
 
SEF 2014 - Responsive Design in SharePoint 2013
SEF 2014 - Responsive Design in SharePoint 2013SEF 2014 - Responsive Design in SharePoint 2013
SEF 2014 - Responsive Design in SharePoint 2013
 
Responsive Design Overview for UB CIT
Responsive Design Overview for UB CITResponsive Design Overview for UB CIT
Responsive Design Overview for UB CIT
 
New Rules of The Responsive Web
New Rules of The Responsive WebNew Rules of The Responsive Web
New Rules of The Responsive Web
 
Workshop 11: Trendy web designs & prototyping
Workshop 11: Trendy web designs & prototypingWorkshop 11: Trendy web designs & prototyping
Workshop 11: Trendy web designs & prototyping
 

Kürzlich hochgeladen

+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
?#DUbAI#??##{{(☎️+971_581248768%)**%*]'#abortion pills for sale in dubai@
 
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
 
Why Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire businessWhy Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire business
panagenda
 

Kürzlich hochgeladen (20)

+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
 
Manulife - Insurer Transformation Award 2024
Manulife - Insurer Transformation Award 2024Manulife - Insurer Transformation Award 2024
Manulife - Insurer Transformation Award 2024
 
FWD Group - Insurer Innovation Award 2024
FWD Group - Insurer Innovation Award 2024FWD Group - Insurer Innovation Award 2024
FWD Group - Insurer Innovation Award 2024
 
Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)
 
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
 
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerHow to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected Worker
 
GenAI Risks & Security Meetup 01052024.pdf
GenAI Risks & Security Meetup 01052024.pdfGenAI Risks & Security Meetup 01052024.pdf
GenAI Risks & Security Meetup 01052024.pdf
 
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
 
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
 
Artificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : UncertaintyArtificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : Uncertainty
 
Navi Mumbai Call Girls 🥰 8617370543 Service Offer VIP Hot Model
Navi Mumbai Call Girls 🥰 8617370543 Service Offer VIP Hot ModelNavi Mumbai Call Girls 🥰 8617370543 Service Offer VIP Hot Model
Navi Mumbai Call Girls 🥰 8617370543 Service Offer VIP Hot Model
 
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...
 
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost SavingRepurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
 
Exploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone ProcessorsExploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone Processors
 
Corporate and higher education May webinar.pptx
Corporate and higher education May webinar.pptxCorporate and higher education May webinar.pptx
Corporate and higher education May webinar.pptx
 
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
 
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
 
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
 
MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024
 
Why Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire businessWhy Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire business
 

Responsive webdesign presentatie - Nederlandse Plone gebruikersdag 2012

Hinweis der Redaktion

  1. \n
  2. \n
  3. Vertellen over de GWW iOS en android apps.\nTelefoons, tablets, e-readers, notebooks, computers, game consoles, big TV’s & retina\nPeople access the web on the go (everywhere), used to be only from the desktop.\n
  4. Uitleggen responsive test pagina (matt kersley)\nVeel sites zijn nog niet responsive (gww ook niet)\n
  5. Standaard is Plone responsive, alhoewel er nog wel wat verbeteringen zijn\n
  6. Viertal zwembaden, die elk een bestaande website hebben.\nDe site zoals die een computer wordt getoond.\n
  7. Uitleggen hoe we tot het ontwerp gekomen zijn.\nZelf ervoor kiezen of zaken weggelaten worden\n\n\n
  8. Leg uit welke technieken (images!) worden gebruikt\nBegin eerst met de kleine schermen daarna groter\nHoud er rekening mee dat tel.s en tables een touch interface hebben. \n\n
  9. Op kleinere schermen evt. zaken weglaten, of ‘verstoppen’.\n
  10. \n
  11. \n