CMD Interaction Design - Y2 Q2 les 5 - Responsive Design

Interaction Design 201 Vragen of feedback? @ferrydendopper

Responsive Design

Het probleem

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

(kost veel werk en dus geld)

Responsive Design

Responsive <> Fluid / Liquid

Niet alleen schalen, maar ook her-indelen

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/

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)

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’

Data weglaten in complexe datatabellen?

Wel netjes om gebruikers dan het laatste woord te geven

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

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

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

En de navigatie dan?

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

Let op!

Zo lijken alle pagina’s het zelfde.

Aan/uit zetten

Pull Down for Navigation

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

Oefening: het Juridisch Loket

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

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/

Vragen? Feedback?

f.den.dopper@hr.nl

@ferrydendopper

CMD Interaction Design - Y2 Q2 les 5 - Responsive Design

Design

Transcript of CMD Interaction Design - Y2 Q2 les 5 - Responsive Design

TOPIC AFTERNOON · 2019. 10. 21. · Ellie-Mai/Y2—Brilliant RE. Noah/Y2—Brilliant RE. Axel/Y2—Brilliant RE. Joyce/Y2—Brilliant RE. Kezia/Y4—Inventive Science. This Friday

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

Y2 Residences

2010 CMD Family Conference Live CMD Learn CMD Connect CMD.

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

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

Hoorcollege Service Design and Experience Design, CMD Rotterdam

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

Interaction Design CMD jaar 1 introductie

Y2 eProjects

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

CEIA CMD - CDigital | Security | Softwarecdigital.com.pk/wp-content/uploads/download_data/CEIACMDbrochur… · CEIA CMD ® NSN: 6665-15 ... The one-piece foldable design allows the

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

CMD Interaction Design - Y1 Q1 les 4 - Conducting 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

CMD Interaction Design - Y2 Q2 les 4 - Mobile IA

CMD Interaction Design - Y1 Q2 les 1 - Information Architecture

DJ CONTROLLERS CMD LC-1/CMD MM-1/CMD PL-1/CMD DV-1/CMD …€¦ · La unidad requiere mantenimiento siempre que haya sufrido algún daño, ... DJ CONTROLLERS CMD LC-1/CMD MM-1/CMD