SlideShare una empresa de Scribd logo

Flexible Grids and Media Queries for Responsive Web Design

•Descargar como KEY, PDF•
•
Kim Chee Leong
Kim Chee Leong

This talk was given at the Dutch Plone gebruikersdag 2012.

Tecnología
1 de 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/

Recomendados

Social Media, Academics, & You: How to Use Evernote and Dropbox Like a Boss
Social Media, Academics, & You: How to Use Evernote and Dropbox Like a BossSocial Media, Academics, & You: How to Use Evernote and Dropbox Like a Boss
Social Media, Academics, & You: How to Use Evernote and Dropbox Like a BossIdris Clay
 
Introduction to Pebblepad
Introduction to Pebblepad Introduction to Pebblepad
Introduction to Pebblepad telshef
 
Windows: Having it's ass kicked by Puppet and PowerShell since 2012
Windows: Having it's ass kicked by Puppet and PowerShell since 2012Windows: Having it's ass kicked by Puppet and PowerShell since 2012
Windows: Having it's ass kicked by Puppet and PowerShell since 2012Paul Stack
 
Bootstrap Bootcamp
Bootstrap BootcampBootstrap Bootcamp
Bootstrap BootcampWilliam Simms
 
Web usability
Web usabilityWeb usability
Web usabilitykhendai
 
Get responsive in 30 minutes (WordCamp Sofia)
Get responsive in 30 minutes (WordCamp Sofia)Get responsive in 30 minutes (WordCamp Sofia)
Get responsive in 30 minutes (WordCamp Sofia)Nickolay Ninarski
 
Oscon 2013 - Lessons from building an open source community
Oscon 2013 - Lessons from building an open source community Oscon 2013 - Lessons from building an open source community
Oscon 2013 - Lessons from building an open source community Uri Cohen
 
Building Your Start-Up with WordPress
Building Your Start-Up with WordPressBuilding Your Start-Up with WordPress
Building Your Start-Up with WordPressCody Landefeld
 

Recomendados

Social Media, Academics, & You: How to Use Evernote and Dropbox Like a Boss
Social Media, Academics, & You: How to Use Evernote and Dropbox Like a BossSocial Media, Academics, & You: How to Use Evernote and Dropbox Like a Boss
Social Media, Academics, & You: How to Use Evernote and Dropbox Like a BossIdris Clay
 
Introduction to Pebblepad
Introduction to Pebblepad Introduction to Pebblepad
Introduction to Pebblepad telshef
 
Windows: Having it's ass kicked by Puppet and PowerShell since 2012
Windows: Having it's ass kicked by Puppet and PowerShell since 2012Windows: Having it's ass kicked by Puppet and PowerShell since 2012
Windows: Having it's ass kicked by Puppet and PowerShell since 2012Paul Stack
 
Bootstrap Bootcamp
Bootstrap BootcampBootstrap Bootcamp
Bootstrap BootcampWilliam Simms
 
Web usability
Web usabilityWeb usability
Web usabilitykhendai
 
Get responsive in 30 minutes (WordCamp Sofia)
Get responsive in 30 minutes (WordCamp Sofia)Get responsive in 30 minutes (WordCamp Sofia)
Get responsive in 30 minutes (WordCamp Sofia)Nickolay Ninarski
 
Oscon 2013 - Lessons from building an open source community
Oscon 2013 - Lessons from building an open source community Oscon 2013 - Lessons from building an open source community
Oscon 2013 - Lessons from building an open source community Uri Cohen
 
Building Your Start-Up with WordPress
Building Your Start-Up with WordPressBuilding Your Start-Up with WordPress
Building Your Start-Up with WordPressCody Landefeld
 
PyGrunn - Buildout presentation
PyGrunn - Buildout presentationPyGrunn - Buildout presentation
PyGrunn - Buildout presentationKim Chee Leong
 
Goldmund, Wyldebeast & Wunderliebe - Responsive Webdesign Workshop
Goldmund, Wyldebeast & Wunderliebe - Responsive Webdesign WorkshopGoldmund, Wyldebeast & Wunderliebe - Responsive Webdesign Workshop
Goldmund, Wyldebeast & Wunderliebe - Responsive Webdesign WorkshopKim Chee Leong
 
Plone deployment made easy
Plone deployment made easyPlone deployment made easy
Plone deployment made easyKim Chee Leong
 
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 2012Kim Chee Leong
 
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 entreprisesCCI 21
 
Numeros hemimperfectos
Numeros hemimperfectosNumeros hemimperfectos
Numeros hemimperfectosDurero
 
Prednaska euba cnas_vadocz_2011
Prednaska euba cnas_vadocz_2011Prednaska euba cnas_vadocz_2011
Prednaska euba cnas_vadocz_2011Stefan Vadocz
 
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 VersionGiEffebis Gina
 
Dariusz Łukawski - ekspert szkoleń medialnych
Dariusz Łukawski - ekspert szkoleń medialnych Dariusz Łukawski - ekspert szkoleń medialnych
Dariusz Łukawski - ekspert szkoleń medialnych Jerzy Ciszewski
 
"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...eLiberatica
 
Diapositivas blog
Diapositivas blogDiapositivas blog
Diapositivas blogjonathanarl2014
 
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...FAO
 
catalogo_completo
catalogo_completocatalogo_completo
catalogo_completocarlo sessa spa
 
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...Rabble .
 
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?Silke Berz
 
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 2014J. R.
 
Native is easy. Web is essential.
Native is easy. Web is essential.Native is easy. Web is essential.
Native is easy. Web is essential.Jason Grigsby
 
Il piacere
Il piacereIl piacere
Il piacereCamila Duncan
 
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 BusinessesRamon Ray
 
Activación ONT de Antel
Activación ONT de AntelActivación ONT de Antel
Activación ONT de AntelDemian Pizzo
 
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 DesignMaria D'Amato
 
Responsive web design
Responsive web designResponsive web design
Responsive web designAna-Maria Birtea
 

Más contenido relacionado

Destacado

PyGrunn - Buildout presentation
PyGrunn - Buildout presentationPyGrunn - Buildout presentation
PyGrunn - Buildout presentationKim Chee Leong
 
Goldmund, Wyldebeast & Wunderliebe - Responsive Webdesign Workshop
Goldmund, Wyldebeast & Wunderliebe - Responsive Webdesign WorkshopGoldmund, Wyldebeast & Wunderliebe - Responsive Webdesign Workshop
Goldmund, Wyldebeast & Wunderliebe - Responsive Webdesign WorkshopKim Chee Leong
 
Plone deployment made easy
Plone deployment made easyPlone deployment made easy
Plone deployment made easyKim Chee Leong
 
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 2012Kim Chee Leong
 
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 entreprisesCCI 21
 
Numeros hemimperfectos
Numeros hemimperfectosNumeros hemimperfectos
Numeros hemimperfectosDurero
 
Prednaska euba cnas_vadocz_2011
Prednaska euba cnas_vadocz_2011Prednaska euba cnas_vadocz_2011
Prednaska euba cnas_vadocz_2011Stefan Vadocz
 
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 VersionGiEffebis Gina
 
Dariusz Łukawski - ekspert szkoleń medialnych
Dariusz Łukawski - ekspert szkoleń medialnych Dariusz Łukawski - ekspert szkoleń medialnych
Dariusz Łukawski - ekspert szkoleń medialnych Jerzy Ciszewski
 
"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...eLiberatica
 
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...FAO
 
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...Rabble .
 
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?Silke Berz
 
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 2014J. R.
 
Native is easy. Web is essential.
Native is easy. Web is essential.Native is easy. Web is essential.
Native is easy. Web is essential.Jason Grigsby
 
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 BusinessesRamon Ray
 
Activación ONT de Antel
Activación ONT de AntelActivación ONT de Antel
Activación ONT de AntelDemian Pizzo
 

Destacado (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
 

Similar a Flexible Grids and Media Queries for Responsive Web Design

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 DesignMaria D'Amato
 
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 TCUK12Karen Mardahl
 
UX design for every screen
UX design for every screenUX design for every screen
UX design for every screenFour Kitchens
 
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?Karin Tracy
 
Web designtrends 5-29-2013
Web designtrends 5-29-2013Web designtrends 5-29-2013
Web designtrends 5-29-2013Angela Bowman
 
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 workvq20
 
Responsivedesign 7-3-2012
Responsivedesign 7-3-2012Responsivedesign 7-3-2012
Responsivedesign 7-3-2012Thomas Carney
 
Build Accessibly - Community Day 2012
Build Accessibly - Community Day 2012Build Accessibly - Community Day 2012
Build Accessibly - Community Day 2012Karen Mardahl
 
PSEWEB 2013 - Make it responsive - TERMINALFOUR
PSEWEB 2013 - Make it responsive - TERMINALFOURPSEWEB 2013 - Make it responsive - TERMINALFOUR
PSEWEB 2013 - Make it responsive - TERMINALFOURTerminalfour
 
Responsive Web Design Primer - NAGW 2014
Responsive Web Design Primer - NAGW 2014Responsive Web Design Primer - NAGW 2014
Responsive Web Design Primer - NAGW 2014Adrian Roselli
 
Responsive Web Design_2013
Responsive Web Design_2013Responsive Web Design_2013
Responsive Web Design_2013Achieve Internet
 
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 applicationsTSundberg
 
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 2013Marc D Anderson
 
Responsive Design Overview for UB CIT
Responsive Design Overview for UB CITResponsive Design Overview for UB CIT
Responsive Design Overview for UB CITAdrian Roselli
 
New Rules of The Responsive Web
New Rules of The Responsive WebNew Rules of The Responsive Web
New Rules of The Responsive WebMatt Carver
 
Workshop 11: Trendy web designs & prototyping
Workshop 11: Trendy web designs & prototypingWorkshop 11: Trendy web designs & prototyping
Workshop 11: Trendy web designs & prototypingVisual Engineering
 

Similar a Flexible Grids and Media Queries for Responsive Web Design (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
 

Último

Partners Life - Insurer Innovation Award 2024
Partners Life - Insurer Innovation Award 2024Partners Life - Insurer Innovation Award 2024
Partners Life - Insurer Innovation Award 2024The Digital Insurer
 
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
08448380779 Call Girls In Diplomatic Enclave Women Seeking MenDelhi Call girls
 
Developing An App To Navigate The Roads of Brazil
Developing An App To Navigate The Roads of BrazilDeveloping An App To Navigate The Roads of Brazil
Developing An App To Navigate The Roads of BrazilV3cube
 
2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...Martijn de Jong
 
Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024The Digital Insurer
 
Tata AIG General Insurance Company - Insurer Innovation Award 2024
Tata AIG General Insurance Company - Insurer Innovation Award 2024Tata AIG General Insurance Company - Insurer Innovation Award 2024
Tata AIG General Insurance Company - Insurer Innovation Award 2024The Digital Insurer
 
The Codex of Business Writing Software for Real-World Solutions 2.pptx
The Codex of Business Writing Software for Real-World Solutions 2.pptxThe Codex of Business Writing Software for Real-World Solutions 2.pptx
The Codex of Business Writing Software for Real-World Solutions 2.pptxMalak Abu Hammad
 
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptxEIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptxEarley Information Science
 
A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)Gabriella Davis
 
08448380779 Call Girls In Friends Colony Women Seeking Men
08448380779 Call Girls In Friends Colony Women Seeking Men08448380779 Call Girls In Friends Colony Women Seeking Men
08448380779 Call Girls In Friends Colony Women Seeking MenDelhi Call girls
 
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
04-2024-HHUG-Sales-and-Marketing-Alignment.pptxHampshireHUG
 
Salesforce Community Group Quito, Salesforce 101
Salesforce Community Group Quito, Salesforce 101Salesforce Community Group Quito, Salesforce 101
Salesforce Community Group Quito, Salesforce 101Paola De la Torre
 
08448380779 Call Girls In Greater Kailash - I Women Seeking Men
08448380779 Call Girls In Greater Kailash - I Women Seeking Men08448380779 Call Girls In Greater Kailash - I Women Seeking Men
08448380779 Call Girls In Greater Kailash - I Women Seeking MenDelhi Call girls
 
Kalyanpur ) Call Girls in Lucknow Finest Escorts Service 🍸 8923113531 🎰 Avail...
Kalyanpur ) Call Girls in Lucknow Finest Escorts Service 🍸 8923113531 🎰 Avail...Kalyanpur ) Call Girls in Lucknow Finest Escorts Service 🍸 8923113531 🎰 Avail...
Kalyanpur ) Call Girls in Lucknow Finest Escorts Service 🍸 8923113531 🎰 Avail...gurkirankumar98700
 
Top 5 Benefits OF Using Muvi Live Paywall For Live Streams
Top 5 Benefits OF Using Muvi Live Paywall For Live StreamsTop 5 Benefits OF Using Muvi Live Paywall For Live Streams
Top 5 Benefits OF Using Muvi Live Paywall For Live StreamsRoshan Dwivedi
 
Data Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt RobisonData Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt RobisonAnna Loughnan Colquhoun
 
WhatsApp 9892124323 ✓Call Girls In Kalyan ( Mumbai ) secure service
WhatsApp 9892124323 ✓Call Girls In Kalyan ( Mumbai ) secure serviceWhatsApp 9892124323 ✓Call Girls In Kalyan ( Mumbai ) secure service
WhatsApp 9892124323 ✓Call Girls In Kalyan ( Mumbai ) secure servicePooja Nehwal
 
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...apidays
 
CNv6 Instructor Chapter 6 Quality of Service
CNv6 Instructor Chapter 6 Quality of ServiceCNv6 Instructor Chapter 6 Quality of Service
CNv6 Instructor Chapter 6 Quality of Servicegiselly40
 
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 Processorsdebabhi2
 

Último (20)

Partners Life - Insurer Innovation Award 2024
Partners Life - Insurer Innovation Award 2024Partners Life - Insurer Innovation Award 2024
Partners Life - Insurer Innovation Award 2024
 
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
 
Developing An App To Navigate The Roads of Brazil
Developing An App To Navigate The Roads of BrazilDeveloping An App To Navigate The Roads of Brazil
Developing An App To Navigate The Roads of Brazil
 
2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...
 
Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024
 
Tata AIG General Insurance Company - Insurer Innovation Award 2024
Tata AIG General Insurance Company - Insurer Innovation Award 2024Tata AIG General Insurance Company - Insurer Innovation Award 2024
Tata AIG General Insurance Company - Insurer Innovation Award 2024
 
The Codex of Business Writing Software for Real-World Solutions 2.pptx
The Codex of Business Writing Software for Real-World Solutions 2.pptxThe Codex of Business Writing Software for Real-World Solutions 2.pptx
The Codex of Business Writing Software for Real-World Solutions 2.pptx
 
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptxEIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
 
A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)
 
08448380779 Call Girls In Friends Colony Women Seeking Men
08448380779 Call Girls In Friends Colony Women Seeking Men08448380779 Call Girls In Friends Colony Women Seeking Men
08448380779 Call Girls In Friends Colony Women Seeking Men
 
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
 
Salesforce Community Group Quito, Salesforce 101
Salesforce Community Group Quito, Salesforce 101Salesforce Community Group Quito, Salesforce 101
Salesforce Community Group Quito, Salesforce 101
 
08448380779 Call Girls In Greater Kailash - I Women Seeking Men
08448380779 Call Girls In Greater Kailash - I Women Seeking Men08448380779 Call Girls In Greater Kailash - I Women Seeking Men
08448380779 Call Girls In Greater Kailash - I Women Seeking Men
 
Kalyanpur ) Call Girls in Lucknow Finest Escorts Service 🍸 8923113531 🎰 Avail...
Kalyanpur ) Call Girls in Lucknow Finest Escorts Service 🍸 8923113531 🎰 Avail...Kalyanpur ) Call Girls in Lucknow Finest Escorts Service 🍸 8923113531 🎰 Avail...
Kalyanpur ) Call Girls in Lucknow Finest Escorts Service 🍸 8923113531 🎰 Avail...
 
Top 5 Benefits OF Using Muvi Live Paywall For Live Streams
Top 5 Benefits OF Using Muvi Live Paywall For Live StreamsTop 5 Benefits OF Using Muvi Live Paywall For Live Streams
Top 5 Benefits OF Using Muvi Live Paywall For Live Streams
 
Data Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt RobisonData Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt Robison
 
WhatsApp 9892124323 ✓Call Girls In Kalyan ( Mumbai ) secure service
WhatsApp 9892124323 ✓Call Girls In Kalyan ( Mumbai ) secure serviceWhatsApp 9892124323 ✓Call Girls In Kalyan ( Mumbai ) secure service
WhatsApp 9892124323 ✓Call Girls In Kalyan ( Mumbai ) secure service
 
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...
 
CNv6 Instructor Chapter 6 Quality of Service
CNv6 Instructor Chapter 6 Quality of ServiceCNv6 Instructor Chapter 6 Quality of Service
CNv6 Instructor Chapter 6 Quality of Service
 
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
 

Flexible Grids and Media Queries for Responsive Web Design

Notas del editor

  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