Responsive webdesign presentatie - Nederlandse Plone gebruikersdag 2012

•Als KEY, PDF herunterladen•

1 gefällt mir•1,084 views

Kim Chee Leong

This talk was given at the Dutch Plone gebruikersdag 2012.

Technologie

RESPONSIVE WEB DESIGN
Kim Chee Leong
Goldmund, Wyldebeast & Wunderliebe

BE RESPONSIVE
• Flexible grid (ﬂuid 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.ﬂickr.com/photos/a-issleib/7948123558/

Empfohlen

Social Media, Academics, & You: How to Use Evernote and Dropbox Like a BossIdris Clay

Introduction to Pebblepad telshef

Windows: Having it's ass kicked by Puppet and PowerShell since 2012Paul Stack

Bootstrap BootcampWilliam Simms

Web usabilitykhendai

Get responsive in 30 minutes (WordCamp Sofia)Nickolay Ninarski

Oscon 2013 - Lessons from building an open source community Uri Cohen

Building Your Start-Up with WordPressCody Landefeld

Empfohlen

Social Media, Academics, & You: How to Use Evernote and Dropbox Like a BossIdris Clay

Introduction to Pebblepad telshef

Windows: Having it's ass kicked by Puppet and PowerShell since 2012Paul Stack

Bootstrap BootcampWilliam Simms

Web usabilitykhendai

Get responsive in 30 minutes (WordCamp Sofia)Nickolay Ninarski

Oscon 2013 - Lessons from building an open source community Uri Cohen

Building Your Start-Up with WordPressCody Landefeld

PyGrunn - Buildout presentationKim Chee Leong

Goldmund, Wyldebeast & Wunderliebe - Responsive Webdesign WorkshopKim Chee Leong

Plone deployment made easyKim Chee Leong

Essential Plone development tools - Plone conf 2012Kim Chee Leong

Pitch Ecobiz du 12 avril 2011 : les entreprisesCCI 21

Numeros hemimperfectosDurero

Prednaska euba cnas_vadocz_2011Stefan Vadocz

I N C H A L L A H English & German VersionGiEffebis Gina

Dariusz Łukawski - ekspert szkoleń medialnych Jerzy Ciszewski

"OSS in Public Administrations - A short Report from the European Level" by B...eLiberatica

Diapositivas blogjonathanarl2014

Comités Nacionales de Agricultura Familiar: Experiencia de UNAG y la importan...FAO

catalogo_completocarlo sessa spa

Sobre Hombros de Gigantes: Desarrollo de tecnología y la historia secreto de...Rabble .

Quiz: Welche Variante des Usability-Tests gewinnt?Silke Berz

Awesome Social Customer Service - Social Media Night - Nürnberg Web Week 2014J. R.

Native is easy. Web is essential.Jason Grigsby

Il piacereCamila Duncan

Victoria Treyger - Ring Central - Mobility for Growing BusinessesRamon Ray

Activación ONT de AntelDemian Pizzo

Everything Old is New Again: The State of Web DesignMaria D'Amato

Responsive web designAna-Maria Birtea

Weitere ähnliche Inhalte

Andere mochten auch

PyGrunn - Buildout presentationKim Chee Leong

Goldmund, Wyldebeast & Wunderliebe - Responsive Webdesign WorkshopKim Chee Leong

Plone deployment made easyKim Chee Leong

Essential Plone development tools - Plone conf 2012Kim Chee Leong

Pitch Ecobiz du 12 avril 2011 : les entreprisesCCI 21

Numeros hemimperfectosDurero

Prednaska euba cnas_vadocz_2011Stefan Vadocz

I N C H A L L A H English & German VersionGiEffebis Gina

Dariusz Łukawski - ekspert szkoleń medialnych Jerzy Ciszewski

"OSS in Public Administrations - A short Report from the European Level" by B...eLiberatica

Diapositivas blogjonathanarl2014

Comités Nacionales de Agricultura Familiar: Experiencia de UNAG y la importan...FAO

catalogo_completocarlo sessa spa

Sobre Hombros de Gigantes: Desarrollo de tecnología y la historia secreto de...Rabble .

Quiz: Welche Variante des Usability-Tests gewinnt?Silke Berz

Awesome Social Customer Service - Social Media Night - Nürnberg Web Week 2014J. R.

Native is easy. Web is essential.Jason Grigsby

Il piacereCamila Duncan

Victoria Treyger - Ring Central - Mobility for Growing BusinessesRamon Ray

Activación ONT de AntelDemian Pizzo

Andere mochten auch (20)

PyGrunn - Buildout presentation

Goldmund, Wyldebeast & Wunderliebe - Responsive Webdesign Workshop

Plone deployment made easy

Essential Plone development tools - Plone conf 2012

Pitch Ecobiz du 12 avril 2011 : les entreprises

Numeros hemimperfectos

Prednaska euba cnas_vadocz_2011

I N C H A L L A H English & German Version

Dariusz Łukawski - ekspert szkoleń medialnych

"OSS in Public Administrations - A short Report from the European Level" by B...

Diapositivas blog

Comités Nacionales de Agricultura Familiar: Experiencia de UNAG y la importan...

catalogo_completo

Sobre Hombros de Gigantes: Desarrollo de tecnología y la historia secreto de...

Quiz: Welche Variante des Usability-Tests gewinnt?

Awesome Social Customer Service - Social Media Night - Nürnberg Web Week 2014

Native is easy. Web is essential.

Il piacere

Victoria Treyger - Ring Central - Mobility for Growing Businesses

Activación ONT de Antel

Ähnlich wie Responsive webdesign presentatie - Nederlandse Plone gebruikersdag 2012

Everything Old is New Again: The State of Web DesignMaria D'Amato

Responsive web designAna-Maria Birtea

Getting Down and Dirty with Accessibility and Usability workshop at TCUK12Karen Mardahl

UX design for every screenFour Kitchens

Responsive Design: What is it? How do we do it? How much will it cost?Karin Tracy

Web designtrends 5-29-2013Angela Bowman

Responsive Web Design: How the mobile web has changed the way we think and workvq20

Responsivedesign 7-3-2012Thomas Carney

Build Accessibly - Community Day 2012Karen Mardahl

Ui and ux principlesNorman Caesar Tecson

Boot strapandresponsiveintroAlexandre Marreiros

PSEWEB 2013 - Make it responsive - TERMINALFOURTerminalfour

Responsive Web Design Primer - NAGW 2014Adrian Roselli

Responsive Web Design_2013Achieve Internet

Selenium WebDriver - Test automation for web applicationsTSundberg

Designing for Everybody Workshopnightkitcheninteractive

SEF 2014 - Responsive Design in SharePoint 2013Marc D Anderson

Responsive Design Overview for UB CITAdrian Roselli

New Rules of The Responsive WebMatt Carver

Workshop 11: Trendy web designs & prototypingVisual Engineering

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

Everything Old is New Again: The State of Web Design

Responsive web design

Getting Down and Dirty with Accessibility and Usability workshop at TCUK12

UX design for every screen

Responsive Design: What is it? How do we do it? How much will it cost?

Web designtrends 5-29-2013

Responsive Web Design: How the mobile web has changed the way we think and work

Responsivedesign 7-3-2012

Build Accessibly - Community Day 2012

Ui and ux principles

Boot strapandresponsiveintro

PSEWEB 2013 - Make it responsive - TERMINALFOUR

Responsive Web Design Primer - NAGW 2014

Responsive Web Design_2013

Selenium WebDriver - Test automation for web applications

Designing for Everybody Workshop

SEF 2014 - Responsive Design in SharePoint 2013

Responsive Design Overview for UB CIT

New Rules of The Responsive Web

Workshop 11: Trendy web designs & prototyping

Kürzlich hochgeladen

Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...Miguel Araújo

Data Cloud, More than a CDP by Matt RobisonAnna Loughnan Colquhoun

TrustArc Webinar - Unlock the Power of AI-Driven Data DiscoveryTrustArc

Understanding Discord NSFW Servers A Guide for Responsible Users.pdfUK Journal

Connector Corner: Accelerate revenue generation using UiPath API-centric busi...DianaGray10

Top 10 Most Downloaded Games on Play Store in 2024SynarionITSolutions

Real Time Object Detection Using Open CVKhem

Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...Drew Madelung

Boost Fertility New Invention Ups Success Rates.pdfsudhanshuwaghmare1

Automating Google Workspace (GWS) & more with Apps Scriptwesley chun

The 7 Things I Know About Cyber Security After 25 Years | April 2024Rafal Los

Deploy with confidence: VMware Cloud Foundation 5.1 on next gen Dell PowerEdg...Principled Technologies

Apidays New York 2024 - The value of a flexible API Management solution for O...apidays

Tata AIG General Insurance Company - Insurer Innovation Award 2024The Digital Insurer

Strategies for Landing an Oracle DBA Job as a FresherRemote DBA Services

Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FMESafe Software

Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024The Digital Insurer

Powerful Google developer tools for immediate impact! (2023-24 C)wesley chun

🐬 The future of MySQL is Postgres 🐘RTylerCroy

GenAI Risks & Security Meetup 01052024.pdflior mazor

Kürzlich hochgeladen (20)

Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...

Data Cloud, More than a CDP by Matt Robison

TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery

Understanding Discord NSFW Servers A Guide for Responsible Users.pdf

Connector Corner: Accelerate revenue generation using UiPath API-centric busi...

Top 10 Most Downloaded Games on Play Store in 2024

Real Time Object Detection Using Open CV

Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...

Boost Fertility New Invention Ups Success Rates.pdf

Automating Google Workspace (GWS) & more with Apps Script

The 7 Things I Know About Cyber Security After 25 Years | April 2024

Deploy with confidence: VMware Cloud Foundation 5.1 on next gen Dell PowerEdg...

Apidays New York 2024 - The value of a flexible API Management solution for O...

Tata AIG General Insurance Company - Insurer Innovation Award 2024

Strategies for Landing an Oracle DBA Job as a Fresher

Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME

Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024

Powerful Google developer tools for immediate impact! (2023-24 C)

🐬 The future of MySQL is Postgres 🐘

GenAI Risks & Security Meetup 01052024.pdf

Responsive webdesign presentatie - Nederlandse Plone gebruikersdag 2012

1. RESPONSIVE WEB DESIGN Kim Chee Leong Goldmund, Wyldebeast & Wunderliebe

2. IN THE OLD DAYS...

3. MANY DEVICES / SCREEN SIZES

4. RESPONSIVENESS TEST PAGE

5. RESPONSIVENESS TEST PAGE

6. RESPONSIVE EXAMPLE

7. RESPONSIVE EXAMPLE

8. BE RESPONSIVE • Flexible grid (ﬂuid layout) • CSS3 media queries • Flexible values (fonts in ‘em’, margins etc. in percentages) • Don’t use server-side stuff to detect mobile devices

9. 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

10. 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/

11. PHOTO CREDITS • http://www.ﬂickr.com/photos/a-issleib/7948123558/

Hinweis der Redaktion

\n
\n
Vertellen over de GWW iOS en android apps.\nTelefoons, tablets, e-readers, notebooks, computers, game consoles, big TV&#x2019;s & retina\nPeople access the web on the go (everywhere), used to be only from the desktop.\n
Uitleggen responsive test pagina (matt kersley)\nVeel sites zijn nog niet responsive (gww ook niet)\n
Standaard is Plone responsive, alhoewel er nog wel wat verbeteringen zijn\n
Viertal zwembaden, die elk een bestaande website hebben.\nDe site zoals die een computer wordt getoond.\n
Uitleggen hoe we tot het ontwerp gekomen zijn.\nZelf ervoor kiezen of zaken weggelaten worden\n\n\n
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
Op kleinere schermen evt. zaken weglaten, of &#x2018;verstoppen&#x2019;.\n
\n
\n