Upload File

cmd interaction design - y2 q2 les 5 - responsive design

  • Home
  • Design
  • CMD Interaction Design - Y2 Q2 les 5 - Responsive Design
30
Interaction Design 201 Vragen of feedback? @ferrydendopper Responsive Design

Upload: ferry-den-dopper

Post on 25-Jun-2015

605 views

Category:

Design


0 download

Report

Tags:

TRANSCRIPT

Page 1: CMD Interaction Design - Y2 Q2 les 5 - Responsive Design

Interaction Design 201 Vragen of feedback? @ferrydendopper

Responsive Design

Page 2: CMD Interaction Design - Y2 Q2 les 5 - Responsive Design

Interaction Design 201 Vragen of feedback? @ferrydendopper

Page 3: CMD Interaction Design - Y2 Q2 les 5 - Responsive Design

Interaction Design 201 Vragen of feedback? @ferrydendopper

Page 4: CMD Interaction Design - Y2 Q2 les 5 - Responsive Design

Interaction Design 201 Vragen of feedback? @ferrydendopper

Het probleem

Moet je allemaal losse sites maken voor desktop, tablets, touch phones en smartphones?

(kost veel werk en dus geld)

Page 5: CMD Interaction Design - Y2 Q2 les 5 - Responsive Design

Interaction Design 201 Vragen of feedback? @ferrydendopper

Responsive Design

Page 6: CMD Interaction Design - Y2 Q2 les 5 - Responsive Design

Interaction Design 201 Vragen of feedback? @ferrydendopper

Responsive <> Fluid / Liquid

Page 7: CMD Interaction Design - Y2 Q2 les 5 - Responsive Design

Interaction Design 201 Vragen of feedback? @ferrydendopper

Niet alleen schalen, maar ook her-indelen

Page 8: CMD Interaction Design - Y2 Q2 les 5 - Responsive Design

Interaction Design 201 Vragen of feedback? @ferrydendopper

Page 9: CMD Interaction Design - Y2 Q2 les 5 - Responsive Design

Interaction Design 201 Vragen of feedback? @ferrydendopper

Page 10: CMD Interaction Design - Y2 Q2 les 5 - Responsive Design

Interaction Design 201 Vragen of feedback? @ferrydendopper

Page 11: CMD Interaction Design - Y2 Q2 les 5 - Responsive Design

Interaction Design 201 Vragen of feedback? @ferrydendopper

Page 12: CMD Interaction Design - Y2 Q2 les 5 - Responsive Design

Interaction Design 201 Vragen of feedback? @ferrydendopper

Wat kan er gebeuren bij down-scaling?

Content verschuift, bv. onder elkaar. Content verkleint, bv. afbeeldingen. Content wordt verborgen, bv. door

alinea’s in te vouwen en de kop klikbaar te maken.

Content verdwijnt (responsive text). Velen zijn hierop tegen.

Content kan een andere prioriteit krijgen.

http://blog.braintraffic.com/2012/01/content-strategy-and-responsive-design/

http://blog.braintraffic.com/2012/01/content-strategy-and-responsive-design/
http://blog.braintraffic.com/2012/01/content-strategy-and-responsive-design/
Page 13: CMD Interaction Design - Y2 Q2 les 5 - Responsive Design

Interaction Design 201 Vragen of feedback? @ferrydendopper

Down-scaling?

“Responsive web design is not a down-scaling. it’s an optimization for the different viewports of today… if it’s done right!”

Markus (onbekend)

Page 14: CMD Interaction Design - Y2 Q2 les 5 - Responsive Design

Interaction Design 201 Vragen of feedback? @ferrydendopper

Content verwijderen?

“Truncation is not a content strategy. Don’t just chop content off to make it fit onto small screens”

Karen McGrane

Truncation: ‘snoeien’, ‘afhakken’ of zelfs ‘mutileren’

Page 15: CMD Interaction Design - Y2 Q2 les 5 - Responsive Design

Interaction Design 201 Vragen of feedback? @ferrydendopper

Data weglaten in complexe datatabellen?

Wel netjes om gebruikers dan het laatste woord te geven

Page 16: CMD Interaction Design - Y2 Q2 les 5 - Responsive Design

Interaction Design 201 Vragen of feedback? @ferrydendopper

Begin bij de content

“You need to know what matters most. Thanks to progressive enhancement (and let’s face it, responsive design done right is a perfect example of progressive enhancement) we can serve up the content that people want and display it to the best ability of any particular device. That’s the key difference: start with the content, not the device.”

Luke Wroblewski

Page 17: CMD Interaction Design - Y2 Q2 les 5 - Responsive Design

Interaction Design 201 Vragen of feedback? @ferrydendopper

Wireframe voor responsive design

“We need to think and therefore wireframe them polymorphically [and] have to ensure that everything can morph gracefully to higher and lower resolutions. Changing layout as necessary, making use of wider resolutions more effectively and possibly omitting some of the content altogether at lower resolutions.”

Leigh Howells, Headscape

http://boagworld.com/design/wireframing-for-responsive-design
http://boagworld.com/design/wireframing-for-responsive-design
Page 18: CMD Interaction Design - Y2 Q2 les 5 - Responsive Design

Interaction Design 201 Vragen of feedback? @ferrydendopper

Page 19: CMD Interaction Design - Y2 Q2 les 5 - Responsive Design

Interaction Design 201 Vragen of feedback? @ferrydendopper

Content-choreografie

“We ontwerpen content die beweegt, van vorm verandert en transformeert in zijn verschillende stadia, of het nu gaat om desktops, mobiele telefoons of iets geheel anders”.

Nicklas Persson

http://www.webstandardistas.com/2011/07/content-choreography-in-the-age-of-responsive-design.php
http://www.webstandardistas.com/2011/07/content-choreography-in-the-age-of-responsive-design.php
Page 20: CMD Interaction Design - Y2 Q2 les 5 - Responsive Design

Interaction Design 201 Vragen of feedback? @ferrydendopper

En de navigatie dan?

http://bradfrostweb.com/blog/web/responsive-nav-patterns/

http://bradfrostweb.com/blog/web/responsive-nav-patterns/
Page 21: CMD Interaction Design - Y2 Q2 les 5 - Responsive Design

Interaction Design 201 Vragen of feedback? @ferrydendopper

Let op!

Zo lijken alle pagina’s het zelfde.

Page 22: CMD Interaction Design - Y2 Q2 les 5 - Responsive Design

Interaction Design 201 Vragen of feedback? @ferrydendopper

Aan/uit zetten

Page 23: CMD Interaction Design - Y2 Q2 les 5 - Responsive Design

Interaction Design 201 Vragen of feedback? @ferrydendopper

Aan/uit zetten

Page 24: CMD Interaction Design - Y2 Q2 les 5 - Responsive Design

Interaction Design 201 Vragen of feedback? @ferrydendopper

Pull Down for Navigation

http://inspectelement.com/tutorials/pull-down-for-navigation-a-responsive-solution/

http://inspectelement.com/tutorials/pull-down-for-navigation-a-responsive-solution/
Page 25: CMD Interaction Design - Y2 Q2 les 5 - Responsive Design

Interaction Design 201 Vragen of feedback? @ferrydendopper

Oefening: het Juridisch Loket

Page 26: CMD Interaction Design - Y2 Q2 les 5 - Responsive Design

Interaction Design 201 Vragen of feedback? @ferrydendopper

Oefening: het Juridisch Loket

Page 27: CMD Interaction Design - Y2 Q2 les 5 - Responsive Design

Interaction Design 201 Vragen of feedback? @ferrydendopper

Oefening: het Juridisch Loket

Page 28: CMD Interaction Design - Y2 Q2 les 5 - Responsive Design

Interaction Design 201 Vragen of feedback? @ferrydendopper

Oefening: het Juridisch Loket

Maak een responsive design voor de• Homepage• Vraag• Contact

Page 29: CMD Interaction Design - Y2 Q2 les 5 - Responsive Design

Interaction Design 201 Vragen of feedback? @ferrydendopper

Lezen

http://blog.braintraffic.com/2012/01/content-strategy-and-responsive-design/

http://boagworld.com/design/wireframing-for-responsive-design/

http://bradfrostweb.com/blog/web/responsive-nav-patterns/

http://blog.braintraffic.com/2012/01/content-strategy-and-responsive-design/
http://blog.braintraffic.com/2012/01/content-strategy-and-responsive-design/
http://blog.braintraffic.com/2012/01/content-strategy-and-responsive-design/
http://boagworld.com/design/wireframing-for-responsive-design/
http://boagworld.com/design/wireframing-for-responsive-design/
http://boagworld.com/design/wireframing-for-responsive-design/
http://bradfrostweb.com/blog/web/responsive-nav-patterns/
http://bradfrostweb.com/blog/web/responsive-nav-patterns/
http://bradfrostweb.com/blog/web/responsive-nav-patterns/
Page 30: CMD Interaction Design - Y2 Q2 les 5 - Responsive Design

Interaction Design 201 Vragen of feedback? @ferrydendopper

Vragen? Feedback?

[email protected]

@ferrydendopper


Cure CMD 2010 CMD Family Conference

CMD Interaction Design - Y1 Q1 les 4 - Conducting a Usability Test

Interaction Design CMD jaar 2 introductie

2010 CMD Family Conference Live CMD Learn CMD Connect CMD

CMD Interaction Design - Y2 Q2 les 6 - Mobile Usability Testing

CAPITULO 3 - ENERGIA ESPECIFICA V2 y2 y2 , 'y2

CMD Interaction Design - Y2 Q2 les 4 - Mobile IA

CMD Interaction Design - Y1 introduction

CMD Interaction Design - Y2 Q1 les 3 - Documenting Rich Interaction

CMD Interaction Design - Y1 Q2 les 1 - Information Architecture

CMD Interaction Design - Y1 Q3 les 3 - Form Organization

Cmd or not to cmd?

CMD Interaction Design - Y2 Q1 les 2 - Rich Interaction

ANB = CMD __________________ AMD = 180 º – CMD CNB = ____________

CMD Interaction Design - Y1 Q1 les 3 - Preparing a Usability Test

D2-0-2e-Y2-Hardware Platforms and MPSoC Design · 214373 ArtistDesign NoE JPRA Year 2 (Jan-Dec 2009) Cluster: Hardware Platform and MPSoC Design D2-(0.2e)-Y2 2/40 Versions number

Hoorcollege Service Design and Experience Design, CMD Rotterdam

"Our destinations" Plymouth College Art – Graphic design Y2 – 2013/2014

DJ CONTROLLERS CMD LC-1/CMD MM-1/CMD PL-1/CMD DV … · 2020. 2. 24. · DJ CONTROLLERS CMD LC-1/CMD MM-1/CMD PL-1/CMD DV-1/CMD DC-1 Quick Start Guide. 3. Las terminales marcadas

2014 2015 Y2 S1 Design 3 Phase 3 All in one lecture.pdf

CMD Interaction Design - Y1 Q1 les 1 - UCD Personas Scenarios

CMD Interaction Design - Y1 Q2 les 3 - Navigation labeling

CMD Interaction Design - Y1 Q3 les 4 - Hints, Help & Errors

DJ CONTROLLERS CMD LC-1/CMD MM-1/CMD PL-1/CMD DV … · DJ CONTROLLERS CMD LC-1/CMD MM-1/CMD PL-1/CMD DV-1/CMD DC-1 Quick Start Guide. 5. Les points repérés par ce symbole portent

Vivado Design Suite - Xilinx · 2021. 8. 2. · NVMe TC Software Driver Arm / Ublaze Processor EP QDMA facing logic Config Block. Integration. Cmd tech Cmd Validation Arbiter Cmd

Safety Awareness Bulletin: Upgrading from CMD-2M, CMD-3M ......Jul 21, 2017  · Upgrading from CMD-2M, CMD-3M and CMD-4M CO Detectors to NEW CMD5-MD 12/24 vdc CO Alarms CMD-2M/3M

ES MC61 - Comercial de Motores y Automatismos · CMD SET SEL 1s CMD SET SEL 8s CMD SET SEL CMD SET SEL 5s CMD SET SEL CMD SET SEL CMD SET SEL ES ES 1 • Pulse las teclas SEL y SET

CMD Interaction Design - Y1 Q3 les 1 - Why Form Design Matters

TECHNICAL DATA TYPE CMD OIL-IMMERSED ON … oil type OLTC/CMD/CMD OLTC Technic… · TYPE CMD OIL-IMMERSED ON-LOAD TAP CHANGER ... TYPE CMD OIL-IMMERSED ON-L O A 2 ... Type CMD on-load

CMD Interaction Design - Y1 Q1 les 2 - Research to Design

C2..Q.. C3..Q.. Y1 Y2€¦ · cq(k)..a(-..) cq(k)..a(-..) • 03.2016 1 / 2 13-00011. c2..q.. 100% 0% y1 y2 100% 0% y1 y2 y1 y2 y1 y2 c3..q.. m 100% 0% m y1 y2 100% 0% m y1 y2 100%

Guided Tour Through Web Design History - CMD Moodle

Vivado Design Suite - Xilinx · 2021. 2. 5. · Cmd tech Cmd Validation Arbiter Cmd Pool PRP Fetch QDMA Data Filter WQE Manager PCIe AXI Str Mst AXI MM AXI4 Stream AXI4 MM AXI Str

CMD-Screening mit dem CMD-Kurzbefund · Quintessenz 2015;66(12):1399–1409 1401 ZAHNHEILKUNDE ALLGEMEIN CMD-Screening mit dem CMD-Kurzbefund CMD-negativ CMD-positiv tests muss jedoch

Compagnie Industrielle et Financière de Bussy - CMD Gears · 2020. 7. 21. · CMD • Design of mechanical drive trains • Custom gearbox design • Development of custom mechanical